Parent Child (.Net Core) Child table not displaying

chaithu7844

I am using the following code to display parent child relationship. Both my parent and child come from the same controller.
The parent table displays fine but the child row does not turn up. What am i doing wrong?

Datatables Code:

var editor; // use a global for the submit and return data rendering in the examples

        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: "/api/joinrecipientaccess",
                table: "#example",
                fields: [
                    {
                        label: "Cost Center",
                        name: "RecipientCurrentAccess.dimensionId",
                        type: 'select'
                    }
                ]

            });

           var siteTable = $('#example').DataTable({

                "fixedHeader": {
                    header: true,
                },
                "colReorder": true,
                dom: "Bfrtip",
                autoWidth: true,
                ajax: {
                    url: "/api/joinrecipientaccess",
                    type: 'POST'
                },
                columns: [

                    {
                        className: 'details-control',
                        orderable: false,
                        data: null,
                        defaultContent: '',
                        width: '10%'
                    },
                    { data: "ProcessType.description" },
                    { data: "DimensionType.description" },
                    { data: "DimensionKey.description" },
                    { data: "DimensionKey.hierarchyLevel1" },
                    { data: "DimensionKey.hierarchyLevel2" },
                    { data: "DimensionKey.hierarchyLevel3" }
                ],
                select: {
                    style: 'os',
                    selector: 'td:not(:first-child)'
                },
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor },
                    {
                        extend: "selected",
                        text: 'Duplicate',
                        action: function (e, dt, node, config) {
                            // Start in edit mode, and then change to create
                            editor
                                .edit(table.rows({ selected: true }).indexes(), {
                                    title: 'Duplicate record',
                                    buttons: 'Create from existing'
                                })
                                .mode('create');
                        }
                    },
                    {
                        extend: 'collection',
                        text: 'Export',
                        buttons: [
                            'copy',
                            'excel',
                            'csv',
                            'pdf',
                            'print'
                        ]
                    }
                ]
            });
   
            $('#example tbody').on('click', ' td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = siteTable.row(tr);
            //var row = dt.row( tr );

            if (row.child.isShown()) {
                    
                    // This row is already open - close it
                    destroyChild(row);
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    
                    createChild(row, 'child-table'); // class is for background colour
                    tr.addClass('shown');
                }
            });

            function createChild(row) {

                alert("Child");

                // This is the table we'll convert into a DataTable
                var table = $('<table class="display" width="100%"/>');

                // Display it the child row
                row.child(table).show();


                var rowData = row.data();
                var usersEditor = new $.fn.dataTable.Editor({
                    ajax: {
                    url: "/api/joinrecipientaccess",
                    //data: function (d) {
                    //    d.RecipientCurrentAccess.dimensionId = rowData.id;
                    //}
                      },
                table: table,
                fields: [
                    {
                        label: "Full Name:",
                        name: "RecipientCurrentAccess.recipientId",
                        type: 'select'
                    }
                    , {
                        label: "Approval Level:",
                        name: "RecipientCurrentAccess.approvalLevelsId",
                        type: 'select'
                    }
                    , {
                        label: "Dimension:",
                        name: "RecipientCurrentAccess.dimensionId",
                        type: 'select',
                        def: rowData.id
                    }

                ]
                });

                var usersTable = table.DataTable({
                dom: 'Bfrtip',
                pageLength: 5,
                ajax: {
                    //url: 'examples/simple/joinRecipientCurrentAccessParentChild.html',
                    url: "/api/joinrecipientaccess",
                    type: 'POST',

                    //data: function (d) {
                    //    d.RecipientCurrentAccess.dimensionId  = rowData.id;
                    //}
                },
                columns: [

                    {
                        data: null,
                        render: function (data, type, row) {
                            return data.Recipient.firstName + ' ' + data.Recipient.lastName;
                        },
                        editField: ["Recipient.firstName", "Recipient.lastName"]
                    },
                    { data: "ApprovalLevels.description" },
                    { data: "RecipientCurrentAccess.dimensionId" }
                ],
                select: true,
                buttons: [
                    { extend: 'create', editor: usersEditor },
                    { extend: 'edit', editor: usersEditor },
                    { extend: 'remove', editor: usersEditor }
                ]
              });


                //// Initialise as a DataTable
                //var usersTable = table.DataTable({
                //    // ...
                //});
            }

            function destroyChild(row) {
                var table = $("table", row.child());
                table.detach();
                table.DataTable().destroy();

                // And then hide the row
                row.child.hide();
            }

            

           usersEditor.on('submitSuccess', function (e, json, data, action) {
                row.ajax.reload(function () {
                    $(row.cell(row.id(true), 0).node()).click();
                });
           });

            function updateChild(row) {
                $('table', row.child()).DataTable().ajax.reload();
            } 

            editor.on('submitSuccess', function () {
                siteTable.rows().every(function () {
                    if (this.child.isShown()) {
                        updateChild(this);
                    }
                });
            });

     });

    </script>
</head>
<body class="example">
    <div class="container">
        <section>
            <div class="demo-html"></div>
            <table id="example" class="display" cellspacing="5" width="100%" data-page-length="15">
                <thead>
                    <tr align="left">
                        <th></th>
                        <th>Process</th>
                        <th>Dimension Type</th>
                        <th>Dimension Key</th>
                        <th>Filter 1</th>
                        <th>Filter 2</th>
                        <th>Filter 3</th>
                    </tr>
                </thead>
            </table>
        </section>
    </div>

</body>
</html>

allan

For your child table you have the ajax.data option commented out:

                    url: "/api/joinrecipientaccess",
                    type: 'POST',
 
                    //data: function (d) {
                    //    d.RecipientCurrentAccess.dimensionId  = rowData.id;
                    //}

So its not going to have anything to filter results on the server-side. I don't know what you are using on the server-side for that method - perhaps you can show me?

Allan

chaithu7844

Thanks Allan. That worked. I had the wrong spelling in my controller.