Fixed Width to Rad Grid Bound Column

[Ritzie]

Hello All,
               I want to apply a fixed width to Telerik Rad Grid's Bound Column,It may be with or without filtering.Please suggest me the answer,its urgent....
                If the data in the grid bound's is large the disigning is all misplaced



Thankx
Ritzie

[Princy]

Hi Ritzie,

Try setting HeaderStyle-Width property of GridBoundColumn as shown below for setting fixed width for bound column.

ASPX:

  . . .
<telerik:GridBoundColumn DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName" UniqueName="ShipName">
    <HeaderStyle Width="100px" />
</telerik:GridBoundColumn>
  . . .

Note: Set the TableLayout property of grid MasterTableView to Fixed.

-Princy.

[Mark]

*** Update 2 ***

There is still an issue.  When I set the TableLayout to Fixed I lose the horizontal scrolling that I have enabled here:

<ClientSettings>
            <Scrolling AllowScroll="True" ScrollHeight="1000" SaveScrollPosition="True"></Scrolling>

*** Update 1 ***

Solution worked when I set MasterTableView =>  TableLayout="Fixed"

*** Original Post ***

This solution is not working for me, possibly because my Grid is very wide.

Here is my column definition:

<telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments" UniqueName="Comments">
    <HeaderStyle Width="150px" />
    <ItemStyle Width="150px" />
    <FooterStyle Width="150px" />
</telerik:GridBoundColumn> 

The width of the MasterTableView is set to 100%.

<MasterTableView Width="100%" 

I've tried the value "150" instead of "150px" as well.

You think it would be straightforward - setting the width of a column.

This is perhaps one more case where I have to hack together some custom javascript to get the display I want out of a Telerik control.

[Pavlina]

Hello,

Note that it is not recommended to set ItemStyle-Width for setting column widths. Only HeaderStyle-Width should be used. Try changing your code as shown below and see if it works as you expected:
 

<MasterTableView TableLayout="Fixed">
  <Columns>
  <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments"    UniqueName="Comments">
     <HeaderStyle Width="150px" />
  </telerik:GridBoundColumn>
..............

Greetings,
Pavlina
the Telerik team

[Mark]

Thanks Pavlina - this solution will work in most cases, but not with the grid I'm working with because it is very wide and when I set - TableLayout="Fixed"- I lose the horizontal scrolling that I have enabled via:

<ClientSettings> 
    <Scrolling AllowScroll="True" ScrollHeight="550" SaveScrollPosition="True"></Scrolling> 
</ClientSettings>

Without horizontal scrolling, a portion of the grid is not visible / inaccessible to the user.

So the problem is: How do I set a fixed column width and enable horizontal scrolling with the RadGrid control. 

I currently believe that there is not going to be a fix / solution possible by setting RadGrid / MasterTableView / GridColumn properties. 

I think my solution will be to set the TableLayout property to fixed and implement my own scrolling by placing the RadGrid in a div with some custom CSS.

If there is a inherent Telerik property solution, that would be great, but in my experience, Telerik controls work great 80% of the time and 20% of the time require custom work to get the desired display.

[Mark]

To solve this display problem I've once again kind of hacked the RadGrid control by setting css properties of the HTML that the RadGrid control renders in javascript.  In this case, I'm setting the overflow property of rendered two divs that surround the rendered table element of the RadGrid control.

This javascript needs to be run EVERY TIME the grid is rendered.  So if you do a column sort or anything that results in one of these massive viewstate ajax panel postbacks, you need to run the javascript again because the Telerik RadGrid has rendered new HTML.

$("#ctl00_PageContent_RadGrid1").css("overflow-x", "scroll");     
$("#ctl00_PageContent_RadGrid1_GridData").css("overflow", "visible");

Again, to set the column widths explicitly, you are going to need to set the MasterTableView TableLayout property to fixed.

<MasterTableView TableLayout="Fixed">

[Mark]

With this solution I see grid lines in the grid when I scroll.  The grid lines disappear when I click a grid row, or sometimes on a horizontal scroll they disappear by themselves after a couple seconds.

I have: 

<MasterTableView GridLines="None"  

Is there another property I need to set to hide the dotted / dashed grid lines I'm seeing when I scroll?

Also I have to explicitly specify the width of every column (at this point) or they are simply not displayed at all.

Privina, do you think the developments in this post warrant a support ticket?  Can you perhaps send me a link or some documentation where it explains how to configure the RadGrid to display fixed width columns in a horizontally scrollable grid?  Or an assertion that the Telerik RadGrid just has problems in this scenario and I should use other means to display my information - that would also be sufficient.

[Pavlina]

Hi Ritzie,

For more information about scrolling and fxed colum widths you can refer to the online resources below:
http://www.telerik.com/help/aspnet-ajax/grid-scroll-with-static-headers.html
http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx
http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx

All the best,
Pavlina
the Telerik team

[Mark]

This stuff works when (and perhaps only when in the case of wide grids) the width of each column is explicitly specified.

[Pavlina]

Hi,

One option is explicitly specify column widths as you said. Another option is to set the same width for all columns through HeaderStyle section of the RadGrid property pane:

<HeaderStyle Width="200px"/>

Greetings,
Pavlina
the Telerik team

[Anna Katrina]

Thank You Pricy for the advice.. Ill keep that in mind :D

[Dylan]

Hi,

How can I set an auto width to all my Radgrid's columns ? Auto here means I want the column width to follow the content. I don't want to set the width for each columns of my Radgrid because it's just too many.

[Princy]

Hi,

Please set the TableLayout="Auto" for the MasterTable view.

ASPX:

<MasterTableView TableLayout="Auto">
. . . . . .
</MasterTableView>

Thanks,
Princy

[Dylan]

Hi Princy,

By default the setting is Auto but the column width too narrow and causing the content to be multiple lines. How I can set the width for each column to width of it's content in every Radgrid that I have using CSS ?

Regards,
Dylan

[Princy]

Hi,

I guess you want to set the width for all columns of a radgrid.Please try setting the HeaderStyle-Width property of the radgrid.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server"   HeaderStyle-Width="200px" >
 <MasterTableView  TableLayout="Auto">
. . . . . . . . . . . . . .
 </MasterTableView>
</telerik:RadGrid>

Thanks,
Princy

[Majeed]

I want to Modified RadGrid`s Column`s width I have Did all thing mean Modified the Column width, Filtering Width but now problem is when I run my Project in IE10 the Header and filtering textbox appear perfectly but the body of grids is distrubed kindly help me and Find attachment for quick understanding.

Thanks in advance.

[Pavlina]

Hello Majeed ,

If you are using the latest version of the controls you should not encounter similar issue. Also make sure that you are not using ItemStyle-Width for setting column widths and you have only HeaderStyle-Width property set for the columns in pixel.

Regards,
Pavlina
Telerik

 

 

[Sunil]

nice it works

[Sunil]

nice mark it works.............. thanks