How to implement select all/deselect all checkbox in column header in Bryntum grid ?

[abisht]

How to implement select all/ deselect all checkbox in column header in Bryntum grid ?

Bryntum Version:- 3.0.3
Angular 8

[mats]

It's documented here: https://bryntum.com/docs/scheduler/#Grid/view/mixin/GridSelection#config-selectionMode

[abisht]

Hi Mats,

I have added the following config :

selectionMode: {
    rowCheckboxSelection: true,
    showCheckAll: true,
    checkbox: true,
    multiSelect: true
  },

But it didn't add any checkbox in column header.

[mats]

Please provide test case. You can edit this demo and see it working: https://bryntum.com/examples/grid/columntypes/

[abisht]

Hi Mats,

We already have one checkbox selection column as the first column for selecting a particular row:-

columns: any[] = [{
      type: 'check',
      field: 'isSelected',
      resizable: false,
      width: 10,
      listeners: {
        toggle: ({ record, checked }) => {
          this.sendData(record.data, checked);
        }
      },
      tooltipRenderer: false,
      enableCellContextMenu: false
    }];

How we can add a selectAll/ Deselect all header in this part of the column? It will be a great help.

Regards

[pmiklashevich]

Please see selectionMode config. No need to specify the checkbox column explicitly.

const scheduler = new Scheduler({
    selectionMode : {
        rowCheckboxSelection : true,
        showCheckAll : true
    },

There is also showCheckAll config on the Check column, but it doesn't work at the moment. Ticket here:
https://github.com/bryntum/support/issues/2153