[Solved] Customized Paging

[Das]

Hi,

I want the pagination to be customized in such a way that the Page size in NextPrevNumericAndAdvanced except for the following things.
I don't need the controls in the second row. Instead I want a Dropdown to select the page size. I accomplished that by adding the control along with the Pager in NextPrevMumeric mode. The issue I am facing it is that the control I wrote for this purpose does not come to the second row. It remains before the PagerText. Please find the code below:

        protected void rgUserList_OnItemEvent(object sender, GridItemEventArgs e)
        {
            if (e.EventInfo is GridInitializePagerItem)
            {
                GridInitializePagerItem info = e.EventInfo as GridInitializePagerItem;
                (e.Item as GridPagerItem).PagerContentCell.Controls.Add(
                     new CustomRADGridPager(info.PagingManager, e.Item.OwnerTableView)
                     );
            }
        }
CustomRADGridPager is the class which has the dropdown control and the required events. Your suggestions are highly appreciated.

[Vlad]

Hi Das,

Here is a bit different approach (based on this example) how to achieve desired result using ItemCreated event:

        protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if ( e.Item is GridPagerItem )
            {
                GridPagerItem pagerItem = (GridPagerItem)e.Item;

                Control numericPager = pagerItem.GetNumericPager();

                pagerItem.PagerContentCell.Controls.Add(numericPager);
                pagerItem.PagerContentCell.Controls.Add(new LiteralControl("<br />"));
                pagerItem.PagerContentCell.Controls.Add(new MyPager(e.Item.OwnerTableView));
            }
        }

        private class MyPager: Control
        {
            private GridPagingManager paging;
            private GridTableView tableView;

            TextBox textBox;
            RangeValidator rangeValidator;

            public MyPager(GridTableView tableView)
            {
                this.tableView = tableView;
                this.paging = tableView.PagingManager;

                this.EnsureChildControls();
            }

            protected override void CreateChildControls()
            {
                this.Controls.Add( new LiteralControl("Page: ") );

                textBox = new TextBox();
                textBox.ID = "textbox";
                textBox.Columns = 3;

                this.Controls.Add( textBox );

                this.Controls.Add( new LiteralControl(" (of " + this.paging.PageCount + ") ") );

                LinkButton btn = new LinkButton();
                btn.ID = "btn1";
                btn.Text = "Change page";
                btn.Click += new EventHandler( this.BtnClick );

                LinkButton ShowMoreButton = new LinkButton();
                ShowMoreButton.ID = "ShowMoreButton";
                ShowMoreButton.Text = "Show 5 more Items";
                ShowMoreButton.Click+=new EventHandler(this.ShowMoreButton_Click);

                this.Controls.Add(new LiteralControl("&nbsp;"));
                this.Controls.Add( btn );
                this.Controls.Add(new LiteralControl("&nbsp;&nbsp;"));
                this.Controls.Add(ShowMoreButton);

                rangeValidator = new RangeValidator();
                rangeValidator.ErrorMessage = " Page index should be in the range of 1 to " + this.paging.PageCount;

                this.Controls.Add(rangeValidator);
            }

            protected override void OnPreRender(EventArgs e)
            {
                textBox.Text = (paging.CurrentPageIndex + 1).ToString();

                rangeValidator.Type = ValidationDataType.Integer;
                rangeValidator.MinimumValue = 1.ToString();
                rangeValidator.MaximumValue = this.paging.PageCount.ToString();

                rangeValidator.ControlToValidate = textBox.ID;

                base.OnPreRender (e);
            }

            private void BtnClick(object sender, EventArgs e)
            {
                if ( this.textBox.Text.Trim() != "" )
                {
                    this.tableView.CurrentPageIndex = int.Parse( this.textBox.Text ) - 1;
                    this.tableView.Rebind();
                }
            }

            private void ShowMoreButton_Click(object sender, EventArgs e)
            {
                this.tableView.PageSize += 5;
                this.tableView.Rebind();
            }
        }

Sincerely yours,
Vlad
the Telerik team

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

[Das]

Thanks Vlad. I checked that example earlier, but I was not able to get the GetNumericPager() method in GridPagerItem. I also notice the Telerik.Web.UI in the namespace section. Is this method anyway related to the namespace defined above? I am not able to get that namespace. I have the namespaces Telerik.WebControls and Telerik.Quickstart.

[Vlad]

Hello Das,

Generally this forum is for RadControls for ASP.NET AJAX (Telerik.Web.UI.dll) - Telerik.WebControls are related to our old "Classic" controls.

Unfortunately GetNumericPager() is available in latest version of Telerik.Web.UI only. Here is an example how to achieve the same with "Classic" RadGrid:

        protected void RadGrid1_ItemCreated(object sender, Telerik.WebControls.GridItemEventArgs e)
        {
            if ( e.Item is GridPagerItem )
            {
                GridPagerItem pagerItem = (GridPagerItem)e.Item;

                pagerItem.PagerContentCell.Controls.Add(new LiteralControl("<br />"));
                pagerItem.PagerContentCell.Controls.Add(new MyPager(e.Item.OwnerTableView));
            }
        }

