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

Adding Pager Changes Grid Width

1 Answer 84 Views

Grid

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

WombatEd asked on 08 Dec 2010, 05:20 PM

I had a grid with a PagerStyle set to Visible="false". It looked right. Then I deleted the Visible="false" and, in IE 8, the grid's width went loony.

With Visible="false", the grid looks like this: http://comsimplicity.com/ScreenShots/Telerik/InternetExplorerPagerNo.jpg
Without Visible="false", the grid looks like this: http://comsimplicity.com/ScreenShots/Telerik/InternetExplorerPagerYes.jpg
In FireFox, without Visible="false", the grid looks right: http://comsimplicity.com/ScreenShots/Telerik/FireFoxPagerYes.jpg

Thank's in advance.

Here's the markup:

<telerik:RadGrid ID="grdSchedule" AllowMultiRowSelection="false" AutoGenerateColumns="False"

GridLines="None" runat="server" ShowFooter="false" ShowHeader="false" ShowGroupPanel="false"

ShowStatusBar="false" Skin="Web20" Width="952">

<MasterTableView AllowPaging="True" DataKeyNames="DisciplineId" DataSourceID="dsrDisciplines"

HierarchyLoadMode="ServerBind" PageSize="1" ShowHeader="false">

<AlternatingItemStyle BackColor="#FFCC66" BorderColor="#444444" BorderStyle="Solid"

BorderWidth="1PX" Font-Bold="True" Font-Italic="False" Font-Names="Verdana" Font-Overline="False"

Font-Size="8pt" Font-Strikeout="False" Font-Underline="False" ForeColor="#444444"

HorizontalAlign="Left" VerticalAlign="Middle" Wrap="False" />

<Columns>

<telerik:GridTemplateColumn UniqueName="CourseDescription">

<ItemTemplate>

<asp:HiddenField ID="hdnItemType" runat="server" Value="Discipline" />

<asp:HiddenField ID="hdnDisciplineId" runat="server" Value='<%# Eval("DisciplineId") %>' />

<asp:Label ID="lblDiscipline" runat="server" Text='<%# UCase(Eval("DisciplineName")) %>' Font-Size="12pt" />

<br />

<asp:Label ID="lblDivision" runat="server" Text='<%# UCase(Eval("DivisionName")) %>' />

<asp:Label ID="lblChairPerson" runat="server" Text='<%# " - " & Eval("ChairPersonName") & " [" & Eval("ChairPersonTitle") & "]" %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<DetailTables>

<telerik:GridTableView ClientDataKeyNames="DisciplineId" DataKeyNames="DisciplineId"

DataSourceID="dsrCourses" HierarchyLoadMode="ServerBind" runat="server" ShowHeader="false"

Width="100%">

<Columns>

<telerik:GridTemplateColumn UniqueName="CourseDescription">

<ItemStyle CssClass="rgCourseItem" />

<ItemTemplate>

<asp:HiddenField ID="hdnItemType" runat="server" Value="Course" />

<asp:HiddenField ID="hdnCourseId" runat="server" Value='<%# Eval("CourseId") %>' />

<asp:Label ID="lblDisciplineName" runat="server" Text='<%# UCase(Trim(Eval("DisciplineName"))) %>' />

<asp:Label ID="lblCourseId" runat="server" Text='<%# Trim(Eval("CourseId")) %>' />

- <asp:Label ID="lblCourseTitle" runat="server" Text='<%# Trim(Eval("CourseTitle")) %>' />

<asp:Label ID="lblTransferText" runat="server" Text='<%# Eval("TransferText") %>' />

- <asp:Label ID="lblUnits" runat="server" Text='<%# Eval("Units", "{0:f2}") %>' /> Unit(s)

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<DetailTables>

<telerik:GridTableView BorderColor="#CCCCCC" ClientDataKeyNames="CourseId" DataSourceID="dsrSections"

HierarchyLoadMode="ServerBind" runat="server" ShowHeader="true" Width="100%">

<AlternatingItemStyle CssClass="rgSectionRowScheduleAlt" />

<Columns>

