Grid Column Picker in Grid Toolbar

[Jason]

I have implimented a grid that allows the user to pick which columns they would like to see.  They do this via the dropdown that is on each of the column headers in the grid.  They then select or deselect the checkboxes for the columns they want to hide or show.

Instead of having this on each column dropdown (under the label columns), I would like to have a single dropdown in the Grid Toolbar that would allow for this functionality.

I have looked through the documentation but can't seem to find any references to this.

Thanks,
Jason

[Vladimir Iliev]

Hi Jason,

 
Basically this behavior is not supported out-of-the box and it will require custom solution which is out of scope of our support service. For convenience I created small jsBin demo of creating the column menu inside the toolbar template which you can use as a baseline to achieve the desired behavior. 

Regards,
Vladimir Iliev
Telerik

[K]

How do I achieve this in Kendo vue?

[Veselin Tsvetanov]

Hello,

I have answered to your question in the support ticket that you have opened on the same topic. In case you have any other questions on the Kendo UI for Vue, please post them in the Vue Forum.

Just for future reference, I am also including my answer below:

By following the Vue Templates documentation article, you could define a template to be used for the Grid Toolbar. In this specific case you will need to configure a toolbar template as the following:

<kendo-grid ref="grid" :data-source="localDataSource" :toolbar-template="toolbarTemplate">
  <kendo-grid-toolbar-item :template="toolbarTemplate"></kendo-grid-toolbar-item>
..

Then you will have to pass the Grid instance reference to the template tamplateArgs:

toolbarTemplate: function (e) {
    return {
        template: toolbarTemplate,
        templateArgs: Object.assign(e, { grid: this.$refs["grid"].kendoWidget() })
    }

The template would need an element to initialize the ColumnMenu from:

<template>
    <span>
        Hide columns:
        <div id="menu"></div>
    </span>
</template>

Which will happen in the mounted method:

export default {
  name: "template1",
  mounted: function(e) {
    var grid = this.templateArgs.grid;

    kendo.jQuery("#menu").kendoColumnMenu({
        filterable: false,
        sortable: false,
        dataSource: grid.dataSource,
        columns: grid.columns,
        owner: grid
     });
  },
  data() {
    return {
      templateArgs: {}
    };
  }
};

Here you will find a small sample implementing the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik