Last Updated: 07 Jul 2021 11:07 by ADMIN
Created on: 05 Jun 2021 04:46
Category: Grid
Type: Feature Request
Column Selector in Toolbar

It will be great if we can have a very simple "out-of-the-box" way to add a Column Chooser in the toolbar, similar to the Search Feature.

Something like Syncfusion's column chooser here:

This will help me significantly in my development effort and provide a much better experience for my paying customers.

I have hundreds of grid tables with different schemas, columns with MinScreenWidth, and hidden columns (depending on the availability of data).

On a page, it can have multiple grid tables that are dynamically generated.

I also use View Component to generate each grid table.

The current column menu isn't perfect because I want it to only act as a filter checkbox, not a menu where a user needs to click twice to access the filtering feature. (And my users need to use the filtering mechanism A LOT)



1 comment
Posted on: 11 Jun 2021 15:46

Hello Luke,

Thank you for your feedback.

I have upvoted this Feature Request on your behalf. As we actively monitor the community interest in requested features to determine which to implement in the future.

Currently we have a Knowledge Base article that showcases how to create an external columns menu with checkbox functionality outside to the Kendo UI Grid. As workaround I suggest the following approach that is based on the article above and utilizes the Grid's showColumn and hideColumn methods.

  1. Add a div container with id="columnChooser"
  2. Make sure the Grid is initialized and get its data.
  3. Get the Grid's columns and the number of columns in 2 global variables
  4. Iterate over the columns and for each column append a checkbox input to the columnChooser container
  5. Subscribe to the input event of the checkboxes
  6. In the handler if the checkbox is checked show the Grid's column and increase the numOfColumns counter
  7. If the checkbox is unchecked, make sure the numOfColumns  counter is bigger than 1 (not to remove all the columns) 
  8. Only if the number of columns is bigger than 1, remove the column and decrease the numOfColumns
    $(document).ready(function () {
            var grid = $("#grid").data("kendoGrid");
            var columnValues = grid.columns;
            var numOfColumns = grid.columns.length; 
            columnValues.forEach(column => {
                $("#columnChooser").append(`<span class='${column.field} p-2'></span>`)
                $(`.${column.field}`).append(`<label for="${column.field}">${column.title}</label>`)
                $(`.${column.field}`).append(`<input id="${column.field}" type="checkbox" checked=true>`)
                $(`#${column.field}`).on("input", function (e) {                
                        if ($(`#${e.currentTarget.id}`).prop("checked")) {
                        } else {
                            if (numOfColumns > 1) {
                            } else {
                                $(`#${e.currentTarget.id}`).prop("checked", true)

I hope the above is helpful in the current scenario. Please don't hesitate to contact me, should additional questions occur.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files: