Automatically hide a column when a user drags it up to be a group header

8 posts, 0 answers
  1. Ian
    Ian avatar
    26 posts
    Member since:
    Jun 2012

    Posted 28 Oct 2013 Link to this post

    Hi :)

    I've searched the forum for an answer to this question and so far can't find an answer.
    A perfect example of this issue is shown in the walkthrough: http://docs.kendoui.com/getting-started/web/grid/walkthrough

    In the section called "Grouping" the walkthrough says that a user can drag the "surname" column up to be a group header.  That's great.  But the surname column still shows in the grid itself which just looks silly.

    Is there a way to automatically have Kendo hide the Surname column whilst it's being grouped?  Similarly if the user then removes the surname column from being a group header I'd like the column to reappear again. 

    If it's not automatically available, are there events we could listen to?  I'm quite new to JavaScript but could probably adapt a 90% solution instead of a 100% solution if that makes it faster for someone from Telerik to respond.

    I would like to make all of my grids work this way so don't want to have to hardcode stuff based on column names if at all possible.

    Other forum threads which cover this topic include
    http://www.kendoui.com/forums/kendo-ui-web/grid/how-to-hide-the-column-the-grid-is-grouped-by-additional-grouping-questions.aspx  - there wasn't any solution given :(

    http://www.kendoui.com/forums/kendo-ui-web/grid/how-to-hide-group-column-from-the-table-body-.aspx - the solution here wasn't really a solution.

    http://www.kendoui.com/forums/kendo-ui-web/grid/programmatically-show-column-group-by-another-column.aspx - this one seems to show it could be possible if I was setting up grouping from code external to Kendo.  Useful to know but not, on its own, a fix.

    http://www.kendoui.com/forums/kendo-ui-web/grid/don-t-show-columns-when-they-are-grouped.aspx - This is asking the same question about 18 months ago and there wasn't a solution at the time.  I'm hoping that's changed in the meantime or someone else has thought of a clever solution :)

    Thanks very much!
  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 28 Oct 2013 Link to this post

    You are correct that out of the box we dont have a AfterGroupedEvent. 
    But we could hook up to the DataBound event (which fires after you group) and do the column hiding/showing there.

    Here is a small proof of concept.
    http://jsfiddle.net/2gtWv/

    Hope it helps.
  3. Kendo UI is VS 2017 Ready
  4. Ian
    Ian avatar
    26 posts
    Member since:
    Jun 2012

    Posted 28 Oct 2013 Link to this post

    Perfect :)  Thanks so much!
  5. Jeff
    Jeff avatar
    3 posts
    Member since:
    Jan 2014

    Posted 24 Apr 2014 Link to this post

    The solution on jsfiddle doesn't actually work if you have a group set by default when the grid initially loads.  When the databound event fires the default groups are not in the DOM yet so there's no way to know that you should hide the column.  I got it working by using the change event on the datasource.

    On my datasource i have

    group: [
        {
            field: "CropYear",
            dir: "desc"
        }],
    change: function (e) {
        var groups = getGroupsInDatasource(e.items);
        var g = $scope.grid;
        //show all columns
        var i;
        for (i = 0; i < g.columns.length; i++) {
            g.showColumn(i);
        }
        //hide the grouped columns
        if (groups.length > 0) {
            for (i = 0; i < groups.length; i++) {
                g.hideColumn(groups[i]);
            }
        }
    }
  6. Jeff
    Jeff avatar
    3 posts
    Member since:
    Jan 2014

    Posted 24 Apr 2014 in reply to Jeff Link to this post

    Here is the rest of my solution since I can't edit my last post.  I'm using angular to hide and show the columns in the post above so just replace g with the jquery reference to your grid.

    var getGroupsInDatasource = function(items) {
           var groupFieldNames = [];
           if (items.length > 0) {
               //groups only have a single item                   
               var item = items[0];
               //the item will have an aggregates property
               if (item.aggregates){
                   groupFieldNames.push(item.field);
                   if (item.hasSubgroups) {
                       var subGroup = getGroupsInDatasource(item.items);
                       if (subGroup.length > 0)
                       {
                           return groupFieldNames.concat(subGroup);
                       }
                   }
               }
           }
           return groupFieldNames;
       }
  7. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 24 Apr 2014 Link to this post

    Are you sure you are using the latest version of Kendo?
    I think this might have been a bug as it seems to be working for me.
    Even with initial grouping
    http://jsfiddle.net/r9XcX/
  8. Jeff
    Jeff avatar
    3 posts
    Member since:
    Jan 2014

    Posted 24 Apr 2014 in reply to nikobellic Link to this post

    You are right.

    I had version 2013.3.1316 and your example was not working with initial grouping.

    When I switched to 2014.1.416 it worked fine.
  9. John
    John avatar
    12 posts
    Member since:
    Jul 2011

    Posted 30 Apr 2014 Link to this post

    Since I want this as default functionality in ALL my grids, I wrote the code below (based off this post) and threw it in my 'kendoGridHelpers.js' file.  Using jQuery I just find all kendo grids on the page and automatically apply the feature.  Nothing amazing but might save a few people a few minutes so thought I'd post.



    $(function () {
        $('.k-grid').each(function (index, curGrid) {
            var grid = $(curGrid).data("kendoGrid");
            grid.bind("dataBound", hideGroupedColumns);
        });
    });


    function hideGroupedColumns(o) {
        var grid = this;

        for (var i = 0; i < this.columns.length; i++) {
            grid.showColumn(i);
        }

        $("div.k-group-indicator").each(function (i, v) {
            grid.hideColumn($(v).data("field"));
        });
    }
Back to Top
Kendo UI is VS 2017 Ready