Add a Show/Hide Columns Pick List to Your Kendo Grid Toolbar

11 Feb 2016 22:30
Tags grid kendo

Back to list of posts

Overview

The Kendo Grid has a columnMenu.columns configuration option that allows you to display the list of columns in the grid and select which columns to show or hide. This is a really nice option for grids that have a lot of columns. However, I had a stakeholder for an application that didn't like how the column menu was implemented. The stakeholder wanted to have many of the columns hidden by default and to make it as clear (and visible) as possible to the users that they could show the hidden columns. The solution was to add a picklist of columns in the Kendo Grid toolbar. Since the application had several grids that required this feature, I decided to extend the Kendo Grid with a custom plugin. Here is what the column menu looks like:

Kendo_Grid_With_ColumnMenu.png

Extending the Kendo Grid

To extend the Kendo Grid (or any Kendo widget) I used the widget's extend function. There are 2 requirements to extending a Kendo widget. They are to identify the name of the plugin in the options attribute, and use the kendo.ui.plugin function to add the plugin. Here is the barebones plugin:

(function ($, kendo) {
    var ExtGrid = kendo.ui.Grid.extend({
        options: {
            name: "ExtGrid"
        }
    });
    kendo.ui.plugin(ExtGrid);
})(window.kendo.jQuery, window.kendo);

The configuration option that I added to the grid is a toolbarColumnMenu option of type boolean. When set to true, the column menu is added to the grid toolbar. Since I need the toolbar to be displayed to be able to add the column menu, I check to see if the toolbar option is defined and if not, I define it as an empty array so that a toolbar gets displayed. I added an _initToolbarColumnMenu function to the grid plugin and I call the function from the ExtGrid.init function. The _initToolbarColumnMenu function creates a Kendo Menu and adds the title of each grid column to the column menu with a checkbox in front of each title. When an item is selected in the Kendo Menu, the select event is raised. I get the column title from the selected item and then I call a function called _findColumnByTitle so that I could find the column object by it's title. If the checkbox is checked for the selected item, then the Grid.showColumn method is called. If the checkbox is not checked, then the Grid.hideColumn is called.

Here is the outline of the plugin:

(function ($, kendo) {
    var ExtGrid = kendo.ui.Grid.extend({
        options: {
            toolbarColumnMenu: false,
            name: "ExtGrid"
        },
        init: function (element, options) {
        },
        _initToolbarColumnMenu: function () {
        },
        _findColumnByTitle: function (title) {
        }
    });
    kendo.ui.plugin(ExtGrid);
})(window.kendo.jQuery, window.kendo);

Using the ExtGrid Plugin to Show the Columns Menu

To setup the Grid, I define a div for the Grid like this:

<div id="grid"></div>

Then I initialize the grid and set the toolbarColumnMenu option to true like this:

var employees = new kendo.data.DataSource({
    data: [
        { firstName: "Margaret", lastName: "Gonzalez", title: "Junior Quality Assurance Engineer", age: 35 },
        { firstName: "Kevin", lastName: "Walker", title: "Software Engineer", age: 55 },
        { firstName: "James", lastName: "Young", title: "Director", age: 46 },
        { firstName: "Thomas", lastName: "Turner", title: "Deputy Project Manager", age: 45 },
        { firstName: "Steven", lastName: "Hall", title: "Systems Engineer", age: 61 }
    ]
});
 
$("#grid").kendoExtGrid({
    dataSource: employees,
    columns: [{
      field: "firstName",
    title: "First Name"
    },{
      field: "lastName",
    title: "Last Name"
    },{
      field: "title",
    title: "Title"
    },{
      field: "age",
    title: "Age"
  }],
  toolbarColumnMenu: true
});

jsFiddle

The Kendo UI Grid Plugin with Show/Hide Columns Pick List Fiddle demonstrates the use of the Column Menu.

Downloads

kendo.web.plugins.extgrid.js


Comments: 0

Add a New Comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License