New to Telerik UI for ASP.NET Core? Start a free 30-day trial
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:
- 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).
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; }
}
- Add a view for each editor in the
Views/Shared/EditorTemplates
folder. Ensure that the names of the views match the specified names in theUIHint
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. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.