regarding angular kendo grid

[Arun]

Hi, 

 

I have few questions regarding kendo grid, i have implemented kendo grid for three nested levels, in every level it has checkboxes, i want to do if i select the parent level checkbox, it should  expand its child and all child checkboxes should also selected, is it possible in kendo-grid??
if so do you have any demo link?

i have attached the image for you understanding, but in that it has only one level, in my case i have two nested levels

Thank you

[Georgi]

Hi Arun,

Thank you very much for the details provided.

From what I understand from your question, you are currently utilizing the Kendo UI for Angular Master-Detail Grid with another Kendo UI for Angular Grid nested in the detail section and are looking for an approach that would allow you to sync the selection between the components. Please, let me know if I misinterpreted the query.

One possible approach that would allow the developer to select all rows inside the detail Grid of a specific parent row that has been selected by the user would be to utilize the built-in SelectionDirective for the two components:

• https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting

Using this approach would allow the developer to persist the selection of the parent row, notify the corresponding Grid in its detail section, and programmatically select the rows in the detail Grid by using the built-in selectedKeys property:

<category-details [category]="dataItem" [selected]="isSelected(dataItem)"></category-details>

public isSelected(item) {
    return this.mySelection.indexOf(item.CategoryID) > -1;
}

export class DetailGridComponent implements OnInit {
    ...
    public ngOnInit(): void {
    ...
    this.service.currentItems.subscribe(items => {
      this.currentGridItems = items;
      this.detailSelection = this.selected
        ? this.currentGridItems.map(i => i.ProductID)
        : [];
    });
  }

  public ngOnChanges(changes) {
    if (changes.selected && this.grid) {
      this.detailSelection = changes.selected.currentValue
        ? this.currentGridItems.map(i => i.ProductID)
        : [];
    }
  }
}

When it comes to expanding the Grid rows, I would suggest using the built-in expandRow() method inside the selectedKeysChange event handler:

public onSelectedKeysChange(e) {
    this.grid.expandRow(e[e.length - 1] - 1);
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

• https://stackblitz.com/edit/angular-as69rpep-9aocciaz

Please, keep in mind that the demo showcases an approach to achieve the desired functionality for two-level nesting but can be reused in order to implement the desired feature for three-level nesting.

I hope the provided information answers your question. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

[Arun]

But in my case, i'm getting an error stating NG8002: Can't bind to 'selectedKeys' since it isn't a known property of 'kendo-grid'

[Georgi]

Hi Arun,

Thank you very much for the clarifications provided.

Generally speaking, the selectedKeys property is exposed by the SelectionDirective:

• https://www.telerik.com/kendo-angular-ui/components/grid/api/selectiondirective#selectedkeys

This means that in order to use the selectedKeys property, the developer would need to apply the kendoGridSelectBy selector to the Grid component:

<kendo-grid
    ...
    kendoGridSelectBy
    [(selectedKeys)]="mySelection"
>
    ...
</kendo-grid>

For further reference about using the SelectionDirective, please check out the following article:

• https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting

I hope this helps. Please, let me know if I can further assist you with this case.

Regards,
Georgi
Progress Telerik