Apply condition in grid particular column
How to apply condition on particular column on the behalf of field value. like if value in refertrack is Green than show tick mark font awesome and if orange than square orange color font awesome and if value is Red than rectangular red box. eg. for Red
<i class="fas fa-stop font23 color-red">
Hi suraj,
Greetings from Syncfusion support.
Upon examining your inquiry, we have identified that you wanted to display custom fonts instead of field values under specific conditions within the Syncfusion Grid. This can be accomplished by utilizing the column.template property of Grid. For more details on implementing conditional templates, please refer to the provided documentation link. Additionally, please review the following code example and screenshot, which illustrate the application of conditional templates for the 'Refertrack' column.
|
Index.cshtml @Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").Height("359").Columns(col => { col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add(); col.Field("Freight").HeaderText("Freight").Width("135").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("Refertrack").HeaderText("Refertrack").Template("#template").Width("125").Add(); }).Render()
<script id="template" type="text/x-template"> <div class="template_checkbox"> ${if(Refertrack === 'Red')} <i class="fa fa-minus-square-o" style="font-size:24px; color:red"></i> ${else if(Refertrack === 'Green')} <i class="fa fa-check-square-o" style="font-size:24px; color:green"></i> ${else} <i class="fa fa-square-o" style="font-size:24px; color:orange"></i> ${/if} </div> </script>
|
Screenshot:
Documentation Link: Using-condition-template
If you need any other assistance or have additional questions, please feel free to contact us.
Regards
Aishwarya R
