This is a migrated thread and some comments may be shown as answers.

How to load Client detail Template from parent row data

3 Answers 997 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Beheer asked on 15 Oct 2017, 02:55 PM

example.zip

Hi,

I have a grid with a detail template that contain a child grid.

I receive upfront data for main and child grids.

Foreach grid I need to have an inline ajax create and foreach row an inline ajax edit.

- After some research I follow the approach suggested on http://www.telerik.com/forums/grid-bind-a-clientdetailtemplate-to-a-collection-in-parent-row.

On DetailInit it populates right the data for the child, but after kendo hits "endRequest" event... delete entirely the data populated on detailInit.

- I follow this post: http://www.telerik.com/forums/clienttemplate-loaded-from-collection-in-parent-row---prevent-request.

but the add and edit features break with this approach.

In an Ideal scenario I want a grid and child grids binded upfront from the model. and be able to add or edit in an ajax way.

How can I solve this issue?

3 Answers, 1 is accepted

answered on 18 Oct 2017, 06:11 AM

Hello Beheer,

Based on your post, I believe that the approach outlined in the "Edit Hierarchical Grids in Incell Mode" and the "Edit Three-Level Hierarchical Grids" articles will help you in achieving the desired result.

I hope this helps.

Regards,
Preslav
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 18 Oct 2017, 07:44 AM

Hi, All above examples rely on Ajax read for the child grid. And that's what I want to avoid in first place.

In summary any example with a custom bind that only from existing model and make ajax modifications would be greatly appreciated.

The above examples work up to a certain point but fails on this scenario: When I update a child row, I need to update the price column of the parent row. Updating this parent grid will trigger a set of events... all the grid will be redraw, the detail rows automatically collapse. I try to force the to expand them again. They are populated on detailinit but then kendo force the read Action for the child grid (API I am using don't expose a service for this). since I am not setting read. after a couple seconds I receive a dummy onEndResponse event of type Read with url set to "". And after this event the populated grid data is destroyed on databinding event that follow the onEndResponse.

answered on 19 Oct 2017, 08:47 AM

Hello Beheer,

To make the child rows expand after the Grid rebinds, I would suggest using an approach similar to the one outlined in the "Show and Hide Detail Rows Based on Master Row Value" article.

https://docs.telerik.com/kendo-ui/knowledge-base/disable-detail-rows-with-checkboxes

In the above article check how the detailExpand and detailCollapse events are handled to save the required rows in a global array. After that in the dataBound event, these rows are expanded.

Additionally, you might be interested in checking the "Persist Expanded Rows after Refresh" article:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/state/persist-expanded-rows

Please, check the above resources and let me know if I can assist you with any further information.

Regards,
Preslav
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.