JSGrid Dependent Filters

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<p>
Try to change the select to trigger the callback.
</p>
<div id="jsGrid" ></div>

JavaScript

// 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 }
    ]
});