Need help to load Nested table using Abp web forms

Question

Dear friends,

I am trying to load a nested table based on parent grid id using Abp web form and javascript. getting an error listed below.

my razor page is like this
 

<abp-table striped-rows="true" id="QueuesTable">
    <thead>
        <tr>

            <th>@L["Actions"]</th>
            <th>@L["Name"]</th>
            <th>@L["TicketRangeMin"]</th>
            <th>@L["TicketRangeMax"]</th>
            <th>@L["TicketCode"]</th>
            <th>@L["IsDefaultQueue"]</th>
            <th>@L["LastTicketId"]</th>

        </tr>
    </thead>
    <tr class="nested-row">
        <td colspan="6">
            <abp-table striped-rows="true" class="table table-striped dataTable no-footer" id="QueueTicketTable">
                <thead>
                    <tr>
                        <th>SequenceNumber</th>
                        <th>Status</th>
                        <th>TicketNumber</th>
                    </tr>
                </thead>

            </abp-table>
        </td>
    </tr>
</abp-table>

and below is the javascript for load data

 

//--------------parent grid settings and data loading for parent grid
var dataTableColumns = [
    {
        rowAction: {
            items:
                [
                    {
                        text: l("Expand"),
                        visible: abp.auth.isGranted('QueuingSystem.Queues.Edit'),
                        action: function (data) {
                            //-----------this is the id of nested table
                            var queueTicketTable = document.getElementById("QueueTicketTable");
                            var row = $(data.record.queue.id);
                            var queueId = row[0];

                           //-------set a api to get result based on id
                            var result = queueService.getTicketsByQueueId(queueId);
                            QueuedataTableColumns = result;

                        }
                    }

                ]
        },
        width: "1rem"
    },
    { data: "queue.name" },
    { data: "queue.ticketRangeMin" },
    { data: "queue.ticketRangeMax" },
    { data: "queue.ticketCode" },
    {
        data: "queue.isDefaultQueue",
        render: function (isDefaultQueue) {
            return isDefaultQueue ? '<i class="fa fa-check"></i>' : '<i class="fa fa-times"></i>';
        }
    },
    { data: "queue.lastTicketId" }
];
//---columns for nested table
var QueuedataTableColumns = [
    { data: "tickts.status" },
    { data: "tickts.TicketNumber" },
    { data: "tickts.SequenceNumber" }

];
//---------------this is the parent table where nested table populate based on its id
var dataTable = $("#QueuesTable").DataTable(abp.libs.datatables.normalizeConfiguration({
    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
}));

//-------------this is the nested table(nested table) i want to load
var QueuedataTable = $('#QueueTicketTable').DataTable({
    processing: true,
    serverSide: true, // You may need to set this to false if you're not handling server-side processing
    paging: true,
    searching: false,
    scrollX: true,
    autoWidth: true,
    scrollCollapse: true,
    order: [[0, "asc"]], // Set the default sort order, adjust as needed
    columns: QueuedataTableColumns
});