Question

I’m trying to read up on the jQuery plugin jqGrid but I’m running short when skimming through the documentation and demos.

What I want to accomplish is to use some parts of my JSON data to display in columns, and other parts to create HTML5 data-attributes on each table row. However, I’m unable to figure out if jqGrid can handle this, and if so, how.

An example of what I want to do:

From the following data (whitespace added for readability)

[
 {
     'id': 1, 
     'type': 0, 
     'name': 'first', 
     'address': '1524, 3rd street', 
     'X': 18.0068922, 
     'Y': 59.31076795
 },
 {
     'id': 7819, 
     'type': 0, 
     'name': 'not first', 
     'address': 'South Corner', 
     'X': 144.18457031, 
     'Y': -22.20774917
 }
]

I want to create the following table:

<table>
    <thead>
        <th>Name</th>
        <th>Address</th>
    </thead>
    <tbody>
        <tr data-id="1" data-type="0" 
            data-x-coord="18.0068922" data-y-coord="59.3107695">
            <td>first</td>
            <td>1524, 3rd street</td>
        </tr>
        <tr data-id="7819" data-type="0"
            data-x-coord="144.18457031" data-y-coord="-22.20774917">
            <td>not first</td>
            <td>South Corner</td>
        </tr>
    </tbody>
</table>

As you can see, the data attributes may or may not be named the same thing as the properties in the row. Also, not shown in this example, some properties will be used both for showing in the table and for data-attributes.

The API that provides the JSON data is used elsewhere, so I can’t change that. The requirements on the data attributes are also defined by another (self-authored) jQuery plugin used elsewhere, so they cannot be changed either.

Is there any way to accomplish this with jqGrid? If so, how? If not, what options do I have?

Answer 1

You can use the afterInsertRow event to get hold of each row inserted into the grid and then modify them as you wish(Add custom attributes using jQuery.attr()).