Issue with Gridview In a Bootstrap TabPanel

Question

User-1193791088 posted

Cannot page a Gridview in a Bootstrap Tabpanel, it then resets the page and tab panel even though it is in an update panel.

            <div class="tab-pane fade" id="nav-locations" role="tabpanel" aria-labelledby="nav-locations-tab">
                        <div class="row mb-2">
                            <span class="display-20500 text-white">LOCATIONS ON ACCOUNT</span><asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
                            <asp:Button ID="Btn_NewLocation" runat="server" Text="&#xf067;" CssClass="float-right btn btn-lg fas" ToolTip="Add Or Create A New Location" OnClick="Btn_NewLocation_Click" />
                        </div>
                <asp:UpdatePanel runat="server" ID="UpdPnl_Locations" UpdateMode="Always">
                    <ContentTemplate>
                        <asp:GridView ID="GridView_AccountLocations" runat="server" DataSourceID="SqlData_AccountLocations" AllowPaging="True" AllowSorting="True" PageSize="25" AutoGenerateColumns="False" >
                            <PagerSettings FirstPageText="&#xf053;&#xf053;" LastPageText="&#xf054;&#xf054;" Mode="NumericFirstLast" NextPageText="&#xf054;" PageButtonCount="15" Position="TopAndBottom" PreviousPageText="&#xf053;" />
                            <Columns>
                                <asp:TemplateField ShowHeader="False">
                                    <ItemTemplate>
                                        <asp:Button ID="Btn_LocationActions" runat="server" Text="&#xf142;" CssClass="btn btn-primary btn fas" />
                                        <ajx:ModalPopupExtender ID="MPE_Accounts" runat="server" TargetControlID="Btn_LocationActions" PopupControlID="Pnl_LocationAction" OkControlID="Btn_Ok_LocationAction" CancelControlID="Btn_Close_LocationAction" BackgroundCssClass="bg-modal" />
                                        <asp:Panel ID="Pnl_LocationAction" runat="server" CssClass="modal-mss" Style="display: none">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h3>Account Location</h3>
                                                    <asp:Button ID="Btn_Close_LocationAction" runat="server" CssClass="btn btn-secondary btn-lg fas" Text="&#xf00d;" />
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-5">
                                                        </div>
                                                        <div class="col-7">
                                                            <div class="form-group row">
                                                                <label class="col-form-label col-4">Location:</label>
                                                                <div class="col-6">
                                                                    <asp:Label Text='<%# Eval("LocationName") %>' runat="server" ID="Lab_Popup_LocationName" CssClass="form-control-plaintext font-weight-bold" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="col-form-label col-4">Address:</label>
                                                                <div class="col-6">
                                                                    <asp:Label Text='<%# Eval("StreetAddress") %>' runat="server" ID="Lab_Popup_StreetAddress" CssClass="form-control-plaintext font-weight-bold" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group row">
                                                                <label class="col-form-label col-4">City:</label>
                                                                <div class="col-6">
                                                                    <asp:Label Text='<%# Eval("City") %>' runat="server" ID="Lab_Popup_City" CssClass="form-control-plaintext font-weight-bold" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <asp:Button ID="Btn_Manage_Location" runat="server" CssClass="btn btn-primary btn-block btn-lg fas" PostBackUrl='<%# Eval("LocationId","~/Admin/Customer/Account/Locations/Manage.aspx?LocationId={0}") %>' Text="&#xf0ad;&nbsp;MANAGE" />
                                                            </div>
                                                            <div class="form-group">
                                                                <asp:HyperLink ID="BtnMapGoogle" runat="server" NavigateUrl='<%# Eval("GoogleMaps") %>' Target="_blank" CssClass="btn btn-primary btn-block btn-lg fas">&#xf041;&nbsp;GOOGLE</asp:HyperLink>
                                                            </div>
                                                            <div class="form-group">
                                                                <asp:HyperLink ID="BtnMapZillow" runat="server" NavigateUrl='<%# Eval("Zillow") %>' Target="_blank" CssClass="btn btn-primary btn-block btn-lg fas">&#xf041;&nbsp;ZILLOW</asp:HyperLink>
                                                            </div>
                                                            <div class="form-group">
                                                                <asp:HyperLink ID="BtnMapBing" runat="server" NavigateUrl='<%# Eval("BingMaps") %>' Target="_blank" CssClass="btn btn-primary btn-block btn-lg fas">&#xf041;&nbsp;BING</asp:HyperLink>
                                                            </div>
                                                            <div class="form-group">
                                                                <asp:Button runat="server" CommandName="Delete" ID="BtnDeleteLocation" Text="&#xf119;&nbsp;DELETE" CssClass="btn btn-danger btn-block btn-lg fas" />
                                                                <ajx:ConfirmButtonExtender ID="ConfirmDeleteLocation" runat="server" TargetControlID="BtnDeleteLocation" ConfirmText="Do You Want To Remove This Location From This Account?" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <asp:Button ID="Btn_Ok_LocationAction" runat="server" Text="CLOSE" CssClass="btn-modal" />
                                                </div>
                                            </div>
                                        </asp:Panel>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="LocationId" HeaderText="LocationId" SortExpression="LocationId"></asp:BoundField>
                                <asp:BoundField DataField="LocationName" HeaderText="Location Name" SortExpression="LocationName"></asp:BoundField>
                                <asp:BoundField DataField="Relationship" HeaderText="Relationship" SortExpression="Relationship"></asp:BoundField>
                                <asp:BoundField DataField="StreetAddress" HeaderText="Street Address" SortExpression="StreetAddress"></asp:BoundField>
                                <asp:BoundField DataField="ZipCode" HeaderText="Zip Code" SortExpression="ZipCode"></asp:BoundField>
                                <asp:BoundField DataField="City" HeaderText="City" SortExpression="City"></asp:BoundField>
                                <asp:BoundField DataField="StateCode" HeaderText="State" SortExpression="StateCode"></asp:BoundField>
                                <asp:CheckBoxField DataField="Billing" HeaderText="Billing" SortExpression="Billing"></asp:CheckBoxField>
                            </Columns>
                        </asp:GridView>
                        <asp:SqlDataSource ID="SqlData_AccountLocations" runat="server" ConnectionString='<%$ ConnectionStrings:DefaultConnection %>' SelectCommand="SELECT CAL.LocationId, CAL.LocationName, DLR.Relationship, L.StreetAddress, L.ZipCode, DLGUS.City, DLGUS.StateCode, CAL.Billing, L.GoogleMaps, L.Zillow, L.BingMaps FROM CuAccount_Locations AS CAL INNER JOIN Locations AS L ON CAL.LocationId = L.LocationId INNER JOIN Data_Locations_Relationship AS DLR ON CAL.RelationshipId = DLR.RelationshipId INNER JOIN Data_Locations_GeoDataUS AS DLGUS ON L.ZipCode = DLGUS.ZipCode WHERE (CAL.AccountId = @AccountId) ORDER BY CAL.Billing DESC, City ASC"
                            DeleteCommand="DELETE From CuAccount_Locations WHERE AccountId = @AccountId AND LocationId = @LocationId">
                            <SelectParameters>
                                <asp:QueryStringParameter QueryStringField="AccountId" DefaultValue="1" Name="AccountId" />
                            </SelectParameters>
                            <DeleteParameters>
                                <asp:Parameter Name="LocationId"></asp:Parameter>
                                <asp:QueryStringParameter QueryStringField="AccountId" DefaultValue="1" Name="AccountId" />
                            </DeleteParameters>
                        </asp:SqlDataSource>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>

Answer 1

User1100692814 posted

Hi,

Try updating the panel properties and set ChildernAsTriggers="True" and make UpdateMode="Always" 

<asp:ScriptManager ID = "ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID = "UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:GridView ID = "GridView1" runat="server" AllowPaging="True">
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

Then...

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        BindGridView1()
    End If
End Sub

Private Sub BindGridView1()
    Me.GridView1.PageSize = 2
    Me.GridView1.PagerSettings.PageButtonCount = 10
    Me.GridView1.DataSource = Blah()
    Me.GridView1.DataBind()
End Sub

Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging
    Me.GridView1.PageIndex = e.NewPageIndex
    BindGridView1()
End Sub

Hope this helps.

/D