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:

ProductGroups, Products, Services

The behaviour I wish to implement is, when I Add a row to the Grid, I choose ProductGroups first, and the Products DropDown is updated with products list filtered by GroupId (value). Then select Product and like the first one, update the Services DropDown with services filtered by productId (value).

I don't quite know how to achieve this, can anyone please help me?

Thank you all for your help.

Best Regards.

Solution 1

The easiest way would be to use the cascading dropdownlists: http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html inside of the editor templates for each of these columns.

If you are using popup editing you might consider customizing the popup menu like here: http://www.kendoui.com/code-library/mvc/grid/custom-popup-editor.aspx

If you are using InLine editing you should use this approach to customize the editor templates: http://docs.kendoui.com/documentation/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates

If you are using InCell - lets just say its not possible.

Solution 2

Here is what I've done for GridEditMode.InCell. I have Client and Fund, each client have own list of Funds, so when user select client I need to only show Funds specific to this client

View: Kendo Grid UI setup

    c.ForeignKey(p => p.ClientId, Model.Clients, "Id", "ClientName")
      .Title("Client")
      .Width(100);
    c.ForeignKey(p => p.FundId, Model.Funds, "Id", "Description")
      .EditorViewData(new {funds = Model.Funds})
      .EditorTemplateName("FundForeignKeyEditor")
      .Title("Fund")
      .Width(100);
   })
   .Editable(x => x.Mode(GridEditMode.InCell))
   .Events(e => e.Edit("gridEdit"))

Now when user click on Fund you need to perform filtering of the datasource for funds, you do it on "gridEdit" event using JavaScript. You put this code in the same view/file as your code above

<script type="text/javascript">
    function gridEdit(e) {
        var fundDropDown = e.container.find("#FundId").data("kendoDropDownList");

        if (fundDropDown) {
            fundDropDown.dataSource.filter({ field: "ClientId", operator: "eq", value: e.model.ClientId });

</script>

Fund has "FundForeighKeyEditor" editor template, which you have to add in to Views\Shares\EditorTemplate folder. You can use any name, just make sure name of the file template matches name of the EditorTemplateName. In my case I used "FundForeignKeyEditor" as EditorTemplate and FundForeighKeyEditor.cshtml file

FundForeighKeyEditor.cshtml

@model FundViewModel

@(
        Html.Kendo().DropDownListFor(m => m)
            .BindTo((System.Collections.IEnumerable)ViewData["funds"])
            .DataTextField("Description")
            .DataValueField("Id")
)

Here is a FundViewModel, it contains ClientId so I can perform filtering on it

public class FundViewModel
{
    public string Id { get; set; }
    public string ClientId { get; set; }
    public string Description { get; set; }
}

Solution 3

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 = $('<input  id="client' + options.uid + '"  data-selector-type="client" data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
      .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");
}

Comments

[TheBigCheese]

It's a three column grid with one combo in each. Template for each combo is not quite viable as this is needed in several contexts with diferent datasources, and each como has to be filtered on selection of the previous combo.

[crichavin]

Vlad, this is interesting. I am trying the same thing, cascading ddl's within an incell edit. However, when you click on the first ddl to filter the 2nd,, the cell leaves edit mode. Do you not have the same result?

[Shivam657]

Can you please explain where did you define the "fundDropDown.dataSource" and also "Model.Funds" you are taking from Controller or the Editortemplate?. It's not working in MVC5, and where is the call/definition of fund datasource, could you please elaborate and help. Need help urgently on this issue. Thank You :)

[Vlad Bezden]

@Shivam657 fundsDropDown defined in javascript code: var fundDropDown = e.container.find("#FundId").data("kendoDropDownList"); please take a look at my javascript code for gridEdit event. Model.Funds comes from controller (it's part of your Razor model). "funds" in FundViewModel comes from .EditorViewData(new {funds = Model.Funds})

[Rzassar]

"If you are using InCell - lets just say its not possible." wrong info! obviously you can get DropDownList object in edit mode and filter it based on e.model.FkId like @Vlad Bezden's answer.