Phiter Fernandes Phiter Fernandes - 2 months ago 31
jQuery Question

Datatables throwing error on window resize

I have a DataTable.

When I set it, I get no errors, the table is properly generated, but then whenever I resize the window, I'm getting this error:


0x800a138f - JavaScript runtime error: Unable to get property 'style'
of undefined or null reference


I don't think I can reproduce the code here, but I can guarantee that the table structure is correct.

This is what I'm using to create the DataTable:

function initDataTable() {
if ($.fn.dataTable.isDataTable($('#grdPrincipal'))) {
$('#grdPrincipal').DataTable().destroy();
initDataTable();
} else {
$("#grdPrincipal")
.DataTable({
scrollY: 210,
scrollX: true,
fixedHeader: true,
fixedColumns: true,
paging: false,
info: false,
searching: false
});
}
}


Since I'm using a UpdatePanel in my asp.net webforms project, I have to run this code whenever I do a postback, because the table is rebuilt every time.

There are no problems with postbacks or anything, as I said, the only problem is when I resize the window.

What could it be?

Answer

Try destroying the datatable before you update your updatePanel, like this:

var prm = Sys.WebForms.PageRequestManager.getInstance();
    function BeginRequestHandler(sender, args) {
        //Runs before updatePanel starts updating
        $('#grdPrincipal').DataTable().destroy();
    }

    function EndRequestHandler(sender, args) {
        initDataTable();
        //Runs after updatePanel has finished updating
    }
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
Comments