Handle Cascading DropDownLists within the Grid

Environment

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

Description

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

Solution

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

1. 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"))
    )
)

Razor

@addTagHelper *, Kendo.Mvc

<kendo-grid name="inlineGrid" height="430">
    <columns>
        <column field="LicenseId" hidden="true"></column>
        <column field="CustomerId"></column>
        <column field="VendorId"></column>
        <column field="ProductId"></column>
        <column width="80">
            <commands>
                <column-command text="Edit" name="edit"></column-command>
            </commands>
        </column>
    </columns>
    <toolbar>
        <toolbar-button name="create"></toolbar-button>
    </toolbar>
    <editable mode="inline"/>
    <scrollable enabled="true"/>
    <datasource type="DataSourceTagHelperType.Ajax">
        <schema>
            <model id="LicenseId"></model>
        </schema>
        <transport>
            <read url="@Url.Action("Read", "Home")" />
            <update url="@Url.Action("Update", "Home")" />
            <create url="@Url.Action("Create", "Home")" />
        </transport>
    </datasource>
</kendo-grid>

2. 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).

C#

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

3. 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)

Razor

@addTagHelper *, Kendo.Mvc
@model int

<kendo-dropdownlist for="@Model" 
    value-primitive="true" 
    option-label="Select Customer..."
    datatextfield="CustomerName"
    datavaluefield="CustomerId">
    <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
        <transport>
            <read url="@Url.Action("GetCustomers", "Home")"/>
        </transport>
    </datasource>
</kendo-dropdownlist>

<span asp-validation-for="@Model" class="text-danger"></span>

• 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)

Razor

@addTagHelper *, Kendo.Mvc
@model int

<kendo-dropdownlist for="@Model" 
    auto-bind="false"
    cascade-from="CustomerId"
    value-primitive="true" 
    option-label="Select Vendor..."
    datatextfield="VendorName"
    datavaluefield="VendorId">
    <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
        <transport>
            <read url="@Url.Action("GetVendors", "Home")" data="filterVendors"/>
        </transport>
    </datasource>
</kendo-dropdownlist>

<span asp-validation-for="@Model" class="text-danger"></span>

• 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)

Razor

@addTagHelper *, Kendo.Mvc
@model int

<kendo-dropdownlist for="@Model" 
    auto-bind="false"
    cascade-from="VendorId"
    value-primitive="true" 
    option-label="Select Product..."
    datatextfield="ProductName"
    datavaluefield="ProductId">
    <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
        <transport>
            <read url="@Url.Action("GetProducts", "Home")" data="filterProducts"/>
        </transport>
    </datasource>
</kendo-dropdownlist>

<span asp-validation-for="@Model" class="text-danger"></span>

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. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.

More ASP.NET Core DropDownList Resources

• ASP.NET Core DropDownList Documentation

• ASP.NET Core DropDownList Demos

• ASP.NET Core DropDownList Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the DropDownList for ASP.NET Core

• Server-Side API Reference of the DropDownList for ASP.NET Core

• Server-Side TagHelper API Reference of the DropDownList for ASP.NET Core

• Telerik UI for ASP.NET Core Knowledge Base

• Client-Side API Reference of the Grid for ASP.NET Core

• Server-Side API Reference of the Grid for ASP.NET Core