How to hide grouping column

[Clint]

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.

[Dimo]

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

[Clint]

Thanks Dimo, that worked very well.  I have to remember how much we can do with css and jquery/js.

[Mark]

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]

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]

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]

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

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

 

[Raj]

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]

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

[Chris]

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]

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]

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

[Shapur]

How to achieve the same in Kendo Angular?

[Dimo]

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