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

Set Checkbox Column On Data Load

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.

              <ejs-grid
                  ref='dataGrid'
                  id='data-grid'
                  :dataSource="data"
                  :allowPaging="false"
                  :allowSorting="false"
                  :allowFiltering="false"
                  :allowExcelExport="false"
                  :allowMultiSorting="false"
                  :allowTextWrap="true"
                  :enableStickyHeader="true"
                  :enableAltRow="true"
                  :enableHover="true"
                  :showColumnChooser="false"
                  :allowGrouping="false"
                  :allowResizing="true"
                  :allowReordering="false"
                  :allowPdfExport="false"
                  :columns="columns">
                </ejs-grid>

      columns: [
        {type: 'checkbox', width: '50', visible: true},
        {field: 'ProcessNumber', visible: false, isPrimaryKey: true},
        {field: 'ProcessType', headerText: 'Plate Action', type: 'string', textAlign: 'Left', visible: true},
        {field: 'Country', headerText: 'Country', type: 'string', textAlign: 'Left', visible: true},
        {field: 'State', headerText: 'State', type: 'string', textAlign: 'Left', visible: true},
        {field: 'ErrorMessage', headerText: 'Message', type: 'string', textAlign: 'Left', visible: true},
      ]


How can I set the checkbox value of only some rows to be checked when the data loads?


3 Replies

RS Rajapandiyan Settu Syncfusion Team March 21, 2023 12:22 PM UTC

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


Attachment: vue_grid_select_rows_initial_render_69e24a2f.zip


CS Camille Sevigny March 22, 2023 03:24 PM UTC

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?.


              <ejs-grid
                  ref='bulkUploadGrid'
                  id='bulk-upload-grid'
                  :dataSource="uploadPlates"
                  :allowPaging="false"
                  :allowSorting="false"
                  :allowFiltering="false"
                  :allowExcelExport="false"
                  :allowMultiSorting="false"
                  :allowTextWrap="true"
                  :enableStickyHeader="true"
                  :enableAltRow="true"
                  :enableHover="true"
                  :showColumnChooser="false"
                  :allowGrouping="false"
                  :allowResizing="true"
                  :allowReordering="false"
                  :allowPdfExport="false"
                  :columns="columns"
                  :selectionSettings="selectionOptions">
                </ejs-grid>

      selectionOptions: {
        persistSelection: true,
        type: "Mutliple",
        mode: "Row",
      },
      columns: [
        {type: 'checkbox', width: '50', visible: true},
        {field: 'ProcessTypeFormatted', headerText: 'Plate Action', type: 'string', textAlign: 'Left', visible: true},
        {field: 'BulkHotListPlate.PlateNumber', headerText: 'Plate', type: 'string', textAlign: 'Left', visible: true, isPrimaryKey: true},
        {field: 'BulkHotListPlate.Country', headerText: 'Country', type: 'string', textAlign: 'Left', visible: true},
        {field: 'BulkHotListPlate.State', headerText: 'State', type: 'string', textAlign: 'Left', visible: true},
        {field: 'CmprsAlertTypeFormatted', headerText: 'CMPRS Alert Type', type: 'string', textAlign: 'Left', visible: true},
        {field: 'BulkHotListPlate.Comment', headerText: 'Comments', type: 'string', textAlign: 'Left', visible: true},
        {field: 'AddTecsAlertFormatted', headerText: 'Create Tecs Alert?', type: 'string', textAlign: 'Left', visible: true},
        {field: 'TecsAlertTypeFormatted', headerText: 'Tecs Alert Type', type: 'string', textAlign: 'Left', visible: true},
        {field: 'ErrorMessage', headerText: 'Message', type: 'string', textAlign: 'Left', visible: true},
      ],


this.$refs.bulkUploadGrid.selectRows([0,1,2,3,4,5,6,7,8,9,10]);


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.



RS Rajapandiyan Settu Syncfusion Team March 23, 2023 01:34 PM UTC

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:


  1. Complete Grid code files and package.json file.
  2. Share the video demo of the reported problem.
  3. If possible, share the issue reproducible sample or try to replicate the issue in given sample.


Regards,

Rajapandiyan S


Attachment: vue_grid_selection_dataBound_c7a1b103.zip

Loader.
Up arrow icon