Hello, I have a couple of issues with the grid control and column sizing. Here is my scenerio; I have grid inside a div that is set for 100% width. I did look at http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx and near as I can tell I did it all correctly.
Issue 1:
I have two columns that are given a header style width of 100px. When I open the form the two columns are split equally to the width of the window. My expectation is that they are two columns at 100px each with a filler block taking up the rest of the space. I open the form and then manully resize the columns back to 100px this is indeed what I get.
Issue 2:
I have 6 columns at 150px each. Sometimes (not consistently) the grid wil shrink the columns rather than display a horizontal scroll bar. So I end up with 6 columns at 75px each rather than getting a scroll bar.
Issue 3:
Why is it that when I fix the column headers (UseStaticHeaders) There is a white box at the top of the scroll bar rather than a column header. It looks correct if I have UseStaticHeaders turned off.
Here is the page
And the code behind
Issue 1:
I have two columns that are given a header style width of 100px. When I open the form the two columns are split equally to the width of the window. My expectation is that they are two columns at 100px each with a filler block taking up the rest of the space. I open the form and then manully resize the columns back to 100px this is indeed what I get.
Issue 2:
I have 6 columns at 150px each. Sometimes (not consistently) the grid wil shrink the columns rather than display a horizontal scroll bar. So I end up with 6 columns at 75px each rather than getting a scroll bar.
Issue 3:
Why is it that when I fix the column headers (UseStaticHeaders) There is a white box at the top of the scroll bar rather than a column header. It looks correct if I have UseStaticHeaders turned off.
Here is the page
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| <Scripts> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> |
| <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> |
| </Scripts> |
| </telerik:RadScriptManager> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
| </telerik:RadAjaxManager> |
| <div> |
| <p>Both columns are specified as 100 px, the scroll bars are turn on so why are my columns wider than 100 px?</p> |
| <p>Why is there a little empty white box looking like a nudist at a grand ball sitting at the top of the vertical scroll bar.</p> |
| <telerik:RadGrid ID="Grid" runat="server" |
| Width="100%" Height="200px" |
| AllowFilteringByColumn="false" |
| ShowStatusBar="true" AllowSorting="true" |
| AutoGenerateColumns="false" |
| AllowPaging="True" AllowCustomPaging="True" |
| OnNeedDataSource="GridNeedDataSource" > |
| <PagerStyle Mode="NextPrevAndNumeric"/> |
| <ClientSettings AllowDragToGroup="false" > |
| <Scrolling AllowScroll="true" |
| EnableVirtualScrollPaging="false" |
| SaveScrollPosition="false" |
| UseStaticHeaders="true"/> |
| <Resizing AllowColumnResize="true" |
| AllowRowResize="false" |
| EnableRealTimeResize="false" |
| ResizeGridOnColumnResize="false" |
| ClipCellContentOnResize="true"/> |
| <Selecting AllowRowSelect="true" /> |
| </ClientSettings> |
| <MasterTableView AllowCustomSorting="true" TableLayout="Fixed"> |
| <Columns> |
| <telerik:GridBoundColumn HeaderText="Col1" DataField="field1"> |
| <HeaderStyle Width="100" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Col2" DataField="field2"> |
| <HeaderStyle Width="100" /> |
| </telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| </telerik:RadGrid> |
| </div> |
| <div> |
| <p>If you open this in a browser window that is less than 900px, rather than a scroll bar I get a smaller columns why?</p> |
| <p>If I fix the grid width to 600 px, I get the scroll bars.</p> |
| <telerik:RadGrid ID="Grid2" runat="server" |
| Width="100%" Height="200px" |
| AllowFilteringByColumn="false" |
| ShowStatusBar="true" AllowSorting="true" |
| AutoGenerateColumns="false" |
| AllowPaging="True" AllowCustomPaging="True" |
| OnNeedDataSource="GridNeedDataSource" > |
| <PagerStyle Mode="NextPrevAndNumeric"/> |
| <ClientSettings AllowDragToGroup="false" > |
| <Scrolling AllowScroll="true" |
| EnableVirtualScrollPaging="false" |
| SaveScrollPosition="false" |
| UseStaticHeaders="true"/> |
| <Resizing AllowColumnResize="true" |
| AllowRowResize="false" |
| EnableRealTimeResize="false" |
| ResizeGridOnColumnResize="false" |
| ClipCellContentOnResize="true"/> |
| <Selecting AllowRowSelect="true" /> |
| </ClientSettings> |
| <MasterTableView AllowCustomSorting="true" TableLayout="Fixed"> |
| <Columns> |
| <telerik:GridBoundColumn HeaderText="Col1" DataField="field1"> |
| <HeaderStyle Width="150" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Col2" DataField="field2"> |
| <HeaderStyle Width="150" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Col3" DataField="field2"> |
| <HeaderStyle Width="150" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Col4" DataField="field2"> |
| <HeaderStyle Width="150" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Col3" DataField="field2"> |
| <HeaderStyle Width="150" /> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn HeaderText="Col4" DataField="field2"> |
| <HeaderStyle Width="150" /> |
| </telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| </telerik:RadGrid> |
| </div> |
| </form> |
| </body> |
| </html> |
And the code behind
| using System; |
| using Telerik.Web.UI; |
| public partial class Default : System.Web.UI.Page |
| { |
| public class Foo |
| { |
| public Foo() |
| { |
| Field1 = Guid.NewGuid().ToString(); |
| Field2 = Guid.NewGuid().ToString(); |
| } |
| public string Field1 { get; set; } |
| public string Field2 { get; set; } |
| } |
| private Foo[] FooArray = new[] |
| { |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| new Foo(), |
| }; |
| protected void Page_Load(object sender, EventArgs e) |
| { |
| } |
| protected void GridNeedDataSource(object source, GridNeedDataSourceEventArgs e) |
| { |
| Grid.DataSource = FooArray; |
| Grid2.DataSource = FooArray; |
| } |
| } |
5 Answers, 1 is accepted
0
Mike
Top achievements
Rank 1
Rank 1
answered on 22 Oct 2009, 03:36 PM
*BUMP* anyone?
0
Hello Mike,
Here are some hints on your questions:
1) If all columns have a fixed pixel width, then the sum of all widths must match the RadGrid width, otherwise the columns expand to fill up the available space. In such cases it is good to leave one column without a width (e.g. the last one), so that it can adjust automatically.
2) I can't reproduce this with your sample page. Generally, if the TableLayout is "Fixed" and there are no column widths set, the columns always shrink to fit in the RadGrid width and no horizontal scrollbar appears. In such cases, you have to set column widths, or a MasterTableView width, or remove the fixed TableLayout.
3) When using static headers, there are two tables rendered - one for the headers and one for the data. The two tables are synchronized, so that the columns are aligned. Hence the empty space above the scrollbar - there is no table cell there. This glitch is resolved in IE6, IE7 and FF2, but due to browser peculiarities, it cannot be done the same way in IE8 and FF3. If you want, you can create a custom image, which looks like the header background and apply it to the RadGrid wrapper div at the top-right position.
div.RadGrid_SkinName
{
background: top right repeat-x url(.....);
}
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.
Here are some hints on your questions:
1) If all columns have a fixed pixel width, then the sum of all widths must match the RadGrid width, otherwise the columns expand to fill up the available space. In such cases it is good to leave one column without a width (e.g. the last one), so that it can adjust automatically.
2) I can't reproduce this with your sample page. Generally, if the TableLayout is "Fixed" and there are no column widths set, the columns always shrink to fit in the RadGrid width and no horizontal scrollbar appears. In such cases, you have to set column widths, or a MasterTableView width, or remove the fixed TableLayout.
3) When using static headers, there are two tables rendered - one for the headers and one for the data. The two tables are synchronized, so that the columns are aligned. Hence the empty space above the scrollbar - there is no table cell there. This glitch is resolved in IE6, IE7 and FF2, but due to browser peculiarities, it cannot be done the same way in IE8 and FF3. If you want, you can create a custom image, which looks like the header background and apply it to the RadGrid wrapper div at the top-right position.
div.RadGrid_SkinName
{
background: top right repeat-x url(.....);
}
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.
0
tmlipinski
Top achievements
Rank 1
Rank 1
answered on 02 Nov 2009, 10:25 AM
Hi,
Some notes on the mentioned issues:
1. "otherwise the columns expand to fill up the available space": it's true but not in the case of IE7 (I haven't check it under IE8): under IE7 the last column remains not expanded.
"it is good to leave one column without a width": yes, it works fine but when you automatically adjust the width of the RadGrid to the width of the window (that's my own functionality) and the window gets narrower and narrower, the last column also gets narrower and narrower - and disappears in the end.
3. The empty space above the scrollbar. I've tested in under: IE7, FF 3.0.15, Opera 9.64, Chrome 3.0 and Safari 4.0.3. In all these case, the starting layout is fine (there is always an empty space above the scrollbar). But when there is no initial scrollbar (and no empty space) and then you make the height of the grid smaller (e.g. resizing the grid according to the spliiter the grid lays on) to force the scrollbar to appear - in this case IE7 behaves fine (adds the empty space) but all other browsers - not (the header and the data become not synchronized).
Regards
Tomasz
(Updated) I'm using the "Simple" skin. Maybe it is important....
Some notes on the mentioned issues:
1. "otherwise the columns expand to fill up the available space": it's true but not in the case of IE7 (I haven't check it under IE8): under IE7 the last column remains not expanded.
"it is good to leave one column without a width": yes, it works fine but when you automatically adjust the width of the RadGrid to the width of the window (that's my own functionality) and the window gets narrower and narrower, the last column also gets narrower and narrower - and disappears in the end.
3. The empty space above the scrollbar. I've tested in under: IE7, FF 3.0.15, Opera 9.64, Chrome 3.0 and Safari 4.0.3. In all these case, the starting layout is fine (there is always an empty space above the scrollbar). But when there is no initial scrollbar (and no empty space) and then you make the height of the grid smaller (e.g. resizing the grid according to the spliiter the grid lays on) to force the scrollbar to appear - in this case IE7 behaves fine (adds the empty space) but all other browsers - not (the header and the data become not synchronized).
Regards
Tomasz
(Updated) I'm using the "Simple" skin. Maybe it is important....
0
Hello Tomasz,
1. Yes, IE6 and IE7 do not expand the columns in Auto TableLayout mode. As for the disappearing column problem when the browser window gets too small - this is expected when the TableLayout is Fixed and the MasterTable is forced to shrink. Let me clarify the options in your scenario:
a) Use Auto TableLayout for the MasterTableView - when using static headers this is possible only if there are no column widths set
b) Use Fixed TableLayout and set column widths for all columns if there will be a possibility for the browser window to become too small.
c) Use Fixed TableLayout, set column widths only when desired, but place RadGrid inside a container with a min-width CSS style.
3. Indeed, this is a known issue. We will research and fix it in the future. Please add the following CSS rule as a workaround:
.rgDataDiv
{
overflow-y: scroll !important;
}
Kind 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.
1. Yes, IE6 and IE7 do not expand the columns in Auto TableLayout mode. As for the disappearing column problem when the browser window gets too small - this is expected when the TableLayout is Fixed and the MasterTable is forced to shrink. Let me clarify the options in your scenario:
a) Use Auto TableLayout for the MasterTableView - when using static headers this is possible only if there are no column widths set
b) Use Fixed TableLayout and set column widths for all columns if there will be a possibility for the browser window to become too small.
c) Use Fixed TableLayout, set column widths only when desired, but place RadGrid inside a container with a min-width CSS style.
3. Indeed, this is a known issue. We will research and fix it in the future. Please add the following CSS rule as a workaround:
.rgDataDiv
{
overflow-y: scroll !important;
}
Kind 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.
0
tmlipinski
Top achievements
Rank 1
Rank 1
answered on 04 Nov 2009, 01:40 PM
Hi,
1. OK. I'll deal with this problem some other way (by adjusting the width of the last column programmaticaly, at the client side).
3. Works perfectly! Thanks a lot.
Regards
Tomasz
1. OK. I'll deal with this problem some other way (by adjusting the width of the last column programmaticaly, at the client side).
3. Works perfectly! Thanks a lot.
Regards
Tomasz