Hierarchical GridView in ASP.NET with AJAX, JQuery implementation - Part 2

Tweet

In previous post, we had seen how to show GridView in hierarchical design such as parent and child relationship. So There will be a parent grid show on the screen when loading the page, to show the details of a particular row the user required to click an expand icon located on the corresponding row. The details of the particular row will show just below the row. The same will repeat for all the rows in the parent Grid.

There are lots of ways to achieve this concept with ASP.NET. I had blogged some of the concept in previous posts. The links are follows –

Hierarchical GridView in ASP.NET
Hierarchical GridView in ASP.NET with AJAX, Javascript implementation
Hierarchical GridView in ASP.NET with AJAX, JQuery implementation - Part 1

In previous post, I had given implementation using JQuery and AJAX concept. As the implementation is using AJAX, it will be very useful when large amount of child records required to be fetched for each row and bind to the grid. So, When clicking the expand icon on the parent Grid, the child Grid View will be created on demand by fetching the records from database and the rest of the records child grids rows are not been fetched from the database.

The problem when using AJAX implementation is the child Grid View will not have any edit functionality on the records in a normal way we do with Grid View. Normally when using a Grid View, some developer gives facility to edit the records with the Grid View itself. So the user can click the Edit link which will make a particular row in edit mode. The user can then provide new data to the rows and save by pressing Save link or cancel the update function using Cancel link. But, when using AJAX implementation for implementing hierarchical Grid View, the child Grid View html source are fetched from another ASPX page using AJAX call and show on the main page inside a DIV. So any server event won’t be able to run with the Child Grid.

To achieve any functionality on the Child Grid such as editing a particular record, we have to use AJAX implementation only. That means, we need to user Java Script or JQuery only to call the server when any event to fire on the server.

I am taking the same example in this post and implementing the following use case.

1. The page should show a Grid View with list of Orders and Expand icon on the first column.
2. On click of expand icon on each row, the Order Details of the Order must be fetched from the database and show in the Grid View just below to the row with little adjacent to the first column.
3. The child Grid View must fetch from the server only on demand to avoid the loading time using AJAX concept.
4. Once the expand icon clicked, there should be a loading message to inform to the user the details are fetching from the server.
5. Once the Grid View fetched from the server, the Child Grid should show by hiding the loading message and the expand icon must be changed to collapse icon.
6. On click of collapse icon, the child grid should hide from the screen.
7. When the user clicks the Expand icon which was already done before, there should not be a call to the server again for fetching the same details. The system should show the hidden Grid View done in Step 6.
8. When user moving one page to another page by expanding and collapsing some records and come back to the old pages, the expanded records must be expanded and others are collapsed (means old state must be maintained).
9. When the child grid shows it should have a column with button, which can be used for editing the particular row.
10. When the user clicks Edit button, there should be a popup window with list of controls for updating new values. The form should also have Save and Cancel button.
11. When the user press Save button, the record should be saved to the database and refresh the particular child grid.
12. When the user press Cancel button, the form should be hidden to continue normal process.

For implementing this requirement, I am using the same code which was posted in last post and enhancing with editing the child Grid View row.

To save the record from the popup screen, there is no .NET server event could be called as the controls are created for the client side (without runat=server). So I am using AJAX concept only for getting the information for a particular record and to save the particular record on the database.

There are multiple ways we can call server method from the client side. Some of the ways are shown in below links.

In this implementation I am planning to use HTTP Handler (GenericHander) method.

The implementation follows –

I have two pages Default.aspx and ChildGridBuilder.aspx.

1. The Default.aspx page shows the list of Orders on the page. The end user accessing this page only from the browser.
2. When the user clicking the Expand icon on any of the order row, it will call the ChildGridBuilder.aspx page with Order Id in the query string as parameter using AJAX.
3. The ChildGridBuilder.aspx page will bind the required records to the GridView and return the HTML script to the Default.aspx page as response to the AJAX call.
4. The Default.aspx page will show the returned script just below to the Order row expanded inside a DIV control.
   

The ASPX Script (Default.aspx)

<div id="divHidden">
</div>
<div id="OrderInfoEdit">
    <table style="width:100%">
        <tr>
            <td width="120px">Order Id</td>
            <td><span id="lblOrderId" class="OrderIdInput" /></td>
        </tr>
        <tr>
            <td>Product Name</td>
            <td><span id="lblProductName" class="ProductNameInput" /></td>
        </tr>
        <tr>
            <td>Unit Price</td>
            <td><input id="txtUnitPrice" type="text" style="width:150px" class="UnitPriceInput" /></td>
        </tr>
        <tr>
            <td>Quantity</td>
            <td><input id="txtQuantity" type="text" style="width:150px" class="QuantityInput" /></td>
        </tr>
        <tr>
            <td>Discount</td>
            <td><input id="txtDiscount" type="text" style="width:150px" class="DiscountInput" /></td>
        </tr>
        <tr>
            <td>Amount</td>
            <td><input id="txtAmount" type="text" style="width:150px" class="AmountInput" readonly="readonly" /></td>
        </tr>
        <tr>
            <td colspan="2" style="height:10px">
            <input type="hidden" id="hndProductID" class="ProductIDInput" value="" />
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">
                <input type="button" id="btnSave" value="Save" style="width:100px" class="OrderDetailSave" />
                <input type="button" id="btnCancel" class="Cancel" value="Cancel" style="width:100px" />
            </td>
        </tr>
    </table>
</div>
<asp:GridView id="GridViewHierachical" runat="server" AutoGenerateColumns="False"
    Width="100%" DataKeyNames="OrderId" AllowPaging="true" CssClass="GridViewStyle"
    BorderStyle="Solid" PageSize="10" CellPadding="0" CellSpacing="0"
    OnPageIndexChanging="GridViewHierachical_PageIndexChanging" EnableViewState="false">
    <Columns>
        <asp:TemplateField HeaderText="Order ID">
            <ItemStyle Width="10%" />
            <ItemTemplate>
                <input id='hid<%# Eval("OrderID") %>') value='0' type="hidden" />
                <img id="img<%# Eval("OrderID") %>" alt="<%# Eval("OrderID") %>" class="ExpandImage" width="9px" 
                    border="0" src="Images/plus.png" style="cursor:pointer;padding-left:3px;width:12px;height:12px;" />
                <asp:Label ID="lblOrderID" Text='<%# Eval("OrderID") %>' Visible="true" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CustomerID" HeaderText="Customer ID">
            <ItemStyle Width="10%" />
        </asp:BoundField>
        <asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date"  DataFormatString="{0:MMMM d, yyyy}">
            <ItemStyle Width="20%" />
        </asp:BoundField>
        <asp:BoundField DataField="ShipName" HeaderText="Ship Name">
            <ItemStyle Width="20%" />
        </asp:BoundField>
        <asp:BoundField DataField="ShipCountry" HeaderText="Ship Country">
            <ItemStyle Width="15%" />
        </asp:BoundField>
        <asp:BoundField DataField="ShipCity" HeaderText="Ship City">
            <ItemStyle Width="15%" />
        </asp:BoundField>
        <asp:TemplateField>
            <HeaderStyle CssClass="InvisibleCol" />
            <ItemStyle CssClass="InvisibleCol" />
            <ItemTemplate>
            </td></tr>
                <tr class="ChildRow">
                    <td id="td<%# Eval("OrderID") %>" colspan="6">
                        <div id="div<%# Eval("OrderID") %>" style="width:100%;display:none;">
                            <div style='padding:4px;'>
                                <img src='Images/ajax-loader.gif' alt='' />
                                <span style='color:blue;font-size:17px;font-weight:bold;'>Loading... Please wait</span>
                            </div>
                        </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#CCCCCC" ForeColor="Black"></FooterStyle>
    <RowStyle CssClass="GridViewRow" Height="24px"></RowStyle>
    <HeaderStyle CssClass="GridViewHeader" Height="22px"></HeaderStyle>
    <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
    <AlternatingRowStyle CssClass="GridViewAlternativeRow"></AlternatingRowStyle>
</asp:GridView>
<asp:HiddenField ID="hndExpandedChild" runat="server" Value="" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

I use JQuery version 1.7.2 in this example

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

The Code behind Script (Default.aspx.cs)

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        BindGrid();
    }
}
private void BindGrid()
{
    using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString))
    {
        string strSQL = "SELECT Orders.OrderID, Orders.CustomerID, Orders.ShippedDate, Orders.ShipName, Orders.ShipCountry, Orders.ShipCity FROM Orders";
        SqlCommand command = new SqlCommand(strSQL, connection);
        command.CommandType = CommandType.Text;

        connection.Open();
        SqlDataReader dr = command.ExecuteReader(CommandBehavior.CloseConnection);

        IList<Order> orderList = new List<Order>();
        while (dr.Read())
        {
            Order order = new Order();
            order.OrderID = Convert.ToInt32(dr["OrderID"].ToString());
            order.CustomerID = dr["CustomerID"].ToString();
            order.ShippedDate = dr["ShippedDate"].ToString();
            order.ShipName = dr["ShipName"].ToString();
            order.ShipCountry = dr["ShipCountry"].ToString();
            order.ShipCity = dr["ShipCity"].ToString();

            orderList.Add(order);
        }
        GridViewHierachical.DataSource = orderList;
        GridViewHierachical.DataBind();
    }
}

protected void GridViewHierachical_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridViewHierachical.PageIndex = e.NewPageIndex;
    BindGrid();
}

protected void Button1_Click(object sender, EventArgs e)
{

}

The Order entity class (Order.cs)

public class Order
{
    public int OrderID { get; set; }
    public string CustomerID { get; set; }
    public string ShippedDate { get; set; }
    public string ShipName { get; set; }
    public string ShipCountry { get; set; }
    public string ShipCity { get; set; }
}

The ASPX script (ChildGridBuilder.aspx)

<asp:GridView id="GridViewDetails" runat="server" 
    AllowSorting="false" AutoGenerateColumns="False" Width="100%"
    CellSpacing="1" CellPadding="0" GridLines="Both" DataKeyNames="OrderId"
    BackColor="White" BorderWidth="2px" BorderStyle="Ridge"
    BorderColor="White" AllowPaging="false" ForeColor="#000066">
    <Columns>
        <asp:BoundField DataField="OrderId" HeaderText="Order ID">
            <ItemStyle Width="10%" />
        </asp:BoundField>
        <asp:BoundField DataField="ProductName" HeaderText="Product Name">
            <ItemStyle Width="30%" />
        </asp:BoundField>
        <asp:BoundField DataField="UnitPrice" HeaderText="Unit Price" DataFormatString="{0:N}" ItemStyle-HorizontalAlign="Right">
            <ItemStyle Width="15%" />
        </asp:BoundField>
        <asp:BoundField DataField="Quantity" HeaderText="Quantity" DataFormatString="{0:N}" ItemStyle-HorizontalAlign="Right">
            <ItemStyle Width="15%" />
        </asp:BoundField>
        <asp:BoundField DataField="Discount" HeaderText="Discount" DataFormatString="{0:N}" ItemStyle-HorizontalAlign="Right">
            <ItemStyle Width="15%" />
        </asp:BoundField>
        <asp:BoundField DataField="Amount" HeaderText="Amount" DataFormatString="{0:N}" ItemStyle-HorizontalAlign="Right">
            <ItemStyle Width="15%" />
        </asp:BoundField>
        <asp:TemplateField HeaderText="Edit">
            <ItemStyle Width="40%" />
            <ItemTemplate>
                <input id="btnOrderID" class="OrderClass" type="button" value="Edit" onclick="ProductEditClient('<%# Eval("OrderID") %>', '<%# Eval("ProductID") %>')" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <RowStyle ForeColor="#000066" Height="20px"></RowStyle>
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left"></PagerStyle>
    <HeaderStyle CssClass="GridViewHeader"></HeaderStyle>
    <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
</asp:GridView>

The Code behind Script (ChildGridBuilder.aspx.cs)

protected void Page_Load(object sender, EventArgs e)
{
    Response.Clear();
    Response.ContentType = "text/xml";
    BindGrid();

    System.IO.StringWriter stringWrite = new System.IO.StringWriter();
    System.Web.UI.HtmlTextWriter htmlWrite = new HtmlTextWriter(stringWrite);
    GridViewDetails.RenderControl(htmlWrite);
    Response.Write(stringWrite.ToString());
            
    Response.End();
}
public override void VerifyRenderingInServerForm(Control control)
{
}
private void BindGrid()
{
    // I am delaying the response to see the Loading... message
    System.Threading.Thread.Sleep(1000);

    using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString))
    {
        string strSQL = "SELECT OrderDetails.OrderID, OrderDetails.ProductID, Products.ProductName," +
                                      "OrderDetails.UnitPrice, OrderDetails.Quantity, OrderDetails.Discount, " +
                                      "((OrderDetails.UnitPrice * OrderDetails.Quantity) - OrderDetails.Discount) Amount " +
                                            "FROM [Order Details] OrderDetails " +
                                            "JOIN Products ON Products.ProductID = OrderDetails.ProductID " +
                                            "WHERE OrderDetails.OrderID = '" + Request.QueryString["OrderID"].ToString() + "'";
        SqlCommand command = new SqlCommand(strSQL, connection);
        command.CommandType = CommandType.Text;

        connection.Open();
        SqlDataReader dr = command.ExecuteReader(CommandBehavior.CloseConnection);

        IList<OrderDetails> detailsList = new List<OrderDetails>();
        while (dr.Read())
        {
            OrderDetails details = new OrderDetails();
            details.OrderID = Convert.ToInt32(dr["OrderID"].ToString());
            details.ProductID = Convert.ToInt32(dr["ProductID"].ToString());
            details.ProductName = dr["ProductName"].ToString();
            details.UnitPrice = Convert.ToDouble(dr["UnitPrice"].ToString());
            details.Quantity = Convert.ToInt32(dr["Quantity"].ToString());
            details.Discount = Convert.ToDouble(dr["Discount"].ToString());
            details.Amount = Convert.ToDouble(dr["Amount"].ToString());

            detailsList.Add(details);
        }

        GridViewDetails.DataSource = detailsList;
        GridViewDetails.DataBind();
    }
}

The OrderDetails entity class (OrderDetails.cs)

public class OrderDetails
{
    public int OrderID { get; set; }
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public double UnitPrice { get; set; }
    public int Quantity { get; set; }
    public double Discount { get; set; }
    public double Amount { get; set; }
}

I use GenericHandler for getting a particular order details to show on the popup screen and to save the same information in the database. So add a GenericHandler (GetOrderData.ashx) file and add the following code.
The GetOrderData.ashx code (GetOrderData.ashx.cs)

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";

    try
    {
        if (context.Request.Form["Type"] == "GET")
        {
            OrderDetails details = new OrderDetails();
            using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString))
            {
                string strSQL = "select OrderDetails.OrderID, OrderDetails.ProductID, OrderDetails.UnitPrice, OrderDetails.Quantity, OrderDetails.Discount, Products.ProductName, ((OrderDetails.UnitPrice * OrderDetails.Quantity) - OrderDetails.Discount) Amount from [Order Details] OrderDetails JOIN Products ON Products.ProductID = OrderDetails.ProductID Where OrderDetails.OrderID = " + context.Request.Form["OrderID"].ToString() + " And OrderDetails.ProductID = " + context.Request.Form["ProductID"].ToString();
                SqlCommand command = new SqlCommand(strSQL, connection);
                command.CommandType = CommandType.Text;

                connection.Open();
                SqlDataReader dr = command.ExecuteReader(CommandBehavior.CloseConnection);

                while (dr.Read())
                {
                    details.OrderID = Convert.ToInt32(dr["OrderID"].ToString());
                    details.ProductID = Convert.ToInt32(dr["ProductID"].ToString());
                    details.ProductName = dr["ProductName"].ToString();
                    details.UnitPrice = Convert.ToDouble(dr["UnitPrice"].ToString());
                    details.Quantity = Convert.ToInt32(dr["Quantity"].ToString());
                    details.Discount = Convert.ToDouble(dr["Discount"].ToString());
                    details.Amount = Convert.ToDouble(dr["Amount"].ToString());
                }
            }
            System.Web.Script.Serialization.JavaScriptSerializer objSerializer =
                    new System.Web.Script.Serialization.JavaScriptSerializer();

            context.Response.Write(objSerializer.Serialize(details));
        }
        else
        {
            using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString))
            {
                string strSQL = "Update [Order Details] Set UnitPrice = '" + context.Request.Form["UnitPrice"].ToString() + "', " +
                                                        " Quantity = '" + context.Request.Form["Quantity"].ToString() + "', " +
                                                        " Discount = '" + context.Request.Form["Discount"].ToString() + "' " +
                                                        " Where OrderID = " + context.Request.Form["OrderID"].ToString() + " " +
                                                        " And ProductID = " + context.Request.Form["ProductID"].ToString();

                SqlCommand command = new SqlCommand(strSQL, connection);

                connection.Open();

                context.Response.Write(command.ExecuteNonQuery());
            }
        }
    }
    catch (Exception ex)
    {
        context.Response.Write("error");
    }
}

