Update panels not woking

See more:

C#

ASP.NET

.NET4.5

I'm creating a Dashboard with 3 Charts and a Grids.
All the charts and grids are placed in separate UpdatePanel and are binding from separate C# methods which all are getting called in Page_LoadComplete().

Problem: On clicking the page index of GridView, all the controls are getting Postback withing their respective UpdatePanels. I don't want this.

I want only that control must postback which i want, As like, if i click the grid's page index, only that grid postback not all the controls.

This is my HTML(.aspx) Code:

<div class="col-md-12">
        <div class="row">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <div class="col-md-6">
                        <div style="border: 2px solid #202020; height: 351px; border-radius: 10px; width: 505px; margin-removed -21px;">
                            <div style="background-color: rgb(0, 202, 121); border-radius: 7px; margin-removed -1px; border: 2px solid #202020; width: 501px; height: 40px;">
                                
                            </div>
                            <asp:Chart ID="Chart2" runat="server" Width="500px" ImageLocation="~/images/TempImages/ChartPic_#SEQ(300,3)">
                                <Series>
                                    <asp:Series Name="Demo Date" ChartType="Point" IsValueShownAsLabel="True" Color="Maroon" XValueMember="ProjectNameTech" YValueType="Date" YValueMembers="DemoRescheduleDate" ChartArea="ChartArea1" Legend="Default"></asp:Series>
                                </Series>
                                <ChartAreas>
                                    <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                                </ChartAreas>
                                <Legends>
                                    <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="false" Name="Default" LegendStyle="Column"></asp:Legend>
                                </Legends>
                            </asp:Chart>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

        <%--Row 1 Ends Here--%><br />

        <div class="row">
            <asp:UpdatePanel ID="UpdatePanel4" runat="server">
                <ContentTemplate>
                    <div class="col-md-6">
                        <div style="border: 2px solid #202020; height: 351px; border-radius: 10px; width: 505px; margin-removed -21px;">
                            <div style="background-color: rgb(0, 202, 121); border-radius: 7px; margin-removed -1px; border: 2px solid #202020; width: 501px; height: 40px;">
                                ^__b style="margin-removed 20px; font-size: 19px; color: #202020; line-height: 36px;">Upcomming Deployments
                            </div>
                            <asp:Chart ID="Chart3" runat="server" Width="500px" ImageLocation="~/images/TempImages/ChartPic_#SEQ(300,3)">
                                <Series>
                                    <asp:Series Name="Delpoyment Date" ChartType="Point" IsValueShownAsLabel="True" Color="#288a81" XValueMember="ProjectNameTech" YValueType="Date" YValueMembers="EndDate" ChartArea="ChartArea1" Legend="Default"></asp:Series>
                                </Series>
                                <ChartAreas>
                                    <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
                                </ChartAreas>
                                <Legends>
                                    <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="false" Name="Default" LegendStyle="Column"></asp:Legend>
                                </Legends>
                            </asp:Chart>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

        <%--Row 2 Ends Here--%><br />

        <div class="row">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div class="col-md-6">
                        <div style="border: 2px solid #202020; height: 351px; border-radius: 10px; width: 1021px; margin-removed -21px;">
                            <div style="background-color: rgb(0, 202, 121); border-radius: 7px; margin-removed -1px; border: 2px solid #202020; width: 1018px; height: 40px;">
                                ^__b style="margin-removed 20px; font-size: 19px; color: #202020; line-height: 36px;">Project Payment Detail
                            </div>
                            <br />
                            <div class="table-responsive">
                                <asp:GridView ID="GridView1" runat="server" HeaderStyle-Height="38px" AllowSorting="true" Height="262px" PageSize="5" AllowPaging="true" Style="width: 987px; margin-left: 15px;" HeaderStyle-BackColor="#00ca79" CssClass="table table-bordered table-hover" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging">
                                    <Columns>
                                        <asp:BoundField DataField="ClientFullName" ItemStyle-Height="38px" HeaderText="Client Name"></asp:BoundField>
                                        <asp:BoundField DataField="ProjectNameTech" HeaderText="Project Name"></asp:BoundField>
                                        <asp:BoundField DataField="ProjectCost" HeaderText="Project Cost"></asp:BoundField>
                                        <asp:BoundField DataField="Payment" HeaderText="Payment"></asp:BoundField>
                                        <asp:BoundField DataField="Due" HeaderText="Due"></asp:BoundField>
                                        <asp:BoundField DataField="PaymentDate" HeaderText="Last Payment"></asp:BoundField>
                                        <asp:BoundField DataField="Percentage" HeaderText="Complete (%)" ItemStyle-Width="105px"></asp:BoundField>
                                    </Columns>
                                </asp:GridView>
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

This Is My C#(.aspx.cs) Code

protected void Page_LoadComplete(object sender, EventArgs e)
        {
            BDMDashboardProjectStatus();
            ProjectCompleted();
            BDMDashboardDemo();
        }
public void BDMDashboardProjectStatus()
{
    DataTable dtProjectStatus = objBAL.BDMDashboardProjectStatusBAL();
    if (dtProjectStatus.Rows.Count > 0)
    {
        GridView1.DataSource = dtProjectStatus;
        GridView1.DataBind();
    }
    if (dtProjectStatus.Rows.Count > 0)
    {
        for (int i = 0; i < dtProjectStatus.Rows.Count; i++)
        {
            if (dtProjectStatus.Rows[i]["EndDate"].ToString() == string.Empty)
            {
                dtProjectStatus.Rows.RemoveAt(i);
                dtProjectStatus.AcceptChanges();
                i = -1;
            }
        }
        Chart3.DataSource = dtProjectStatus;
        Chart3.DataBind();
        Chart3.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
        Chart3.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
        Chart1.DataSource = dtProjectStatus;
        Chart1.DataBind();
        Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
    }
}
public void ProjectCompleted()
{
    DataTable dtProjectCompleted = objBAL.ProjectCompleted();
    if (dtProjectCompleted.Rows.Count > 0)
    {
        GridView4.DataSource = dtProjectCompleted;
        GridView4.DataBind();
    }
}
public void BDMDashboardDemo()
{
    DataTable dtDemo = objBAL.BDMDashboardDemoBAL();
    if (dtDemo.Rows.Count > 0)
    {
        Chart2.DataSource = dtDemo;
        Chart2.DataBind();
        Chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
        Chart2.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
    }
}