DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

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

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

robinwilson16robinwilson16 Posts: 1Questions: 1Answers: 0
in Free community support

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

Answers

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

  • KanthKanth Posts: 20Questions: 9Answers: 0
    edited May 2020

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

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

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

    Allan

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Cheers,

    Colin

  • ghendricghendric Posts: 13Questions: 5Answers: 0

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

    Thanks

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    No, no updates, I'm afraid.

    Colin

  • sakshimorya90sakshimorya90 Posts: 11Questions: 1Answers: 0

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • jazzspeedjazzspeed Posts: 5Questions: 0Answers: 0

    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,

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

  • jazzspeedjazzspeed Posts: 5Questions: 0Answers: 0

    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,

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    That would be super - thank you!

    Allan

  • jazzspeedjazzspeed Posts: 5Questions: 0Answers: 0

    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,

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

  • jazzspeedjazzspeed Posts: 5Questions: 0Answers: 0

    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,

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

  • jazzspeedjazzspeed Posts: 5Questions: 0Answers: 0

    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,

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    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

  • mscarpacemscarpace Posts: 3Questions: 0Answers: 0

    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.

  • mscarpacemscarpace Posts: 3Questions: 0Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,448Questions: 26Answers: 4,974

    @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

  • mscarpacemscarpace Posts: 3Questions: 0Answers: 0

    @kthorngren Exactly what I needed, ty!

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.