Ordering of fields in editor new/edit popup

Ordering of fields in editor new/edit popup

matthewjmatthewj Posts: 39Questions: 2Answers: 0
edited June 2013 in Editor
I wanted to display fields in a particular order in editor's new / edit popup. I was going through the doc and found a method called order ... http://editor.datatables.net/docs/current/Editor.html#order. I feel that the information about this method in the doc is very limited. How to insert a field created by editor add [http://editor.datatables.net/docs/current/Editor.html#add] method and put it in a specific place. For eg I have below fields in my new form

[code]
$(document).ready(function() {
var editor = new $.fn.Editor( {
"ajaxUrl": "php/index.php",
"domTable": "#example",
"fields": [ {
"label": "Browser:",
"name": "browser"
}, {
"label": "Rendering engine:",
"name": "engine"
}, {
"label": "Platform:",
"name": "platform"
}, {
"label": "Version:",
"name": "version"
}, {
"label": "CSS grade:",
"name": "grade"
}
]
} );
[/code]

I wanted to insert a field called email between platform and version using Editor#add. How can I accomplish that?

Replies

  • aaronwaaronw Posts: 89Questions: 3Answers: 4
    For field ordering check out the 'order' API method: http://editor.datatables.net/docs/current/Editor.html#order
  • matthewjmatthewj Posts: 39Questions: 2Answers: 0
    Hi aaronw,

    Actually I went thru this link and have also posted this but my query was how to accomplish that.

    -Matthew
  • matthewjmatthewj Posts: 39Questions: 2Answers: 0
    I am trying to add the field "name" after "platform" but no matter what it always adds after "grade".
    The last console.log prints the latest order but "name" is always displayed in the end ie after "grade". Am I missing something? I haven't seen any working examples of this kind. So I feel I am missing something obvious or trivial.

    [code]

    $(document).ready(function() {
    var editor = new $.fn.Editor( {
    "ajaxUrl": "php/index.php",
    "domTable": "#example",
    "fields": [ {
    "label": "Browser:",
    "name": "browser"
    }, {
    "label": "Rendering engine:",
    "name": "engine"
    }, {
    "label": "Platform:",
    "name": "platform"
    }, {
    "label": "Version:",
    "name": "version"
    }, {
    "label": "CSS grade:",
    "name": "grade"
    }
    ]
    } );

    editor.on('onInitCreate', function () {
    editor.add({
    "label": "Name",
    "name": "name"
    });
    var order = editor.order();
    console.log("1:"+order); // returns ["browser", "engine", "platform", "version", "grade", "name"]
    order.splice(order.indexOf("name"), 1);
    console.log("2:"+order); // returns ["browser", "engine", "platform", "version", "grade"]
    order.splice(order.indexOf("platform") + 1 , 0 , "name");
    console.log("3:"+order); // returns ["browser", "engine", "platform", "name", "version", "grade"]
    editor.order(order);
    console.log(editor.order()); // returns ["browser", "engine", "platform", "name", "version", "grade"]
    });

    });

    [/code]
  • matthewjmatthewj Posts: 39Questions: 2Answers: 0
    The example posted in my previous comment actually works. I am sorry for posting the wrong scenario. I posted it thinking that it won't work because I was consistently trying the below scenario and it didn't work:

    I have a checkbox field called "isproc", When I check it, it should create and display a text field "name" after "isproc" checkbox. But currently it displays after "grade" field.

    [code]
    $(document).ready(function() {
    var editor = new $.fn.Editor( {
    "ajaxUrl": "php/index.php",
    "domTable": "#example",
    "fields": [ {
    "label": "Browser:",
    "name": "browser"
    }, {
    "label": "Rendering engine:",
    "name": "engine"
    }, {
    "label": "Platform:",
    "name": "platform"
    }, {
    "label": "Is proctor:",
    "name": "isproc",
    "type": "checkbox",
    "ipOpts": [
    { "label": "", "value": "1" }
    ]
    }, {
    "label": "Version:",
    "name": "version"
    }, {
    "label": "CSS grade:",
    "name": "grade"
    }
    ]
    } );

    $('input', editor.node('isproc')).on('click', function () {
    editor.add({
    "label": "Name",
    "name": "name"
    });

    var order = editor.order();
    order.splice(order.indexOf("name"), 1);
    order.splice(order.indexOf("isproc") + 1 , 0 , "name");
    editor.order(order);
    });

    });
    [/code]
  • allanallan Posts: 56,187Questions: 1Answers: 8,897 Site admin
    edited June 2013
    Thanks for showing us the code you are having a problem with. The issue is that the `order` function only pre-sets the order. It is the display function (called on initialisation of the create, edit and remove methods) which actually lays out the order. This is an error and will be corrected in the next release of Editor.

    Until then, if you replace the `order` method of Editor will the following, it will work as you expect:

    [code]
    Editor.prototype.order = function ( set /*, ... */ )
    {
    if ( !set ) {
    return this.s.order;
    }

    // Allow new layout to be passed in as arguments
    if ( arguments.length > 1 && ! $.isArray( set ) ) {
    set = Array.prototype.slice.call(arguments);
    }

    // Sanity check - array must exactly match the fields we have available
    if ( this.s.order.slice().sort().join('-') !== set.slice().sort().join('-') ) {
    throw "All fields, and no additional fields, must be provided for ordering.";
    }

    // Copy the new array into the order (so the reference is maintained)
    $.extend( this.s.order, set );

    // If currently on display, we need to reorder immediately
    if ( this.s.displayed ) {
    var that = this;
    $.each( this.s.order, function (key, val) {
    that.dom.formContent.appendChild( that.node(val) );
    } );
    this.dom.formContent.appendChild( this.dom.formClear );
    }
    };
    [/code]

    One thing worth saying is that it would be worth adding a check for `name` existing already in your form, otherwise it will keep adding new `name` fields (and each field name in Editor must be unique).

    Regards,
    Allan
  • matthewjmatthewj Posts: 39Questions: 2Answers: 0
    wow! this is fantastic, Thank you so much for the fix Allan ... I have replaced this in my dataTables.editor.js

    Thank you!
    Matthew
  • allanallan Posts: 56,187Questions: 1Answers: 8,897 Site admin
    No problem at all. Thanks for letting me know about the issue in Editor so I could address it!

    Regards,
    Allan
This discussion has been closed.