Kendo UI Cascading DropDownList Grid

Question

I have a Kendo interface grid on a Razor layout that retrieves data from a controller.

In this grid, I want to have a set of 3 dropdownlists that:

|| ProductGroups | V || || Products | V || || Services | V ||

The behavior I want to implement is when I add a row to the grid, first I select a group, and the drop-down list of products is updated with the list of products filtered by GroupId (value) than select "Product" and, like the first, update the "Services" drop-down list using services filtered by productId (value).

I don’t quite know how to achieve this, can someone help me?

Thank you all for your help.

Best wishes.

Answer 1

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

If you are using pop-up editing, you might consider customizing the pop-up menu, as 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 use InCell - let's just say that this is not possible.

Answer 2

Here is what I did for GridEditMode.InCell. I have a Client and a Fund, each client has its own list of funds, so when a user selects a client, I only need to show funds specific to this client.

View: Customizing the Kendo Grid UI

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 the user clicks on Fund, you need to filter the data source for funds, you do this on the "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> 

The fund has a FundForeighKeyEditor editor template, which you must add to the Views \ Shares \ EditorTemplate folder. You can use any name, just make sure the name of the file template matches the name EditorTemplateName. In my case, I used "FundForeignKeyEditor" as the 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 FundViewModel, it contains ClientId, so I can filter on it

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

Answer 3

This works with the inline editing mode. I have not tried others yet.

Associate the change event of the first drop-down list, find the target snapshot and change its data source. data-selector-type is an attribute that I add to each drop in the cascade chain to make the selection simple.

 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"); }