Event after responsive detail render

yu yen kan

responsive: {
                details: {
                    renderer: function (api, rowIdx, columns) {
                        var data = $.map(columns, function (col, i) {
                            return col.hidden ?
                                    '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                    '<td>' + col.title + ':' + '</td> ' +
                                    '<td>' + col.data + '</td>' +
                                    '</tr>' :
                                    '';
                        }).join('');

                        var row = requestTable.row(rowIdx);

                        data += '<tr>' +
                                '<td>' +
                                '<table cellpadding="5" cellspacing="0" border="0" style="width:100%" id="table+ row.data().id + '">' +
                                '</table>' + 
                                '</td>' + 
                                '</tr>';

//                        initSubTable(row);
                        return data ?
                                $('<table/>').append(data) :
                                false;
                    }
                }
            },

I trying to add sub table on responsive detail view, is there any event execute after detail view render?

yu yen kan

I can render sub table with following code

renderer: function (api, rowIdx, columns) {
                        var data = $.map(columns, function (col, i) {
                            return col.hidden ?
                                    '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                    '<td>' + col.title + ':' + '</td> ' +
                                    '<td>' + col.data + '</td>' +
                                    '</tr>' :
                                    '';
                        }).join('');

                        var row = requestTable.row(rowIdx);
                        
var table = "";
                        if (row !== undefined && row.data() !== undefined) {
                            table = RequestDetailDiv(row.data().id, data);//'<div class="sub_data_table"><table cellpadding="5" cellspacing="0" border="0" style="width:100%" id="table+ row.data().id + '">' +
                                   //'</table></div>';
showRequestDetail(row);
                        }
//                         +
//                                    '<tr>' +
//                                    '<td>' +
//                                    '</td>' +
//                                    '</tr>'
                        return table ? table : false;
                    }

function showRequestDetail(row) {
            var id = row.data().id;

$('#table+ id).DataTable({
                dom: "Bfrtip",
                rowId: "id",
                data: row.data().request_detail
});
}

but after I render sub table, the responsive effect gone and I get this error

SCRIPT5007: Unable to get property 'node' of undefined or null reference
dataTables.buttons.min.js (7,294)

and the detail view is not longer work after 1st expand

allan

The responsive-display event is triggered when the child row is altered. You could use that to initialise a Javascript control inside of it.

Allan

yu yen kan

tried responsive-display event, unfortunately, when I tried to initialize the datatable in child view, the detail.render is trigger again and the output is replaced

yu yen kan

Details for row 0 shown is update, false
Details for row 0 shown is update, true
Details for row 0 hidden is update, false

from the log of responsive-display event, when 1st render is received and I initialize the sub table by

 if (showHide && !update) {
                showRequestDetail(row);
             }

to avoid infinity loop, 2nd event is triggered after I initialize sub table

allan

Just to confirm, are you saying that with the above it works for you?

Allan

yu yen kan

sample3 is before show detail view,
sample1 is after show detail view,
sample2 is after show detail view and resized window

yu yen kan

work only on 1st click on detail view, after that it cannot be click anymore to show/hide detail view