'Selected row not highlighted in jqgrid

I have written the function for row selection.It is not highlighting the selected row(sometimes highlighting sometimes other row highlighted) and not displaying the icons the way I have written it. following is the code multiselect : true, iconSet: "fontAwesome", datatype : "json", loadonce : true, rowNum : 10, rowList : [ 10, 20, 30 ], toppager:true, pager : '#prowed1', sortname : 'id', viewrecords : true, sortorder : "asc", editurl : "editGrid.html", onSelectRow : function(rowId) { var rowId = jQuery("#list1").jqGrid('getGridParam', 'selarrrow'); if (rowId.length > 1) { $("#list1_iledit").addClass('ui-state-disabled'); } },

$("#list1").jqGrid(
            "navGrid",
            "#prowed1",
            {
                cloneToTop:true,
                formatter : "checkboxFontAwesome4",
                 addicon:"fa fa-plus ",
                add : true,
                delicon:"fa fa-trash",
                del : true,
                searchicon:"fa fa-search",
                search : true,
                refreshicon:"fa fa-refresh",
                refresh : true,
                editicon:"fa fa-edit ",
                edit : true,
                saveicon : 'fa fa-floppy-o',
                save : true,

            },`{ // edit options
                afterSubmit : function() {
                    location.reload(true);
                },
                beforeShowForm : function(form) {
                    $("td .navButton navButton-ltr").hide();
                },
                closeAfterEdit : true
            },
            { // add options
                beforeShowForm : function(form) {
                    $("#buName").removeAttr("readonly");
                },
                closeAfterAdd : true,
                clearAfterAdd : true
            },
            { // del options
                serializeDelData : function(postdata) {
                    return {
                        'buName' : $('#list1').jqGrid('getCell',
                                postdata.id, 'buName'),
                        'oper' : 'del'
                    }
                }
            }

    );` $("#list1").jqGrid('inlineNav', "#prowed1", {
        //cloneToTop:true,
        //iconSet: "fontAwesome",
        add : false,
        edit : true,
        editicon : 'fa fa-pencil-square-o',
        save : true,
        saveicon : 'fa fa-floppy-o',
        editParams : {
            aftersavefunc : function(id) {
                jQuery('#list1').jqGrid('setSelection', id, false);
            },
        },
    });`
htmljqgrid


Solution 1:[1]

You should provide the demo, which reproduce the problem. The reason of the most problems with highlighted: wrong input data or wrong colModel. Every row of jqGrid have always id attribute (rowid), which should be part of input data: see here. The id value must be unique. If you have id duplicates then you could problems with selection/highlighting of rows.

If you fill the data from the database than you can use native ids from the tables of the database to build unique rowids. Database tables don't allow id duplicates too.

To be able to edit the data in the database you will need to identify the edited data. Such unique value could be used as the rowid. If you fill the grid by JOIN from multiple tables, than composed id could be used. For example, if you fill the the grid with the data from two tables User and Location then the paar (user_id, location_id) are unique. If both user_id and location_id are numbers, then you can use user_id + "_" + location_id as rowid. The value will be sent to the server during editing and you will have full information to find the data in the tables, which need be modified.

Solution 2:[2]

I think that you have problems with unique id in the data. Check that the ids used when you insert data in the grid are unique and you do not have duplicate one.

Kind Regards

Solution 3:[3]

In your ColModel make sure the property key:true is only specified once and represents a unique row ID value. See http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

Solution 4:[4]

Dumb on my part, but I had the property beforeSelectRow set in the grid code that I had copied from another project. This of course was blocking any selection of a grid row.

    beforeSelectRow: function (rowid, e) {
        return false;
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oleg
Solution 2 Tony Tomov
Solution 3 Morey
Solution 4 josgall

Related Questions