Master Detail Grid with WebAPI

[Sathya]

Can someone post a detailed example of Master Detail Grid connecting to a WebAPI?

[Sathya]

Is the below format allowed in creating a hierarchy grid rather than creating a Detail component?

<kendo-grid
          [data]="gridData"
          [pageSize]="5"
          [skip]="5"
          [sortable]="true"
          [sort]="sort"
          [pageable]="true"
          [height]="550">
        <kendo-grid-column field="CategoryID" width="100"></kendo-grid-column>
        <kendo-grid-column field="CategoryName" width="200" title="Category Name"></kendo-grid-column>
        <kendo-grid-column field="Description" [sortable]="false">
        </kendo-grid-column>
        <div *kendoGridDetailTemplate="let dataItem">
<kendo-grid
          [data]="detailGridData"
          [pageSize]="5"
          [skip]="skip"
          [pageable]="true"
          [scrollable]="'none'">
      <kendo-grid-column field="ProductID" title="Product ID" width="120">
      </kendo-grid-column>
      <kendo-grid-column field="ProductName" title="Product Name">
      </kendo-grid-column>
      <kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:c}">
      </kendo-grid-column>
      </kendo-grid>
        </div>
      </kendo-grid>

[Sathya]

Can some one please respond or is there another forum to post this question?

[Dimiter Topalov]

Hello Sathya,

You can use the Kendo Grid component directly in the detail row template (as shown in the markup from the provided code snippet) and it does not need to be wrapped in an additional custom component.

We do not have an example of a Master-Detail scenario where the data is retrieved from a WebAPI, but the mechanics is the same as in our Master-Detail examples:

https://www.telerik.com/kendo-angular-ui/components/grid/advanced-features/hierarchy/

The Grids (both master and detail) are agnostic of where their data comes from. Typically in such hierarchy grids scenarios, it makes sense the Detail Grid data to be somehow related to the data item, associated with the master grid row, this is why you can either use some property of the data item (available in the detail row template) to perform a remote request and retrieve the data for the detail grid based on the value, coming from the respective master grid item, or if the data is already available on the master grid item (for example master grid lists categories, each category has several products - the data items of the master grid have a property "products" and its value is an array of product objects) - then the detail grid "data" property can be directly bound to this products array, for example:

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

I hope this helps.

On a side note, the selected forum is correct, however the response time for forum threads is 48 hours, while for regular support threads (tickets) it is 24h or 72h depending on the license and support plan.

Regards,
Dimiter Topalov
Progress Telerik

[Sathya]

In the above scenario, can we extract the below snippet into a component by itself?

<ng-template kendoGridDetailTemplate let-dataItem>
<kendo-grid [data]="dataItem.products"></kendo-grid>
</ng-template>

 

[Dimiter Topalov]

Hi Sathya,

There's currently no official recommendation on how to share a template across multiple components. The reason is that templates are bound to the context in which they are declared. They're not free to move around as we'd like them to be - see this issue. We're monitoring developments in the framework for improvements in this regard.

The recommended approach is to wrap the entire Grid in a custom component for reuse and pass objects, available in the detail template as inputs, e.g.:

https://www.telerik.com/kendo-angular-ui/components/grid/advanced-features/hierarchy/

The Grid used in the detail template is wrapped in a custom component that takes the data item of the master grid row as input and performs the necessary logic for obtaining the data items for the specific grid, based on the incoming data item.

Regards,
Dimiter Topalov
Progress Telerik

[Sathya]

Thank you for the detailed reply.

I am still trying to understand the features of the Grid, hence can you please help me in recreating the below sample example with a detail component? My backend is going to be WebAPI. Thank you in advance.

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

 

[Dimiter Topalov]

Hi Sathya,

Regardless of the specific backend, the general idea and workflow behind the discussed approach is to create a custom component that will wrap the Grid as per the linked documentation demo - check the category-details.component.ts file:

import { Component, ViewChild, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { GridDataResult, GridComponent, PageChangeEvent } from '@progress/kendo-angular-grid';

import { ProductsService } from './northwind.service';

@Component({
    selector: 'category-details',
    providers: [ProductsService],
    template: `
      <kendo-grid
          [data]="view | async"
          [loading]="view.loading"
          [pageSize]="5"
          [skip]="skip"
          [pageable]="true"
          [scrollable]="'none'"
          (pageChange)="pageChange($event)"
        >
      <kendo-grid-column field="ProductID" title="Product ID" width="120">
      </kendo-grid-column>
      <kendo-grid-column field="ProductName" title="Product Name">
      </kendo-grid-column>
      <kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:c}">
      </kendo-grid-column>
      </kendo-grid>
  `
})
export class CategoryDetailComponent implements OnInit {

    /**
     * The category for which details are displayed
     */
    @Input() public category: Object;

    public view: Observable<GridDataResult>;
    public skip = 0;

    constructor(private service: ProductsService) { }

    public ngOnInit(): void {
        this.view = this.service;

        /*load products for the given category*/
        this.service.queryForCategory(this.category, { skip: this.skip, take: 5 });
    }

    public pageChange({ skip, take }: PageChangeEvent): void {
        this.skip = skip;
        this.service.queryForCategory(this.category, { skip, take });
    }
}

It takes the specific Category the products should be loaded for (as data for the detail grid), as an Input() from the Master grid component:

<div *kendoGridDetailTemplate="let dataItem">
            <category-details [category]="dataItem"></category-details>
        </div>

The exact implementation will depend on the specifics of your data - whether each master Grid item contains the items for the detail grid like in the stackblitz demo with local data:

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

... or whether the data items for the detail grid need to be fetched from the server, based on some property of the master grid data item (for example CategoryID) like in the documentation example:

@Injectable()
export class ProductsService extends NorthwindService {
    constructor(http: HttpClient) { super(http, 'Products'); }

    public queryForCategory({ CategoryID }: { CategoryID: number }, state?: any): void {
        this.query(Object.assign({}, state, {
            filter: {
                filters: [{
                    field: 'CategoryID', operator: 'eq', value: CategoryID
                }],
                logic: 'and'
            }
        }));
    }

Here is another master-detail grid example that uses a sample online REST service - JSON Placeholder:

https://stackblitz.com/edit/angular-vm6qpa?file=app%2Fcategory-details.component.ts

We do not have a similar example using WebAPI, but the same principles will apply regardless of the server technology - the master grid consumes an Angular data service that makes the respective HTTP request to obtain the list of the master Grid data items. Each of these items either has a property that contains an array of data items for the detail grid, or a foreign key identifier (in the example above - the user id is passed to the component, used in the detail template) that allows for performing another HTTP request to obtain all items, required for the detail grid.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Sathya]

Thank you again Dimiter for the detailed reply. That worked like a charm.

 

Thank you,

Sathya