[Solved] Pager Style display as two lines

[Gijo]

Hi,

Below is my grid. The pager displays next and prev button in one line and 'Displaying page 1 of 4, items 1 to 5 of 19.' in second line.
I would like to display all this in a single line as seen in demos and samples.

<telerik:RadGrid ID="userGrid" runat="server" GridLines="None" AutoGenerateColumns="False"
            DataSourceID="odsUsers" OnItemDataBound="userGrid_ItemDataBound" OnPreRender="userGrid_PreRender"
            Skin="None" EnableEmbeddedSkins="false" CssClass="RadGrid" 
            AllowPaging="True" PageSize="5" Width="100%" Height="100%" PagerStyle-AlwaysVisible="true">

<MasterTableView DataKeyNames="UserId" DataSourceID="odsUsers" ShowHeadersWhenNoRecords="true">
            <PagerStyle  Mode="NextPrev" Font-Size="11px" Font-Names="tahoma"  NextPageImageUrl="../img/Grid/PagingNext.gif" PrevPageImageUrl="../img/Grid/PagingPrev.gif" >
            </PagerStyle>
<Columns>
    -------
   -------
</Columns>

Thanks,
Gijo Joseph.

</MasterTableView >
</telerik:RadGrid>

[Dimo]

Hello Gijo,

You need the following styles:

.PagerLeft_None
{
     float:left;
}

.PagerRight_None
{
     float:right;
}

(Actually, setting Skin="None" makes RadGrid for ASP.NET AJAX use a skin with the name of "None" and render CSS classes for such a skin. In order to prevent all CSS classes to be rendered, you have to set Skin="", but this will make styling of RadGrid more difficult)


Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Princy]

Hi,

If you are using Skin=" "  you may also  try using the code below to achieve the desired effect

CS:

  protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridPagerItem)
        {
            GridPagerItem pager = (GridPagerItem)e.Item;
            //The grid pager contains two panels.Each of which contain a LiteralControl. The first Literal Control dispalys  the message 'Change Page with two buttons.'
            LiteralControl ltrlControlsecondline = (LiteralControl)pager.Controls[0].Controls[1].Controls[0];
           //Add the literal Control of the second panel to the first panel
            ((System.Web.UI.WebControls.Panel)(pager.Controls[0].Controls[0])).Controls.Add(ltrlControlsecondline);
           //Hide the second panel
            ((System.Web.UI.WebControls.Panel)(pager.Controls[0].Controls[1])).Visible = false;
        }

Thanks,
Princy

[Gijo]

It worked . Thanks a lot.

[sony]

Its not working,any other way to display pager in single line?