Pger Template Content Outside RadGrid

[Aakansha]

Hello,

How can we add pager control of RadGrid to panel outside Radgrid?how can we display paging of RadGrid(Paging visible in RadGrid header or Footer) in panel which is outside radgrid.

i tried in the following way

<

 

 

telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" ShowHeader="true"

 

 

 

ShowFooter="false" AllowSorting="True" Skin="ManageInventory" EnableEmbeddedSkins="false"

 

 

 

PageSize="10" AllowPaging="true" OnItemCreated="RadGrid1_ItemCreated">

 

 

 

<ItemStyle />

 

 

 

<MasterTableView AutoGenerateColumns="False" DataKeyNames="Reg_id" DataSourceID="SqlDataSource1">

 

 

 

 

<PagerTemplate>

 

 

 

<asp:Panel ID="PagerPanel" Style="padding: 6px; line-height: 24px" runat="server">

 

 

 

<div style="float: left">

 

 

 

<span style="margin-right: 3px;">Page size:</span>

 

 

 

<telerik:RadComboBox ID="RadComboBox1" DataSource="<%# new object[]{10, 20, 30, 40, 50} %>"

 

 

 

Style="margin-right: 20px;" Width="40px" SelectedValue='<%# DataBinder.Eval(Container, "Paging.PageSize") %>'

 

 

 

runat="server" OnClientSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">

 

 

 

</telerik:RadComboBox>

 

 

 

</div>

 

 

 

<div style="margin: 0px; float: right;">

 

Displaying page

<%

 

# (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1 %>

 

of

<%

 

# DataBinder.Eval(Container, "Paging.PageCount")%>

 

, items

<%

 

# (int)DataBinder.Eval(Container, "Paging.FirstIndexInPage") + 1 %>

 

to

<%

 

# (int)DataBinder.Eval(Container, "Paging.LastIndexInPage") + 1 %>

 

of

<%

 

# DataBinder.Eval(Container, "Paging.DataSourceCount")%>

 

 

 

</div>

 

 

 

<div style="width: 260px; margin: 0px; padding: 0px; float: left; margin-right: 10px;

 

 

 

 

white-space: nowrap;">

 

 

 

<asp:Button ID="Button1" runat="server" OnClientClick="changePage('first'); return false;"

 

 

 

CommandName="Page" CommandArgument="First" Text=" " CssClass="PagerButton FirstPage" />

 

 

 

<asp:Button ID="Button2" runat="server" OnClientClick="changePage('prev'); return false;"

 

 

 

CommandName="Page" CommandArgument="Prev" Text=" " CssClass="PagerButton PrevPage" />

 

 

 

<span style="vertical-align: middle;">Page:</span>

 

 

 

<telerik:RadNumericTextBox ID="RadNumericTextBox1" Width="25px" Value='<%# (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1 %>'

 

 

 

runat="server">

 

 

 

<ClientEvents OnValueChanged="RadNumericTextBox1_ValueChanged" />

 

 

 

<NumberFormat DecimalDigits="0" />

 

 

 

</telerik:RadNumericTextBox>

 

 

 

<span style="vertical-align: middle;">of

 

<%

 

# DataBinder.Eval(Container, "Paging.PageCount")%>

 

 

 

</span>

 

 

 

<asp:Button ID="Button3" runat="server" OnClientClick="changePage('next'); return false;"

 

 

 

CommandName="Page" CommandArgument="Next" Text=" " CssClass="PagerButton NextPage" />

 

 

 

<asp:Button ID="Button4" runat="server" OnClientClick="changePage('last'); return false;"

 

 

 

CommandName="Page" CommandArgument="Last" Text=" " CssClass="PagerButton LastPage" />

 

 

 

</div>

 

 

 

</asp:Panel>

 

 

 

</PagerTemplate>

 

 

 

 

<PagerStyle Mode="NumericPages" PageButtonCount="10" Position="TopAndBottom"/>

 

Code Behind:---

 

 

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)

 

{

 

 

if (e.Item is GridPagerItem)

 

{

 

 

GridPagerItem gridPager = e.Item as GridPagerItem;

 

 

 

Control numericPagerControl = gridPager.GetNumericPager();

 

 

 

if (gridPager.NamingContainer is GridFooterItem)

 

{

 

 

Panel pagerpanel=(Panel)gridPager.FindControl("PagerPanel");

 

pnl1.Controls.Add(pagerpanel);

}

pnl.Controls.Add(numericPagerControl);

}

Client Functions:-

var

 

 

tableView = null;

 

 

 

function pageLoad(sender, args) {

 

tableView = $find(

 

"<%= RadGrid1.ClientID %>").get_masterTableView();

 

}

 

 

function RadComboBox1_SelectedIndexChanged(sender, args) {

 

tableView.set_pageSize(sender.get_value());

}

 

 

function changePage(argument) {

 

tableView.page(argument);

}

 

 

function RadNumericTextBox1_ValueChanged(sender, args) {

 

tableView.page(sender.get_value());

}

here i want this paging should be displayed on panel which is outside radgrid.so i added it in panel but i am getting an error as:--

Unable to cast object of type 'System.Web.UI.HtmlControls.HtmlGenericControl' to type 'System.Web.UI.WebControls.WebControl'.

Line 17:         var tableView = null;
Line 18:         function pageLoad(sender, args) {
Line 19: //tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();Line 20:         }
Line 21

Any Suggestion how can i fullfill my requirement...

Thanks

[Iana Tsolova]

Hello Aakansha,

You cannot separate the grid pager from the grid itself neither use external pager control. However you can replace the grid with RadListView and use on of its predefined layouts which resembles the RadGrid. Then you can use the RadDataPager control for paging and place it wherever you like on the page.

Kind regards,
Iana
the Telerik team