Grid Column Picker in Grid Toolbar

4 posts, 0 answers
  1. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 21 Oct 2013 Link to this post

    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
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2191 posts

    Posted 23 Oct 2013 Link to this post

    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!
  3. K
    K avatar
    7 posts
    Member since:
    Jul 2018

    Posted 20 Jul in reply to Vladimir Iliev Link to this post

    How do I achieve this in Kendo vue?
  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    839 posts

    Posted 23 Jul Link to this post

    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.
Back to Top