Controlling width of an expand column

15 posts, 0 answers
  1. Nicholas Walker
    Nicholas Walker avatar
    55 posts
    Member since:
    May 2006

    Posted 20 Oct 2010 Link to this post

    Hello,

    Having a problem where the expand/collapse icon is getting cut off on the right hand side of the expand/collapse column because the column is not wide enough (see attached image).  Is there a way to control how width the expand/collapse column renders via the style sheet?  Either so I can change the padding/margin on the left of the icon or to make the column wider?  I can't seem to find a way to make this look nice.

    Thanks,
    --nick
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Oct 2010 Link to this post

    Hello Nick,

    Try the following CSS to change the width of ExpandCollapse column in RadGrid.

    CSS:
    <style type="text/css">
      .rgExpandCol
        {
          width: 50px;
        }
    </style>

    Thanks,
    Princy.
  3. Nicholas Walker
    Nicholas Walker avatar
    55 posts
    Member since:
    May 2006

    Posted 21 Oct 2010 Link to this post

    That was the very first thing I tried - that does not change anything.

    So far, the only way I have been able to correct the issue is by adding the following code:

    Private Sub MTCRadGrid_ColumnCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles Me.ColumnCreated
            If TypeOf e.Column Is GridExpandColumn Then
                CType(e.Column, GridExpandColumn).HeaderStyle.Width = Unit.Pixel(30)
            End If
    End Sub

    But this has an obvious programatic toll - especially when large datasets are involved.  Should be able to do this in a CSS - can't understand why changing the style width property doesn't work.

    --nick
  4. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 25 Oct 2010 Link to this post

    Hello Nick,

    You can't control the expand column's width with CSS, because it is controlled by the width style of the respective column's <col> element. However, you can remove the cell padding from this column, which will result in a better look:

    .rgExpandCol
    {
           padding-left: 0 !important ;
           padding-right: 0 !important ;
           text-align: center ;
    }

    We will include this approach (or a similar one) in some of the next versions of RadGrid.

    Sincerely yours,
    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
  5. Tatiana
    Tatiana avatar
    19 posts
    Member since:
    Nov 2008

    Posted 28 Nov 2011 Link to this post

    Hi,

    I am using the Q2 2011 version and IE9. The suggested fix works only for IE9 (No Compatibility Mode) or if there are no static headers setup.
    In my application I have the following client settings

            <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" />

     In Compatibility Mode the width of the expand column remainds the same in the header and filter sections.
    I attached the screenshot for your review.

    Any suggestions are greatly appreciated.

    Tatiana

  6. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 29 Nov 2011 Link to this post

    Hello Tatiana,

    Can you please try decreasing the width of the ExpandCollapse column inside grid PreRender event and see if it helps?
    protected void RadGrid1_PreRender(object sender, EventArgs e)
        {
            foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
            {
                if (column.ColumnType == "GridExpandColumn")
                {
                    column.HeaderStyle.Width = Unit.Pixel(10);
                }
      
            }
      
        }

    Also, please not that when UseStaticHeaders property is set to true, the grid columns should declare HeaderStyle.Width.

    Regards,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  7. Tatiana
    Tatiana avatar
    19 posts
    Member since:
    Nov 2008

    Posted 29 Nov 2011 Link to this post


    Thank you for responding so quickly,

    I changed the code (only I set to 20 instead of 10 - 10 was not enough to fix the image), and unfortunatelly it did not help. Still have the same problem.
    Note, that it does that only in the previous versions of IE ( and not in IE9, nor other type of browsers).

    Any other suggestions?

    Thank you


  8. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 29 Nov 2011 Link to this post

    Hi Tatiana,

    I prepared a sample project where ExpandColumn's width is set with Css code suggested by my colleague Dimo and also I have enabled scrolling functionality. I tested the website in IE9 and everthing is working as expected. Can you please examine it and see if it helps to resolve the problem you are facing?

    Best wishes,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. Tatiana
    Tatiana avatar
    19 posts
    Member since:
    Nov 2008

    Posted 29 Nov 2011 Link to this post

    Hi Pavlina,

    Thank you very much for the demo. The only difference between your demo and my code that I found was the location of the .rgExpandCol style. In my application I use the custom skin and had those settings specified in the Grid.[skin name].css. So putting this to the page fixed the problem. And it's great! However, I am wondering why having the style specified in the css file does not fix the problem, but having it on the page does.

    Thank you!
  10. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 30 Nov 2011 Link to this post

    Hello Tatiana,

    Can you please confirm that your CSS files are registered in the <head> of the web page? However when dealing with custom skins, we need the CSS code in order to test it locally and see what might be causing the problem.

    Best wishes,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  11. Kiranmayee
    Kiranmayee avatar
    22 posts
    Member since:
    Jul 2018

    Posted 25 Jul 2018 Link to this post

    Can someone help me with expand collapse column width of a detail table. I have radgrid that has detail tables with expand collapse column in the detail table as well. 

     

  12. Eyup
    Admin
    Eyup avatar
    4014 posts

    Posted 30 Jul 2018 Link to this post

    Hello Kiranmayee,

    You can achieve this requirement using the following approach:
    <telerik:GridTableView ... Name="DetailTableName">
    C#:
    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column is GridExpandColumn && e.OwnerTableView.Name == "DetailTableName")
        {
            e.Column.HeaderStyle.Width = 200;
        }
    }

    I hope this will prove helpful.

    Regards,
    Eyup
    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.
  13. Kiranmayee
    Kiranmayee avatar
    22 posts
    Member since:
    Jul 2018

    Posted 30 Jul 2018 in reply to Eyup Link to this post

    Hi Eyup,

    Thank you for your response. I tried as you suggested but it doesn't work for me.

    ASPX:

    <DetailTables>
                        <telerik:GridTableView EnableHierarchyExpandAll="true" DataKeyNames="LOAD_ID" DataSourceID="SqlDataSource4"  runat="server"  Name="DetailTable1"  >
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="LOAD_ID" MasterKeyField="LOAD_ID"></telerik:GridRelationFields>
                            </ParentTableRelation>
                            <ExpandCollapseColumn>
                            <HeaderStyle Width="5px"></HeaderStyle>
                            </ExpandCollapseColumn>
                            <DetailTables>
                                <telerik:GridTableView EnableHierarchyExpandAll="true" DataKeyNames="LOAD_ID" DataSourceID="SqlDataSource5"  runat="server" >
                                    <ParentTableRelation>
                                        <telerik:GridRelationFields DetailKeyField="LOAD_ID" MasterKeyField="LOAD_ID"></telerik:GridRelationFields>
                                    </ParentTableRelation>
                                    <Columns></Columns>

     

    VB:

     Protected Sub rgHeaderLog_ColumnCreated(ByVal sender As Object, ByVal e As GridColumnCreatedEventArgs)
            If TypeOf e.Column Is GridExpandColumn AndAlso e.OwnerTableView.Name = "DetailTable1" Then
                e.Column.HeaderStyle.Width = 5
            End If
        End Sub

  14. Eyup
    Admin
    Eyup avatar
    4014 posts

    Posted 02 Aug 2018 Link to this post

    Hi Kiranmayee,

    Width of 5 is too small and the column is probably at its minimum possible width to contain the expand/collapse button. Try setting it to 300 for example to verify that the logic is actually working.

    And also make sure that you have the rgHeaderLog_ColumnCreated event handler name defined in the RadGrid tag. Otherwise, you will need to add Handles.ColumnCreated directive at the end of it.

    Regards,
    Eyup
    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.
  15. Kiranmayee
    Kiranmayee avatar
    22 posts
    Member since:
    Jul 2018

    Posted 02 Aug 2018 in reply to Eyup Link to this post

    Hi Eyup,

    Width of 5 actually works. All I was missing was 'Handles rgHearLog.ColumnCreated'. Once I put in this handler it works like a charm!

    Thank you!

Back to Top