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