<telerik:GridBoundColumn DataField="SectionNumber" HeaderText="Section" UniqueName="SectionNumber">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="48" />

<ItemStyle CssClass="rgSectionItemFirst" HorizontalAlign="Center" />

</telerik:GridBoundColumn> <%-- Section --%>

<telerik:GridTemplateColumn UniqueName="DetailsButtons">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="63" />

<HeaderTemplate>

<img alt="" height="1px" src="images/clear.gif" width="63px" />

</HeaderTemplate>

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

<ItemTemplate>

<asp:ImageButton ID="cmdShowDetails" ImageUrl="~/images/DescriptionButton.jpg" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Description Button --%>

<telerik:GridTemplateColumn UniqueName="Times">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="124px" />

<HeaderTemplate>

Starting and End Time

</HeaderTemplate>

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

<ItemTemplate>

<asp:HiddenField ID="hdnItemType" runat="server" Value="Section" />

<asp:HiddenField ID="hdnYear" runat="server" Value='<%# Eval("Year") %>' />

<asp:HiddenField ID="hdnTerm" runat="server" Value='<%# Eval("Term") %>' />

<asp:HiddenField ID="hdnSectionNumber" runat="server" Value='<%# Eval("SectionNumber") %>' />

<asp:Repeater ID="rptTimes" runat="server">

<ItemTemplate>

<asp:Label ID="lblTime" runat="server" Text='<%# lCase(Eval("TimeStart", "{0:h:mm tt}") & " - " & Eval("TimeEnd", "{0:h:mm tt}")) %>' />

<%--12:00 am - 12:50 am--%>

</ItemTemplate>

<SeparatorTemplate>

<br />

</SeparatorTemplate>

</asp:Repeater>

<telerik:RadToolTip ID="ttpScheduleItem"

AutoCloseDelay="0"

HideDelay="500"

IsClientID="true"

runat="server"

Width="320px"

>

<div class="ToolTipSectionNumber">

Section: #<%#Eval("SectionNumber")%>

</div>

<div class="ToolTipSectionDisciplineAndCourse">

<%#Eval("DisciplineId")%> <%#Eval("CourseId")%>: <%#Eval("CourseId")%>

</div>

<div class="ToolTipTransferText">

Transfer: <%#Eval("TransferText")%>

</div>

<div class="ToolTipUnits">

Units: <%#Eval("Units")%>

</div>

<div class="ToolTipDescription">

<%#Eval("Description")%>

</div>

</telerik:RadToolTip>

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Times --%>

<telerik:GridTemplateColumn HeaderText="Days" UniqueName="Days">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="86" />

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

<ItemTemplate>

<asp:Repeater ID="rptDaysText" runat="server">

<ItemTemplate>

<asp:Label ID="lblDaysText" runat="server" Text='<%# Eval("DaysText") %>' />

<%--SuMTuWThFSa--%>

</ItemTemplate>

<SeparatorTemplate>

<br />

</SeparatorTemplate>

</asp:Repeater>

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Days --%>

<telerik:GridTemplateColumn HeaderText="Room" UniqueName="Room">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="74" />

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

<ItemTemplate>

<asp:Repeater ID="rptRooms" runat="server">

<ItemTemplate>

<asp:Label ID="lblBuildingAndRoom" runat="server" Text='<%# Eval("BuildingAndRoom") %>' />

<%--ASDF GHKL--%>

</ItemTemplate>

<SeparatorTemplate>

<br />

</SeparatorTemplate>

</asp:Repeater>

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Room --%>

<telerik:GridTemplateColumn HeaderText="Instructor" UniqueName="Instructor">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Left" Width="154" />

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Left" />

<ItemTemplate>

<asp:Repeater ID="rptInstructors" runat="server">

<ItemTemplate>

<asp:Label ID="lblInstructor" runat="server" Text='<%# Eval("InstructorName") %>' />

<%--ASDFGHJKLASDFGHJKL, Z--%>

</ItemTemplate>

<SeparatorTemplate>

<br />

</SeparatorTemplate>

</asp:Repeater>

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Instructor --%>

<telerik:GridTemplateColumn UniqueName="StartDate">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="62" />

