Master Detail Grid with ChangeDetectionStrategy.OnPush

[Ron]

Quick question for OnPush strategy, any recommendations on how I can hook clicks on the hierarchy cells? Everything else seems to work pretty well but I noticed the hierarchy cells aren't traditional buttons.

 

Thank you!

[Dimiter Topalov]

Hello Ron,

The built-in Grid behavior is to fire the detailCollapse and detailExpand events when a Grid master row is expanded/collapsed (when the hierarchy cell icons are clicked):

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-detailcollapse

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

If you need to hook a custom click event handler to the whole hierarchy cell, as opposed to the actual expand/collapse icons, the most straight-forward and generic JavaScript approach would be to handle the Grid host click event, and check for the event target in the handler, then proceed accordingly, if it is a hierarchy cell, e.g.:

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter,

Thank you - that did actually get me the first step of the way. I was able to insert some functions in the top of the kendo-grid and call my changeDetector.detectChanges() from there.

A couple things I noticed - I needed to wrap both my detect changes call in the parent and then the one from the child (to show the grid lines rather than empty) with setTimeouts of 50 and 100 ms. I was wondering if there are any additional hooks that I need to know about in each of these levels? Also the child grid has an in-cell edit which I noticed is similarly slippery to grab, ie. I can do something similar with a setTimeout on cellCloseHandler and that still often returns a 0 value even after a value's been registered.

[Dimiter Topalov]

Hi Ron,

Typically wrapping the logic in a setTimeout is necessary when some DOM accessing/manipulation is required to ensure that the latest changes are reflected in the DOM, and setting the exact timeouts is not ideal as they may vary.

In most cases just wrapping the logic in a setTimeout so that it is run in the next Angular Change Detection cycle, is enough, but this varies drastically depending on the specifics of the scenario.

When delaying the execution of some code is necessary not only to ensure the latest DOM is rendered, but is also related to some asynchronous data retrieval, the most suitable spot/hook for executing the custom logic is in the pipeline and/or subscription callback of the observable (if data is retrieved via observables), or in the "then" callback of the Promise (when data is available) if data is retrieved via promises.

There are no Grid or Kendo UI for Angular - specific hooks or events that seem relevant to described scenario, barring the mentioned detailExpand/detailCollapse events, and the cellClose handler related to Grid editing.

In general, analyzing and debugging custom implementations not directly related to the built-in Kendo UI for Angular components' functionality, fall outside of the scope of our support service, but if you send us an isolated runnable project similar to our online demos where the issues you are facing can be observed, we can take a look and try to provide a suggestion that is best suitable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik