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

bound checkbox

How do I set up a grid to have a bound checkbox? I've tried searching but I always get other platform answers. I've tried type="boolean" but that does not work

3 Replies

PS Pavithra Subramaniyam Syncfusion Team August 1, 2019 11:09 PM

Hi William, 

Thanks for contacting Syncfusion support. 

You can display the Boolean column as checkbox by setting the “displayAsCheckBox” property as true. Please refer to the below code example and documentation link for more information. 

    <div id="app"> 
        <ejs-grid :dataSource='data' height='315'> 
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column> 
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
                <e-column field='Freight' headerText='Freight' textAlign= 'Right' width=120 format= 'C2'></e-column> 
                <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column> 
                <e-column field='ShippedDate' headerText='Shipped Date' width=150></e-column> 
                <e-column field='Verified' headerText='Verified' displayAsCheckBox='true' width=150></e-column> 

Please get back to us if you need any further assistance on this. 

Pavithra S. 

WM William Morgenweck August 4, 2019 12:57 AM

This will display a bit data type as a checkbox but how can I make it interactive?  I need a column of check-boxes that gets it value from the database.  So the column could be a todo list and the checkbox could say completed.  I want the end user to click completed and the need time the grid is loaded the check box is populated. Also if the bit is a 0 then the checkbox does not show up empty- it just does not show at all.

MS Manivel Sellamuthu Syncfusion Team August 5, 2019 05:57 AM

Hi William, 

Thanks for your update. 

we have validated your requirement. From your query we suspect that you want to edit the checkbox column and store the values in dataSource. You can achieve your requirement by using edittype as ‘booleanedit’. 

Please find the below code snippet and sample for more information. 

            headerText="Order ID" 
. . . 
export default Vue.extend({ 
  data: () => { 
    return { 
      data: data.slice(0), 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true 
      toolbar: ["Add", "Edit", "Delete"], 
      pageSettings: { pageCount: 5 } 

Please get back to us, if you need further assistance. 


Live Chat Icon For mobile
Up arrow icon