New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Handle Cascading DropDownLists within the Grid

Environment

Product	Telerik UI for ASP.NET MVC DropDownList, Telerik UI for ASP.NET MVC Grid
Product Version	Created with version 2024.4.1112

Description

How can I implement cascading ASP.NET MVC DropDownLists within a ASP.NET MVC Grid component?

Solution

You can achieve this requirement using editor templates for the Grid columns by following the next steps:

Define the Grid and its columns:

Razor

@(Html.Kendo().Grid<License>()
    .Name("inlineGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.LicenseId).Hidden();
        columns.Bound(p => p.CustomerId);
        columns.Bound(p => p.VendorId);
        columns.Bound(p => p.ProductId);
        columns.Command(p => p.Edit().Text("Edit")).Width(80);
    })
    .HtmlAttributes(new { style = "height: 430px;" })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.LicenseId))
        .Create(create => create.Action("Create", "Home"))
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
)

Decorate each Model property with the UIHint Data Annotation attribute to speify the name of the view that contains the custom editor (for example, the DropDownList).

public class License
{
    [Required(ErrorMessage = "LicenseId is required")]
    public int LicenseId { get; set; }

    [UIHint("CustomerId")]
    [Required(ErrorMessage = "CustomerId is required")]
    public int CustomerId { get; set; }

    [UIHint("VendorId")]
    [Required(ErrorMessage = "VendorId is required")]
    public int VendorId { get; set; }

    [UIHint("ProductId")]
    [Required(ErrorMessage = "ProductId is required")]
    public int ProductId { get; set; }
}

Add a view for each editor in the Views/Shared/EditorTemplates folder. Ensure that the names of the views match the specified names in the UIHint attributes.

CustomerId DropDownList:

Razor

@using Kendo.Mvc.UI
@model int

@(Html.Kendo().DropDownListFor(m => m)
    .ValuePrimitive(true)
    .OptionLabel("Select Customer...")
    .DataTextField("CustomerName")
    .DataValueField("CustomerId")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("GetCustomers", "Home"))
                .ServerFiltering(true);
    })
)
@Html.ValidationMessageFor(m => m)

VendorId DropDownList:

Razor

@using Kendo.Mvc.UI
@model int

@(Html.Kendo().DropDownListFor(m => m)
    .AutoBind(false)
    .ValuePrimitive(true)
    .OptionLabel("Select Vendor...")
    .DataTextField("VendorName")
    .DataValueField("VendorId")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("GetVendors", "Home").Data("filterVendors"))
                .ServerFiltering(true);
    })
    .CascadeFrom("CustomerId")
)

@Html.ValidationMessageFor(m => m)

ProductId DropDownList:

Razor

@using Kendo.Mvc.UI
@model int

@(Html.Kendo().DropDownListFor(m => m)
    .AutoBind(false)
    .ValuePrimitive(true)
    .OptionLabel("Select Product...")
    .DataTextField("ProductName")
    .DataValueField("ProductId")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("GetProducts", "Home").Data("filterProducts"))
                .ServerFiltering(true);
    })
    .CascadeFrom("VendorId")
)

@Html.ValidationMessageFor(m => m)

To see the complete example, refer to the ASP.NET MVC project on how to configure the Grid to handle its cascading DropDownList editors when the Grid is set up for Popup or InLine edit mode.

Handle Cascading DropDownLists within the Grid

Environment

Description

Solution

More ASP.NET MVC DropDownList Resources

See Also