Need help to load Nested table using Abp web forms

i am getting error like this 

code to trigger click event

text: l("Expand"),
id: "expandButton",
visible: abp.auth.isGranted('QueuingSystem.Queues.Edit'),
action: function (data) {
    var row = $(data.record.queue.id);
    currentQueueId = row[0];

    populateDataTable(currentQueueId);

}

and the function to populate data is below

 

function populateDataTable(currentQueueId) {
    queueService.getTicketsByQueueId(currentQueueId)
        .then(function (data) {
            var ticketList = data.map(function (ticket) {
                return {
                    status: ticket.status,
                    ticketNumber: ticket.ticketNumber,
                    sequenceNumber: ticket.sequenceNumber
                };
            });//-------------Till this point, code is working. 26 Feb 2024
            var queueTable = document.getElementById("dummyTable");
            queueTable.innerHTML = "";
            debugger;

            var QueuedataTableColumns = [
                { data: "sequenceNumber" },
                { data: "status" },
                { data: "ticketNumber" }
            ];

            queueTable = $("#dummyTable").DataTable({
                processing: true,
                serverSide: true,
                paging: true,
                searching: false,
                scrollX: true,
                autoWidth: true,
                scrollCollapse: true,
                order: [[1, "asc"]],
                columnDefs: dataTableColumns
            });

            ticketList.forEach(function (ticket) {
                var row = document.createElement("tr");

                var statusCell = document.createElement("td");
                statusCell.textContent = ticket.status;
                row.appendChild(statusCell);

                var ticketNumberCell = document.createElement("td");
                ticketNumberCell.textContent = ticket.ticketNumber;
                row.appendChild(ticketNumberCell);

                var sequenceCell = document.createElement("td");
                sequenceCell.textContent = ticket.sequenceNumber;
                row.appendChild(sequenceCell);

                // Append the row to the table
                queueTable.appendChild(row);
            });

        })
        .catch(function (error) {
            alert("Error fetching tickets:", error);
        });
}

Amit Mohanty,

my requirement is to load parent data (queue) initially and then load child data (ticket data based on queue id) in button click. the hide and show thing is been done before, but data loading is too slow, we need to change to show only one row(s) of child data based on queue id

If you're correctly obtaining the queue ID from the selected row, then issue might lie in how you're trying to show the nested table on the web page. First make sure the nested table (QueueTicketTable) is initially hidden and when the expand button is clicked, show the nested table and load data into the nested table.
For example:

function loadNestedTableData(queueId) {
    // Show the nested table
    $('#QueueTicketTable').show();

    // Call API to get tickets data
    queueService.getTicketsByQueueId(queueId).done(function(result) {
        // Format the data into an array of objects
        var formattedData = result.map(function(ticket) {
            return {
                "SequenceNumber": ticket.sequenceNumber,
                "Status": ticket.status,
                "TicketNumber": ticket.ticketNumber
            };
        });

        // Clear existing data in the nested table
        QueuedataTable.clear().draw();

        // Add the formatted data to the nested table
        QueuedataTable.rows.add(formattedData).draw();
    });
}

Dear Amit Mohanty,

the code you provided is not working as we expected, value is undefined.

using below code, i am getting the exact id of selected column. The issue is that the table not showing in web page.

var row = $(data.record.queue.id);
var queueId = row[0];

I think the issue is in below code.

action: function (data) {
    var row = $(data.record.queue.id);
    var queueId = row[0];

    loadNestedTableData(queueId);
}

Try to use below code.

action: function(data) {
    var row = $("#" + data.record.queue.id);
    var queueId = row.attr("id");

    loadNestedTableData(queueId);
}

@Abhishek Yadav,

I have added the code you provided. still the expand button not working as expected.

 this is the current view of grid.

need to show a nested view of child table based on the id of this table. QueueTicketTable is the child table here

below is the Abp razor view tag where i set two table. 

            @L["Actions"]
            @L["Name"]
            @L["TicketRangeMin"]
            @L["TicketRangeMax"]
            @L["TicketCode"]
            @L["IsDefaultQueue"]
            @L["LastTicketId"]

       
   
   
       
           
               
                   
                        SequenceNumber
                        Status
                        TicketNumber
                   
               

// Function to load data into nested table
function loadNestedTableData(queueId) {
    // Call API to get tickets data
    queueService.getTicketsByQueueId(queueId).done(function(result) {
        // Format the data into an array of objects
        var formattedData = result.map(function(ticket) {
            return {
                "tickts.status": ticket.status,
                "tickts.TicketNumber": ticket.ticketNumber,
                "tickts.SequenceNumber": ticket.sequenceNumber
            };
        });

        // Clear existing data in the nested table
        QueuedataTable.clear().draw();

        // Add the formatted data to the nested table
        QueuedataTable.rows.add(formattedData).draw();
    });
}

// Expand action for parent table
var dataTableColumns = [
    {
        rowAction: {
            items: [
                {
                    text: l("Expand"),
                    visible: abp.auth.isGranted('QueuingSystem.Queues.Edit'),
                    action: function (data) {
                        var row = $(data.record.queue.id);
                        var queueId = row[0];

                        loadNestedTableData(queueId);
                    }
                }
            ]
        },
        width: "1rem"
    },
    { data: "queue.name" },
    // Add other columns for the parent table
];

// Initialize parent table
var dataTable = $("#QueuesTable").DataTable({
    processing: true,
    serverSide: true,
    paging: true,
    searching: false,
    scrollX: true,
    autoWidth: true,
    scrollCollapse: true,
    order: [[1, "asc"]],
    ajax: abp.libs.datatables.createAjax(queueService.getList, getFilter),
    columnDefs: dataTableColumns
});

// Initialize nested table
var QueuedataTable = $('#QueueTicketTable').DataTable({
    processing: true,
    serverSide: true,
    paging: true,
    searching: false,
    scrollX: true,
    autoWidth: true,
    scrollCollapse: true,
    order: [[0, "asc"]],
    columns: QueuedataTableColumns
});