KeyTables: User Click On Non-Editable Fields Throws Error

KeyTables: User Click On Non-Editable Fields Throws Error

paulprrnpaulprrn Posts: 2Questions: 2Answers: 0

I have an editor setup so that all of the fields in a row appear in the editor, but only the last one, the User Login Email, is actually user editable.
The user may open an editor dialog box, or edit the email address in-line.

I did this with:

                keys: {
                        columns:[6],    //UserLoginEmail, The only user editable field
                        editor:  editor,
                    },

I'm getting the interaction I want, but if the user double clicks on any of the inline non-editable field, I get this error in the console:

dataTables.keyTable.js:469 Uncaught TypeError: Cannot read property 'cell' of null

Is there any way to mitigate this?

Here are my key bits of code:

        editor = new $.fn.dataTable.Editor( {
                data: sampleDataStaff,
                table: "#example",
                fields: [ {
                        label: "ID",
                        name:  "id",
                        type: "hidden",
                        attr: {placeholder: 'ID'}
                     }, {
                        label: "UserStatus",
                        name:  "UserStatus"
                    }, {
                        label: "Group",
                        name:  "GroupName"
                    }, {
                        label: "User Name",
                        name:  "UserName",
                        attr:   {placeholder: 'No Name'}
                     },{
                        label: "Role Title",
                        name: "RoleTitle"   
                    }, {
                        label: "User Login Email",
                        name:  "UserLoginEmail",                
                    }, {
                        label: "Date",
                        name:  "Date",
                        type: "hidden",
                        //type:  "datetime"
                    }
                ],
            } );



            table = $('#example').DataTable( {
                dom: "Bfrtip",
                "paging": false,
                data: sampleDataStaff,

                columns: [
                    {
                      data: null,
                      defaultContent: '',
                      className: 'select-checkbox',
                       orderable: false
                    },
                    { name: "id",           data: "id",         orderable: false,   className: "columnDisabled",     visible: false},
                    { name: "UserStatus",   data: "UserStatus",     orderable: false,   className: "columnDisabled"},
                    { name: "GroupName",    data: "GroupName",      orderable: true,     className: "columnDisabled"},
                    { name: "UserName", data: "UserName",       orderable: false,   className: "columnDisabled"},
                    { name: "RoleTitle",        data: "RoleTitle",      orderable: false,   className: "columnDisabled"},
                    { name: "UserLoginEmail",   data: "UserLoginEmail", orderable: false},
                    { name: "Date",     data: "Date",           orderable: false,    className: "columnDisabled"     visible: false}
                ],

                "order": [ 7, 'desc' ],  //Order by Date

                columnDefs: [
                    {targets: 2,
                    fieldName: "UserStatus",
                     render: function (data) {
                         if (data == 'active') {
                             return('<div class="primaryDotBlack"></div>');
                         }else {
                             return('<div class="primaryDotGray"></div>');
                         }
                     }
                    }
                ],

                keys: {
                    columns:[6],    //UserLoginEmail, The only user editable field
                    editor:  editor,
                },

    ..... Button Stuff........
    ...... }); //End Of DataTable

Answers

  • colincolin Posts: 5,407Questions: 0Answers: 940

    Hi @paulprrn ,

    I suspect it's something to do with the selector that you're using for the inline edit. In this example here, I'm using:

      $('#example').on('click', 'tbody tr td:last-child', function() {
        editor.inline(this);
      }); 
    

    Would that work for you?

    Cheers,

    Colin

  • allanallan Posts: 49,733Questions: 1Answers: 7,344 Site admin

    Beyond that, could you give us a link to the page you are using so we can check it out please.

    Allan

Sign In or Register to comment.