Ordering of fields in editor new/edit popup

matthewj

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?

aaronw

For field ordering check out the 'order' API method: http://editor.datatables.net/docs/current/Editor.html#order

matthewj

Hi aaronw,

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

-Matthew

matthewj

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]

matthewj

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]

allan

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

matthewj

wow! this is fantastic, Thank you so much for the fix Allan ... I have replaced this in my dataTables.editor.js

Thank you!
Matthew

allan

No problem at all. Thanks for letting me know about the issue in Editor so I could address it!

Regards,
Allan