Data-Binding Directives
The DataBindingDirective directive simplifies the handling of data operations by cutting down the repetitive boilerplate code.
Getting Started
Generally, the data operations of the Grid rely on emitting events, such as pageChange, filterChange, groupChange, and others. The events contain information about the manipulations you need to apply on the data collection to which the Grid is bound. As a result, the Grid is able to reflect the current filter, page, grouping, and other states. The dataStateChange event combines all these separate events and fires after each of them to allow you to manipulate the data in a single instead of many event handlers.
Both built-in and automatic binding directives encapsulate the logic for handling the dataStateChange
event and the respective data manipulations. Practically, the directives make the component code cleaner, shorter, and more concise because they contain extracted data-operation logic.
The Kendo UI Grid for Angular enables you to handle its binding to data either by:
- Using the built-in
DataBindingDirective
which binds the Grid to local data, or - Implementing a custom directive which binds the Grid to remote data.
Whether you use the built-in directive or implement custom directives, you can either:
- Manually handle the Grid
dataStateChange
event and perform the necessary data manipulations or remote service calls based on the incoming state, or - Encapsulate this logic in a separate data-binding directive.
Built-In Directive
The built-in DataBindingDirective
:
- Is applicable to local data only.
- Encapsulates the logic that is required to handle the dataStateChange event.
- Manages the state persistence of the Grid.
- Enables you to utilize the appropriate in-memory data operations (paging, sorting, and grouping) by applying the kendo-data-query/process approach to the provided data.
To successfully configure the directive for data operations, supply an Array
instance. You also have to enable the desired Grid operations such as paging, sorting, and grouping.
Custom Directives
The custom data-binding directives are suitable for scenarios which involve remote data services and server-side data operations.
By default, the Grid is agnostic as to how and when the data object that it is bound to gets updated, and does not trigger an event to indicate that it received the changed data from the server. To override the default behavior, either:
- Use the service which handles the retrieval of the data and the
Observable
pipeline to toggle the"isLoading"
state, or - If you use a different mechanism for retrieving the data, hide the spinner the moment before you assign the data field.
To implement a custom directive by using a custom service, apply the approach for encapsulating the state handling and data processing.
Subclass the
DataBindingDirective
directive to reuse the state persistence.@Directive({ selector: '[productsBinding]' }) export class ProductsBindingDirective extends DataBindingDirective { constructor(public grid: GridComponent) { super(grid); } }
Use the DI to provide the instance of the
ProductSerivce
that will fetch the data. The instance will also be utilized to provide support for the server paging and sorting operations.constructor(private products: ProductsService, grid: GridComponent) { super(grid); }
Inside
OnInit
, hook up to the service and assign the result toGridComponent
.public ngOnInit(): void { this.serviceSubscription = this.products.subscribe((result) => { this.grid.loading = false; // hide the loading indicator this.grid.data = result; this.notifyDataChange(); // notify the grid that its data has changed }); super.ngOnInit(); // do not forget to call the base implementation this.rebind(); }
When the data is needed, the base implementation calls the
rebind
method demonstrated in the previous example. To call the service that passes the state of the Grid, you have to use this approach.public rebind(): void { this.grid.loading = true; // optionally show loading indicator this.products.query(this.state); }
Now you can use the custom directive on the Grid instance in
AppComponent
.<kendo-grid productsBinding [pageSize]="10" [pageable]="true" [sortable]="true"> </kendo-grid>
The following example demonstrates the custom data binding directive in action.