Uncaught TypeError: Cannot read property 'nodeName' of undefined

whuang

Hi,

I am using Editor Inline Editing with the multi-select outside the editor to filter the rows.

The Inline Editing works fine without triggering the multi-select onChange event as I can click into each cell to perform the inline editing.

The line editing gave me the attached error when I triggered the onChange event of multi-select to perform the filtering.

The code for the multiselect is below:

var editor;
var oTable;

$('#pmandtechnicians').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
onChange: function () {
selected1 = $('#pmandtechnicians').val();
console.log(selected1);
$('#selectedPMandTechnicians').val(selected1);
InitTable(editor, oTable);
}
});

The InitTable(editor, oTable) code is here:

function InitTable(editor, oTable) {
var projectTaskActions = urlactions.init('@Url.RouteUrl(new { area = "", controller = "Project" })/{action}/{id}');

            var taskStatus = [{ "label": "Not Applicable", "value": "0" },
                        { "label": "Not Required", "value": "1"},
                        { "label": "Started", "value": "2"},
                    { "label": "Complete", "value": "3"},
                    { "label": "High Priority", "value": "4"}];

            var closedStatus = [{ "label": "Not Applicable", "value": "0" },
                    { "label": "Complete", "value": "3"},
                    { "label": "High Priority", "value": "4"}];

            oTable = $('#projecttasks').DataTable({
                "dom": "Bfrtip",
                "destroy": true,
                "lengthMenu": [[10, 20, 25, 50, -1], [10, 20, 25, 50, "All"]],
                "fixedHeader": {
                    headerOffset: 50
                },
                "search": {
                    "caseInsensitive": true
                },
                "fnRowCallback": function (nRow, aData) {
                    var isClosed = aData.Task17; // ID is returned by the server as part of the data
                    var $nRow = $(nRow); // cache the row wrapped up in jQuery
                    if (isClosed == 3) {
                        $nRow.css({ "background-color": "LightBlue" })
                    }
                    return nRow
                },
                "stateSave": true,
                "iDisplayLength": -1,
                "order": [[ 1, "asc" ]],
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "@Url.HttpRouteUrl("ActionApi", new { controller = "ProjectTask", action = "GetProjectTasks", area = "" })",
                    "data": { pmandtechnicians: $('#pmandtechnicians').val(), roles: $('#roles').val() },
                    "type": "POST"
                },
                "select": {
                    style:    'os',
                    selector: 'td:first-child'
                },
                "columns": [
                    { 
                        "data": "ProjectSource",
                        "render":
                            function (data, type, row) {
                                    return projectTaskActions.renderUrls([
                                    { id: row.ProjectId, action: 'Edit', glyph: 'edit', title: "Edit project", class: "edit-project showDialog" },
                                    { id: row.ProjectId, action: 'Detail', glyph: 'search', title: "View Details", class: "view-details showDialog" }
                                      ]);                           
                                    ]);
                                }
                            },
                        "sortable": false,
                        "class": "grid-actions"
                    },
                    { "data": "ProjectNumber" },
                    { "data": "ProjectName" },
                    {
                        "data": "Task1",
                        "editField": "Task1",
                        "render": function (data, type, row) {
                            if (type === 'display') {
                                return getIconByData(data);
                            }
                            return data;
                        }
                    },
                    {
                        "data": "Task2",
                        "editField": "Task2",
                        "render": function (data, type, row) {
                            if (type === 'display') {
                                return getIconByData(data);
                            }
                            return data;
                        }
                    },
                    {
                        "data": "Task3",
                        "editField": "Task3",
                        "render": function (data, type, row) {
                            if (type === 'display') {
                                return getIconByData(data);
                            }
                            return data;
                        }
                    },
                    { "data": "Notes",  "editField": "Notes", className: "color-red"  }
                ]
            });

            editor = new $.fn.dataTable.Editor( {
                "ajax": {
                    "url": "@Url.HttpRouteUrl("ActionApi", new { controller = "ProjectTask", action = "GetProjectTasks", area = "" })",
                    "type": "POST"
                },                  
                table: "#projecttasks",
                idSrc:  "Id",
                fields: [ {
                    label: "Task1",
                    name: "Task1",
                    type: "select",
                    ipOpts: taskStatus
                }, {
                    label: "Task2",
                    name: "Task2",
                    type: "select",
                    ipOpts: taskStatus
                }, {
                    label: "Task3",
                    name: "Task3",
                    type: "select",
                    ipOpts: taskStatus
                }, {
                    label: "Notes",
                    name: "Notes"
                }
                ]
            } );

            $('#projecttasks').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( oTable.cell(this).index(), {
                    onBlur: 'submit'
                } );
            } );
        }

Please help to identify what is the issue here.

Thanks,

allan

Could you give me a link to a page showing the issue please? That error suggests that DataTables doesn't know about the cell that the editing has been activated on and I'd need to debug it to understand why that is the case.

Allan