Gridview Paging ASP.NET 与 Gridview 外的 Pager Panel

Question

This is my first time for using ASP.NET to develop website.

I want to show my data from database in a GridView with Paging function and I can implement it by using OnPageIndexChanging="GridView1_PageIndexChanging" but I want to use my own pager so the question is

"How can I link my pager (the right bottom in the pic) to the gridview instead the pager which generated by the ASP.NET"

Pics:

This is my code in aspx

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-condensed table-striped table-primary table-vertical-center"
        PageSize="3" AllowPaging="True"
        OnPageIndexChanging="GridView1_PageIndexChanging">
         <Columns>
              <asp:BoundField DataField="UNIT_ID" HeaderText="รหัส" SortExpression="unitid">
              <HeaderStyle CssClass="center" />
              <ItemStyle Width="10%" CssClass="center" />
              </asp:BoundField>
         </Columns>                                                                    
      </asp:GridView>
     </ContentTemplate>
</asp:UpdatePanel>

Code in cs

public partial class _Default : Page
{
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                bindGridView();  
        }

        protected void bindGridView() {
            string sqltxt = "select * from drug_units"; //where UNIT_ID =:unitid";
            CommandData comm = new CommandData();
            comm.SetCommandText(sqltxt);
            //comm.AddInputParameter("unitid", "5");
            List<DrugsUnit> dy = new List<DrugsUnit>();
            comm.ExecuteNonQuery();
            dy = comm.ExecuteToList<DrugsUnit>();
            GridView1.DataSource = dy;
            /*BoundField boundField = new BoundField();
            boundField.DataField = "UNIT_ID";
            boundField.HeaderText = "ID";
            boundField.SortExpression = "ID";
            boundField.HeaderStyle.CssClass = "center";
            boundField.ItemStyle.CssClass = "center";
            GridView1.Columns.Add(boundField);*/
            GridView1.DataBind();
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
        }

        protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            GridView1.PageIndex = e.NewPageIndex;
            bindGridView();
        }
 }

Answer 1

protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Pager)
    {
        upGridPager.Update();
        e.Row.SetRenderMethodDelegate(new RenderMethod((w, r) =>
        {
            e.Row.SetRenderMethodDelegate(null);
            using (var ms = new StringWriter())
            using (var writer = new HtmlTextWriter(ms))
            {
                e.Row.RenderControl(writer);
                GridPager.InnerHtml = "<table>" + ms.ToString() + "</table>";
            }
        }));
}

The aspx could look like this (outside of your grid)

<asp:UpdatePanel ID="upGridPager" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
     <div runat="server" id="GridPager" />
   </ContentTemplate>
</asp:UpdatePanel>