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

Adding a Badge to a Custom Command in the Grid

Environment

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

  1. Specify a custom class for the custom command by using the .HtmlAttributes() configuration option.
  2. To traverse through each of the rows, handle the DataBound event of the Grid.
  3. 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.
  4. Provide a unique id for the badges that you will create.
  5. 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"))
        )
    )

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.

See Also

More ASP.NET Core Grid Resources

See Also