bound checkbox

[William Morgenweck]

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]

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> 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#how-to-render-boolean-values-as-checkbox 

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

Regards, 

Pavithra S. 

[William Morgenweck]

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]

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 } 

    }; 

  }, 

Sample: https://codesandbox.io/s/boolean-edit-3p16i 

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

Regards, 

Manivel