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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

bound checkbox

Thread ID:

Created:

Updated:

Platform:

Replies:

146371 Aug 1,2019 06:14 PM UTC Aug 5,2019 10:57 AM UTC Vue 3
loading
Tags: Data Grid
William Morgenweck
Asked On August 1, 2019 06:14 PM UTC

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
Thanks

Pavithra Subramaniyam [Syncfusion]
Replied On August 2, 2019 04:09 AM UTC

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. 

[Vue] 
<template> 
    <div id="app"> 
        <ejs-grid :dataSource='data' height='315'> 
            <e-columns> 
                <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> 
            </e-columns> 
        </ejs-grid> 
    </div> 
</template> 



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

Regards, 
Pavithra S. 


William Morgenweck
Replied On August 4, 2019 05:57 AM UTC

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.



Manivel Sellamuthu [Syncfusion]
Replied On August 5, 2019 10:57 AM UTC

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. 

App.vue 
<ejs-grid 
        :dataSource="data" 
        :allowPaging="true" 
        :pageSettings="pageSettings" 
        :editSettings="editSettings" 
        :toolbar="toolbar" 
      > 
        <e-columns> 
          <e-column 
            field="OrderID" 
            headerText="Order ID" 
            width="120" 
            textAlign="Right" 
            :isPrimaryKey="true" 
          ></e-column> 
          <e-column 
            field="Verified" 
            headerText="Verified" 
            width="100" 
            editType="booleanedit" 
            displayAsCheckBox="true" 
            type="boolean" 
            textAlign="Center" 
          ></e-column> 
        </e-columns> 
      </ejs-grid> 
. . . 
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. 

Regards, 
Manivel 


CONFIRMATION

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

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

Live Chat Icon For mobile
Live Chat Icon