Kendo UI Grid with Cascading DropDownList

Question

I have a Kendo UI Grid on my Razor Layout which fetches data from the controller.

In this grid I wish to have a set of 3 DropDownLists which are:

ProductGr

Answer 1

This works with Inline edit mode. I haven't tried any others yet.

Tie into the change event of the first drop down, find the target drop down, and change its datasource. data-selector-type is an attribute I add to each drop down in the cascade chain to make the select easy.

function clientDropDownEditor(container, options) {           
  var clientCombo = $('')
      .appendTo(container)
      .kendoComboBox({
          dataTextField: "Name",
          dataValueField: "Name",
          dataSource: {
              transport: {
                  read: "json/data/getClients"
              }
          },
          change: function (e) {
              // Find the element with the required selector type in the same TR
              var kendoComboSites = e.sender.element.closest("tr").find("[data-selector-type=site]").data("kendoComboBox");

              kendoComboSites.dataSource.transport.options.read.url = "json/data/GetClientSites/" + e.sender.element.val() + "/" + $("#Id").val();
              kendoComboSites.dataSource.read();
              kendoComboSites.refresh();

          }
      }).data("kendoAutoComplete");
}