JQuery Grid

Invoke the endcelledit method of the jqxGrid. Author: http://jqwidgets.com

by paulcavender

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget'>
  <div id="Grid"></div>
</div>
<input type="button" style="margin: 10px;" id="AddElement" value="Add Element" />
<input type="button" style="margin: 10px;" id="GetData" value="Get Data" />

JavaScript

var ElementTypes = ["Attribute", "Constant", "Sequence", "Data Stamp"];
 var Attributes = [{
   'ID': "{'ID': 1, 'Attribute Name':'Document Type'}",
   'Display': 'Document Type'
 }];

 $("#Grid").jqxGrid({
   width: 1000,
   height: '100%',
   theme: 'energyblue',
   editable: true,
   columns: [{
       text: 'Element Type',
       datafield: "Element Type",
       editable: true,
       width: 200,
       columntype: 'dropdownlist',
       initeditor: function(row, cellvalue, editor) {
         editor.jqxDropDownList({
           source: ElementTypes
         });
       },
       cellendedit: function(row, datafield, columntype, oldvalue, newvalue) {
         switch (newvalue) {
           case "Attribute":

             $("#Grid").jqxGrid('setcellvalue', row, "Attribute", "");

             $("#Grid").jqxGrid('setcellvalue', row, "Constant", "(not required)");
             $("#Grid").jqxGrid('setcellvalue', row, "Sequence Length", "-");
             $("#Grid").jqxGrid('setcellvalue', row, "Sequence Start", "-");

             break;

           case "Constant":

             $("#Grid").jqxGrid('setcellvalue', row, "Attribute", "-");
             $("#Grid").jqxGrid('setcellvalue', row, "Constant", "");
             $("#Grid").jqxGrid('setcellvalue', row, "Sequence Length", "-");
             $("#Grid").jqxGrid('setcellvalue', row, "Sequence Start", "-");

             break;

           case "Sequence":

             $("#Grid").jqxGrid('setcellvalue', row, "Attribute", "-");
             $("#Grid").jqxGrid('setcellvalue', row, "Constant", "(not required)");
             $("#Grid").jqxGrid('setcellvalue', row, "Sequence Length", "");
             $("#Grid").jqxGrid('setcellvalue', row, "Sequence Start", "");

             break;

         }


       }

     },
     {
       text: "Attribute",
       datafield: "Attribute",
       editable: true,
       width: 200,
       columntype: "dropdownlist",

       createeditor: function(row, cellvalue, editor,...