Checkbox cascading selection in grid while grouping

[Ronak]

Hello,
Type of project: Angular
I enabled the checkbox selection to the grid and also enabled the filtration and grouping over the grid.
1. The checkbox is not enabled for the grouped field. I want to simulate if the user select the checkbox of the group then all the underneath checkbox of that group got selected automatically.
2. How to achieve multiple selections like excel using Shift button and do multiple row selection by just Selecting stat and end record.
Thanks.

[admin]

Hi Ronak,
Tree Grid mode of the Grid supports this: https://www.htmlelements.com/angular/demos/grid/tree-grid-checkbox/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

HI Ronak,
1. The default SmartGrid doesn’t support the functionality you need, but the Tree Grid has the exact functionality as described by you.
Please, take a look at this demo: https://www.htmlelements.com/angular/demos/grid/tree-grid-checkbox/
2. For this inquiry you can set the ‘selection’ property and its mode to extended like so:
//In your app.components.ts file for example

selection = {
  enabled: true,
  allowCellSelection: true,
  mode: 'extended',
}

//in your app.component.html file:

<smart-grid #grid id="grid" [behavior]="behavior" [selection]="selection" [checkBoxes]="checkBoxes"
    [dataSource]="dataSource" [columns]="columns" [filtering]="filtering"  [editing]="editing" >
</smart-grid>

Also you can check out this demo regarding the selection: https://www.htmlelements.com/angular/demos/grid/selection-mode-row/
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Ronak]

Thank You @Yavor Dashev and @Admin
I already thought about using the Tree grid. But in my case, I don’t have a parent-child relationship in data. Basically, it’s based on the user to group on the desired fields and it should be multiple fields too. So I think the tree grid won’t work in that case.
Even I try normal checkbox for the grid as below
this.grid.selection = {
enabled: true,
action: ‘click’,
checkBoxes: {
enabled: true,
autoShow: true
}
}
It enables the checkbox but I’m not able to get the checked data. I tried the below code as per the doc but don’t know why it returns the checked false every time.
const result = this.grid.rows.map((x: GridRow) => {
console.log(x.checked);
return x.checked = true;
});
So can you help me with this too? How to get checked items from the grid and any alternative way I can enable this check box selection manually. Like any method from where did I get something selected group data and I did set the checkbox checked property to true using the code.
Any suggestion will help to make it work.  I referred to this link https://www.htmlelements.com/docs/grid-selection/#checkbox for selection things.
Thank You,
Waiting for your quick response.</div>

[yavordashew]

Hi Ronak,
Well as stated from our previous reply the exact functionality that you need is supported by the TreeGrid and when applying this functionality to non TreeGrid it will be normal to have some compromises.
IF you want to get the checked rows/data/ just use the getSelection method of the SmartGrid like so:

  const result = this.grid.getSelection();
   console.log(result)

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts