New to Telerik UI for ASP.NET MVC? Download free 30-day trial

    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:

    1. Specify a column template for the Boolean column by using the ClientTemplate() configuration method and provide a function handler.
    2. Within the handler, replace the default true and false values 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")
            )
        )

    For the complete implementation of the suggested approach, refer to the Telerik REPL example on rendering icons for a Boolean column in the Grid.

    More ASP.NET MVC Grid Resources