Adding a Badge to a Custom Command in the Grid
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Progress Telerik UI for ASP.NET MVC 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 MVC 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
DataBoundevent 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.
@(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 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.