How to dynamically define fields on a form using Editor

isaleem83

Hi All,

I apologize in advance as I'm a newbie to web development. I'm kinda stuck with a scenario where I'm trying to find a solution to row editing using an editor. I have a process that already draws a table in advance and I also know the table id etc. What I'm stuck with atm, I would like to initialize the editor with dynamic fields but I don't know how to do it. I know there is an add() api but I'm confused as to how to use it.

I have a function that reads the existing table and fetches the column name using a loop but I wanted to pass the array as a field value so that when the edit button is pressed, all the fields and row values are already populated into the form.

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
var columns = [];

  editor = new $.fn.dataTable.Editor( {
    //  ajax: "/sccm",
     table: "#example",

     "idSrc": "resourceid",
     "serverSide" : false,
     "processing": true,
     "drawCallBack": function ( settings ) {   <-------- This is the function I have defined to extract all the header information

    $('#example thead tr th').each(function() {
        columns.push($(this).html());
});

},
fields: [ {
label: columns,
name: columns
}
]

 } ) ;
 console.log(columns);

var table = $('#example').DataTable( {


     dom: "Bfrtip",
     "serverSide" : false,
     "processing": true,
     "idSrc": "resourceid",
    "drawCallback": function ( settings ) {

    $('#example thead tr th').each(function() {
        columns.push($(this).html());
});

},
fields: [ {
label: "ResourceID:", <---- Hardcoded for testing only
name: "resourceid" <---- Hardcoded for testing only
}],
columns: [

         { data:  "resourceid"},  <---- Hardcoded for testing only
         {data : "caption0" }. <---- Hardcoded for testing only
     ],
     select: true,
     buttons: [
         { extend: "edit",   editor: editor }
     ]
 } );

});

rf1234

You would probably need to use an event handler e.g. "open", "opened", "initCreate" or "initEdit". Then you can dynamically add the fields into Editor. In case you have defined other fields during data table initialization that you don't need any longer you would need to clear those fields first.

I also use dynamic fields myself. Fields might have different options in case of creating or editing. Depending on the settings it is allowed to define additional options for a field with a dynamic name or not ... Just to proof this is working

.on('initEdit', function ( e, node, data, items, type ) {
    this.clear( "ctr_govdept[].id" );
    this.add( {
        label: lang === 'de' ? 'Abteilungsauswahl:' : 'Department selection:',
        name: "ctr_govdept[].id", 
        type: "selectize",
        options: ctrGovdeptOptions,
        opts: {
            create: false,
            maxItems: null,
            openOnFocus: true,
            allowEmptyOption: false,
            placeholder: lang === 'de' ? 'Bitte wählen Sie eine oder mehrere Abteilungen' : 'Please select one or more departments',
        }
    }, "sub.sub_partner_id" );
    this.clear("ctr_label[].id"); 
    var opts = {};
    if ( blockLabelDef ) {
        opts = {
            create: false,
            maxItems: null,
            openOnFocus: true,
            allowEmptyOption: false,
            placeholder: lang === 'de' ? 
                "Bitte " + labelsName + " wählen" : "Please select " + labelsName,  };
    } else {
        opts = {
            create: true,
            createFilter: function(val) {
              return ( isNaN(val) || val.indexOf('.') > -1 || val.indexOf('-') > -1 ) ? val : false;
            },
            maxItems: null,
            openOnFocus: true,
            allowEmptyOption: false,
            placeholder: lang === 'de' ? 
                "Bitte " + labelsName + " wählen oder hinzufügen" : 
                "Please select " + labelsName + " or add further",                  
            render: {
                option_create: function(data, escape) {
                    var add = lang === 'de' ? "Neu: " : "Add ";      
                    return '<div class="create">' + add + '<strong>'
                           + escape(data.input) + '</strong>&hellip;</div>';
                }
              }
            }
    }

    this.add( {
        label: labelsName + ":",
        name:  "ctr_label[].id", 
        type: "selectize", 
        options: ctrLabelOptions,
        opts: opts
    }, "sub.app_due_date" );
//        $('div.DTE_Body div.DTE_Body_Content div.DTE_Field').addClass("two-cols");
})