Best wishes,
Vlad
the Telerik team

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

[Das]

Thank you for your time Vlad. I appreciate your effort. Once again thanks again.

[Anil Sahu]

Hello All,
             I am sorry, I am new User , so i dont know from where i can send my Queries.
        Now my Query is , i want to Custom Paging in GridTableView ,There should be Numeric paging and buttons, Onclick event it should  show 10 more records NEXT,(BeckButton)as well as BECK records. and there should be another button on click of that  which shows me All records..This GridTableView is within the RadGrid control. code is here
"
<telerik:RadGrid ID="MetersRadGrid"  runat="server" Width="100%" AutoGenerateColumns="False"
                                            AllowMultiRowSelection="True" AllowPaging="True" PageSize="6" AllowSorting="true"
                                            GridLines="None" EnableViewState="true" OnItemCreated="MetersRadGrid_ItemCreated"
                                            OnDetailTableDataBind="MeterRadGrid_DetailTableDataBind" OnNeedDataSource="MetersRadGrid_NeedDataSource">
                                            <ClientSettings AllowKeyboardNavigation="True">
                                                <Selecting AllowRowSelect="true" />
                                            </ClientSettings>
                                            <HeaderContextMenu>
                                                <CollapseAnimation Duration="200" Type="OutQuint" />
                                            </HeaderContextMenu>
                                            <MasterTableView Width="100%"  CommandItemDisplay="Top" HierarchyDefaultExpanded="false" DataKeyNames="MeterID" HierarchyLoadMode="Client" Name="MeterDetailTable"
                                                DataMember="MeterDetailTable">
                                                <RowIndicatorColumn Visible="False">
                                                    <HeaderStyle Width="20px" />
                                                </RowIndicatorColumn>
                                                <CommandItemTemplate>
                                                    <table width="100%">
                                                        <tr>
                                                            <td style="width: 20%">
                                                                <asp:Image ID="AddNewContactImage" runat="server" ImageUrl="~/Images/AddRecord.gif"
                                                                    AlternateText="Add Record" />&nbsp;&nbsp;
                                                                <asp:LinkButton ID="AddNewMeterLinkButton" runat="server" Text="Add New Meter"></asp:LinkButton>
                                                                 <script type="text/javascript">
                                                                     var linkButton = document.getElementById('<%# Container.FindControl("AddNewMeterLinkButton").ClientID %>');
                                                                     linkButton.focus();                                   
                                                                 </script>
                                                            </td>
                                                            <td style="width: 80%">
                                                                <asp:LinkButton ID="MeterExpandCollapseAllLinkButton" runat="server" Font-Bold="true"
                                                                    ForeColor="Blue" Text="Expand/Collapse Section" OnClick="MeterExpandCollapseAllLinkButton_Click"></asp:LinkButton>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </CommandItemTemplate>
                                                <CommandItemStyle BackColor="#B3D4FF" Font-Bold="True" ForeColor="Black" Height="10%" />
                                                <Columns>
                                                    <telerik:GridTemplateColumn HeaderText="Action" UniqueName="TemplateColumn1">
                                                        <ItemTemplate>
                                                            <asp:LinkButton ID="EditMeterLinkButton" runat="server" Text="Edit"></asp:LinkButton>
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <telerik:GridBoundColumn DataField="MeterType" HeaderText="Meter Type" UniqueName="MeterType">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="ActualReading" HeaderText="Actual" UniqueName="ActualReading"
                                                        DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="AcquireReading" HeaderText="Acquire" UniqueName="AcquireReading"
                                                        DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="MeterOffset" HeaderText="Total Offset" UniqueName="MeterOffset"
                                                        DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="BeginFYReading" HeaderText="Begin FY" UniqueName="BeginFYReading"
                                                        DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="MeterYearToDate" HeaderText="Year-to-Date" UniqueName="MeterYearToDate"
                                                        DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="MeterFleetToDate" HeaderText="Fleet-to-Date"
                                                        UniqueName="MeterFleetToDate" DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="MeterLifeToDate" HeaderText="Life-to-Date" UniqueName="MeterLifeToDate"
                                                        DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="MeterLifeExpectancy" HeaderText="Life Expectancy"
                                                        UniqueName="MeterLifeExpectancy" DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="Status">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="Digit" HeaderText="Digit" UniqueName="Digit"
                                                        DataFormatString="{0:N0}">
                                                    </telerik:GridBoundColumn>
                                                </Columns>
                                                <DetailTables>
                                                    <telerik:GridTableView Width="100%" runat="server" PageSize="2" AllowCustomPaging="true"  Name="MeterReadingDetailTable"
                                                        DataKeyNames="MeterTransactionID,MeterID" DatasourcePersistenceMode="ViewState"
                                                        HierarchyLoadMode="Client" CommandItemDisplay="Top">
                                                        <ExpandCollapseColumn Visible="True">
                                                        </ExpandCollapseColumn>
                                                        <CommandItemTemplate>
                                                            <table width="100%">
                                                                <tr>
                                                                    <td align="left" style="width: 20%">
                                                                        <asp:Image ID="AddNewContactImage" runat="server" ImageUrl="~/Images/AddRecord.gif"
                                                                            AlternateText="Add Record" />&nbsp;&nbsp;
                                                                        <asp:LinkButton ID="AddNewReadingLinkButton" Text="Add New Reading" runat="server"></asp:LinkButton>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </CommandItemTemplate>
                                                        <Columns>
                                                            <telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="Action">
                                                                <ItemTemplate>
                                                                    <asp:LinkButton ID="EditMeterReadingLinkButton" runat="server" Text="Edit"></asp:LinkButton>
                                                                </ItemTemplate>
                                                            </telerik:GridTemplateColumn>
                                                            <telerik:GridBoundColumn DataField="Reading" HeaderText="Reading" UniqueName="Reading"
                                                                DataFormatString="{0:N0}">
                                                                <HeaderStyle Wrap="true" />
                                                                <ItemStyle Wrap="true" HorizontalAlign="Right" />
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="Invalid" HeaderText="Invalid" UniqueName="Invalid">
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="Override" HeaderText="Override" UniqueName="Override">
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="Offset" HeaderText="Offset" DataFormatString="{0:N0}"
                                                                UniqueName="Offset">
                                                                <HeaderStyle Wrap="true" />
                                                                <ItemStyle Wrap="true" HorizontalAlign="Right" />
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="TransactionDate" HeaderText="Trans Date and Time"
                                                                UniqueName="TransactionDate" DataFormatString="{0:MM/dd/yyyy hh:mm tt}">
                                                                <HeaderStyle Wrap="true" />
                                                                <ItemStyle Wrap="true" />
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="Source" HeaderText="Source" UniqueName="source">
                                                                <HeaderStyle Wrap="true" />
                                                                <ItemStyle Wrap="true" />
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="CreatedDate" HeaderText="Created" UniqueName="CreatedDate"
                                                                DataFormatString="{0:MM/dd/yyyy hh:mm tt}">
                                                                <HeaderStyle Wrap="true" />
                                                                <ItemStyle Wrap="true" />
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="CreatedBy" HeaderText="Created By" UniqueName="CreatedBy">
                                                                <HeaderStyle Wrap="true" />
                                                                <ItemStyle Wrap="true" />
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="ModifiedDate" HeaderText="Modified" UniqueName="ModifiedDate"
                                                                DataFormatString="{0:MM/dd/yyyy hh:mm tt}">
                                                                <HeaderStyle Wrap="true" />
                                                                <ItemStyle Wrap="true" />
                                                            </telerik:GridBoundColumn>
                                                            <telerik:GridBoundColumn DataField="ModifiedBy" HeaderText="Modified By" UniqueName="ModifiedBy">
                                                                <HeaderStyle Wrap="true" />
                                                                <ItemStyle Wrap="true" />
                                                            </telerik:GridBoundColumn>
                                                        </Columns>
                                                        <PagerStyle Mode="NextPrevAndNumeric" />
                                                    </telerik:GridTableView>
                                                </DetailTables>
                                                <ExpandCollapseColumn Visible="False">
                                                    <HeaderStyle Width="19px" />
                                                </ExpandCollapseColumn>
                                                <RowIndicatorColumn Visible="False">
                                                    <HeaderStyle Width="20px" />
                                                </RowIndicatorColumn>
                                                <AlternatingItemStyle BackColor="#EFF3FB" />
                                                <SortExpressions>
                                                    <telerik:GridSortExpression FieldName="MeterID"></telerik:GridSortExpression>
                                                </SortExpressions>
                                                <PagerStyle Mode="Advanced" />
                                            </MasterTableView>
                                            <FilterMenu>
                                                <CollapseAnimation Duration="200" Type="OutQuint" />
                                            </FilterMenu>
                                        </telerik:RadGrid>

[Princy]

Hello Anil,

You can use the PagerTemplate to customize the pager item. You can add in any control into the PagerTemplate and use custom logic to enable custom paging. Check out the following help document on how to use the PagerTemplate:
Setting pager template

Also check out the following online demo:
Pager Template

-Princy.

[Anil Sahu]

Hello Princy.
                    Thanks to reply me,But i need the Custom paging in my GridTableView Control which is within RadGridControl.
                    In GridTableView  i should have Numeric Paging with NEXT and Previous feature.Here is my code
<Telerik:Radgrid ........
.Statement
.
<Telerik:GridTAbleView ...
;
Statement;(Paging Here)
;
</Telerik:GridTAbleVie>

</Telerik:Radgrid >
..
Regards,
Anil Sahu