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

Boolean / Checkbox Column

Thread ID:





129434 Mar 17,2017 12:00 PM UTC Mar 20,2017 12:56 PM UTC JavaScript 1
Tags: ejGrid
Matt Abercrombie
Asked On March 17, 2017 12:00 PM UTC

How do you get the checkboxes that display in a boolean column to appear with the ejCheckBox styling instead of the regular html / browser style?

Venkatesh Ayothi Raman [Syncfusion]
Replied On March 20, 2017 12:56 PM UTC

Hi Matt, 
Thanks for contacting Syncfusion support. 
We have achieved your requirement using queryCellInfo event in Grid. In this event get every time a request is made to access cell information, element and data. In that event, we have changed the normal checkbox to ejCheckbox control. Please refer to the following code example, Help documentation and sample, 
Code example
                // the datasource "window.gridData" is referred from jsondata.min.js 
                dataSource: window.gridData, 
                 . . . 
                queryCellInfo: function (args) { 
                    if (args.column.field == "Verified" && !$(args.cell).find("input").hasClass("e-checkbox")) { 
                        $(args.cell).find("input").ejCheckBox();//render the ejCheckbox                        
                . . . 
                columns: [ 
                         . . . 
                   {field:"Verified", headerText:"boolean column", editType:"booleanedit", width:90} 
      .e-chkbox-small > span { 
            margin-left: 10px; 

Venkatesh Ayothiraman. 


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

or the page will be automatically redirected to 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