<HeaderTemplate>

Start Date

</HeaderTemplate>

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

<ItemTemplate>

<asp:Label ID="lblDateStart" runat="server" Text='<%# Eval("DateStart", "{0:M/d/yyyy}") %>' />

<%--12/30/2010--%>

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Date, Start --%>

<telerik:GridTemplateColumn UniqueName="EndDate">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="62" />

<HeaderTemplate>

End Date

</HeaderTemplate>

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

<ItemTemplate>

<asp:Label ID="lblDateEnd" runat="server" Text='<%# Eval("DateEnd", "{0:M/d/yyyy}") %>' />

<%--12/30/2010--%>

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Date, End --%>

<telerik:GridBoundColumn DataField="Enrolled" HeaderText="Enrolled" UniqueName="Enrolled">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="46" />

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

</telerik:GridBoundColumn> <%-- Enrolled --%>

<telerik:GridTemplateColumn UniqueName="MaxSeats">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="60" />

<HeaderTemplate>

Max Seats

</HeaderTemplate>

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

<ItemTemplate>

<asp:Label ID="lblEnrollmentLimitData" runat="server" Text='<%# Eval("EnrollmentLimit") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Max Seats --%>

<telerik:GridBoundColumn DataField="Weeks" HeaderText="Weeks" UniqueName="Weeks">

<HeaderStyle CssClass="rgSectionHeader" HorizontalAlign="Center" Width="40" />

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

</telerik:GridBoundColumn> <%-- Weeks --%>

<telerik:GridTemplateColumn HeaderText="PLANNER" UniqueName="ShowOnPlanner_2">

<HeaderStyle CssClass="rgSectionHeaderLast" HorizontalAlign="Center" Width="54" />

<ItemStyle CssClass="rgSectionItem" HorizontalAlign="Center" />

<ItemTemplate>

<table>

<tr>

<td>

<asp:CheckBox id="chkSelect" runat="server" />

</td>

<td>

<asp:Label ID="lblSelect" runat="server" Text="Saved" />

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn> <%-- Planner Checkbox --%>

</Columns>

<NoRecordsTemplate>

<div class="rgNoRecords">

<asp:Label ID="lblNoSections" CssClass="rgNoRecords" runat="server" Text="There are no sections that match your criteria." />

</div>

</NoRecordsTemplate>

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="CourseId" MasterKeyField="CourseId" />

</ParentTableRelation>

<HeaderStyle CssClass="rgSectionHeader" />

<ItemStyle CssClass="rgSectionRowSchedule" />

</telerik:GridTableView>

</DetailTables>

<NoRecordsTemplate>

<div class="rgNoRecords">

<asp:Label ID="lblNoCourses" CssClass="rgNoRecords" runat="server" Text="There are no classes that match your criteria." />

</div>

</NoRecordsTemplate>

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="DisciplineId" MasterKeyField="DisciplineId" />

</ParentTableRelation>

</telerik:GridTableView>

</DetailTables>

<ExpandCollapseColumn Visible="True" />

<ItemStyle BackColor="#FFCC66" BorderColor="#444444" BorderStyle="Solid" BorderWidth="1PX"

Font-Bold="True" Font-Italic="False" Font-Names="Verdana" Font-Overline="False"

Font-Size="8pt" Font-Strikeout="False" Font-Underline="False" ForeColor="#444444"

HorizontalAlign="Left" VerticalAlign="Middle" Wrap="False" />

<PagerStyle Visible="false" Mode="NextPrev" Position="TopAndBottom" />

</MasterTableView>

</telerik:RadGrid>

1 Answer, 1 is accepted

answered on 14 Dec 2010, 10:45 AM

Example.zip

Hi WombatEd,

I tried to reproduce the described issue, but to no avail. I am sending you a simple example based on your code. Could you please verify that on your side there is not any issues with the RadGrid's pager. Also could you please try removing all external css styles from your project.
Additionally I noticed that you have opened a duplicate post on the same matter. Please, refer to the other support ticket post for additional information. To avoid duplicate posts, I suggest you continue the communication there.

Kind regards,
Radoslav
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.