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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





124717 Jun 24,2016 11:05 AM UTC Jun 28,2016 07:18 AM UTC ASP.NET MVC 4
Tags: Grid
Ismail Karakaya
Asked On June 24, 2016 11:05 AM UTC

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 [Syncfusion]
Replied On 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 

Ismail Karakaya
Replied On 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


Ismail Karakaya
Replied On June 27, 2016 11:03 AM UTC

Abinaya Subbiah [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon