Question

I am working with asp.net page which calls another ASPX page containing GridView with paging inside update panel

I call the page via jquery and its loading fine but when I click on Gridview paging, the Grid view disappears

<div id = "divParent">

</div>

$(document).ready(function () {
   BindDiv('divParent', 'Parent.aspx');         
});

function BindDiv(DivID, url) {
        $('#' + DivID).empty();
        $('#' + DivID).append('<img src="Images/ajax_loader.gif" alt="Loading..." />');

        $.get(url, function (response) {
            $('#' + DivID).empty();
            $('#' + DivID).append($(response).find('#ParentContainer')); 

        });
    }

second aspx page code

<div id = "ParentContainer">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers ="true" UpdateMode ="Conditional">
    <ContentTemplate>
    <asp:GridView ID="gvParent" runat="server" SkinID="gvParent" AutoGenerateColumns="False"
        AllowSorting="true" AllowPaging="true" PageSize="10" OnPageIndexChanging="gvParent_PageIndexChanging">
        <Columns>
            <asp:TemplateField HeaderText="Customer ID" SortExpression="CustomerID">
                <ItemTemplate>
                    <asp:Label ID="lblCustomerID" runat="server" Text='<%# Eval("CustomerID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="First Name" SortExpression="Fname">
                <ItemTemplate>
                    <asp:Label ID="lblFname" runat="server" Text='<%# Eval("Fname") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </ContentTemplate>
    </asp:UpdatePanel>
</div>

plz help
thanks in advance

Answer 1

You have mix up everything.
Understand what each part do here and you understand why this can not work.

Parent.aspx page that hold the GridView and also have inside her the UpdatePanel need to make post back to the same page and get return from the same page to work.

The other page that have the jQuery and load the Parent.aspx is get the results, rendered it to a different page and the javascript that Parent.aspx contains never run. Now the full code of the Parent.aspx is inside some other page and you try to make an ajax call to the Parent.aspx again, and get results where ?

The grid view is an “out of the box” control that need some standard way to correctly work. The UpdatePanel have been design that can hold the GridView and they can work together because they have been design that way.

If you add jQuery load, then you need to make all that logic custom, to make your custom grid view, your custom calls etc.

If you mix them up, they simple not work.