hide group expand collapse columns in RadGrid

12 posts, 0 answers
  1. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 28 Oct 2010 Link to this post

    I have a grid which has 7 fixed width columns and I have enabled the ability to group these. However when I add a grouping by dragging the column to the Group header row, additional columns are added at the beginning of my grid, pushing my grid and data out to the right.

    Id like to be able to prevent these columns from being added and just the group headers be shown as additional rows, either with or without the ability to expand or collapse.

    I have attached an image of what is happening. The red section highlights the newly added column when I group, and the green section highlights the grid and its data being forced out to the right.

    I have to set the width of the rows or they all come out the same size making the header row twice as tall as I want it. If there is an easy way to have the entire grid set to a width and the columns size automatically then please tell me how.
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Nov 2010 Link to this post

    Hi Karl,

    The group splitter column has not been designed to be easily hidden, but you can use the approach shown below.

    When you use scrolling with static headers and at least one column has explicit width (in this case - the GroupSplitterColumn), then the TableLayout is automatically switched to Fixed. This means that all columns with no explicit width will become equally wide. Removing the group column's width is hardly an option, as it will become too wide.


    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <script runat="server">
     
        protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            DataTable dt = new DataTable();
            DataRow dr;
            int colsNum = 4;
            int rowsNum = 4;
            string colName = "Column";
     
            for (int j = 1; j <= colsNum; j++)
            {
                dt.Columns.Add(String.Format("{0}{1}", colName, j));
            }
     
            for (int i = 1; i <= rowsNum; i++)
            {
                dr = dt.NewRow();
     
                for (int k = 1; k <= colsNum; k++)
                {
                    dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
                }
                dt.Rows.Add(dr);
            }
     
            (sender as RadGrid).DataSource = dt;
        }
     
        protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
        {
            if (e.Column is GridGroupSplitterColumn)
            {
                e.Column.HeaderStyle.Width = Unit.Pixel(1);
            }
        }
         
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    .rgGroupCol
    {
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size:1px !important;
    }
     
    .rgExpand,
    .rgCollapse
    {
        display:none !important;
    }
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadGrid
        ID="RadGrid1"
        runat="server"
        Width="800px"
        Skin="Hay"
        GroupingEnabled="true"
        ShowGroupPanel="true"
        OnNeedDataSource="RadGrid_NeedDataSource" OnColumnCreated="RadGrid1_ColumnCreated">
        <ClientSettings AllowDragToGroup="true" />
    </telerik:RadGrid>
     
    </form>
    </body>
    </html>


    Greetings,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 30 Nov 2010 Link to this post

    Awesome.

    I couldn't quite get this to work, The column always appeared still, but after having a tinker  (as you'd put me on the right path at least) I ended up with the following...

    Instead of
    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column is GridGroupSplitterColumn)
        {
            e.Column.HeaderStyle.Width = Unit.Pixel(1);
        }
    }

    I ended up with

    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        //Used to set the added group column width
        if (e.Column is GridGroupSplitterColumn)
        {
            e.Column.Visible = false;
        }
    }

    which hides the columns nicely. Is this a new feature with Q3 2010?

    However, I now want to hide the collapse/expand icons that appear at the start of the group header rows... :)

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Nov 2010 Link to this post

    Hello Karl,

    Give a try with the following approach to hide the group ExpandCollapse column.

    C#:
    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
       {
           if (e.Column is GridGroupSplitterColumn)
           {
              e.Column.Visible = false;
           }
       }
       protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
       {
           if (e.Item is GridGroupHeaderItem)
           {
               (e.Item as GridGroupHeaderItem).Cells[0].Controls.Clear();
           }
       }

    Thanks,
    Princy.
  6. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 30 Nov 2010 Link to this post

    Hi Princy,

    That worked a treat, thank you!

    I also added the line

    (e.Item

     

    as GridGroupHeaderItem).Cells[0].Visible = false;

     


    immediately after the line

    (e.Item

     

    as GridGroupHeaderItem).Cells[0].Controls.Clear();

     


    to hide this now empty cell and to pull the grouping text to the left.

    now your method reads...

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridGroupHeaderItem)
        {
            (e.Item as GridGroupHeaderItem).Cells[0].Controls.Clear();
            (e.Item as GridGroupHeaderItem).Cells[0].Visible = false;
        }
    }

  7. bb
    bb avatar
    2 posts
    Member since:
    Nov 2007

    Posted 14 Jan 2011 Link to this post

    Nothing works for me, the Collapse Group just refuse to go.  Any ideas?  Thanks.
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jan 2011 Link to this post

    Hello,

    The above code is working fine at my end. Please try the following CSS to hide the ExpandCollapseColumn.

    CSS:
    <style type="text/css">
           .rgCollapse
           {
               display:none !important;
           }
           .rgExpand
           {
              display:none !important;
           }
     </style>

    Thanks,
    Princy.
  9. Kellen
    Kellen avatar
    12 posts
    Member since:
    Jun 2010

    Posted 30 Jun 2011 Link to this post

    This has been helpful. I've gotten rid of that extra first column that shows up but... now I can't expand or collapse! Maybe this was an understood cost. Is there anyway to maintain the ability to expand and collapse groups and still get rid of that ugly leading column? Thanks!
  10. Calvin
    Calvin avatar
    4 posts
    Member since:
    Jul 2011

    Posted 27 Jul 2012 Link to this post

    This also seems to work:

    public void Grid_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column.OrderIndex < 0)
            e.Column.Visible = false;
    }


  11. NEX
    NEX avatar
    84 posts
    Member since:
    Aug 2007

    Posted 12 Mar 2014 in reply to Princy Link to this post

    This works for me, thanks!
  12. Richard
    Richard avatar
    2 posts
    Member since:
    Apr 2013

    Posted 19 Aug 2014 Link to this post

                MinutesRadGrid.MasterTableView.ExpandCollapseColumn.Visible = false; 

    Works for me. But not in the markup..... Not too happy about that as it would be desirable in this instance to be able to put it in the markup .
  13. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 22 Aug 2014 Link to this post

    Hi Richard,

    I'm afraid currently the group expand column can be hidden only on the code-behind.
    Please excuse us for any inconvenience this might have caused you.

    Regards,
    Eyup
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017