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.

1. Subclass the DataBindingDirective directive to reuse the state persistence.

   Copy Code@Directive({
       selector: '[productsBinding]'
   })
   export class ProductsBindingDirective extends DataBindingDirective {
       constructor(public grid: GridComponent) {
           super(grid);
       }
   }
   

2. 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.

   Copy Codeconstructor(private products: ProductsService, grid: GridComponent) {
       super(grid);
   }

3. Inside OnInit, hook up to the service and assign the result to GridComponent.

   Copy Codepublic 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();
   }

4. 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.

   Copy Codepublic rebind(): void {
       this.grid.loading = true; // optionally show loading indicator
   
       this.products.query(this.state);
   }

5. Now you can use the custom directive on the Grid instance in AppComponent.

   Copy Code   <kendo-grid
           productsBinding
           [pageSize]="10"
           [pageable]="true"
           [sortable]="true">
       </kendo-grid>

The following example demonstrates the custom data binding directive in action.

Suggested Links

• DataBindingDirective
• Overview of Data Binding
• API Reference of the GridComponent
• API Index of the Grid