Cannot read property 'sWidth' of undefined - Bug in jQuery Datatables Triggered by ColVis

robinwilson16

Hello

I was just posting here to raise awareness of a bug I hit regularly when working with jQuery Datatables where it throws the error "Cannot read property 'sWidth' of undefined" which is difficult to debug as the error provided doesn't indicate what the issue actually is.

It was posted on StackOverflow in 2013 and is still present. If columns are defined in the code but the number of columns defined does not match the table header then this always triggers this error so you must go through until you locate the difference.

The issue is that jQuery Datatables attempts to read the width of a column when that column is hidden triggering the error above. If it has a case statement to check the column is visible before attempting to read the size then the issue does not occur.

Further details of the error are here:
https://stackoverflow.com/questions/20673825/error-with-jquery-datatables-and-colvis-plugin-cannot-read-property-swidth-of

Please could some priority be given to fix this annoying issue?

Thanks
Robin

allan

Yup - happy to fix this, but please link to a test case showing the issue. This issue normally comes from having a different number of columns in the HTML from that configured in the Javascript, but we'd need a test case showing the issue to help further since this error doesn't happen in the examples.

Allan

Kanth

Any way to trap this error and say somehing like "Check that your HTML columns match your data columns"?

allan

Yes - we need to improve our error messaging with this error - possibly with sanity checking code when the table is initialised.

Allan

colin

I've raised it internally (DD-1480 for my reference) and we'll report back here when there's an update.

Cheers,

Colin

ghendric

Any updates on this bug? it appears to still be there..

Thanks

colin

No, no updates, I'm afraid.

Colin

sakshimorya90

Hello Any update for this.
Because in local it's working fine, but at time to deployment we still face this issue.

colin

No, it's still in the backlog. If you're seeing it in deployment, it would suggest the data you're getting from the server, or the table initialisation is different to your local environment. The fix we would implement would be more graceful error handling, such as a more useful error message, but the misconfiguration would still exist.

If you can link to your page we can take a look,

Colin

jazzspeed

I have also experienced the same issue.
What I did is I fixed my local js copy with the following:
(I know this probably not the best/correct way to fix, but it works great for me and I never see anymore error):
Line: 5353 (datatable v 1.11.5)

    $.each( _fnGetUniqueThs( settings, headerCopy ), function ( i, el ) {
        idx = _fnVisibleToColumnIndex( settings, i );
        //error when using hidden cols
        if ( idx != null ){
            el.style.width = settings.aoColumns[idx].sWidth;
        }
    } );

Hope this issue can be reviewed and fixed - so the next version update I don't need to keep remembering to change this portion manually.

Thanks,

allan

HI @jazzspeed,

Can you give me a link to your page showing the error please? The error happens when the columns defined don't match the HTML. The "bug" here is that we are not reporting a custom error message I think. Unless your use case is something slightly different. A test case would be really useful.

Thanks,
Allan

jazzspeed

Hi Allan,

Thanks for your time responding to this topic.
I did further investigation, i found out the issue triggered because of these 2 things:
1. I added "row filter" in the table header
2. AND there is at least 1 hidden col.

I'm guessing it could be the way I added "row filter" is not correct. Or something else i missed.
Anyway, please give me sometime and i will provide you the link as requested.

Thank you & Best regards,

allan

That would be super - thank you!

Allan

jazzspeed

Hi Allan,

Please find the link:
http://theme.jazzspeed.com/

Please let me know if you need any other information, happy to provide.

Thank you & Best regards,

allan

Thanks for the link. I see what appears to be a DataTable, but it doesn't actually do anything and there are no errors on the console. Is that expected?

You have a whole lot of empty tr elements in the raw HTML for the table - I'd suggest dropping them since you are letting DataTables add the columns in this case.

Allan

jazzspeed

Hi Allan,

Thanks for looking into it.
Apparently, I just realized one more thing. Firefox seems never triggered any error at all in the console.
As I noticed, the error seems to be in Google Chrome. (I did not check in other browser at this point)

To trigger the error in console, simply by doing the following:
1. Open google chrome not in "maximize window".
2. Open the link as provided.
3. Drag google chrome window to make the viewport width smaller.

When I open the link without adjusting the screen width, there is no error at all triggered in the console.

Thank you & Best regards,

allan

Thank you. It looks like there is something triggering a rewrite to the HTML of the table when the page is resized. Is that intentional?

When resizing the page I see:

That is indicative that the table is being re-initialised as a DataTables multiple times. That will happen if the table is not the original node, but rather a copy.

Allan

jazzspeed

Hi Allan,

From my understanding (correctly If I'm wrong), setting "autoWidth: true" (by default according to api doc) would actually make DataTable keep re-adjusting the cols width when the screen size is changed.

I tested in my local copy by changing the setting to false and the error is no longer triggered.
However, it causes header caption and body content not align when the screen size is changed.

The copy of DataTable I'm using is actually bundled with the theme we purchased. As far as I'm aware, there should not be any different from the origin copy other than css related.
I could be wrong thou, please give me sometimes - i will find time to test further.

Thank you & Best regards,

allan

I think it might be worth asking the theme author what is happening on resize then. It looks to me like they are redrawing the HTML (perhaps in an attempt to relay it out optimally for the new width).

Here is a simple example that shows exactly that effect in action: http://live.datatables.net/pajiresu/1/edit .

Allan

mscarpace

Oddly enough I get the "Cannot read property 'sWidth' " error only when I set this property specifically:

scrollY = $(window).height() - 350;

I made sure it was this property by commenting out other properties to see if the error was triggered and it was only when setting scrollY did it occur.

mscarpace

Sorry, please ignore my previous comment. I tried to delete it but was unable. Here is what I really wanted to comment:

I was getting the 'Cannot read property 'sWidth' error because I had already initialized the datatable. I thought I could use both the clear() and destroy() method and reinitialize the datatable with new columns and columnDefs but this was not the case as I continued to get the error. I was forced to make a second datatable.

kthorngren

@mscarpace

I thought I could use both the clear() and destroy() method and reinitialize the datatable with new columns and columnDefs but this was not the case as I continued to get the error. I was forced to make a second datatable.

Possibly you need to use jQuery empty() after using destroy(). See the second example in the destroy() docs.

Maybe you can post a link to a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mscarpace

@kthorngren Exactly what I needed, ty!