New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Adding a Badge to a Custom Command in the Grid

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2022.3.1109 version

Description

How can I integrate a Badge inside a custom command for a given row in the Telerik UI for ASP.NET Core Grid component? The Badge must be based on the row's column value.

Solution

To achieve the desired scenario:

Specify a custom class for the custom command by using the .HtmlAttributes() configuration option.
To traverse through each of the rows, handle the DataBound event of the Grid.
Within the handler, obtain the currently traversed row's data item instance by using the client-side .dataItem() method the Grid provides. To get the respective custom command button for the associated row, use the previously specified custom class.
Provide a unique id for the badges that you will create.
Based on the value of a data item field, append a child element inside the Button. From the Button, initialize a Badge control.

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(" ").HtmlAttributes(new {@class = "myCommand"}).IconClass("k-icon k-i-comment").  Click("showDetails"));
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Events(e => e.DataBound("onDataBound"))
        .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">
        function onDataBound(e){
            var grid = $("#grid").data("kendoGrid");
            var gridRows = grid.tbody.find("tr");  // Get the present table rows from the Grid.
            gridRows.each(function (e) { // Traverse through each of the Grid rows.
                var rowItem = grid.dataItem($(this)); // Get the current data item instance.
                var id = `badge${rowItem.ProductID}`; // Create a unique id for the badge that will be created.
                var command = $(this).find(".myCommand"); // Obtain a reference of the custom command button for the respective row.
                
                if(rowItem.Discontinued == true){ // Check for a given field's value.
                     $(command).append($(`<span id='${id}'>5</span>`)); // Append a child element.

                     $("#"+id).kendoBadge({ // Initialize the badge widget to the previously appended child while passing the unique id.
                        themeColor: 'primary',
                        position:'edge',
                        size:'small',
                        align: 'top end',
                        rounded: 'full'
                     });
                }
            });
        }
    </script>

For the complete implementation of the suggested approach, refer to the Telerik REPL example on adding a Badge to a custom command in the Grid.

Adding a Badge to a Custom Command in the Grid

Environment

Description

Solution

See Also

More ASP.NET Core Grid Resources

See Also