How to attach a callback when a select change (onSelectChange) for dependent selects using jsGrid (Lightweight Grid jQuery Plugin)

Learn how to attach an onChange callback to the selects in your dynamic forms created by jsGrid.

jsGrid is a lightweight client-side data grid control based on jQuery. It supports basic grid operations like inserting, filtering, editing, deleting, paging, and sorting. jsGrid is flexible and allows to customize its appearance and components. It is well documented and a lot of available options to change and modify jsGrid to fill your needs.

In some cases, you will need to create custom Dependent Selects that execute some code (independently from the data of the table) and will do something extra in your application. Pitifully this is a not well documented feature and for some developers it may take some time to end up with a solution to add a onchange callback to the dinamically generated select elements of jsGrid.

Attach on change events on dinamically generated select elements

To attach an event listener to an element generated by jsGrid, you will need to focus on the *Template callbacks of every fields. For example, given a jsGrid that allows you to insert and edit some data with a single select element, namely category, we will need to focus on the insertTemplate and editTemplate. Inside the callback you can retrieve the element by executing the call function of jsGrid.fields.select.prototype.<Type of View>, where type of of view should be replaced respectively on every template. The call function expect the this context as argument on the insert template. In the editTemplate, it expects as first argument the this context and as second argument the value variable received as first argument on the callback itself:

// Some demo data to list on the select
var CategoryList = [
    { "id": 1, "category": "Main Category A" },
    { "id": 2, "category": "Main Category B" }
];

// Initialize jsGrid
$("#jsGrid").jsGrid({
    width: "100%",
    inserting: true,
    editing: true,
    sorting: true,
    paging: true,
    // Some dummy data
    data: [
        {
            "id": 1,
            "category": "Category A"
        }
    ],
    deleteConfirm: "Are you sure?",
    fields: [
        {
            name: "category", 
            title: "Main Category",
            type: "select", 
            items: CategoryList, 
            valueField: "category", 
            textField: "category",
            insertTemplate: function () {
                // Retrieve the DOM element
                // Note: prototype.insertTemplate
                var $insertControl = jsGrid.fields.select.prototype.insertTemplate.call(this);

                // Attach onchange listener !
                $insertControl.change(function () {
                    var selectedValue = $(this).val();

                    alert(selectedValue);
                });

                return $insertControl;
            },
            editTemplate: function (value) {
                // Retrieve the DOM element (select)
                // Note: prototype.editTemplate
                var $editControl = jsGrid.fields.select.prototype.editTemplate.call(this, value);

                // Attach onchange listener !
                $editControl.change(function(){
                    var selectedValue = $(this).val();

                    alert(selectedValue);
                });

                return $editControl;
            }
        },
        { type: "control",  editButton: false, modeSwitchButton: false }
    ]
});

Note that the previous example applies only for the editTemplate and the insertTemplate, so according to the way you're working with, you may do the same with the other templates e.g:

headerTemplate: function() { ... },
itemTemplate: function(value, item) { ... },
filterTemplate: function() { ... },
insertTemplate: function() { ... },
editTemplate: function(value, item) { ... },