Kendo UI Custom Grid

DZone 's Guide to

Kendo UI Custom Grid

· Web Dev Zone ·
Free Resource

In this article I will show you how we can customize the Kendo UI grid to have custom toolbar at the top with command buttons to add, update and delete grid data.

While I was working on EXT JS some time back we used a custom grid control with checkbox column to select the rows. In that grid we had a toolbar at the top with various actions like Add, Update and Delete etc. to do CRUD operations on the grid data. When I was working in Kendo UI, I thought of creating a similar grid in Kendo UI. There is no straight way of having similar grid in Kendo UI, but with the help of Kendo templates and some JavaScript code we can implement that kind of grid in Kendo UI.

In this article I will provide the step by step details for creating custom grid. In the end we will have a grid as shown below:

Add Checkbox Column

Adding a checkbox column is very easy in Kendo UI Grid. One can use the template property of grid columns to display custom content inside columns of the grid. Kendo UI templates can be used to define HTML chunks which can be populated with data during execution.

One can add the checkbox column using the below syntax:

1. columns: [
2.     { width: 35, template: "<input name='selIIT' type='checkbox' class='grid_checkbox'/>"},
3.     …. 
4. ]

The above will add checkbox column to the grid. Now we need to track when a checkbox is checked or unchecked. We would like to highlight the grid row when a checkbox is checked and remove the highlight if the checkbox for a row is unchecked. This helps the user in identifying the rows that the user has selected for a particular action like edit or delete.

To highlight the row on click of checkbox, we will add listener to listen to checkbox click events. As there would be multiple checkboxes in grid column, we will use the class selector to add click event listener as shown below:

1. cust_grid.table.on("click", ".grid_checkbox", function() {
2.         varrow = $(this).closest("tr");
3.                 if(this.checked) {
4.                     row.addClass("k-state-selected");
5.                 } else{
6.                     row.removeClass("k-state-selected");
7.                }
8. });

Here cust_grid is name given to grid while initializing the grid. The grid_checkbox is the class name that we used while defining the checkbox template for the column. This class is searched to know if the checkbox is checked or not. Kendo UI provide set of pre defined css class that could be used to implement the consistent UI. Here we are making use of one such class called k-state-selected. We add this class to the row if checkbox is checked else we remove this class. Adding this class highlights the grid rows similar to the way the default grid selection highlights the rows.

With the above changes our grid will have a checkbox column and when we check/uncheck a checkbox, the corresponding row would be highlighted or highlight is removed.

Add custom toolbar to grid

Kendo UI provides ability to add custom/built-in commands to the grid toolbar. This can be achieved by passing an array of commands to the toolbar property of grid. But this will add command buttons with default behavior. For example, if we add ‘create’ command to the toolbar then on click of Create button the Update/Cancel buttons will not appear by default.

To add a complete custom toolbar where we have the control of each command, we need to use templates again. Here we add the custom template to toolbar property and write listeners for each button of the template.

We create a template with five buttons – ‘Add’, ‘Edit’, ‘Save’, ‘Cancel’ and ‘Delete’. These buttons will be used to handle create, update and delete operations on grid data.

The template can be defined as shown below making use of Kendo provided CSS classes to have buttons look like the default buttons provided by Kendo.

1. <script id='cust_toolbar'type='text/x-kendo-template'>
2.     <a class="k-button k-button-icontext k-grid-add k-cust-add"><span class="k-icon k-add"></span>Add</a>
3.     <a class="k-button k-button-icontext k-grid-save k-cust-save k-state-selected"><span class="k-icon k-save"></span>Save</a>
4.     <a class="k-button k-button-icontext k-grid-update k-cust-update k-state-selected"><span class="k-icon k-update"></span>Update</a>
5.     <a class="k-button k-button-icontext k-grid-cancel k-cust-cancel k-state-selected"><span class="k-icon k-cancel"></span>Cancel</a>
6.     <a class="k-button k-button-icontext k-grid-edit k-cust-edit"><span class="k-icon k-edit"></span>Edit</a>
7.     <a class="k-button k-button-icontext k-grid-delete k-cust-delete"><span class="k-icon k-delete"></span>Delete</a>
8. </script>

Here we have added our own k-cust-* class for each button. This class will enable us to define custom handlers for the click event of these buttons. The above defined template can be added to grid using toolbar option as shown below:

1. toolbar: [
2.               { template: kendo.template($("#cust_toolbar").html()) }
3.          ]

Now we have added the custom toolbar to the grid, the next is to add handlers to the buttons defined in custom toolbar. This is detailed out in next section.

Handling custom toolbar actions

Adding listeners to the custom toolbar buttons is very easy. We simply have to add handler for button click events. The only challenge here is to recognize the button that is clicked. As we have defined our own template for the toolbar so we can degine an Id or add CSS class to individual buttons added to the toolbar. In this example I have used unique CSS class names, but one can define unique ids for each button as well.

The CSS class names starting with k-cust- are added to uniquely identify the clicked button. Using this we can easily add listener for button click event as shown below for the Add button.

1. $(".k-cust-add", cust_grid.element).on("click", function(ev) {
2.     cust_grid.addRow();
3.         $(".k-cust-add").hide();
4.         $(".k-cust-save").show();
5.         $(".k-cust-cancel").show();
6.         $(".k-cust-edit").addClass("k-state-disabled").attr('disabled', 'disabled');
7.         $(".k-cust-delete").addClass("k-state-disabled").attr('disabled', 'disabled');
8. });

Here we are handling the click event of element which has CSS class k-cust-add i.e. the Add button. On the click of Add button we are invoking the addRow() method defined for the Grid by Kendo UI. This will add a blank row at the top of grid. Next part of the code above hides the Add button and replaces it with Save and Cancel buttons. Lastly we disable the Edit and Delete button as we do not want the user to take any other action on grid till the new row is either saved or cancelled.

Similarly we can add the custom handler for other buttons of the toolbar. Please refer to the sample code attached for more details on handling the other buttons.



Demo Code 

buttons, custom toolbar, grid, html & xhtml, html5, java, kendo ui, opinion, usability

Published at DZone with permission of Davinder Singla . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}