Support for Ngrx

[Amit]

Hello,

I'm trying to use the angular kendo-grid with an @ngrx/store/reducer/@Effects.

Is there a sample available that does this?

 

Thanks and regards,

 

Amit

[Rosen]

Hi Amit,

In order to integrate our Grid component with ngrx, you will need to handle appropriate grid events and broadcast the correct actions. Although, we do not have a fully functional example of such integration at hand, you could check this stackblitz, where our grid component is added to the booksearch page of the ngrx official sample app in order to illustrate a possible implementation.

Regards,
Rosen
Progress Telerik

[Amit]

Hi Rosen,

Thanks very much.

Amit

[Teresa]

Anything new on this?  I am trying to us NGRX store with Kendo grid.

[Martin Bechev]

Hi Teresa,

We do not have such an integration example yet, as NgRx/store implementation along with all its reducers, effects and actions are very scenario-specific, and the specific NgRx/store implementation is not directly related to the Grid built-in functionality. 

I can outline the general workflow with respect to the built-in Grid functionality and the way it handles editing and data operations like filtering, paging, and sorting.

Basically, the Grid relies on emitting events, as Rosen mentioned, for both editing and data operations (a more detailed explanation is available in the following documentation sections):

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-template-forms/

Each time the dataStateChange event is fired, the current paging, sorting, filtering and grouping configuration is available as event data and thus the respective action can be dispatched with a payload that is the current state. Then depending on the data binding and data service and back end used, perform the necessary HTTP call (or process local data if there are no server-side data operations used) via the respective Effect and return the newly processed data that should be displayed in the Grid, to the Store.

A similar approach can be used for CRUD operations - the respective events are fired and contain the data necessary for completing the operation (data item, form group, etc.). You can dispatch the necessary actions, trigger the respective Effects, and update the Store with the latest state of the items after adding/editing/removing an item and the changes are persisted to the back-end.

Also, there is a logged feature request to our Feedback Portal regarding the integration of an NgRx + Grid with CRUD sample application. Please vote for it to help us estimate the customer demand for such implementation:

https://feedback.telerik.com/kendo-angular-ui/1413912-provide-an-example-integrating-the-grid-with-ngrx

Regards,
Martin
Progress Telerik