I have a data table with a checkbox column. I need to default some rows to be checked based on the data provided to the data table.
How can I set the checkbox value of only some rows to be checked when the data loads?
Hi
Camille,
Thanks for contacting Syncfusion support.
If you want to select the rows based on boolean value of the row data, you can
achieve this by directly binding the boolean field to the checkbox type column.
{type: 'checkbox', field:'Verified', width: '50', visible: true},
|
Or, if you want to select the rows based on particular conditions, you can use selectRows method in the dataBound of the Grid.
selectRows: https://ej2.syncfusion.com/vue/documentation/api/grid/#selectrows
dataBound: https://ej2.syncfusion.com/vue/documentation/api/grid/#databound
dataBound: function (args) { if(this.initialRender){ // use flag variable to select the rows on initial render alone this.initialRender = false; // get the current view records var currentViewData = this.$refs.dataGrid.ej2Instances.getCurrentViewRecords(); var selectIndexes = []; // loop the records for ( var i=0; i<currentViewData.length; i++){ // use your condition and store the index of the record in an array if(currentViewData[i]['OrderID'] % 2 == 0){ selectIndexes.push(i); } } // select the records in Grid this.$refs.dataGrid.ej2Instances.selectRows(selectIndexes); } }
|
Please find the attached sample for your reference.
Regards,
Rajapandiyan S
Hi Rajapandiyan,
I am trying this but running into issues. Our data loads AFTER the page loads, so the grid first loads and is empty, then it loads the data, then we update the checkboxes. Right now, this code only updates the LAST checkbox only. Can you figure out why all the checkboxes are not being checked?.
With a grid that has 12 data rows, I am setting all 12 of the indexes to be checked, but only the last row appears as checked.
Browser Console:
BulkUpload.vue?71e8:293 uploadPlates
BulkUpload.vue?71e8:294 (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
I must be missing something, only 1 checkbox appears and it's always the last one in the list of indexes that is provided to the method.
Hi
Camille,
Selecting the rows programmatically in the dataBound event is working fine from
our side. Please find the attached sample for reference.
To better understand the issue you're facing with the Grid, we would appreciate it if you could provide us with the following information:
Regards,
Rajapandiyan S