Display data with badge telerik grid

Question

I'm new using Telerik, and I currently working on a ASP.Net Core Grid

So I have it working, but now I want to add a badge to a specific column

Code:

@(Html.Kendo().Grid(Model)
    .Name("grid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(2)
        .ServerOperation(false)
    ).Columns(columns =>
    { 
    columns.Bound(x => x.IsActive)
            .Title("Status")
    }

The status field is returning a boolean value (true or false)

I want to add a badge to this column, show green if value is true and gray if it is false

The grid example uses something like this:

  .ClientTemplate("<span class='badgeTemplate'></span>");

I added to my column but it just do not display anything

Inspect element html:

<td class="" role="gridcell"><span class="badgeTemplate">
</span></td>

How can I achieve this?

Answer 1

You can add code to the client template to add whatever is needed based on your design. For example below, I've added a badgeGreen or badgeGray class depending on the value of IsActive:

@(Html.Kendo().Grid(Model)
.Name("grid")
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(2)
    .ServerOperation(false)
).Columns(columns =>
{ 
    columns.Bound(x => x.IsActive)
        .Title("Status")
        .ClientTemplate(
              "# if(IsActive) { #" +
              "<span class='badgeTemplate badgeGreen'></span>" +
              "# } else { #" +
              "<span class='badgeTemplate badgeGray'></span>" +
              "# } #"

);
}