locked
Nested grid in Jquery(Child grid) RRS feed

  • Question

  • User-257070954 posted

    HI All,
    I want to display my data in nested grid  from json data using jquey
    Below giving my details
    [{
    "UserId": 1,
    "OrderCount": 2,
    "FirstName": "Binu",
    "LastName": "George",
    "Address1": "Add1",
    "Address2": "Add2",
    "Address3": "-",
    "Mobile": "8606888265",
    "Landmark": "Land mark",
    "OrderDetails": [{
    "Id": 1,
    "ItemId": 1,
    "OrderId": "6556",
    "ProductName": "Rice",
    "Brand": "Pavizham",
    "Price": 150.00,
    "UOM": "Kg",
    "Qty": 3.00,
    "QtyPacked": 3.00,
    "TotalPrice": 450.0000,
    "OrderDate": "16 Jul 2020"
    }, {
    "Id": 2,
    "ItemId": 2,
    "OrderId": "6556",
    "ProductName": "Rice",
    "Brand": "Nirapara",
    "Price": 160.00,
    "UOM": "Kg",
    "Qty": 3.00,
    "QtyPacked": 3.00,
    "TotalPrice": 480.0000,
    "OrderDate": "16 Jul 2020"
    }, {
    "Id": 3,
    "ItemId": 5,
    "OrderId": "65561",
    "ProductName": "Rice",
    "Brand": "Matta",
    "Price": 170.00,
    "UOM": "Kg",
    "Qty": 1.00,
    "QtyPacked": 1.00,
    "TotalPrice": 170.0000,
    "OrderDate": "16 Jul 2020"
    }]
    }, {
    "UserId": 2,
    "OrderCount": 1,
    "FirstName": "Andrea",
    "LastName": "Binu",
    "Address1": "Add1",
    "Address2": "Add2",
    "Address3": "Add3",
    "Mobile": "1234567890",
    "Landmark": "LandMark",
    "OrderDetails": [{
    "Id": 4,
    "ItemId": 3,
    "OrderId": "45544",
    "ProductName": "Rice",
    "Brand": "Surekha",
    "Price": 180.00,
    "UOM": "Kg",
    "Qty": 3.00,
    "QtyPacked": 3.00,
    "TotalPrice": 540.0000,
    "OrderDate": "16 Jul 2020"
    }]
    }]
    As per the above json data i want to show two users in Parent grid User1 and User2. When i click user 1 I want show his two
    orders differentiate with OrderId ("OrderId": "6556","OrderId": "65561") Child grid with checkbox. If i click any one of the Orderid i want
    show all items under that order next child grid with checkbox. How can achieve this with Jquery

    Saturday, July 18, 2020 5:09 AM

