JSGrid Dependent Field

by Danish Farman

HTML

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div id="jsGrid"></div>

CSS

.jsgrid-cell {
  overflow: hidden;
}

.jsgrid-pager {
  text-align: center;
}

JavaScript

var data = [{
    "Name": "Test Test",
    "Married": false
  },
  {
    "Name": "Connor Johnston",
    "Married": false
  },
  {
    "Name": "Lacey Hess",
    "Married": false
  },
  {
    "Name": "Timothy Henson",
    "Married": false
  }
];

$("#jsGrid").jsGrid({
  height: 300,
  width: "100%",

  autoload: true,
  inserting: true,

  controller: {
    loadData: function() {
      return data;
    }
  },

  fields: [{
      name: "Name",
      title: "Name",
      type: "text",
      width: "60%",
      validate: "required"
    },
    {
      name: "Married",
      title: "Married",
      type: "checkbox",
      width: "30%",
      validate: "required"
    },
    {
      name: "Data",
      type: "select",
      items: ["item1", "item2", "item3"],
      insertTemplate: function() {
        var grid = this._grid;
        var $result = jsGrid.fields.select.prototype.insertTemplate.call(this);

        $result.on("change", function() {
          var selectedValue = $result.val();
          console.log(grid);
          grid.option("fields")[0].insertControl.val("was selected: " + selectedValue);
        });

        return $result;
      }
    },
    {
      type: "control",
      width: "10%"
    }
  ]
});