checked sign in grid

[YN]

Hi,

I want to put the checked sign <i class='fa fa-check' aria-hidden='true'></i> to replace "true" in the grid column.

 

I put below code:

@{     var freshnessTemplate = "# if (checkFreshness) { # <i class='fa fa-check' aria-hidden='true'></i> # } #";}

then

columns.Bound(p => p.checkFreshness).Title("Check Fresh").Width(150).ClientTemplate(freshnessTemplate).HtmlAttributes(new { style = "text-align: center" });

 

but it doesn't show the checked sign.

[YN]

anybody can help with this? how to show the check mark in the Grid rows for Boolean value?

[Viktor Tachev]

Hi Sarah,

For showing a checkbox where the value in the field is true I recommend specifying a JavaScript function for the ClientTemplate. In the function you can check the value of the field and set the relevant icon that will be used in the cell. 

The code would look similar to this:

columns.Bound(p => p.checkFreshness).Title("Check Fresh").Width(150).ClientTemplate("#=freshnessTemplate(data)#").HtmlAttributes(new { style = "text-align: center" });

And the freshnessTemplate function:

<script>
    function freshnessTemplate(item) {
        if (item.checkFreshness) {
            return "<i class='fa fa-check' aria-hidden='true'></i>"
        }

        return "<i class='far fa-square' aria-hidden='true'></i>";
    }
</script>

Give the approach a try and let me know how it works for you.



Regards,
Viktor Tachev
Progress Telerik

[YN]

Hi Viktor, thank you very

 

I tried, but the column is empty after I run (not show checkbox). hould I replace the "data" to p?

 

 

columns.Bound(p => p.checkFreshness).Title("Check Fresh").Width(150).ClientTemplate("#=freshnessTemplate(data)#").HtmlAttributes(new { style = "text-align: center" });    

 

[Viktor Tachev]

Hello Sarah,

By default the dataItem would be available in the ClientTemplate. That essentially the data variable is p - it is the item containing all fields for the current row. Thus, the value for checkFreshness can be accessed in the function body. 

In case you are seeing a different behavior please send us a runnable project where the issue is replicated. This will enable us to examine the issue locally and look for its cause.


Regards,
Viktor Tachev
Progress Telerik