All replies

  • User475983607 posted

    How can achieve this with Jquery

    The first step is doing a much better job of defining the detailed requirements.  Then break the requirements into small parts then solve each part.

    Are you planning to use a JavaScript table library or are you designing HTML?  

    Where is the json coming from an Web API call?   Is the API call coming from C# code or JavaScript?  Do you plan to load the details dynamically or create the HTML once and show/hide the details?     

    Lastly, please share the code that you've attempted up to this point.  Explain how you expect the code to function and what actually happens.

    Saturday, July 18, 2020 1:07 PM
  • User-257070954 posted

    Mgebhard,

              Are you planning to use a JavaScript table library or are you designing HTML? 

                          yes, I wish to use JavaScript   library     

          Where is the json coming from an Web API call? 

                        Its Coming from Asp.net core C#  Web API

     Do you plan to load the details dynamically or create the HTML once and show/hide the details?     

                       Once load the data and  When we click child, show respective data(Show/Hide). No need to call another API. all data already available

    please share the code that you've attempted up to this point

               Now showing data in one table and when we click on detail opening data in pop up.

            

    Monday, July 20, 2020 5:32 AM
  • User-1330468790 posted

    Hi binustrat,

     

    You could use DataTables - a jquery library to display the data. After you fetch the data from server side, you could still access the data from the element which is wrapped with datatable plugin.

    You may need to redesign the json data structure for your purpose. I suggest you change the json data as below:

    [
                    {
                        "UserId": 1,
                        "OrderCount": 2,
                        "FirstName": "Binu",
                        "LastName": "George",
                        "Address1": "Add1",
                        "Address2": "Add2",
                        "Address3": "-",
                        "Mobile": "8606888265",
                        "Landmark": "Land mark",
                        "OrderDetails": [
                            {
                                "OrderId": "6556",
                                "Items": [
                                    {
                                        "Id": 1,
                                        "ItemId": 1,
                                        "OrderId": "6556",
                                        "ProductName": "Rice",
                                        "Brand": "Pavizham",
                                        "Price": 150.00,
                                        "UOM": "Kg",
                                        "Qty": 3.00,
                                        "QtyPacked": 3.00,
                                        "TotalPrice": 450.0000,
                                        "OrderDate": "16 Jul 2020"
                                    },
                                    {
                                        "Id": 2,
                                        "ItemId": 2,
                                        "OrderId": "6556",
                                        "ProductName": "Rice",
                                        "Brand": "Nirapara",
                                        "Price": 160.00,
                                        "UOM": "Kg",
                                        "Qty": 3.00,
                                        "QtyPacked": 3.00,
                                        "TotalPrice": 480.0000,
                                        "OrderDate": "16 Jul 2020"
                                    }
                                ]
                            },
                            {
                                "OrderId": "65561",
                                "Items": [
                                    {
                                        "Id": 3,
                                        "ItemId": 5,
                                        "OrderId": "65561",
                                        "ProductName": "Rice",
                                        "Brand": "Matta",
                                        "Price": 170.00,
                                        "UOM": "Kg",
                                        "Qty": 1.00,
                                        "QtyPacked": 1.00,
                                        "TotalPrice": 170.0000,
                                        "OrderDate": "16 Jul 2020"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "UserId": 2,
                        "OrderCount": 1,
                        "FirstName": "Andrea",
                        "LastName": "Binu",
                        "Address1": "Add1",
                        "Address2": "Add2",
                        "Address3": "Add3",
                        "Mobile": "1234567890",
                        "Landmark": "LandMark",
                        "OrderDetails": [
                            {
                                "OrderId": "45544",
                                "Items": [
                                    {
                                        "Id": 4,
                                        "ItemId": 3,
                                        "OrderId": "45544",
                                        "ProductName": "Rice",
                                        "Brand": "Surekha",
                                        "Price": 180.00,
                                        "UOM": "Kg",
                                        "Qty": 3.00,
                                        "QtyPacked": 3.00,
                                        "TotalPrice": 540.0000,
                                        "OrderDate": "16 Jul 2020"
                                    }
                                ]
                            }
                        ]
                    }
                ]

    Another thing that you may need to consider is that you have to think about how to add the html elements both for button/checkbox and popup. I construct a demo with hard coding for these stuff. 

    More details, you could refer to below codes:

    Header:

    <head runat="server">
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.css" />
    
        <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.js"></script>
    
    
        <style>
    /* modal fit to its content */ .modal-dialog { max-width: 100%; width: auto !important; display: inline-block; } .modal { text-align: center; } </style> <title></title> </head>

    JSON data:

     <script>
                var example = [
                    {
                        "UserId": 1,
                        "OrderCount": 2,
                        "FirstName": "Binu",
                        "LastName": "George",
                        "Address1": "Add1",
                        "Address2": "Add2",
                        "Address3": "-",
                        "Mobile": "8606888265",
                        "Landmark": "Land mark",
                        "OrderDetails": [
                            {
                                "OrderId": "6556",
                                "Items": [
                                    {
                                        "Id": 1,
                                        "ItemId": 1,
                                        "OrderId": "6556",
                                        "ProductName": "Rice",
                                        "Brand": "Pavizham",
                                        "Price": 150.00,
                                        "UOM": "Kg",
                                        "Qty": 3.00,
                                        "QtyPacked": 3.00,
                                        "TotalPrice": 450.0000,
                                        "OrderDate": "16 Jul 2020"
                                    },
                                    {
                                        "Id": 2,
                                        "ItemId": 2,
                                        "OrderId": "6556",
                                        "ProductName": "Rice",
                                        "Brand": "Nirapara",
                                        "Price": 160.00,
                                        "UOM": "Kg",
                                        "Qty": 3.00,
                                        "QtyPacked": 3.00,
                                        "TotalPrice": 480.0000,
                                        "OrderDate": "16 Jul 2020"
                                    }
                                ]
                            },
                            {
                                "OrderId": "65561",
                                "Items": [
                                    {
                                        "Id": 3,
                                        "ItemId": 5,
                                        "OrderId": "65561",
                                        "ProductName": "Rice",
                                        "Brand": "Matta",
                                        "Price": 170.00,
                                        "UOM": "Kg",
                                        "Qty": 1.00,
                                        "QtyPacked": 1.00,
                                        "TotalPrice": 170.0000,
                                        "OrderDate": "16 Jul 2020"
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "UserId": 2,
                        "OrderCount": 1,
                        "FirstName": "Andrea",
                        "LastName": "Binu",
                        "Address1": "Add1",
                        "Address2": "Add2",
                        "Address3": "Add3",
                        "Mobile": "1234567890",
                        "Landmark": "LandMark",
                        "OrderDetails": [
                            {
                                "OrderId": "45544",
                                "Items": [
                                    {
                                        "Id": 4,
                                        "ItemId": 3,
                                        "OrderId": "45544",
                                        "ProductName": "Rice",
                                        "Brand": "Surekha",
                                        "Price": 180.00,
                                        "UOM": "Kg",
                                        "Qty": 3.00,
                                        "QtyPacked": 3.00,
                                        "TotalPrice": 540.0000,
                                        "OrderDate": "16 Jul 2020"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            </script>

    JS Functions:

     <script>
                $(function () {
                    var table = $('#example').DataTable({
                        data: example,
                        columns: [
                            { data: 'UserId', title: 'User ID', show: false },
                            { data: 'OrderCount', title: 'Order Count', className: 'order-detail' },
                            { data: 'FirstName', title: 'First Name' },
                            { data: 'LastName', title: 'Last Name' },
                            { data: 'Address1', title: 'Address1' },
                            { data: 'Address2', title: 'Address2' },
                            { data: 'Address3', title: 'Address3' },
                            { data: 'Landmark', title: 'Landmark' }
                        ]
                    });
    
                    // Add event listener for opening and closing details
                    $('#example tbody').on('click', 'td.order-detail', function () {
                        var tr = $(this).closest('tr');
                        var row = table.row(tr);
    
                        if (row.child.isShown()) {
                            // This row is already open - close it
                            row.child.hide();
                            tr.removeClass('shown');
                        } else {
                            // Open this row
                            console.log(row.data().OrderDetails);
                            row.child(getOrderList(row.data())).show(); //format(row.data())
                            tr.addClass('shown');
                        }
                    });
                })
    
                function getOrderList(data) {
                    console.log(data);
                    var orderDetails = data.OrderDetails;
                    var result = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
                    result += '<tr>' +
                        '<td></td>' +
                        '<td>Order ID</td>' +
                        '</tr>';
                    for (var i = 0; i < orderDetails.length; i++) {
                        result += '<tr>' +
                            '<td>' + '<input type="button" onclick="ShowModal(this);" value="View"></input>'+'</td>' +
                            '<td>' + orderDetails[i].OrderId + '</td>' +
                            '</tr>';
                    }
                    
                       
                    result += '</table>';
    
                    return result;
                }
    
                function ShowModal(d) {
                    var table = $('#example').DataTable();
    
    
                    // retrieve the parent
                    var tr = $(d).closest("table").closest("tr").prev()[0];
                    var row = table.row(tr);
    
                    // Get Order Id
                    var orderId = $(d).parent().next('td').text();
                   
                    var orderDetails = row.data().OrderDetails;
                    orderDetails.forEach(function (e, i) {
                        if (e.OrderId == orderId) {
                            $(".modal-body").html(addModalContent(e.Items));
                        }
                    })
    
                    $('#exampleModal').modal('show');
    
                }
    
                function addModalContent(data) {
                    console.log(data);
                    var order = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
                    order += '<tr>' +
                        '<td>Brand</td>' +
                        '<td>Item ID</td>' +
                        '<td>Order Date</td>' +
                        '<td>Price</td>' +
                        '<td>ProductName</td>' +
                        '<td>Qty</td>' +
                        '<td>QtyPacked</td>' +
                        '<td>TotalPrice</td>' +
                        '<td>UOM</td>' +
                        '</tr>';
                    for (var i = 0; i < data.length; i++) {
                        console.log(data[i]);
                        order += '<tr>' +
                            '<td>' + data[i].Brand+'</td>' +
                            '<td>' + data[i].ItemId+'</td>' +
                            '<td>' + data[i].OrderDate+'</td>' +
                            '<td>' + data[i].Price+'</td>' +
                            '<td>' + data[i].ProductName+'</td>' +
                            '<td>' + data[i].Qty+'</td>' +
                            '<td>' + data[i].QtyPacked+'</td>' +
                            '<td>' + data[i].TotalPrice+'</td>' +
                            '<td>' + data[i].UOM+'</td>' +
                            '</tr>';
                    }
    
                    order += '</table>';
                    return order;
                }
            </script>

    HTML with modal:

     <div class="container">
                <table id="example" class="display" width="100%"></table>
            </div>
    
    
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Order Items</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
    

    Demo:

     

     

    Hope this can help you.

    Best regards,

    Sean

    Monday, July 20, 2020 9:28 AM