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"))
)
)
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.