Expanding Detail Row Template programmatically

[Ron]

Is it possible to open all detail lines in the Detail Row Template on grid creation? I've seen it mentioned that the Master Detail Grid could implement the  expandRow() API but I also see that the Detail Row grid variant (at least in the example) doesn't make use of GridComponent. Can GridComponent be hooked in to make use of this feature or would I need to try implementing this from a different angle?

[Dimiter Topalov]

Hi Ron,

You are correct - to expand all Grid rows after initialization (and otherwise expand or collapse Master Grid rows programmatically), you need to obtain a reference to the Grid component (for example via ViewChild) and call its expandRow() and collapseRow() methods.

Same goes for all Detail Grids, assuming they have detail templates too. Instances of multiple Detail grids can be obtained via ViewChildren, or in their respective wrapper components (if the detail grids are wrapped in another component like in our Master-Detail Grids example), depending on the specific implementation.

Here is a sample implementation of the described approach:

https://plnkr.co/edit/HaCEdMYUtAj4RlpebQnj?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

TY for the quick response on this! Also interesting to know that the GridComponent can self-reference as a child, I wouldn't have thought to try that.

[Ron]

Thank you for the quick response on that! Also interesting to see that the GridComponent can self-reference in ViewChild, I wouldn't have thought to take that approach.

[Geethika]

Hi,

I need to implement API call for detailExpand($event) in kendoGridDetailTemplate

I added this event (detailExpand)="onExpand($event)" to the grid.

The below is my detailTemplate.

<ng-template kendoGridDetailTemplate let-dataItem="batchAggregates" let-rowIndex="rowIndex" >
          <section>

            <p>{{dataItem.batchId}}</> //here I get this as undefined.

            <p>DataItem: {{batchAggregates.batchId}}</p> //I get the batchId. but not specific to rowIndex.
            <p><strong>Total Payout:</strong> {{rowIndex - dataItem?.totalPayout}}</p>
          </section>
        </ng-template>

 

 

The below is my api call

 public onExpand(e): void {
        console.log(e, 'e');
        const detailBatchId: number = e.dataItem.batchId;
 this.loading = true;
        this.commissionService.getBatchAggregates(batchId).subscribe(success => {
            this.batchAggregates = success.model;
            console.log(success.model);
            this.loading = false;
        }, error => {
            this.toastr.error('Error retreiving Batch Aggregates.');
            this.loading = false;
        });
    }

When I expand 1st row all the other detail rows displays the same value.

Here I am not sure how to bind the result to GridDetailTemplate based on expanded RowIndex

[Geethika]

I found workaround for this.

[Sravan]

Hey Geethika,

You have mentioned that you found some turn around for that problem.

Can you please post that solution.

Thanks

[Sravan]

I am also having the same issue.

Can someone provide me a solution?

 

Thanks

 

[Martin]

Hi Sravan,

The Grid provides a built-in directive that allows the developer to control the expanded state of a master-detail row.

Please check the following article for more details:

https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/expanded-state/

Regards,
Martin
Progress Telerik

[Sravan]

Hello Martin,

How to collapse all the other detail rows when one detail row is expanded.

Can you provide a sample solution for the above.

 

Thanks

[Dimiter Topalov]

Hi Sravan,

The developer can handle the expandedDetailKeysChange event that exposes the array of the currently expanded keys as event data, and set the array of expanded keys the Grid is bound to manually, based on the desired outcome, for example:

https://stackblitz.com/edit/angular-xad3hz?file=app/app.component.ts

In the example above when the length of the array of selected keys incoming in the event handler is 0 or 1, this array is directly set as the expanded keys value. When the length is greater than 1 (a second item is expanded when there is one already expanded) - then we set the expanded keys to an array containing this second item only.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Sravan]

Hey Dimiter,

In my case the  (detailExpand)="onExpand($event)" is getting triggered but when I replace that with this event (expandedDetailKeysChange)="onExpandedDetailKeysChange($event)" the onExpandedDetailKeysChange method is not getting triggered.

The grid declaration is:

 

  <kendo-grid #appLog [data]="cpriceAppLogGridData" [height]="400"
                              [resizable]="true"
                                [pageSize]="50"
                                [pageable]="true"
                                filterable="menu"
                                [sortable]="true"
                                 [sort]="appLogSort"
                                [filter]="appLogState.filter"
                                [skip]="appLogState.skip"
                                (sortChange)="AppLogSortChange($event)"
                                (dataStateChange)="AppLogDataStateChange($event)"
                                (detailExpand)="onExpand($event)"
                                [expandedDetailKeys]="expandedDetailKeys"                                
                               >

Thanks

[Martin]

Hi Sravan,

Thank you for the provided code snippet.

The issue might be caused by an outdated Kendo Grid version:

https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

Please update the package and ensure that the latest version is in use:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/

Regards,
Martin
Progress Telerik

[Dimiter Topalov]

Hello Sravan,

The Grid expand directive and all API associated with it was introduced in version 4.7.0 of the Grid package:

https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/expanded-state/

https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

Please make sure that you are using a version in which the expandedDetailKeys event is available, and also that the directive and all associated inputs and events are setup properly like in the example provided in my previous response, e.g.:

<kendo-grid
            ...
            [kendoGridExpandDetailsBy]="expandDetailsBy"
            [expandedDetailKeys]="expandedDetailKeys"
            (expandedDetailKeysChange)="onExpandedDetailKeysChange($event)"
        >

...

    public expandedDetailKeys: any[] = [1];

    public onExpandedDetailKeysChange(e) {
      this.expandedDetailKeys = e.length > 1 ? [e[1]] : e;
    }

Regards,
Dimiter Topalov
Progress Telerik

[Sravan]

Hello Martin,

Updating my grid version resolved the issue.

 

Thanks

Sravan

[Mark]

example not working.

I have same code. row is not expanding. any idea?

[Martin]

Hi Mark,

Please check the used Grid version, and ensure that is at least 4.7.0:

https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

In case an older version is used, please consider updating the package, following the steps described here:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/

Regards,
Martin
Progress Telerik