JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Checkbox cascading selection in grid while grouping

This topic contains 4 replies, has 3 voices, and was last updated by Avatar Yavor Dashev 2 months, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #101926
    Avatar
    Ronak
    Participant

    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.

    #101927
    Avatar
    admin
    Keymaster

    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/

    #101928
    Avatar
    Yavor Dashev
    Participant

    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/

    #101929
    Avatar
    Ronak
    Participant

    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>

    #101932
    Avatar
    Yavor Dashev
    Participant

    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/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.