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

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: 61,439Questions: 1Answers: 10,053 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: 61,439Questions: 1Answers: 10,053 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,112Questions: 1Answers: 2,583

    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,112Questions: 1Answers: 2,583

    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,112Questions: 1Answers: 2,583

    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: 61,439Questions: 1Answers: 10,053 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: 61,439Questions: 1Answers: 10,053 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: 61,439Questions: 1Answers: 10,053 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: 61,439Questions: 1Answers: 10,053 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: 61,439Questions: 1Answers: 10,053 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

Sign In or Register to comment.