[Solved] RadGrid: Column Align Issue

[Simon Colmer]

Hey again, im having problems alligning rows and headers in the radgrid. I have tried following what other people have done to fix this but nothing seems to change the outcome. I did have the horizontal scroll bar appearing but i got rid of that expecting the alignment to fix.

I am using Static headers, and i am running this in IE (as it will be mainly used in IE), it is contained in a table and it has its layout set as "fixed".

Image:
http://x-volt.com/pics/telerik-error.PNG

Here is the code:

<table class="TableOuter" id="Table1" style="table-layout:fixed" cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col class="display" />
<col class="display" />
</colgroup>
<tr>
<td valign="top" align="left" style="width:100%;">
<telerik:RadTabStrip ID="TC" runat="server" Skin="Web20" MultiPageID="MP" SelectedIndex="0" Width="100%" CSSClass="tabStrip" meta:resourcekey="TCResource1" CausesValidation="False">
<Tabs>
<telerik:RadTab Text="Chart" meta:resourcekey="RadTabResource1" />
<telerik:RadTab Text="Data" meta:resourcekey="RadTabResource2" />
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="MP" runat="server" CssClass="tabMultiPage" meta:resourcekey="MPResource1" SelectedIndex="0" >
<telerik:RadPageView ID="T1" runat="server" height="518px" 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" runat="server" imagetransfermethod="File" Height="500px" Width="675px" meta:resourcekey="WebChartResource1">
</c1webchart:c1webchart>
</telerik:RadPageView>
<telerik:RadPageView ID="T2" runat="server" height="518px" 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 runat="server" Skin="Office2007" ID="uxTelerikGrid" Width="100%" style="overflow:hidden" AutoGenerateColumns="true" EnableViewState="false" AllowPaging="false" ShowStatusBar="true" ShowFooter="False" HeaderStyle-Width="70px" Height="100%" HeaderStyle-Wrap="false">
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />
</ClientSettings>
<ExportSettings IgnorePaging="True" OpenInNewWindow="True" ExportOnlyData="true">
<Pdf AllowCopy="True" AllowModify="True" Author="999" Keywords="None" PageBottomMargin="15mm" PageLeftMargin="15mm"  PageRightMargin="15mm" PageTopMargin="15mm" PageTitle="Contract Analysis Graph" Subject="Contract Analysis Graph" Title="Contract Analysis Graph" PaperSize="A4" PageHeight="297mm" PageWidth="210mm" />
</ExportSettings>
<MasterTableView CommandItemDisplay="Bottom" Width="97%">
<CommandItemStyle Height="10px" />
<CommandItemTemplate>
<div style="padding:3px 0px">
<asp:LinkButton ID="uxExportCSV" runat="server" CausesValidation="False" CommandName="ExportToCsv" meta:resourcekey="uxExportCSVResource">
<img style="border: 0px; vertical-align:middle" alt="Export as CSV" title="Export as CSV" src="Images/Export_CSV.png" />
</asp:LinkButton>
<asp:LinkButton ID="uxExportXLS" runat="server" CausesValidation="False" CommandName="ExportToExcel" meta:resourcekey="uxExportXLSResource">
<img style="border: 0px; vertical-align:middle" alt="Export as Excel" title="Export as Excel" src="Images/Export_XLS.jpg" />
</asp:LinkButton>
<asp:LinkButton ID="uxExportPDF" runat="server" CausesValidation="False" CommandName="ExportToPdf" meta:resourcekey="uxExportPDFResource">
<img style="border: 0px; vertical-align:middle" alt="Export as PDF" title="Export as PDF" src="Images/Export_PDF_16.gif" />
</asp:LinkButton>
</div>
</CommandItemTemplate>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadPageView>
</telerik:RadMultiPage>
</td>
</tr>


Any help would be great!

[Simon Colmer]

Bump!!

[Sandra Walters]

Simon - I had a similar scenario (TabStrip / MultiPage with a RadGrid on one of the pages) and encountered the same type of alignment issue between the cell rows and headers.  Strangely, removing a meta tag for IE7 compatibility  (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> )  solved the problem.  Thought I'd mention it in case this might be useful for you.

[Simon Colmer]

Hey, thanks for the info! However the problem is that this page has to run in ie-cap mode as most of the clients run this version of IE! (oops)

So any other help would be awesome!

Thanks

Si

[Dimo]

Hello Simon,

The provided code snippet does not provide enough information to determine the cause of the misalignment. Please send us a complete runnable web page.

Best wishes,
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.