Forcing Columns Width

[Marco]

Hello Telerik Team.

I need to define a way to force columns width.

I i'm trying to force force the width this way

  Unit maxWidth = new Unit(100 / RadGrid1.Columns.Count, UnitType.Percentage);

                        foreach (GridBoundColumn var in RadGrid1.Columns)

                            var.ItemStyle.Width = maxWidth;

This way columns should never be larger than grid but this is not Happening?

i first create and add columns to grid... in debug it seams to be just fine...

But when RadGrid is rendered columns are larger than RadGrid...

When should i change columns width? in Item_Created?

[Dimo]

Hello Marco,

The correct way to specify column width is by using HeaderStyle.Width, not ItemStyle.Width. This can be done declaratively or programmatically in ColumnCreated or as soon as the column is created manually at runtime and added to a TableView columns collection.

The easiest way to have equally sized columns is to set TableLayout="Fixed" for the MasterTableView and nothing more (no width for the MasterTableView or any column).

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Marco]

ok this solve my problem but create another one....

Now header text of columns overlap which other...

How can i avoid it?

thanks a lot for quick answer.

[Dimo]

Hello Marco ,

Well, in this case you should either specify large-enough column widths (either specify width for each column separately or for all columns at once), or clip the text with the following CSS rule:

.RadGrid  .rgRow  td,
.RadGrid  .rgAltRow  td,
.RadGrid  .rgHeader
{
        overflow: hidden ;
}

(the above CSS rule will be included in the RadGrid skins in the coming Q2 2009 release, so you will not need it if you upgrade).


This is how to specify the same width for all columns:

<telerik:RadGrid>
    <MasterTableView>
        <HeaderStyle Width="200px" />
    </MasterTableView>
/<telerik:RadGrid>


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Marco]

I will reformulate my problem.

I have a fixe content whit Width Property set for 700px for example.

I i have 5 columns of 200px that will be 1000px...

If i put TableLayout="Fixed" text will overlap.

The best way i think, it will be:  break in multiple lines the header text to be able to have all columns and be able to see all text in the fixed Width RadGrid...

But as the same time i think i will get another issue... The Height is fixed to.

Can you give-me a solution that can achieve all this limitations?

Thanks

[Dimo]

I recommend using RadGrid scrolling (with or without static headers).

http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Augusto Cosatti]

Hello.

I have more or less the same problem. Here is the piece of code that defines my Grid:

 

Hello.

I have more or less the same problem. Here is the piece of code that defines my Grid:


<telerik:RadGrid ID="RadGridServers" runat="server" AllowPaging="False" Skin="Office2007"

ItemStyle-CssClass="RadGridRow"

AlternatingItemStyle-CssClass="RadGridRow"

EnableEmbeddedSkins="true" AutoGenerateColumns="false" AllowSorting="true" AllowMultiRowSelection="false"

ActiveItemStyle-BackColor="Transparent" AlternatingItemStyle-BackColor="Transparent"

ShowFooter="false" AllowAutomaticUpdates="false">

<ClientSettings>

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

<Resizing AllowColumnResize="true" ClipCellContentOnResize="false" ResizeGridOnColumnResize="false"

EnableRealTimeResize="false" />

<ClientEvents OnGridCreated="GridCreated" />

</ClientSettings>

<MasterTableView Name="Servers" AutoGenerateColumns="false" TableLayout="Fixed" HeaderStyle-Wrap="false"

ShowFooter="true" FooterStyle-BackColor="#E6E6E6">
...


<Columns>


<telerik:GridHyperLinkColumn DataTextField="ServerCode" DataNavigateUrlFields="ManagementPeriodId,ServerId"


DataNavigateUrlFormatString="../Servers/ServerDetail.aspx?ManagementPeriodId={0}&amp;ServerId={1}"


Target="_blank" HeaderText="Server Name" SortExpression="ServerCode" UniqueName="ServerCode"


HeaderStyle-Width="225px"

FooterStyle-Font-Bold="true" />


<telerik:GridNumericColumn DataField="ServerGB" DataType="System.Decimal" HeaderText="Yearly GB"


SortExpression="ServerGB" UniqueName="ServerGB" HeaderStyle-Width="90px" DataFormatString="{0:#.##}"


ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"


Aggregate="Sum" FooterStyle-HorizontalAlign="Center" FooterStyle-Font-Bold="true" />


<telerik:GridNumericColumn DataField="ServerUsage" DataType="System.Decimal" HeaderText="Yearly Usage"


