Showing Child Row on Changing DataSets

hifni

Hi All,

uses: -DataTables 1.10.12; ASP.NET;

This tool is great! I have being enjoying this ever since I found it.

However, I have been facing some difficulties with Child Rows. Pls. guide me on this. Appreciate if anybody could share their solutions.

My Problem: Child row displaying on changing data sets:
I have been getting error, as "ctx[0].aoData[this[0]] is undefined" when I tried to get the child row after the datasource have been changed. New datasource is taken after a button click by passing parameters. Initial loading of data proves no problem but subsequent data loading gives the error. The error is passed as soon as the debugger hits the following code:

if (row.child.isShown()) {}

The full code I have been using is:

function organization_GetAccountManagerDetailEarnings(purl, pstart, pend, pcontext, purl2) { 

    var table;
    var existing_table = $('#accountManagerEarningsDataTable').dataTable();
    if (existing_table != undefined) {
        existing_table.fnClearTable();
        existing_table.fnDestroy();
    }

    table = $('#accountManagerEarningsDataTable').DataTable({
                        ajax: {
                            url: purl,
                            dataSrc: "",
                            data: function (d) {
                                d.from = pstart;
                                d.to = pend;
                                d.context = pcontext;
                            }
                        },
                        searching: false,
                        processing: true,
                        paging: false,
                        columnDefs:
                        [
                            {
                                className: "dt-right",
                                "targets": [2]
                            },
                            {
                                className: "dt-right",
                                "targets": [3]
                            },
                            {
                                className: "dt-right",
                                "targets": [4]
                            },
                            {
                                className: "dt-right",
                                "targets": [5]
                            },
                            {
                                className: "dt-right",
                                "targets": [6]
                            }
                        ],
                        columns: [
                            {
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": ''
                            },
                            { "data": "AccountManagerName" },
                            { "data": "TradeCount" },
                            { "data": "SelfServiceTradeCount" },
                            { "data": "TotalDirectBrokerageValue" },
                            { "data": "TotalSelfServiceBrokerageValue" },
                            { "data": "TotalRetailBrokerageValue" }
                        ],
                        "order": [[4, 'desc']],
                        "footerCallback": function (row, data, start, end, display) {
                            var api = this.api(),
                            data;

                            // Remove the formatting to get integer data for summation
                            var intVal = function (i) {
                                return typeof i === 'string' ?
                                i.replace(/[\$,]/g, '') * 1 :
                                typeof i === 'number' ?
                                    i : 0;
                            };

                            // Total over all pages
                            total = api
                                .column(4)
                                .data()
                                .reduce(function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0);

                            // Total over this page
                            pageTotal = api
                                .column(4, {
                                    page: 'current'
                                })
                                .data()
                                .reduce(function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0);

                            // Update footer
                            $(api.column(4).footer()).html(
                                'LKR' + currencyFormat(pageTotal) + ' ( LKR' + currencyFormat(total) + ' total)');
                        }
    });

    $('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {

        var tr = $(this).closest('tr');
        var row = table.row(tr);

        try {
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                $('div#collapseAccountManagerEarningsBody').block({
                    message: '<label>Processing</label>',
                    css: { border: '3px solid #a00' }
                });

                // Open this row
                var arrForTable1 = [];
                var arrForTable2 = [];

                totalBrokerage = 0;
                totalRetailBrokerage = 0;
                totalSelfServiceBrokerage = 0;

                console.log('You selected: ' + row.data().AccountManagerID);

                

                //problems with asynchoronus call back
                var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);

                if (response.success === "true") {
                    for (var i = 0; i < response.value.length; i++) {

                        for (var j = 0; j < response.value[i].Securities.length; j++) {

                            var itemRow2 = {};
                            itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
                            itemRow2["Trades"] = response.value[i].Securities[j].Trades;
                            itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
                            itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
                            itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
                            itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
                            arrForTable2.push(itemRow2);

                            totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
                            totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
                        }

                        totalBrokerage = Math.round(totalBrokerage * 100) / 100;
                        totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
                        totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;

                        var itemRow1 = {};
                        itemRow1["Account ID"] = response.value[i].AccountId;
                        itemRow1["Account Name"] = response.value[i].AccountName;
                        itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
                        arrForTable1.push(itemRow1);
                        arrForTable2 = [];

                        totalBrokerage = 0;
                        totalRetailBrokerage = 0;
                        totalSelfServiceBrokerage = 0;

                    }

                    htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
                    //console.log("2. " + JSON.stringify(htmlTable1));
                    row.child(htmlTable1).show();
                    tr.addClass('shown');
                }
                else {
                    row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
                    tr.addClass('shown');
                };

                $('div#collapseAccountManagerEarningsBody').unblock();
            }
        } catch (e) {
            
            console.log(e.message);
            $('div#collapseAccountManagerEarningsBody').unblock();
        }

    });
}

hifni

I am really in need of help, Please.