Dependent Select Box Options in jqGrid Editing Form

jqGrid allows you to create dynamic select boxes for editing forms, where the options depend on the selection made in a related select box. This is useful for scenarios like selecting a country and populating the state options accordingly.

Issue: Incorrect Option Values

However, an issue arises when editing a record with a dynamically populated state select box. The option values of the state select box start from 0 instead of the expected value of 5.

Solution: Resetting Editoptions and Manual Rebuild

To resolve this issue, the key is to understand that jqGrid uses editoptions only once at initialization. To populate the state select box correctly based on the selected country, the editoptions must be reset and the select box rebuilt manually.

Here's how the solution is implemented:

1. Reset Editoptions:

   • On page load, set the editoptions for the state select box to a static value.

2. Data Change:

   • When the country select box changes, reset the state select box editoptions to the static value.

3. Rebuild Select Box:

   • Based on the selected country, build new options for the state select box.
   • For inline editing, update the select box for the specific row.
   • For form editing, update the select box in the editing form.

4. Maintain State Values:

   • After changing the country and rebuilding the state select box, ensure that the selected state is correctly reflected by setting the appropriate editoption value.

Code Snippet:

// Reset the editoptions for the state select box
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states}});
};

// Build new options for the state select box based on the selected country
var changeStateSelect = function (countryId, countryElem) {
    var sc = statesOfCountry[countryId];
    var newOptions = 'All'; // If needed
    for (stateId in sc) { newOptions  = ''   states[stateId]   ''; }
    grid.setColProp('State', { editoptions: { value: statesOfCountry[countryId]} });
    if ($(countryElem).is('.FormElement')) {
        // Form editing
        $(countryElem).closest('form.FormGrid').find("select#state.FormElement").html(newOptions);
    } else {
        // Inline editing
        var row = $(countryElem).closest('tr.jqgrow');
        var rowId = row.attr('id');
        $("select#"   rowId   "_State", row[0]).html(newOptions);
    }
};

Conclusion

By resetting the editoptions, rebuilding the state select box manually, and maintaining the selected state value, you can ensure that the edit form in jqGrid displays the correct option values for dependent select boxes.