New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Creating a DropDownList Command Column in the Grid
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Progress Telerik UI for ASP.NET MVC version | Created with the 2022.2.802 version |
Description
How can I implement an always visible DropDownList command template for the Telerik UI for ASP.NET MVC Grid?
Solution
To achieve the desired scenario:
- Specify a DropDownList command template by using the
.Template()
configuration option for a custom command. - Within the template, specify an empty
<input>
tag and decorate it with a common class that will be used for rendering a DropDownList for each rows respectively. - Create a common
DataSource
for the DropDownList. - Traverse through each records by handling the
DataBound
event of the Grid. To initialize the DropDownlists, use the previously decorated common class for the custom command input. - Handle each of the command options by subscribing to the
Change
event of the DropDownLists.
Index.cshtml
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(100);
columns.Bound(p => p.UnitsInStock).Width(100);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command => { command.Custom("myCommand").Template("<input class='dropDownTemplate'/>"); }).Width(172);
})
.ToolBar(toolbar =>toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Events(e => e.DataBound("onDataBound"))
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.ProductID))
.Create(update => update.Action("EditingInline_Create", "Grid"))
.Read(read => read.Action("EditingInline_Read", "Grid"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
For the complete implementation of the suggested approach, refer to the Telerik REPL example on implementing a DropDownList command column in the Grid.