Unable to set property '_DT_CellIndex' of undefined or null reference

D.B.talavar

I am getting the error "Unable to set property '_DT_CellIndex' of undefined or null reference" while collapsing the nested datatable,
i checked that the columns in the header and the tbody are equal.

please help

allan

Happy to take a look at a test page showing the issue and help debug it if you post a link to the page or a JSFiddle of it.

Allan

D.B.talavar

you can take a look at this link: http://jsfiddle.net/6j6oogsa/6/
I have added the below css change to remove Search and pagination for internal DataTables

.dataTables_filter, .dataTables_info, .dataTables_paginate, .dataTables_length {
display: none;
}

Now, this is how you can reproduce the issue:
1. Expand Data1a row
2. Expand Data2a row
3. now expand 'aaa' under Data1a
4. now expand 'aaa' under Data2a
5. Go back to collapse 'aaa' under Data1a - Duplicate Datatable gets added

I am attaching my aspx file and the js file. I am loading the data from the database through ajax calls.. Also attaching the Error and UI screenshot.

D.B.talavar

I know there is so much to work is there for you by going through this, please help us with this.

Jchap

Ran into same issue here.. tremendously appreciate your help, Allan!

allan

I think its related to the fact that the HTML is actually invalid since there are multiple elements with the same id. For example when you complete steps 1 and 2, there are two tables on the page which have the same id: tableSecondLevel. That isn't valid and its going to mess up any selectors.

I haven't had a chance yet to go through all of the code and try to make it work, but that is where I would suggest you start. Either drop the ids entirely or use a unique id for each one.

Allan

D.B.talavar

I noticed now, the columns in the <tbody> of parent Table are created with a colspan (in my case it is 18), i have not mentioned the colspan anywhere in the table, This might be the issue.

i see some 'rowspan' and 'colspan' in jquery.dataTables.min.js. Could not figure out where this is being added to my datatable.

please take a look at SLAJs.txt file(here i have created the table with id and nested table).
The reference jquery files i used for this is - jquery-2.2.4.min.js and jquery.dataTables.min.js

tangerine

Either drop the ids entirely or use a unique id for each one.

Did you deal with that?

Jchap

Hey guys, I was working with D.B on this.

Allan, that was indeed the problem: tableSecondLevel ID being used for multiple tables. We made the ID unique to each table and this solved the problem. Thank you so much for your help on this!!

D.B.talavar

Thank you so much Allan!! .