The Style Sheet

.GridViewStyle
{
    font-family:Calibri;
    font-size:15px;
}
.GridViewHeader
{
    background: url(../../Images/header.png) repeat-x 0px 0px;
}
.GridViewRow
{
}
.GridViewAlternativeRow
{
    background-color:#edf5ff;
}
.InvisibleCol
{
    display:none;
}
.ChildRow
{
    border-width:0px;
}

/* Style */
#divHidden
{
 width: 100%;
 height:100%;
 background-color:Gray;
 background: url(../../Images/hidden.png) repeat;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 100;
 display: none;
}

.EditInfo
{
    width: 310px;
 height: 220px;
 background-color: White;
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -50px;
 margin-left: -168px;
 vertical-align:middle;
 z-index: 1001;
 display: none;
}
#OrderInfoEdit
{
 width: 400px;
 height: 190px;
 background-color: White;
 position: absolute;
 left: 35%;
 top: 35%;
 margin-top: -50px;
 margin-left: -168px;
 vertical-align:middle;
 z-index: 1001;
 display: none;
 border: 1px solid blue;
 margin: 2px;
 padding: 10px;
}
#OrderInfoEdit P
{
 width: 85%;
 margin: 10px auto;
 text-align: left;
}
#OrderInfoEdit P.button
{
 padding-top: 10px;
 border-top: 1px solid #D1D1D1;
}

The JQuery code

