New to Kendo UI for Angular? Start a free 30-day trial

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:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

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

    constructor(private products: ProductsService, grid: GridComponent) {
        super(grid);
    }
  3. Inside OnInit, hook up to the service and assign the result to GridComponent.

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

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

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

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

Example
View Source
Edit In Stackblitz  
Change Theme: