custom editorFields is it possible to pass data from than one column via additional methods

pingcrosby

Using a custom editor field is it possible to pass data from another table column into the set method

I am attempting to do pass the value of another column as an additional option to a custom editor. Hopefully the markup below will clarify my issue.

{
    label: "Status:",
    name: "Status",         // this a text description of the status as sent by the server
    type: "MyCustomEditor", // my custom editor that will format the status with an icon and text (no input field)
    
    ?????????           
    customOption: {
        // how do I pass in the status code value from another column into this custom editor
        name:"StatusCode"   // StatusCode comes from server (1,2,3,4) etc only use is to choose icons and colours for the status description
    }
},

More complete sample

 _fieldTypes.RowStatus = {

    var statusValueFromTable; // 0,1,2,3,4 etc
    
    ?????????
    customOption:function(conf, val)
    {
        statusValueFromTable = val;
    }
                              
    create: function (conf) {                   
        conf._input = $("<span></span>");                  
        return conf._input;
    },

    set: function (conf, val) {

        var iconInfoMap = [
            { colour: "grey", icon: "icon-pen" },
            { colour: "green", icon: "icon-check-mark" },
            { colour: "red", icon: "icon-cross" }
        ];
        
        ?????????
        iconInfo = iconInfoMap[statusValueFromTable];

        var html = '<span class="rowcolordatatable ' + iconInfo.colour + '"><i class="' + iconInfo.icon + '"></i><span> ' + val + '</span></span>';
        conf._input.html(html);
    },
};

editor = new $.fn.dataTable.Editor({
    "idSrc": "Id",
    "table": "#aTable",
    "fields":
    [       
        {
            label: "Status:",
            name: "Status",
            type: "RowStatus",
            
            ?????????           
            customOption: {
                // how do I pass in the status code value from another column into  
                // this custom editor
                name:"StatusCode"   // want to pass 1,2,3,4 etc
            }
        },
        {
            // i can see the status code on the form easily but this is not what i want
            label: "StatusCode:",
            name: "StatusCode",
            type: "readonly",       
        },
        {
            label: "City:",
            name: "Address3",
            type: "readonly"
        },
        {
            label: "Country:",
            name: "Address4",
            type: "readonly"
        }
    ]
});

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

    "columns": [
      { "data": "Firstname" },
      { "data": "Lastname" },
      {
          "data": "StatusCode", render: function (data, type, row) {
              if (data == 1) {
                  return '<span class="gray"><i class="icon-pen"></i> <span>' + row.Status + '</span></span>';
              }
              if (data == 2) {
                  return '<span class="green"><i class="icon-check-mark"></i> <span>' + row.Status + '</span></span>';
              }
              if (data == 3) {
                  return '<span class="red"><i class="icon-cross"></i> <span>' + row.Status + '</span></span>';
              }
              // simplified ..
              return data;
          }
      },
    ]
});

$('#aTable tbody').on('click', 'button', function () {  
    editor.edit($(this).closest('tr'), {
        ?????????
        // do i need to pass the statuscode value into the editor here??
        title: 'View Record',   
    });
});

allan

Not, currently that isn't possible I'm afraid. The field is entirely independent of other values (by design).

What you would have to do is have an API method for your field that you can use to tell it the extra information you need and have it up. For example, if you have a look at the Select2 plug-in you'll be able to see the update method which can be used to update the options in that case. Use editor.field( fieldName ).myMethodName( ... ) to execute your custom method.

Allan

pingcrosby

Thanks Allan

For anyone else looking for something similar this is how I achieved it

Just before you fire the editor.edit method, grab data from the table row and call a custom method within $.fn.dataTable.Editor passing in the cell value.

$('#TheTable tbody').on('click', 'button', function () {
    var tr = $(this).closest('tr');
    editor.field("StatusCode").setStatusText(table.row(tr).data().StatusText);

    editor.edit($(this).closest('tr'), {
        title: 'View Record',        
    });
});

In the custom editor - just add an additional method setStatusText taking the cell data and have it push into value into the conf object. The value is then used within the set method.

_fieldTypes.RowStatus = {

    create: function (conf) {
        conf._input = $("<span></span>");

        return conf._input;
    },

    set: function (conf, val) {

        var iconInfoMap = [
            { colour: "gray", icon: "icon-pen" },
            { colour: "green", icon: "icon-check-mark" },
            { colour: "red", icon: "icon-cross" }
        ];
        iconInfo = iconInfoMap[val -1];                 

        var html = '<span class="rowcolordatatable ' + iconInfo.colour + '"><i class="' + iconInfo.icon + '"></i><span> ' + conf._statusText + '</span></span>';
        conf._input.html(html);
    },
                
    setStatusText: function(conf, val)
    {
        conf._statusText = val;
    }
};

})(jQuery, jQuery.fn.dataTable);

For completeness; here is the editor definition using my custom 'type' of "RowStatus"

editor = new $.fn.dataTable.Editor({
    "idSrc": "Id",
    "table": "#TheTable ",
    "fields":
    [
      {
            label: "Firstname:",
            name: "Firstname",
            type: "readonly"
        },
        {
            label: "Lastname:",
            name: "Lastname",
            type: "readonly"
        },
        {
            label: "StatusCode:",
            name: "RegistrationStatusId",
            type: "RowStatus"                                         
        },
      ]
});