Handling Row Selection in jqGrid with jQuery

The example below specifies the action to take when a row is selected in a jqGrid:

var lastSel;
jQuery("#gridid").jqGrid({
    ...
    onSelectRow: function(id) { 
        if(id && id !== lastSel) { 
            jQuery('#gridid').restoreRow(lastSel); 
            lastSel = id; 
        } 
        jQuery('#gridid').editRow(id, true); 
    },
    ...
});

Explanation

This script sets up a jqGrid with a custom action for when a row is selected. Here’s a step-by-step explanation:

• var lastSel;: A variable to store the last selected row ID.
• jQuery("#gridid").jqGrid({ ... });: Initializes the jqGrid on the element with ID gridid.
• onSelectRow: function(id) { ... }: Defines a function to execute when a row is selected.
• if(id && id !== lastSel) { ... }: Checks if the row ID is valid and different from the last selected row.
• jQuery('#gridid').restoreRow(lastSel);: Restores the last selected row to its original state.
• lastSel = id;: Updates the last selected row ID.
• jQuery('#gridid').editRow(id, true);: Puts the current row into edit mode.

Benefits of $(document).ready()

Remember to place your jqGrid code inside $(document).ready() to ensure it executes after the DOM is fully loaded:

$(document).ready(function() {
    // jqGrid initialization code here
});