This is a migrated thread and some comments may be shown as answers.

Scrolling Problem: Auto-Generated Columns

4 Answers 187 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Simon Colmer asked on 16 Jul 2009, 09:27 AM

Hello, this is my 1st post as a member (just wanted to say how awesome Telerik controls are)

Ok, my problem is that i have the columns generated at runtime in my grid, and i want the columns to overun so it scrolls like in the example http://demos.telerik.com/aspnet-ajax/grid/examples/client/scrolling/defaultcs.aspx

The problem is that the columns are resising when more get added to fit the space they are in, and not just over flowing to allow horizontal scrolling.

You can find a preview image here:
http://x-volt.com/pics/telerik_grid-resize_problem.jpg

My code is in a Rad MultiPage tab window, i dont know if thats playing up with it, but i was wondering if anyone can help? The display code is:

<telerik:RadMultiPage ID="MP" runat="server" CssClass="tabMultiPage" meta:resourcekey="MPResource1" SelectedIndex="0" >

<telerik:RadPageView ID="T1" runat="server" height="420px" width="97%" Selected="True" meta:resourcekey="T1Resource1">

<asp:label id="lblNoGraphData" runat="server" cssclass="Warning" Text="There is no data to view for these dates." meta:resourcekey="lblNoGraphDataResource1" />

</div>

<c1webchart:c1webchart id="WebChart" Height="420px" Width="960px" runat="server" imagetransfermethod="File" meta:resourcekey="WebChartResource1">

</c1webchart:c1webchart>

</telerik:RadPageView>

<telerik:RadPageView ID="T2" runat="server" height="420px" width="100%" meta:resourcekey="T2Resource1" >

<asp:label id="lblNoData" runat="server" cssclass="DataGridInfoText" Text="There is no data to view for these dates." meta:resourcekey="lblNoDataResource1" />

<!- -----------------------TELERIK GRID START----------------------- -->

<telerik:RadGrid ID="uxTelerikGrid" runat="server" Skin="Office2007" AutoGenerateColumns="true">

</ClientSettings>

</ExportSettings>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadPageView>

</telerik:RadMultiPage>

Thanks for your help,

Simon

4 Answers, 1 is accepted

answered on 16 Jul 2009, 10:31 AM

Update:

We have possibly round this problem down to the "RadPageView" control. We took the rad grid out of this control and it works, but as my system works closely with this, we have found a potential fix:

In the RadPageView (adding a fixed width):
<telerik:RadPageView ID="T2" runat="server" height="420px" Width="900px" meta:resourcekey="T2Resource1">

In the rad grid:
<telerik:RadGrid .... HeaderStyle-Width="60px" HeaderStyle-Wrap="false">

The problem with this fix is that the website itself is still being resized to the hidden width of the control (if the rad grid resized itself to the columns) so the spacing around this object is still going wrong. Is this a known bug, and are there any better fixes then this?

Thanks

Si

answered on 16 Jul 2009, 01:22 PM

Hi Simon,

Thank you for your kind words :)

The RadGrid appearance shown on your screenshot can be achieved if the TableLayout of the MasterTableView is "fixed" and there are no widths specified for the columns and the MasterTableView (or the MasterTableView's width is 100%). Maybe you have set TableLayout="Fixed" or fixed layout is enabled automatically, depending on the RadGrid features being used in this particular scenario. I doubt that the PageView is involved.

The easiest solution is to set column widths with HeaderStyle-Width, as you have already discovered, or use TableLayout="Auto", if possible.

I am afraid I did not understand what do you mean by the following, so please explain further:

"The problem with this fix is that the website itself is still being resized to the hidden width of the control (if the rad grid resized itself to the columns) so the spacing around this object is still going wrong."

By the way, using ScrollHeight="100%" does not make much sense - ScrollHeight should be set in pixels. If you want RadGrid to be 100% high, then set RadGrid.Height instead of RadGrid.ClientSettings.Scrolling.ScrollHeight.

All the best,
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.

answered on 16 Jul 2009, 01:36 PM

Hey,

its looking a lot better, but let me explain this new problem.

Now we have got the grid displaying well, all very pretty! But the spacing around the grid has gone a bit crazy! Its as if the grid is very wide (but its not)

This image might help
http://x-volt.com/pics/telerik_grid-resize_problem2.jpg

What this image is trying to show is that the width around the box is much bigger as the table the arrow is pointing is set to be the same size as the page but the grid object is stretching the table it is in.

Oh, also my static column isnt working (nothing seems to happen) can you see any reason for this?

Here is my code,

thanks

Si

telerik:RadMultiPage ID="MP" runat="server" CssClass="tabMultiPage" meta:resourcekey="MPResource1" SelectedIndex="0" >

telerik:RadPageView ID="T1" runat="server" height="420px" width="97%" Selected="True" meta:resourcekey="T1Resource1">

div style="text-align:center;">

asp:label id="lblNoGraphData" runat="server" cssclass="Warning" Text="There is no data to view for these dates." meta:resourcekey="lblNoGraphDataResource1" />

div>

c1webchart:c1webchart id="WebChart" Height="420px" Width="975px" runat="server" imagetransfermethod="File" meta:resourcekey="WebChartResource1">

c1webchart:c1webchart>

telerik:RadPageView>

telerik:RadPageView ID="T2" runat="server" height="420px" Width="975px" meta:resourcekey="T2Resource1">

asp:label id="lblNoData" runat="server" cssclass="DataGridInfoText" Text="There is no data to view for these dates." meta:resourcekey="lblNoDataResource1" />

<!-

-----------------------TELERIK GRID START----------------------- -->
<telerik:RadGrid runat="server" Skin="Office2007" ID="uxTelerikGrid" AutoGenerateColumns="true" EnableViewState="false" AllowPaging="false" ShowStatusBar="true" ShowFooter="False" HeaderStyle-Width="70px" HeaderStyle-Wrap="false">

ClientSettings>
<Scrolling ScrollHeight="350px" AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="1" />

Resizing EnableRealTimeResize="true" AllowColumnResize="true" />

</ClientSettings>

ExportSettings IgnorePaging="True" OpenInNewWindow="True">

ExportSettings>

MasterTableView CommandItemDisplay="Bottom" TableLayout="Fixed" UseAllDataFields="true">
<CommandItemStyle Height="10px" />

CommandItemTemplate>

div style="padding:3px 0px">

asp:LinkButton ID="uxExportCSV" runat="server" CausesValidation="False" CommandName="ExportToCsv" meta:resourcekey="uxExportCSVResource1">

img style="border: 0px; vertical-align:middle" alt="Export as CSV" title="Export as CSV" src="Images/Export_CSV.png" />

asp:LinkButton>

&nbsp

asp:LinkButton ID="uxExportXLS" runat="server" CausesValidation="False" CommandName="ExportToExcel" meta:resourcekey="uxExportXLSResource1">
<img style="border: 0px; vertical-align:middle" alt="Export as Excel" title="Export as Excel" src="Images/Export_XLS.jpg" />
</asp:LinkButton>

&nbsp

asp:LinkButton ID="uxExportPDF" runat="server" CausesValidation="False" CommandName="ExportToPdf" meta:resourcekey="uxExportPDFResource1">

div>
</CommandItemTemplate>

MasterTableView>

telerik:RadGrid>

telerik:RadPageView>

telerik:RadMultiPage>

Accepted