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
close icon

Displaying CheckBox for special values

Hi,

I have a column with a "bool-like" value.
Indeed, my column have "X" value for true and null for false. Can I display this value as checkbox ?

Regards,

Leblanc Anthony

5 Replies

JA Juan Acosta October 25, 2016 04:31 AM UTC

Hi Anthony, 

Check this. 

It is also possible to add specific images or icons for the columns using x-template parameters. 

Regards, 

J


AL Anthony Leblanc October 25, 2016 07:58 AM UTC

Hi Juan,

I misspoke, I meant that ma datasource return a "X" string for true and a null object for false.
So need I make a template with a little script that create the checkbox according the datasource Value and how can I do that ?

Regards,

Anthony Leblanc


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 25, 2016 10:10 AM UTC

Hi Anthony, 

Query #1: my column have "X" value for true and null for false. Can I display this value as checkbox 

Using a Template Column and TemplateRefresh event of the Grid, we can render the X/null as a checkbox. Refer to the following code example and Help Document. 

<script type="text/x-jsrender" id="checkTemplate"> 
    <input type="checkbox"> 
</script> 
 
@(Html.EJ().Grid<object>("Grid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
            .AllowPaging() 
            .Columns(col => 
        { 
            col.HeaderText("Verified").Template("#checkTemplate").Add(); 
               .. .  
        }) 
        .ClientSideEvents(events => events.TemplateRefresh("refresh")) 
) 
 
<script> 
    function refresh(args) { 
        if ($(args.cell).find("input").length) { 
            var val = !ej.isNullOrUndefined(args.data.Verified); 
            $(args.cell).find("input").ejCheckBox({ checked: val }); 
        } 
    } 
</script> 

Note: Here Verified is one of the columns in the dataSource holds X/null values. 


Query #2: add specific images or icons for the columns using x-template parameters 

Even we can use the template column to bind the images/icons. Refer to the following code example and image. 

<script type="text/x-jsrender" id="imageTemp"> 
    <img src="/Content/ej/Employees/{{:EmployeeID}}.png" /> 
</script> 
 
<script type="text/x-jsrender" id="icon"> 
    <img src="/Content/ej/web/common-images/ribbon/Check.png" /> 
</script> 
 
@(Html.EJ().Grid<object>("Grid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
            .AllowPaging() 
            .Columns(col => 
        { 
            col.HeaderText("Employee Image").Template("#imageTemp").Add(); 
            col.HeaderText("Employee icon").Template("#icon").Add(); 
               .. .  
        }) 
) 


 

Using a column Template, we have an online demo. http://mvc.syncfusion.com/demos/web/grid/columntemplate 

Regards, 
Seeni Sakthi Kumar S. 



AL Anthony Leblanc October 25, 2016 11:43 AM UTC

Hi,

Thanks for this. It's work perfectly :)

Best Regards,

Leblanc Anthony


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team October 26, 2016 03:53 AM UTC

Hi Leblanc, 

Thanks for the update. We are happy to hear that your requirement has been achieved. Please get back to us, if you require further assistance on this. 

Regards, 
Seeni Sakthi Kumar S. 


Loader.
Live Chat Icon For mobile
Up arrow icon