How to hide grouping column

14 posts, 1 answers
  1. Clint
    Clint avatar
    58 posts
    Member since:
    Feb 2011

    Posted 18 Jan 2012 Link to this post

    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.

  2.
  3. Answer
    Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 19 Jan 2012 Link to this post

    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!
  5. Clint
    Clint avatar
    58 posts
    Member since:
    Feb 2011

    Posted 19 Jan 2012 Link to this post

    Thanks Dimo, that worked very well.  I have to remember how much we can do with css and jquery/js.
  7. Mark
    Mark avatar
    22 posts
    Member since:
    Aug 2015

    Posted 29 Sep 2015 in reply to Dimo Link to this post

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

     

    I would like to get rid of "DepartmentName".

     

    Thanks

  8.
  9. Joe
    Joe avatar
    2 posts
    Member since:
    Feb 2015

    Posted 29 Sep 2015 in reply to Mark Link to this post

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

    example:

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

  11. Mark
    Mark avatar
    22 posts
    Member since:
    Aug 2015

    Posted 30 Sep 2015 in reply to Joe Link to this post

    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.

  13. Joe
    Joe avatar
    2 posts
    Member since:
    Feb 2015

    Posted 30 Sep 2015 in reply to Mark Link to this post

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

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

     

  14.
  15. Raj
    Raj avatar
    34 posts
    Member since:
    Nov 2016

    Posted 07 Mar 2017 in reply to Dimo Link to this post

    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

  17. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 08 Mar 2017 Link to this post

    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.
  19. Chris
    Chris avatar
    2 posts
    Member since:
    Jul 2015

    Posted 17 Aug 2017 Link to this post

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

  20.
  21. Lotus
    Lotus avatar
    1 posts
    Member since:
    Oct 2018

    Posted 08 Jan 2019 Link to this post

    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

  23. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 08 Jan 2019 Link to this post

    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.
  25. Shapur
    Shapur avatar
    1 posts
    Member since:
    Jul 2018

    Posted 18 Aug 2020 Link to this post

    How to achieve the same in Kendo Angular?
  26.
  27. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 19 Aug 2020 Link to this post

    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

Back to Top