$(document).ready(function () {

    if ($('#<%= hndExpandedChild.ClientID %>').val().length > 0) {

        // Will run when some child grids are expanded
        $.each($('#<%= hndExpandedChild.ClientID %>').val().split(","), function (index, value) {
            ExpandCollapse(value);
        });
    }

    $('.ExpandImage').click(function () {

        ExpandCollapse($(this).attr('alt'));

    })
    function ExpandCollapse(orderId) {

        if ($('#div' + orderId)) {

            // Is already ChildGrid shown. If not shown
            if (!isDisplayed($('#div' + orderId))) {

                if ($('#hid' + orderId).val() == '0') {

                    $('#div' + orderId).css("display", "block");
                    $.ajax({
                        url: 'ChildGridBuilder.aspx?datetime=' + new Date().getTime(),
                        type: 'GET',
                        data: "OrderID=" + encodeURIComponent(orderId),
                        dataType: "html",
                        success: function (response) {
                            $('#div' + orderId).html(response);
                            $('#div' + orderId).css("display", "block");
                            $('#img' + orderId).attr('src', 'images/minus.png');
                            $('#hid' + orderId).val("1");
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Error Occured!');
                            $('#div' + orderId).css("display", "none");
                        }
                    });
                }
                else {
                    $('#div' + orderId).css("display", "block");
                    $('#img' + orderId).attr('src', 'images/minus.png');
                }

                var selectedIds = "," + $('#<%= hndExpandedChild.ClientID %>').val() + ",";
                if (selectedIds.indexOf("," + orderId + ",") == -1) {
                    selectedIds += "," + orderId;

                    selectedIds = selectedIds.replace(/,,/g, ","); // Replacing all ,, ,,, ,,,, etc., to ,
                    while (selectedIds.substring(0, 1) == ",") selectedIds = selectedIds.substring(1);

                    $('#<%= hndExpandedChild.ClientID %>').val(selectedIds);
                }
            }
            else { // Already Child Grid Shown
                $('#div' + orderId).css("display", "none");
                $('#img' + orderId).attr('src', 'images/plus.png');

                var selectedIds = "," + $('#<%= hndExpandedChild.ClientID %>').val() + ",";

                if (selectedIds.indexOf("," + orderId + ",") >= 0) {

                    selectedIds = selectedIds.replace("," + orderId + ",", ","); // Removing the Id

                    selectedIds = selectedIds.replace(/,,/g, ","); // Replacing all ,, ,,, ,,,, etc., to ,
                    selectedIds = selectedIds.substr(1, selectedIds.length - 2); // Removing , both the end and assigning

                    $('#<%= hndExpandedChild.ClientID %>').val(selectedIds);
                }
            }
        }
    }
    ProductEditClient = function (orderId, productId) {
        $("#divHidden").css("display", "block");
        $("#OrderInfoEdit").css("display", "block");

        jQuery.post('GetOrderData.ashx',
                    { Type: "GET", OrderID: orderId, ProductID: productId },
                    function (data) {
                        var orderDetails = eval("(" + data + ")");
                        $(".OrderIdInput").text(orderDetails["OrderID"]);
                        $(".ProductNameInput").text(orderDetails["ProductName"]);
                        $(".UnitPriceInput").val(orderDetails["UnitPrice"]);
                        $(".QuantityInput").val(orderDetails["Quantity"]);
                        $(".DiscountInput").val(orderDetails["Discount"]);
                        $(".AmountInput").val(orderDetails["Amount"]);
                        $(".ProductIDInput").val(orderDetails["ProductID"]);
                    })
                    .error(function () {
                        alert('Error Occured!');
                        $('#div' + orderId).css("display", "none");
                    })
    }
    // This function is for cancel button, when click of this button the popup screen will be hidden and show as normal.
    $(".Cancel").click(function () {
        $("#divHidden").css("display", "none");
        $("#OrderInfoEdit").css("display", "none");
    });
    $(".UnitPriceInput").blur(function() {
        $(".AmountInput").val(($(".UnitPriceInput").val() * $(".QuantityInput").val()) - $(".DiscountInput").val());
    });
    $(".QuantityInput").blur(function() {
        $(".AmountInput").val(($(".UnitPriceInput").val() * $(".QuantityInput").val()) - $(".DiscountInput").val());
    });
    $(".DiscountInput").blur(function() {
        $(".AmountInput").val(($(".UnitPriceInput").val() * $(".QuantityInput").val()) - $(".DiscountInput").val());
    });
    $(".OrderDetailSave").click(function () {
        jQuery.post('GetOrderData.ashx',
                    { Type: "SAVE", OrderId: $(".OrderIdInput").text(),
                        ProductID: $(".ProductIDInput").val(),
                        UnitPrice: $(".UnitPriceInput").val(),
                        Quantity: $(".QuantityInput").val(),
                        Discount: $(".DiscountInput").val(),
                        Amount: $(".AmountInput").val(),
                    },
                    function (data) {
                        if (data == 1)
                        {
                            alert("Record Saved Successfully");
                            ExpandCollapse($(".OrderIdInput").text());
                            $('#hid' + $(".OrderIdInput").text()).val('0');
                            ExpandCollapse($(".OrderIdInput").text());
                            $("#divHidden").css("display", "none");
                            $("#OrderInfoEdit").css("display", "none");
                        }
                    })
                    .error(function () {
                        alert('Error Occured!');
                        $('#div' + orderId).css("display", "none");
                    })
    });
    function isDisplayed(object) {
        // if the object is visible return true
        if ($(object).css('display') == 'block') {
            return true;
        }
        // if the object is not visible return false
        return false;
    };
});

Note: When saving the child grid details on the popup, it calls the ExpandCollapse to fetch the new details and overwrite the existing content. Because the AJAX calls are caching the data, that will return the same content. So I have added current time in line # 27 with the url.

The output of the code would be -

download the working example of the source code in C# here and in VB here.