AspBucket offers ASP.NET, C#, VB, Jquery, CSS, Ajax, SQL tutorials. It is the best place for programmers to learn

Tuesday, 31 May 2016

How to implement custom paging in grid view?

In this article I will discuss  How to implement custom paging in grid view? Please follow below steps to implement custom paging.
Step 1- Add a new Grid control to your aspx page and add all necessary columns there
            <asp:GridView ID="GrdPopularMerchant" Width="100%" ShowHeaderWhenEmpty="true" AllowSorting="true" ShowHeader="true" ShowFooter="false" CssClass="table table-striped table-bordered table-hover"
                AllowPaging="true" AllowCustomPaging="true" PageSize="25" OnPageIndexChanging="GrdPopularMerchant_PageIndexChanging" OnSorting="GrdPopularMerchant_Sorting"
                EmptyDataText="<div class='empty-data'>No Records Founds</div>" AutoGenerateColumns="false" runat="server">
                <Columns>
                    <asp:TemplateField HeaderText="Column1" SortExpression="Column1sortexp">
                        <HeaderStyle CssClass="col-md-3"/>
                        <ItemStyle CssClass="col-md-3" />
                        <ItemTemplate>
                            <%#Eval("Column1").ToString() %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Column2" SortExpression="Column2">
                        <HeaderStyle CssClass="col-md-2"/>
                        <ItemStyle CssClass="col-md-2" />
                        <ItemTemplate>
                            <%#Eval("Column2").ToString() %>
                        </ItemTemplate>
                    </asp:TemplateField>
                   <asp:TemplateField HeaderText="Column3" SortExpression="Column3">
                        <HeaderStyle CssClass="col-md-2"/>
                        <ItemStyle CssClass="col-md-2" />
                        <ItemTemplate>
                            <%#Eval("Column3").ToString() %>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <PagerStyle HorizontalAlign="Right" CssClass="pagination-ys" />
                <PagerSettings Mode="NumericFirstLast" Position="Bottom" PageButtonCount="8" FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous" />
            </asp:GridView>

Step 2- Add Hidden field in your page
 <asp:HiddenField ID="HdnPageNo" Value="0" runat="server" />

Step 3- Implement a stored procedure for custom paging

Step 4- Implement Grid bind method & index change method.
    
    public int PageSize=20;   
    #region --Bind Data--
    protected void BindData()
    {
        int TotalRecords = GetTotalRecords();  //Get Total Records count      
        GrdPopularMerchant.PageSize = PageSize; //get page size
        GrdPopularMerchant.PageIndex =  int.Parse(HdnPageNo.Value) ; //get page number
        DataTable _yourData = GetDataForCurrentPage(); //Get only limited record for current page
        if _yourData != null && _yourData.Count > 0)
        {
            GrdPopularMerchant.VirtualItemCount = TotalRecords;
        }
        else
        {
            GrdPopularMerchant.VirtualItemCount = 0;
        }
        GrdPopularMerchant.DataSource = _yourData ;
        GrdPopularMerchant.DataBind();
    }
    #endregion

    protected void GrdPopularMerchant_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        HdnPageNo.Value = e.NewPageIndex.ToString();
        BindData();
    }
That's it call BindGrid() to bind the grid with custom paging.

0 comments :

Post a comment

  • Popular Posts
  • Comments