I've been reading through the tutorial on creating a Master-Detail grid for Angular 4/5 and so far have been able to construct a working mock-up in VS Code without any significant roadblocks.
My current question: is it possible to retrofit the Master-Detail grid for API data received by JSON? If so what approach would you recommend - building the GridDataResult data input array within the component hosting the grid (such as is done with the programming in the grid edit examples) or is there a kendo-data-query module similar to toODataString that I can use to similar ends in northwind.services.ts under fetch and in the queries?
Eventually I'd like to incorporate full CRUD capabilities with most layers and for that reason I'm hoping to keep the read operation in the same API format as the edit, update, and delete.
12 Answers, 1 is accepted
The Grid loads data that is represented in JSON format. The [data] property is used to pass the actual data (of type array or GridDataResult) to the Grid. The following article describes in detail the binding options for the Grid:
https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/data-binding/
The master detail grid loads data in the same way. If we want to implement a detail row we need to use the DetailTemplateDirective with which we can place any information in the detail row.
CRUD operations can be performed when the Grid is in edit state. More information and examples about this functionality can be found at the following page from our documentation:
https://www.telerik.com/kendo-angular-ui/components/grid/editing/
Please let me know in case I am missing something. Thank you.
Regards,
Svetlin
Progress Telerik
Rank 1
Iron
Iron
Iron
Svetlin,
I made some progress yesterday, let me know if the below helps.
I'm currently able to get the Master-detail grid to populate data with components and services configured as attached however the complete list of products will show up for each heading. I'm trying to figure out how I'd approach passing my productService.read() to my @Input public category in category-details.component. Let me know if that can be done or whether I'd need to model product.services to pass BehaviorSubject<GridDataResult>.
Rank 1
Iron
Iron
Iron
The attached illustrates my earlier concern and why I reached out on this early.
With the attached updates I've been able to send [category] as dataItem.CategoryId out to an http.get by id in my product.service. If I open the first line of the top level grid with id=1 I'll get all of the products that should match, however when I open id=2 I'll have items for id=2 populate in both header lines 1 and 2 where 1 is supposed to stay the same. Is the data for previous calls supposed to cache somewhere or do I need a live API instance for each of the categories I open?
Rank 1
Iron
Iron
Iron
It looks like I found what I needed after all. Instead of filtering in the service I placed this in my ngOnInit for category-details.component.ts. Hopefully this might be helpful for anyone trying to figure out how to allocate the child grid data in their projects if they decide to go to the JSON route:
this.view = this.productService.map(data => process(data.filter(<IProduct>(x) => x.categoryID == this.category), this.gridState));
Also I did have to change the extended BehaviorSubject in my ProductService from <any[]> to <IProduct[]> to access the categoryID property.
I am glad that you managed to move forward.
Indeed, the process method can be used to apply any specified operation descriptors to the data.
Please let me know in case you need further assistance for this case.
Regards,
Svetlin
Progress Telerik
Rank 1
Hi Ron,
Did you figure it out? I got same issues with yours, could you post solution if you figure it out.
Rank 1
Iron
Iron
Iron
Tianze,
See attached.
Rank 1
Rank 1
Iron
Iron
Iron
Tianze,
Correct. This didn't need any special modifications in the services.
Rank 1
Thanks for posting the sample code on how to implement master-detail grid using data returned by API controller.
I have both master and detail grids working fine. When I click on page 1, 2, 3, master and detail grids show correct data, except the page number of the master grid keeps showing page '1' selected and the <kendo-pager-info> shows same info as if page '1' was selected. Have you got this error on your app?
Rank 1
Iron
Iron
Iron
Chau, I do see something right away. There should be a [skip] directive (if that's the right term) that should be in your <kendo-grid> tag.
Per your setup try phrasing it this way and see if it helps:
[skip]="state.skip"
Rank 1
That [skip] property solved my issue.
Thank you, Ron!