New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Creating a DropDownList Command Column in the Grid

Environment

ProductTelerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC versionCreated 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:

  1. Specify a DropDownList command template by using the .Template() configuration option for a custom command.
  2. 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.
  3. Create a common DataSource for the DropDownList.
  4. 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.
  5. 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.

More ASP.NET MVC Grid Resources

See Also