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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

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


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 02:59 AM

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> 



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


Regards, 
Abinaya S 


Ismail Karakaya
Replied On June 27, 2016 07:02 AM

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


truefalsetelerik

Ismail Karakaya
Replied On June 27, 2016 07:03 AM


Abinaya Subbiah [Syncfusion]
Replied On June 28, 2016 03:18 AM

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 


CONFIRMATION

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.

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.

;