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

shankarasta

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,

colin

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

shankarasta

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

shankarasta

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.

joshstrike

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.

colin

Hi @joshstrike ,

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

Cheers,

Colin

joshstrike

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_sandoval

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