Jqgrid selection issue with duplicates columns

It's common problem for many people who start to use jqGrid. Such strange selection behavior exist if you fill the grid with rows having id duplicates. So it's extremely important to understand how the ids from your input will be used by jqGrid.

jqGrid use internally HTML markup to display the grid. It uses <table>, <tbody> (the body of the table - has no column headers), <tr> (row of the table) and <td> (table of the table) for any grid. The HTML fragment below could represent your grid for example

<table>
    <tbody>
        <tr><td>16</td><td>A11</td><td>Add</td></tr>
        <tr><td>1</td><td>Chart</td><td>Edit</td></tr>
        <tr><td>1</td><td>Chart</td><td>Delete</td></tr>
        <tr><td>1</td><td>Chart</td><td>View</td></tr>
        <tr><td>15</td><td>Manage</td><td>Edit</td></tr>
        <tr><td>16</td><td>A11</td><td>View</td></tr>
        <tr><td>15</td><td>Manage</td><td>Delete</td></tr>
    </tbody>
</table>

The design of jqGrid is so that one can have quick access to any row of the grid. To implement the quick access one need assign to every <tr> (table row) an unique id. You will find rowid parameters in the most methods or events used by jqGrid. The id of the row should identify the row in the set of the rows of the table. In the case the grid will be like the following

<table>
    <tbody>
        <tr id="a"><td>16</td><td>A11</td><td>Add</td></tr>
        <tr id="b"><td>1</td><td>Chart</td><td>Edit</td></tr>
        <tr id="c"><td>1</td><td>Chart</td><td>Delete</td></tr>
        <tr id="abc"><td>1</td><td>Chart</td><td>View</td></tr>
        <tr id="1"><td>15</td><td>Manage</td><td>Edit</td></tr>
        <tr id="2"><td>16</td><td>A11</td><td>View</td></tr>
        <tr id="35"><td>15</td><td>Manage</td><td>Delete</td></tr>
    </tbody>
</table>

According to the HTML specification the id of any HTML element must be unique on the page. If you do assign duplicate ids to the rows like here for example

<table>
    <tbody>
        <tr id="16"><td>16</td><td>A11</td><td>Add</td></tr>
        <tr id="1"><td>1</td><td>Chart</td><td>Edit</td></tr>
        <tr id="1"><td>1</td><td>Chart</td><td>Delete</td></tr>
        <tr id="1"><td>1</td><td>Chart</td><td>View</td></tr>
        <tr id="15"><td>15</td><td>Manage</td><td>Edit</td></tr>
        <tr id="16"><td>16</td><td>A11</td><td>View</td></tr>
        <tr id="15"><td>15</td><td>Manage</td><td>Delete</td></tr>
    </tbody>
</table>

the table could be still displayed in the most web browsers, but the working with the grid could be really problematic. For example if you select the last row of such grid the corresponding jqGrid code will find out 15 as the id of the current row and it will use $("#15").addClass("ui-state-highlight") to highlight the current row. Instead of that the code will select (add the class "ui-state-highlight") only to the first row which has the id="15".

So you should be very careful if you fill your JSON data used as the jqGrid input. The following data for example could represent the grid contain:

{
    "total": 1,
    "page": 1,
    "records": 7,
    "rows": [
        { "id": "16", "cell": ["16", "A11", "Add"] },
        { "id": "1", "cell": ["1", "Chart", "Add"] },
        { "id": "1", "cell": ["1", "Chart", "Delete"] },
        { "id": "1", "cell": ["1", "Chart", "View"] },
        { "id": "15", "cell": ["15", "Manage", "Delete"] },
        { "id": "16", "cell": ["16", "A11", "View"] },
        { "id": "15", "cell": ["15", "Manage", "Edit"] }
    ]
}

The JSON data could be fixed to

{
    "total": 1,
    "page": 1,
    "records": 7,
    "rows": [
        { "id": "1", "cell": ["16", "A11", "Add"] },
        { "id": "2", "cell": ["1", "Chart", "Add"] },
        { "id": "3", "cell": ["1", "Chart", "Delete"] },
        { "id": "4", "cell": ["1", "Chart", "View"] },
        { "id": "5", "cell": ["15", "Manage", "Delete"] },
        { "id": "6", "cell": ["16", "A11", "View"] },
        { "id": "7", "cell": ["15", "Manage", "Edit"] }
    ]
}

or to

{
    "total": 1,
    "page": 1,
    "records": 7,
    "rows": [
        { "id": "16_Add", "cell": ["16", "A11", "Add"] },
        { "id": "1_Add", "cell": ["1", "Chart", "Add"] },
        { "id": "1_Delete", "cell": ["1", "Chart", "Delete"] },
        { "id": "1_View", "cell": ["1", "Chart", "View"] },
        { "id": "15_Delete", "cell": ["15", "Manage", "Delete"] },
        { "id": "16_View", "cell": ["16", "A11", "View"] },
        { "id": "15_Edit", "cell": ["15", "Manage", "Edit"] }
    ]
}

for example. Then the world (inclusive the grid) will become OK.

Recommended topics

Hot tags