Controlling width of an expand column

[Nicholas Walker]

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

[Princy]

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.

[Nicholas Walker]

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

[Dimo]

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

[Tatiana]

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

[Pavlina]

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

[Tatiana]

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

[Pavlina]

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

[Tatiana]

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!

[Pavlina]

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

[Kiranmayee]

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. 

 

[Eyup]

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

[Kiranmayee]

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

[Eyup]

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

[Kiranmayee]

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!