Dynamic Editor based on row "type"

jcbeau

I have a requirement where I need to have a dynamic editor based on the row selected. In other words, if a user selects row 1, then he can edit fields 1,3,4. If he selects row 3 then he can edit fields 1,5,6. Is that possible? I am creating a table that contains drivers and each driver may have a different set of parameters, but the underlying database table is the same for each driver. Is that possible with Editor?

allan

> If he selects row 3 then he can edit fields 1,5,6. Is that possible?

Yes - presumably you know, based on the information in the row, which fields will be editable? You can use the `show` and `hide` methods to make fields visible or hidden - dependant on which fields you want the user to be able to edit. With that method all fields will still be submitted, but only some will be visible to the user.

The other option, which would submit only the visible fields, is to use the `add` and `clear` methods.

The API for Editor, with these methods, is fully documented here: http://editor.datatables.net/api/

Regards,
Allan

jcbeau

I decided to use the add and clear method. But I seemed to have uncovered a few bugs with the clear method. The first issue I found with clear is that it doesn't delete the first field in a form properly because the first field is index = 0 and the code in the clear function has an if (fieldIndex) which prevents deleting any fields that are first.

[code]
else {
// Remove an individual form element
var fieldIndex = this._findFieldIndex( fieldName );
if ( fieldIndex ) {
$(this.s.fields[fieldIndex].el).remove();
this.s.fields.splice( fieldIndex, 1 );
}
}
[/code]

This turns out to be OK for me because I'm not calling clear that way, but you might want to look into that.

The second bug with clear is that you can't create an Editor with two fields and then perform a clear and then create an Editor with one field. You must have the same number of fields or you get a "NOT_FOUND_ERR: DOM Exception 8" inside _display function at this line:

[code]
that.dom.formContent.appendChild( that.node(val) );
[/code]

My code for the creating the conditional Editor is as follows:

[code]
Edit.clear();

if (integrationType === 'ABC') {

Edit.add( {
"label": "Username:",
"name": "username"
} );
}

if (integrationType === 'DEF') {

Edit.add( {
"label": "Username:",
"name": "username"
} );

Edit.add( {
"label": "URL:",
"name": "url"
} );

}
[/code]

Please let me know if you agree with my assessment or if I'm way off the mark. Thanks! --Jeff

allan

Both excellent points - thank you for letting me know about these.

The fixes will be included in the next release of Editor, but in the mean time, you can replace the `clear` API method in your local Editor copy with the following:

[code]
Editor.prototype.clear = function ( fieldName )
{
if ( !fieldName ) {
// Empty the whole form
$('div.'+this.classes.field.wrapper, this.dom.wrapper).remove();
this.s.fields.splice( 0, this.s.fields.length );
this.s.order.splice( 0, this.s.order.length );
}
else if ( $.isArray( fieldName ) ) {
for ( var i=0, iLen=fieldName.length ; i

jcbeau

That worked! Thanks!