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

How to change the style/look of the Checkbox when Displayascheckbox = true?

I have a grid and some of the columns are boolean.  I'm using a dark background and i want to make the checkbox border and checkmark inside (when checked) to be a light color - #ffe559.  How do i accomplish this?


1 Reply

PK Padmavathy Kamalanathan Syncfusion Team September 16, 2019 12:21 PM

Hi Christopher, 

Thanks for contacting Syncfusion Forums. 

QUERY: How to change style of checkbox when DisplayAsCheckBox is set to true 

From your query we understand that you need to set customize the checkbox column of the grid. 

We suggest you to use column template. Using templateRefresh event, you can render ejCheckBox. You can customize the ejCheckBox’s style and appearance using it’s class name. 

Please refer the below code snippet, 

.e-chkbox-wrap .e-chk-image.e-checkmark:before { 
background-color: black; 
.e-icon.e-righttick:before, .e-icon.e-checkmark:before { 
 color: #ffe559 
.e-chk-image.e-icon { 
  background-color: black;     
   <div id="Grid"></div> 
  <script type="text/x-jsrender" id="columnTemplate"> 
   {{if Verified}} 
     <input type="checkbox" class="success e-checkbox" checked="checked" /> 
     <input type="checkbox" class="danger e-checkbox"/> 
    <script type="text/javascript"> 
        $(function () { 
              // the datasource "window.gridData" is referred from jsondata.min.js 
             dataSource: window.gridData, 
             allowPaging: true, 
             templateRefresh: "template", 
             columns: [ 
                { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 }, 
                  { field: "Verified", template: "#columnTemplate", headerText: 'Checkbox', width: 75 }, 
        function template(args) { 
        $(args.cell).find(".e-checkbox").ejCheckBox({ size: "medium" }); 


Please refer the below help documentations, 

Please refer the sample, 

If you have further queries, please get back to us. 

Padmavathy Kamalanathan  

Live Chat Icon For mobile
Up arrow icon