Boolean / Checkbox Column

[Matt Abercrombie]

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]

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: 

@Grid 

$("#Grid").ejGrid({ 

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

                ] 

            }); 

 

@Style 

<style> 

 

      .e-chkbox-small > span { 

            margin-left: 10px; 

        } 

    </style> 

Help documentation: https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

Sample: http://jsplayground.syncfusion.com/bmd020tl 

Regards, 

Venkatesh Ayothiraman.