Pager not showing up outside the data div

[Ripunjay]

Hi,

I recently upgraded my rad grid from classic to Asp.Net AJAX Q1 grid.
Earlier (before upgrading) I could see the pagination properly.
But now (with all the properties same) I am getting the pager at the bottom of the data div after I scroll till the bottom.
Attached are the images [hope the hidden data is not a problem]. Can you please help me getting the pager properly. The aspx code for the grid is :





<table width="100%" style="border-width: 1px; border-bottom-width: 1px; border-bottom-width: 1px"

                                                class="STArea" cellspacing="0" cellpadding="0" border="1">

                                                <tr class="SSDetails">

                                                    <td style="height: 100%" align="center">

                                                        <div id="divMFile" runat="server" visible="true" style="overflow: auto; height: 280px;

                                                            width: 100%;">

                                                            <telerik:RadGrid ID="rgridMFile" Skin="SDCSkin" runat="server" BorderStyle="Solid" BorderWidth="0px"

                                                                AutoGenerateColumns="False" GridLines="None" Width="100%" Height="95%" OnSortCommand="rgridMFile_SortCommand"

                                                                OnItemDataBound="rgridMFile_ItemDataBound" OnPageIndexChanged="rgridMFile_PageIndexChanged" EnableEmbeddedSkins="false"

                                                                ShowFooter="false" AllowPaging="true" PagerStyle-Mode="NextPrevAndNumeric" AllowSorting="true">

                                                                <HeaderStyle Height="20px" />

                                                                <ClientSettings>

                                                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />

                                                                    <Selecting AllowRowSelect="true" />

                                                                </ClientSettings>

                                                                <MasterTableView>

                                                                    <Columns>

                                                                        <telerik:GridBoundColumn UniqueName="FNum" DataField="FNum" SortExpression="FNum"

                                                                            HeaderText="File ID">

                                                                            <HeaderStyle HorizontalAlign="Left" Width="10%" Wrap="False" />

                                                                            <ItemStyle CssClass="RadGridRow" Height="100%" Wrap="false" HorizontalAlign="left" />

                                                                        </telerik:GridBoundColumn>

                                                                        <telerik:GridBoundColumn UniqueName="Names" DataField="Names" SortExpression="Names"

                                                                            HeaderText="File Name">

                                                                            <HeaderStyle HorizontalAlign="Left" Width="20%" Wrap="False" />

                                                                            <ItemStyle CssClass="RadGridRow" Height="100%" Wrap="false" HorizontalAlign="left" />

                                                                        </telerik:GridBoundColumn>

                                                                        <telerik:GridBoundColumn UniqueName="FDetail" DataField="FDetail" SortExpression="FDetail"

                                                                            HeaderText="Prod Details">

                                                                            <HeaderStyle HorizontalAlign="Left" Width="20%" Wrap="False" />

                                                                            <ItemStyle CssClass="RadGridRow" Height="100%" Wrap="false" HorizontalAlign="left" />

                                                                        </telerik:GridBoundColumn>

                                                                        <telerik:GridBoundColumn UniqueName="PName" DataField="PName" SortExpression="PName"

                                                                            HeaderText="Prod Name">

                                                                            <HeaderStyle HorizontalAlign="Left" Width="20%" Wrap="False" />

                                                                            <ItemStyle CssClass="RadGridRow" Height="100%" Wrap="false" HorizontalAlign="left" />

                                                                        </telerik:GridBoundColumn>

                                                                        <telerik:GridBoundColumn UniqueName="Groups" DataField="Groups" SortExpression="Groups"

                                                                            HeaderText="Group Name">

                                                                            <HeaderStyle HorizontalAlign="Left" Width="20%" Wrap="False" />

                                                                            <ItemStyle CssClass="RadGridRow" Height="100%" Wrap="false" HorizontalAlign="left" />

                                                                        </telerik:GridBoundColumn>

                                                                        <telerik:GridBoundColumn UniqueName="Modified" DataField="Modified" SortExpression="Modified"

                                                                            HeaderText="LastModifiedBy">

                                                                            <HeaderStyle HorizontalAlign="Left" Width="10%" Wrap="False" />

                                                                            <ItemStyle CssClass="RadGridRow" Height="100%" Wrap="false" HorizontalAlign="left" />

                                                                        </telerik:GridBoundColumn>

                                                                    </Columns>

                                                                </MasterTableView>

                                                            </telerik:RadGrid>

                                                        </div>

                                                    </td>

                                                </tr>

                                            </table>

Also note that I could not change the pager mode as well. The pager itself is not properly visible in the browser window.
Let me know if anything specific needs to be set in Skin CSS.

Regards,
Ripunjay

[Tsvetina]

Hello Ripunjay,

The problem most probably comes from the custom skin that you use because I ran the exact same mark-up with the following changes and there was no problem with the grid pager look:

-Changed the datasource of the grid and the DataField of the columns.
-Removed the server events from mark-up.
-Enabled the embedded skin and left the grid to pick-up the Default skin.

I am attaching the test project. Take a look at it and let me know if you replicate the issue without your custom skin. If you do not, I would advise you to use a tool like Firebug to inspect the CSS applied to the grid and see where it messes up with the pager positioning.

Regards,
Tsvetina
the Telerik team

[Ripunjay]

Hi Tsvetina,

Thanks for your guidance. I removed

.RadGrid_SLB .rgDataDiv

{

height: auto !important;

}

from my custom CSS and it worked.

I would like to know if we can get the information in the pager that has been attached in the sreenshot. I have used

.RadGrid_SLB

 

 

.rgPager .rgAdvPart

 

{

 

 

display: none;

 

}

to hide the page size section. But unable to put text in that section.

Thanks,
Ripunjay

[Tsvetina]

Hi Ripunjay,

Can you confirm that you still cannot change your pager mode to NextPrevNumericAndAdvanced? This is usually achieved through setting:

<PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>

in the grid declaration.

If you manage to set it, the info part will appear as well. If not, you could programmatically hide the unneeded controls and set text in the page size part of the pager. You could see this help article for further information on how to access pager controls:
Accessing the elements of advanced type pager


Greetings,
Tsvetina
the Telerik team

[Dilip]

Hi,
I have a telerik grid.I do not want the height of the grid to be set.I want it to be changed according to the no.of records.So,I didnt use the height attribute in my css class .But there is some inline style(i could see this through the developer tool) ,which i could not find in the code,setting the height attribute to 300px.

 i tried overriding it with classes like
div.RadGrid_Default,
.MasterTable_Default
GridDataDiv_Default and so on..but i am unable to override it.

instead what i found is(through developer tool is) that inline style  is overriding all these classes. 

 

 

 

 

 

Please help me.

Thanks in advance

[Tsvetina]

Hi Dilip,

You could try setting ClientSettings-Scrolling-AllowScroll="True" and ClientSettings-Scrolling-ScrollHeight="". This will make the grid automatically change its height based on the number of records (without showing a vertical scrollbar).

Best wishes,
Tsvetina
the Telerik team