How to hide grouping column

1 Answer 998 Views
Grid
Clint
Top achievements
Rank 1
Clint asked on 18 Jan 2012, 06:05 PM
I'm grouping the grid through the datasource and I want to hide the left-most column, the one I so poorly highlight in my screenshot.  That's just a test grid, but it represents the column I want removed.   Removing  .k-group-cell will remove it but that messes up the colspan of the row.  Even decreasing the width will suffice but that attribute doesn't seem to take affect.

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 19 Jan 2012, 09:57 AM
Hi Clint,

You can use the following script in the Grid's dataBound event:

$(".k-group-col,.k-group-cell").remove();
var spanCells = $(".k-grouping-row").children("td");
spanCells.attr("colspan", spanCells.attr("colspan") - 1);

If needed, modify the selectors to target only a specific Grid instance.

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Clint
Top achievements
Rank 1
commented on 19 Jan 2012, 03:10 PM

Thanks Dimo, that worked very well.  I have to remember how much we can do with css and jquery/js.
Mark
Top achievements
Rank 1
commented on 29 Sep 2015, 09:59 PM

How do you hide the filename for the grouping?  Currently mine says:  DepartmentName: Admin Service

 

I would like to get rid of "DepartmentName".

 

Thanks

Joe
Top achievements
Rank 1
commented on 30 Sep 2015, 03:41 AM

Add a hidden column for the grouping field and set the format in the clientGroupHeaderTemplate.

example:

columns.Bound(r => r.​FieldName).ClientGroupHeaderTemplate("#= value#").Hidden();​

Mark
Top achievements
Rank 1
commented on 30 Sep 2015, 03:15 PM

Thank you very much for the post, but I am using the client side/JS controls, not the Server/Razor controls.  Do you know how I would accomplish it from the client side?

Thanks again.

Joe
Top achievements
Rank 1
commented on 30 Sep 2015, 03:20 PM

Yep!  it's pretty similar, and there's a good example here

columns: [{ field: "fieldName", groupHeaderTemplate: "#= value #", hidden: true}, {...}]

 

Raj
Top achievements
Rank 1
commented on 07 Mar 2017, 09:30 PM

Hi Dimo

I am doing a default collapsed grouping on grid load using dataBound.

using below codes:

 .Group(g => { g.Add(c => c.FacilityName); g.Add(c => c.Description); })

     function onDataBound(e) {
        var grid = this;
        if (grid.dataSource.group().length > 0) {
            $(".k-grouping-row").each(function () {
                grid.collapseGroup(this);
            });
        }
    }

The code you provided for hiding group column is not working  if i include it in the above function. how can i get rid of grouping column in this case?

In the attached file i would like to get rid of both facility Name and description column grouping width.

Thanks

Raj

Dimo
Telerik team
commented on 08 Mar 2017, 10:09 AM

Hello Raj,

Hiding the grouping columns is only possible if the groups are expanded. Otherwise the user will end up with collapsed groups that can no longer be expanded.

http://dojo.telerik.com/asEgO

Regards,
Dimo
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Chris
Top achievements
Rank 1
commented on 17 Aug 2017, 02:04 PM

This worked for me, it gave me the look I was looking for and the expand/collapse functionality:

CSS:

.k-group-cell {
            display: none;
        }
        .k-group-col {
             display: none;
        }

 

JavaScript:

const hideGroupColumn = () => {
        const spanCells = $('.k-grouping-row').children('td');

        spanCells.attr('colspan', spanCells.attr('colspan') - 1);
    }

Lotus
Top achievements
Rank 1
commented on 08 Jan 2019, 02:17 PM

Hi, this answer works for me and it removes all the group-cell.

But after the group-cell got removed, I can not collapse / expand the group. 

Do you have any clue how to make it collapse/expand still work while the group-cell is removed?

 

Thanks

Dimo
Telerik team
commented on 08 Jan 2019, 02:55 PM

Hi Lotus,

The group cells are used by the Grid's internal logic to determine the group level. These calculations will not work correctly if the group cells are removed from the DOM.

My only suggestion is to consider the approach of Chris. Execute the JavaScript in the Grid's dataBound event.

Regards,
Dimo
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Shapur
Top achievements
Rank 1
commented on 18 Aug 2020, 01:04 PM

How to achieve the same in Kendo Angular?
Dimo
Telerik team
commented on 19 Aug 2020, 07:37 AM

Hello Shapur,

This is the Kendo UI jQuery forum. Can you please post your question in the Kendo UI Angular forum, so that there is no mixing of different product discussions? Thanks!

https://www.telerik.com/forums/kendo-angular-ui/grid

Regards,
Dimo
Progress Telerik

Tags
Grid
Asked by
Clint
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or