Dynamic Editor based on row "type"
Dynamic Editor based on row "type"
jcbeau
Posts: 6Questions: 0Answers: 0
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?
This discussion has been closed.
Replies
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
[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
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