Jqgrid selection issue with duplicates columns

Question

I m facing a issue in Jqgrid with row selection. I have duplicated rows in the grid. whenever i select the duplicate or it select the first record of that duplicate row.

Answer 1

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

, (the body of the table - has no column headers), (row of the table) and (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 of the table) for any grid. The HTML fragment below could represent your grid for example 16 A11 Add 1 Chart Edit 1 Chart Delete 1 Chart View 15 Manage Edit 16 A11 View 15 Manage Delete 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

16	A11	Add
1	Chart	Edit
1	Chart	Delete
1	Chart	View
15	Manage	Edit
16	A11	View
15	Manage	Delete

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

    

        
16
A11
Add
        
1
Chart
Edit
        
1
Chart
Delete
        
1
Chart
View
        
15
Manage
Edit
        
16
A11
View
        
15
Manage
Delete
    

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.