how to view image(ie trueicon.png falseicon.png) for boolean values

[Ismail Karakaya]

can you provide a sample showing how to view image(ie trueicon.png falseicon.png) instead of checkbox or true/false  for boolean column values.

[Abinaya Subbiah]

Hi Ismail, 

Thanks for contacting Syncfusion support. 

We can use column template in Boolean column to show image instead of default checkboxes . Please refer to below code snippet. 

@(Html.EJ().Grid<object>("Grid") 

            .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource)) 

            .Columns(cols => 

            { 

                cols.Field("Id").HeaderText("ID").IsPrimaryKey(true).Add(); 

                cols.Field("Name").HeaderText("Person Name").Add(); 

                cols.Field("Designation").HeaderText("Designation").Add(); 

                cols.Field("LoginTime").HeaderText("Login Date").Format("{0:MM/dd/yyyy hh:mm:ss}").Add(); 

                cols.Field("Verified").HeaderText("Verified").Template("#ColumnTemp").Add(); 

 

            }) 

) 

<script type="text/x-jsrender" id="ColumnTemp"> 

        <img style="width: 75px; height: 70px" src="../Employees/{{:Verified}}.png" alt="{{: Verified }}" /> 

</script> 

Help Document: http://help.syncfusion.com/aspnetmvc/grid/columns#column-template 

We have created sample with your requirement. Please find it in below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/124717/ze/Sample941781577 

Regards, 

Abinaya S 

[Ismail Karakaya]

Thank you for your reply.

to clarify my question;

if value of cell is TRUE i want it to show trueicon.png

if value of cell is FALSE i want it to show falseicon.png

[Ismail Karakaya]

[Abinaya Subbiah]

Hi Ismail, 

We can achieve your requirement by using if else control blocks of JsRender and change the image URL based on Verified column value. Please refer to the below code example. 

<script id="columnTemplate" type="text/x-jsrender"> 

    {{if Verified}} 

       <img src="../Employees/trueicon.png" alt="{{:Verified}}" /> 

    {{else }} 

        <img src="../Employees/falseicon.png" alt="{{:Verified}}" /> 

    {{/if}} 

</script> 

Regards, 

Abinaya S