Pager Template - Dropdown List

[Charles]

Does anyone have a sample of a Pager Template that only has a dropdown listbox with something like "Pg 1 of 10", "Pg 2 of 10", etc. as items in the dropdown. And then, when one of the items is selected, the grid pages to that page?

Or, if no samples, can someone point me in the right direction. Meaning, should this be server-side custom paging code or declarative code within the template?

Thanks.

[Shinu]

Hello Charles,

Attach OnClientSelectedIndexChanged event to RadListBox and change the page according to selection in the event handler.

JavaScript:

<script type="text/javascript">

function OnClientSelectedIndexChanged(sender, args) {

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

tableView.page(sender.get_selectedItem().get_value());

}

</script>

ASPX:

<PagerTemplate>

<telerik:RadListBox ID="RadListBox1" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">

<Items>

<telerik:RadListBoxItem Text="1 of 10" Value="1" />

<telerik:RadListBoxItem Text="2 of 10" Value="2" />

<telerik:RadListBoxItem Text="3 of 10" Value="3" />

</Items>

</telerik:RadListBox>

</PagerTemplate>

Also checkout the example which shows how to customize the pagerItem using PagerTemplate.

Pager Template

-Shinu.

[Charles]

Thanks for the quick reply, Shinu.

I did come up with a solution (all server-side, however). Yours seems to be simpler. I had to use two methods/event handlers as seen below:
C#

        protected void rgrdNetworks_ItemCreated(object sender, GridItemEventArgs e)
        {
            if(e.Item is GridPagerItem)
            {
                GridPagerItem pagerItem = e.Item as GridPagerItem;
                DropDownList ddl = pagerItem.FindControl("ddlPager") as DropDownList;
                ddl.SelectedIndexChanged += new EventHandler(ddl_PageChanged);
                ddl.AutoPostBack = true;

                int pageCount = rgrdNetworks.PageCount;

                for(int i=0; i<pageCount; i++)
                {
                    ddl.Items.Add(new ListItem("Pg " + (i+1) + " of " + pageCount, i.ToString()));
                }

                ddl.SelectedIndex = rgrdNetworks.CurrentPageIndex;
            }
        }

        private int curPage = -1;
        void ddl_PageChanged(object sender, EventArgs e)
        {
            string s = (sender as DropDownList).SelectedValue;
            curPage = Convert.ToInt32(s);
            rgrdNetworks.CurrentPageIndex = curPage;
            rgrdNetworks.Rebind();
        }

ASPX

                            <telerik:RadGrid ID="rgrdNetworks" runat="server" AllowPaging="true"
                                AllowFilteringByColumn="false" AllowMultiRowSelection="false"
                                ShowGroupPanel="false" GroupingEnabled="false" OnNeedDataSource="RadNeedDataSource"
                                ShowHeader="false" Skin="MSGridSkin" EnableEmbeddedSkins="false"
                                GridLines="Vertical" onitemcreated="rgrdNetworks_ItemCreated">
                                <ClientSettings AllowDragToGroup="false" Selecting-AllowRowSelect="true">
                                    <Selecting AllowRowSelect="True" />
                                </ClientSettings>
                                <PagerStyle Position="TopAndBottom" Mode="NextPrev" AlwaysVisible="true"/>
                                <MasterTableView DataKeyNames="NetworkAddress, NetworkMask" AutoGenerateColumns="false" PageSize="18" GridLines="Vertical">
                                    <PagerTemplate>
                                        <asp:DropDownList ID="ddlPager" runat="server">
                                        </asp:DropDownList>
                                    </PagerTemplate>
                                    <Columns>
                                        <telerik:GridBoundColumn DataField="NetworkAddress" HeaderText="Network Address"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="NetworkMask" HeaderText="Mask"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Name" HeaderText="Name"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="SystemLocation" HeaderText="Sys Location"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Side" HeaderText="Side"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="CampusLocation" HeaderText="Campus Location"></telerik:GridBoundColumn>
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>

In your example, you are not loading the dropdown list dynamically. You have hard-coded it, so I guess that would be something to add. I like your client-side solution, except for the adding of the pages to the listbox.

Thanks again.