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

[Ian]

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!

[Ignacio]

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.

[Ian]

Perfect :)  Thanks so much!

[Jeff]

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]);
        }
    }
}


[Jeff]

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;
   }

[Ignacio]

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/

[Jeff]

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.

[John]

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"));
    });
}

[Cesar]

[quote]John said:

$("div.k-group-indicator").each(function (i, v) {
        grid.hideColumn($(v).data("field"));
    });
[/quote]

 

This line won't work, if you have 2 grids in the same page, with the same filed name.

You should change it to:

 

$("div.k-group-indicator").each(function (i, v) {
            if($(v).parent().parent().attr("id") == "yourgridID") grid.hideColumn($(v).data("field"));
        });