Handling Change Events in jqGrid

In this tutorial, we'll explore how to handle the change event in jqGrid to dynamically update another column based on the selected value. This approach is useful when you need to update related data based on user selections.

Example Scenario

Let's say we have a jqGrid table with two columns: Country and State. When the user selects a country, the State column should dynamically update to show the relevant states for the selected country.

Implementation

We'll use the dataEvents option in the colModel configuration to handle the change event.

HTML Structure

First, let's set up our basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handling Change Events in jqGrid</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/js/jquery.jqgrid.min.js"></script>
</head>
<body>
    <table id="grid"></table>
    <div id="pager"></div>
    <script>
        $(document).ready(function() {
            var countrylist = "1:USA;2:Canada;3:UK"; // Example country list
            var statelist = "1:California;2:Texas;3:New York"; // Example state list

            $("#grid").jqGrid({
                colModel: [
                    {
                        name: 'countryName',
                        index: 'countryName',
                        width: 100,
                        editable: true,
                        edittype: "select",
                        editoptions: {
                            value: countrylist,
                            dataEvents: [
                                {
                                    type: 'change',
                                    fn: function(e) {
                                        var thisval = $(e.target).val();
                                        $.get('state.htm?id=' + thisval, function(data) {
                                            var res = $(data).html();
                                            $("#stateName").html(res);
                                        });
                                    }
                                }
                            ]
                        }
                    },
                    {
                        name: 'stateName',
                        index: 'stateName',
                        width: 100,
                        editable: true,
                        edittype: "select",
                        editoptions: {
                            value: statelist
                        }
                    }
                ],
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 30],
                sortname: 'countryName',
                viewrecords: true,
                sortorder: "desc",
                caption: "jqGrid Example"
            });
        });
    </script>
</body>
</html>

Key Points

Country List and State List: These variables define the options for the country and state select elements.
colModel Configuration: The colModel defines the columns in the jqGrid. For the countryName column, we use the dataEvents option to attach a change event handler.
Change Event Handler: When the user selects a country, the change event triggers an AJAX request to fetch the relevant states, which are then populated in the stateName column.

Conclusion

By following this approach, you can efficiently handle change events in jqGrid and dynamically update related columns based on user selections. This makes your web application more interactive and user-friendly.

Feel free to customize the code and adapt it to your specific needs. Happy coding!