locked
Issue with Gridview In a Bootstrap TabPanel RRS feed

  • 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>
    

    Friday, March 2, 2018 3:59 AM

All replies

  • 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

    Friday, March 2, 2018 6:57 AM