This is a migrated thread and some comments may be shown as answers.
Grid Column Picker in Grid Toolbar
3 Answers 89 Views
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 21 Oct 2013, 08:19 PM
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

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 23 Oct 2013, 02:21 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
K
Top achievements
Rank 1
answered on 21 Jul 2018, 12:07 AM
How do I achieve this in Kendo vue?
0
Veselin Tsvetanov
Telerik team
answered on 23 Jul 2018, 02:28 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
K
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or