Creating a DropDownList Command Column in the Grid

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core 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 Core 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"))
        )
    )

Script.js

<script type="text/javascript">
    var ddlDataSource = [ // Create a common DataSource.
            {
                value: 1,
                displayValue: "Command1"
            },
            {
                value: 2,
                displayValue: "Command2"
            }
    ];
    function onDataBound(e){
        var grid = e.sender; // Get the Grid's reference.

        var items = e.sender.items(); // Get the Grid's data items.

        items.each(function(e) { // Traverse through each of the items.
            var dataItem = grid.dataItem(this); 
            var ddt = $(this).find('.dropDownTemplate'); // Retrieve the current input element.

            $(ddt).kendoDropDownList({ // Initialize a DropDownList.
                value: dataItem.value,
                change: onChange,
                dataSource: ddlDataSource,
                optionLabel: "Select a command...",
                dataTextField: "displayValue",
                dataValueField: "value"
            });
        });
    }
    function onChange(e){ 
        var command = e.sender.text(); // Get the current text.

        switch(command){
            case "Command1":
                alert(command+" "+"is selected.");
                break;
            case "Command2":
                alert(command+" "+"is selected.")
                break;          
            default:
                break;  
        }
    }
    </script>

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 Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid 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

• Telerik REPL: Implementing a DropDownList Command Column in the Grid
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base