// 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 } ] });
<p> Try to change the select to trigger the callback. </p> <div id="jsGrid"></div>