Controlling width of an expand column in UI for ASP.NET AJAX Grid

Nicholas Walker

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

expand-collapse-issue.png

Princy

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.

Nicholas Walker

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

Dimo

Admin

8485 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

Tatiana

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

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

ExpandColumn.png

Pavlina

Admin

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

Tatiana

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

Pavlina

Admin

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

Default3.zip

Tatiana

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!

Pavlina

Admin

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

Kiranmayee

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.

Eyup

Admin

4081 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.

Kiranmayee

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:

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

Admin

4081 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.

Kiranmayee

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!