SortExpression="ServerUsage" UniqueName="ServerUsage" HeaderStyle-Width="70px" DataFormatString="{0:0.##}"


ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"


Aggregate="Sum" FooterStyle-HorizontalAlign="Center" FooterStyle-Font-Bold="true" />


<telerik:GridBoundColumn DataField="CostCenterCode" DataType="System.String" HeaderText="Managed by"


SortExpression="CostCenterCode" UniqueName="CostCenterCode" HeaderStyle-Width="70px"


ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />


<telerik:GridBoundColumn DataField="ServiceDeskOwner" DataType="System.String" HeaderText="SD Owner"


SortExpression="ServiceDeskOwner" UniqueName="ServiceDeskOwner" HeaderStyle-Width="160px"


ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />


<telerik:GridNumericColumn DataField="ServiceCount" DataType="System.Int32" HeaderText="# of Services"


SortExpression="ServiceCount" UniqueName="ServiceCount" HeaderStyle-Width="70px" DataFormatString="{0:#}"


ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />


<telerik:GridBoundColumn DataField="ClassName" DataType="System.String" HeaderText="Server Class"


SortExpression="ClassName" UniqueName="ClassName" HeaderStyle-Width="100px"


ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />


<telerik:GridImageColumn HeaderText="Dedicated" DataImageUrlFields="IsDedicatedImage"


SortExpression="IsDedicatedImage" UniqueName="IsDedicated" HeaderStyle-Width="80px"


HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataImageUrlFormatString="../Images/{0}.gif" />


<telerik:GridImageColumn HeaderText="ITSC Pot" DataImageUrlFields="IsITSCPotImage"


SortExpression="IsITSCPotImage" UniqueName="IsITSCPot" HeaderStyle-Width="60px"


HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataImageUrlFormatString="../Images/{0}.gif" />


<telerik:GridBoundColumn DataField="IsDedicatedImage" UniqueName="IsDedicatedImage" HeaderText="Dedicated" HeaderStyle-HorizontalAlign="Center" Visible="false" />


<telerik:GridBoundColumn DataField="IsITSCPotImage" UniqueName="IsITSCPotImage" HeaderText="ITSC Pot" HeaderStyle-HorizontalAlign="Center" Visible="false" />


<telerik:GridBoundColumn DataField="ManagementPeriodId" DataType="System.String" Visible="false" />


<telerik:GridBoundColumn DataField="ServerId" DataType="System.String" Visible="false" />


<telerik:GridBoundColumn DataField="HasPeriodInformation" DataType="System.Boolean" Visible="false" />


</Columns>

I have also 4 invisible columns. 

As you can see the width of the ServerCode column is 225px. But when the grid is rendered the width of that column is not 225px but 240px. The actual size of the ServerGB column is 106px instead of 90px.

During the initialization of the grid I'm setting the width of the MasterView (If I don't do that, the grid width is 19px !): 

double width = 0;
foreach (GridColumn c in this.RadGridServers.Columns) {
   if (c.Visible) {
     width += c.HeaderStyle.Width.Value + 1;
    }
}

this.RadGridServers.MasterTableView.Width = new Unit(width);
This was working fine when I was not using the 

 

 

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

declaration. It does not work as expected since I have added this document declaration (I need it for other purpose).

I forgot to mention that the content of the columns (data) is not larger than the defined column width. The attached picture shows the column width that should be 225.

Can you tell me what I'm doing wrong ? 
Thanks
Augusto

 

 

 

 

[Dimo]

Hello Augusto,

You have specified pixels widths for all columns. If the RadGrid control is wider (e.g. if it is 100% wide) than the sum of all columns, they expand proportionately.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Augusto Cosatti]

Hi Dimo.

I don't understand why it did work before I put the <!DOCTYPE attribute. Everything was OK.
Now that I have DOCTYPE, the columns are larger than what they should be.

Data inside the columns is not larger that the maximum width.

So what could be the reason ?

Thanks
Augusto

[Dimo]

Hi Augusto,

I don't see any difference in the behavior of the control with and without a DOCTYPE. I have a standalone test page with only a RadGrid on it with your declaration.

Please send a full runnable sample page and we will inspect it locally.


Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Augusto Cosatti]

Dimo,

I have raised a support request (#256899) with an example.

Augusto

[Jeganath]

Hi Dimo,

           I have same problem. But Now i solved using this link. Thanks.

           http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx



    Jegan.