How to know if row is selected in createdRow event.

jstuardo

Hello, I need to know if a row is selected when I refresh the grid.

I have this in "createdRow" event:

createdRow: function (row, data, dataIndex) {
                console.log(row);
                console.log($(row).hasClass('selected'));
}

I can see that the TR has the class "selected" in it, however, the hasClass method returns false. How can I do it?

Thanks
Jaime

kthorngren

The createdRow runs once at initialization. Unless you are using stateSave I don't think you will have any selected rows on initialization. Maybe you need to use rowCallback. What are you trying to do?

Kevin

jstuardo

When I have a row selected, and then call table.ajax.reload(null, false); method, selected row remains selected, and in fact, I verified that in createdRow callback, TR element has the "selected" class, so I think it was possible.

I am trying to do this: I have the first column a checkbox. I need that if the grid has a row selected with the checkbox checked, after the reload, since the selected state is kept, I need to check the corresponding checkbox.

jstuardo

Hello again... I have now this in createdRow callback:

console.log($(row)[0].classList);
console.log($(row)[0].classList.contains('selected'));

First call to console.log shows:

DOMTokenList [value: ""]
0: "odd"
1: "selected"
length: 2
value: "odd selected"
__proto__: DOMTokenList

And the second call just returns false.

If I am seeing by my own eyes that the second element in DOMTokenList is selected, why does the contains method return false?

jstuardo

I have made a test using a DataTable for a static table, not data coming from Ajax as in my case.

In my test case it works, so, the problem is when data come from an ajax source.

I realized that when using console.log, this is displayed for a static table:

DOMTokenList [value: "odd selected"]

However, when data comes from Ajax, this is shown instead:

DOMTokenList [value: ""]

Why could this be possible? When DataTable builds the object when coming from ajax, it seems it is constructing the wrong way.

kthorngren

I think what you are seeing is the browser's console is updating the output of console.log(row); after it has been reselected from the ajax.reload(). You can see this behavior in this example:
http://live.datatables.net/banequve/1/edit

EDIT: Select Ashton Cox to see the output.

I added this code:

        console.log('Raw row:', row);
        console.log('Parsed row:', JSON.parse(JSON.stringify(row.outerHTML)))
        console.log($(row).hasClass('selected'));

The Parsed row is what that row's HTML looks like at the point it is outputted. The browser will update the console.log('Raw row:', row); output. You may see the output of this line delayed or updated after the output of the Parsed row.

I added the select event to show that the actual re-selection of the rows comes after createdRow.

Are you using the Select Checkbox from this example? If so you shouldn't need to check the checkbox of the selected rows as my example shows.

However if you have your own checkbox and don't want to change then I suggest using the select event to update the checkboxes.

Kevin

jstuardo

Hello... thanks for you help... finally I used select event and it helped.

I am using a better looking checkbox so after the reload, it was not checked automatically.

Regards
Jaime