We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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.

4 Replies

AS Abinaya Subbiah Syncfusion Team June 27, 2016 06:59 AM UTC

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. 

            .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource)) 
            .Columns(cols => 
                cols.Field("Name").HeaderText("Person Name").Add(); 
                cols.Field("LoginTime").HeaderText("Login Date").Format("{0:MM/dd/yyyy hh:mm:ss}").Add(); 

<script type="text/x-jsrender" id="ColumnTemp"> 
        <img style="width: 75px; height: 70px" src="../Employees/{{:Verified}}.png" alt="{{: Verified }}" /> 

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

Abinaya S 

IK Ismail Karakaya June 27, 2016 11:02 AM UTC

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


IK Ismail Karakaya June 27, 2016 11:03 AM UTC

AS Abinaya Subbiah Syncfusion Team June 28, 2016 07:18 AM UTC

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}}" /> 

Abinaya S 

Live Chat Icon For mobile
Up arrow icon