Creating a Reusable and Custom directive with Kendo UI for Angular Data Grid
Kendo UI for Angular data grid is a widely used component that hosts functionalities such as paging, sorting, filtering, editing, and grouping to row and column virtualization, exporting to PDF and Excel, and accessibility support. In this example, I’m going to demonstrate a basic scenario where I use the kendo data binding directive to create a custom and reusable directive which can be used throughout your angular application.
In this tutorial, we are only going to focus on creating a reusable directive and not going to worry too much about the module organization and the structure of the project. There are multiple examples where you can find various project structures that include shared module, kendo module, and re-export functionality which eventually leads to a more robust and easy to use project structure for angular.
As a first step lets create a sample angular application. We can use the Angular CLI to create our application.
ng new kendo-sample
Kendo UI has provided us with multiple directives which we can easily utilize as a base class for our custom directive. In my tutorial my objective is to create a server bind grid, where the functionalities such as paginating, filtration, etc depend purely on the back end, the angular application mediates the necessary query params to the backend through the means of a rest API endpoint.
The first thing we need to do is create a custom directive that we will be using to implement the grid functionality. We can make use of the angular CLI to create this directive.
ng g d kendo-custom-data-binding
After this step, we need to extend the directive from kendo’s DataBindingDirective class which has the grid component injected into it.
After configuring the constructor to match the parent class we have to implement the rebind method. Its the place where the actual data binding takes place. I have defined a generic function which is used as an input to this component. This function will help us to use this directive throughout our project, the actual view or container component which hosts the kendo grid is responsible for providing the directive with the input function, and the directive is only responsible for using whatever the input function provided and retrieve the data from the API.
If we take a look at the app.component.html, where the kendo grid component is used we need to add the custom directive which we just created to the grid component and the input function as well.
For this example, I have used this app component as a view/Container type component which can be either dumb or smart when it comes to a real-world scenario. The LoadData function is declared as a lambda function that takes an argument of params and returns a promise which actually a mock of the data-service layer, which contains details about the customers.
By using the lambda function we are biding the execution context of that specific function to this component so it is executed in the correct scope.
The params object can contain the inputs which can be used as a means of querying the data. The custom directive can be used as a means of delegating the responsibility of calling the data-service and formating the incoming data if your project requires a specific format for the grid data. Also, this method can be easily integrated with custom filter functionality which can be reused as well.
This is just a basic implementation of the kendo data-bind directive, the functionalities it provides are seamless and it is easy to use as well.
