Search code examples
jquerydatatablesjquery-datatables-editor

Enable/disable cell editing based on a particular column's value for each row


I have a jquery editable datatable and all columns are editable. I want to enable/disable cell editing based on a particular cell value. For example in below table if Operating System value is "Windows" make column "FileExtension" as non-editable and if Operating System value is "Unix" make column "Language" as non-editable .

 --------------------------------------------------
| OperatingSystem  FileExtenstion   Language       |
 --------------------------------------------------
| Windows          non-editable     editable       |
| Unix             editable         non-editable   |
| Windows          non-editable     editable       |
 --------------------------------------------------

Table is getting populated dynamically via Ajax source.

$(document).ready(function () {
        $("#dbResultsTable").dataTable({
            "bServerSide": true,
            "sAjaxSource": "/EditableTables/TableEditAjaxRequest",
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "bJQueryUI": false,
            "scrollX" : true,
             "aoColumns": [
                          {  "sName": "OperatingSystem",
                          },
                           {
                             "sName": "FileExtenstion",
                            },
                             { 
                              "sName": "Language",
                             }
                  ]
     }).makeEditable({
        "aoColumns": [
                          {
                              cssclass: "required"
                          },
                            {
                              cssclass: "required"
                          },
                          {
                              cssclass: "required"
                          }
                      ]
                      }
                      );
    });

Is it possible ?


Solution

  • Ok I found one way to do this , I hope it help someone .

    $("#dbResultsTable tr").live("mousedown", function() {
            if ($(this).find("td:eq(0)").text()=="Windows") {
                $(this).find("td:eq(1)").empty().unbind(); 
            } else if($(this).find("td:eq(0)").text()=="Unix"){
                 $(this).find("td:eq(2)").empty().unbind(); 
                }
        }); 
    

    Note :- but this wont update data on server side if your cell have some data and you have cleared+disabled it using above function. You will have to make an ajax call and update cell data .

    Please let me know if any better way to do this ,I am all ears.