Getting "Unable to get value of the property 'className': object is null or undefined" Nested table

comicrage

HI,

I got a gridview with a nested table which expands with ajax collapsible panel extender. When the grid appears, the user can click on the '+' signed to expand an additional row to view detail. When I apply the datatable, I get the following error:

Unhandled exception at line 142, column 453 in http://localhost:12331/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.min.js

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'className': object is null or undefined


After debugging, I traced the error to the jquery.dataTables.min.js file, line 142

It throws an error on the 'm.className' variable, where 'm' is undefined.
When I looked at the m = d[g * i + c], I checked and there is only 60 cells found in the d array, which is accounted for the parent gridview cells, but that does not include the nested table cells. I verified that c variable is 11 (columns) and b is 8 (rows), therefore, when it is checking m = d[66] for example, it goes beyond the array content (because d does not contain the nested table cells) and throws an error.

How can I get the datatable working with the nested table inside the gridview? Because it throws an error, the datatable does not sort and the pagination, filter, controls etc does not appear or work.

Thanks