This is a migrated thread and some comments may be shown as answers.

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

8 Answers 319 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 28 Oct 2013, 11:23 AM
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!

8 Answers, 1 is accepted

Sort by
0
Ignacio
Top achievements
Rank 1
answered on 28 Oct 2013, 06:42 PM
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.
0
Ian
Top achievements
Rank 1
answered on 29 Oct 2013, 12:23 AM
Perfect :)  Thanks so much!
0
Jeff
Top achievements
Rank 1
answered on 24 Apr 2014, 04:45 PM
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]);
        }
    }
}
0
Jeff
Top achievements
Rank 1
answered on 24 Apr 2014, 04:48 PM
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;
   }
0
Ignacio
Top achievements
Rank 1
answered on 24 Apr 2014, 04:57 PM
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/
0
Jeff
Top achievements
Rank 1
answered on 24 Apr 2014, 06:30 PM
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.
0
John
Top achievements
Rank 1
answered on 30 Apr 2014, 01:27 PM
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"));
    });
}
0
Cesar
Top achievements
Rank 1
answered on 21 Dec 2016, 12:52 PM

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

Tags
Grid
Asked by
Ian
Top achievements
Rank 1
Answers by
Ignacio
Top achievements
Rank 1
Ian
Top achievements
Rank 1
Jeff
Top achievements
Rank 1
John
Top achievements
Rank 1
Cesar
Top achievements
Rank 1
Share this question
or