JSGrid Dependent Selects

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>
<div id="jsGrid"></div>

CSS

.in-stock { background: lightgreen; }
.out-of-stock { background: lightyellow; }
.pending { background: skyblue; }

JavaScript

var data = [
    {
        "Status": "1",
        "DependentStatus": "1"
    },
    {
        "Status": "2",
        "DependentStatus": "2"
    },
    {
        "Status": "3",
        "DependentStatus": "3"
    },
    {
        "Status": "1",
        "DependentStatus": "1"
    }
];
function getCustomInsertControls(gridId) {
        var grid = $("#" + gridId).data("JSGrid");
        return $("<input>").addClass("jsgrid-button")
                          .addClass("jsgrid-update-button insertpad")
                          .attr({
                              type: "button",
                          })
                          .on("click", function () {
                              grid.insertItem().done(function () {
                                  grid.option("inserting", false)
                              });
                          })
                          .add($("<input>")
                          .addClass("jsgrid-button")
                          .addClass("jsgrid-cancel-edit-button")
                          .attr({
                              type: "button",
                          })
                          .on("click", function () {
                              grid.option("inserting", false);
                          }));
    }
function getCustomInsertHeader(gridId) {

        return $("<button>").attr("type", "button").text("Add").addClass("btn btn-primary").attr("id", "CreateBtn")
        .on("click", function () {
            $("#" + gridId).jsGrid({ inserting: true });
        });
    }
var statuses = [
	{ Name: "In Stock", Id: "1"},
  { Name: "Out Of Stock", Id: "2"},
  { Name: "Pending", Id: "3"}
];

var dependentStatuses = [
	{ Name: "Dependent In Stock", Id: "1"},
  { Name: "Dependent Out Of Stock", Id: "2"},
  { Name: "Dependent Pending", Id: "3"}
];

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

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

 ...