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

Support for Ngrx

4 Answers 133 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Amit
Top achievements
Rank 1
Amit asked on 26 Apr 2018, 01:55 PM

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

4 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 27 Apr 2018, 12:53 PM
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
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.
0
Amit
Top achievements
Rank 1
answered on 27 Apr 2018, 01:25 PM

Hi Rosen,

Thanks very much.

Amit

0
Teresa
Top achievements
Rank 2
answered on 25 Feb 2021, 04:36 AM
Anything new on this?  I am trying to us NGRX store with Kendo grid.
0
Martin
Telerik team
answered on 26 Feb 2021, 11:07 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Amit
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Amit
Top achievements
Rank 1
Teresa
Top achievements
Rank 2
Martin
Telerik team
Share this question
or