Rendering Icons for Boolean Columns in the Grid
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2023.1.117 version |
Description
How can I render icons for a Boolean column in the Telerik UI for ASP.NET MVC Grid?
Solution
To achieve the desired scenario:
- Specify a column template for the Boolean column by using the
ClientTemplate()configuration method and provide a function handler. - Within the handler, replace the default
trueandfalsevalues by using the conventional Kendo UI Web Font Icons.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(140);
columns.Bound(p => p.UnitsInStock).Width(140);
columns.Bound(p => p.Discontinued).ClientTemplate("#=discTemplate(data)#").Width(100); // Use the template syntax to invoke the function whilst passing the data object of the current model.
columns.Command(command => command.Destroy()).Width(150);
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Model(model => model.Id(p => p.ProductID))
.Create("Editing_Create", "Grid")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "Grid")
.Destroy("Editing_Destroy", "Grid")
)
)
<script type="text/javascript">
function discTemplate(data) { // Render an icon based on a ternary operator evaluation.
return data.Discontinued ? "<span class='k-icon k-i-check'></span>" : "<span class='k-icon k-i-x'></span>"
}
</script>
For the complete implementation of the suggested approach, refer to the Telerik REPL example on rendering icons for a Boolean column in the Grid.