Setting data attribute on each row of a jqgrid tab

Question

I am using jqGrid and I'm trying to add a data- attribute to each tr. I'm firing the loadComplete event, but I'm unsure of how to modify each row. Any code samples?

Answer 1

You can use rowattr to assign any additional attribute to <tr> elements (see the answer and this one for code examples). For example you can use

rowattr: function (rd) {
    return {"data-mydata": JSON.stringify(rd)};
}

to save full input row data as data-mydata attribute. I recommend you to use rowattr``in combination withgridview: true` option to have the best performance results ()

The demo uses above rowattr cade and you can see that rows of grid have additional data-mydata attribute:

Answer 2

In my cases, I set the first column of grid by an identity. And in all my cases, id of each data row of my grids is the value of that identity column.

jqGrid column:

colModel: [
{
name:'ID',
label:'...',
width:1,
index:'ID'
...

Rendered :

<tr role="row" id="10777" ... > // in retrieved data: ID = 10777

So, if you have similar declarations like me, this could be a useful selector for you and you can simply add your data- attrib to these rows like this:

$('#trId').prop('data-whatever', 'value');

And if you want the above line to be performed automatically to all rows, you should change it slightly and put it into the gridComplete event of your grid:

gridComplete: function() { $("tr[role='row']").prop('data-whatever', 'value'); }