Cannot read property 'style' of undefined - when select() is called on a newly created row

Cannot read property 'style' of undefined - when select() is called on a newly created row

shankarastashankarasta Posts: 14Questions: 6Answers: 0
edited September 2018 in Free community support

Hi,

I get "Cannot read property 'style' of undefined" when I run the following code

Cannot read property 'style' of undefined
                        $("#example").DataTable (
            {
                dom: 'rt',
                data : data,
                 select : {
                       style : 'single'
                } );

                var rowNode = $( "#example").DataTable().row.add([1,2,,3,4]).draw(false);
                var rowAdded = $( "#example" ).DataTable().rows()[0].length - 1; 
                $( "#example").DataTable().row(':eq('+rowAdded+')').select();

I also tried

 $( "#example").DataTable().row.add([1,2,,3,4]).draw(false).row().select()

and I get the same error.

It fails in the following function in dataTables.select.js on first line

         if ( force || ctx._select.style === 'single' )  
_select is undefined.

function clear( ctx, force )
{
    if ( force || ctx._select.style === 'single' ) {
        var api = new DataTable.Api( ctx );
        
        api.rows( { selected: true } ).deselect();
        api.columns( { selected: true } ).deselect();
        api.cells( { selected: true } ).deselect();
    }
}

Any idea what I could be doing incorrectly?

Thank you,

Replies

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @shankarasta ,

    There's some odd things going on there with the selectors. The easiest way to do it would be to do something like this here.

    The line,

    table.row(table.rows().count()-1).select();
    

    just selects the last row added.

    Cheers,

    Colin

  • shankarastashankarasta Posts: 14Questions: 6Answers: 0

    Thank you very much Colin.
    My issue is indeed flummoxing.
    I changed my code to point to all the libraries that you are using.
    I still keep getting the same issue.

    I will have to debug this to see what I might be doing wrong.

    But you code has helped immensely.

    Once I figure it out, I will post what caused it.

    Thanks again,
    Shankar

  • shankarastashankarasta Posts: 14Questions: 6Answers: 0
    edited May 2019

    So I figured out why I was getting this error.
    My table gets created inside a bootstrap modal.
    I was creating the table before showing the modal.
    i.e.


    var coldata1 = {}; table = $('#example1').DataTable({ data : coldata1, dom : 'rt', "pageLength": 12, select : { style : 'single' }, columns : [ {data : "name"}, {data : "position"}, {data : "office"}, {data : "age"} ] }); $("#myModal").modal().show();

    When I changed this to show() the modal first and then instantiate the table, it all worked, life is good.

  • joshstrikejoshstrike Posts: 6Questions: 0Answers: 0

    For anyone else who comes across this, the problem has to do DataTable.select not initializing if you're creating your table off the DOM. A workaround is to initialize it manually, which will get rid of this error.

    var tableApi = $('#example').DataTable({
                select: { style:"single" }
            });
    tableApi.select().init();
    

    ...and voila, selections work.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @joshstrike ,

    You shouldn't need to do that, see example here - so probably something else interfering with the table.

    Cheers,

    Colin

  • joshstrikejoshstrike Posts: 6Questions: 0Answers: 0

    Hi @colin, I only seemed to have the problem when I was calling DataTable within an element that was not yet appended to the DOM (in my case, a modal). I found I needed to run select().init() after it was added. I've refactored my code to wait for it to be on the display tree before initializing, but I wanted to note it here in case I run into it again. Thanks!

  • luis_sandovalluis_sandoval Posts: 1Questions: 0Answers: 0

    @colin Thank you so much for your comment. I was looking for the an answer for so long and I finally got it working.

This discussion has been closed.