Keep only one child row opened at a time

Keep only one child row opened at a time

anurag9179anurag9179 Posts: 6Questions: 2Answers: 0

Facing problem while open multiple child rows in responsive specially in mobile. I tried https://datatables.net/forums/discussion/34367/keep-only-one-child-row-opened-at-a-time but getting "format method undefined error"

Answers

  • colincolin Posts: 9,558Questions: 0Answers: 1,582

    Duplicate of this thread. Please only post once,

    Colin

  • anurag9179anurag9179 Posts: 6Questions: 2Answers: 0

    Hi Colin,

    Sorry and also know that but that solution is out dated and I cant add my comment over existing one.

    anurag

  • colincolin Posts: 9,558Questions: 0Answers: 1,582

    Odd, as you had added a comment. Either way, we'll need a test case as I mentioned in that other thread,

    Colin

  • anurag9179anurag9179 Posts: 6Questions: 2Answers: 0
    edited September 16

    By using below code I am trying to show only one child at a time on details-control button click, but in below code format method is not working.

    $('#example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );
      
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.remove();
                tr.removeClass('shown');
            }
            else {
     
                table.rows().eq(0).each( function ( idx ) {
                var row = table.row( idx );
      
                if ( row.child.isShown() ) {
                     row.child.close();
                }
                } );
     
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
           }
    } );
    
    
  • kthorngrenkthorngren Posts: 10,288Questions: 25Answers: 2,347

    but in below code format method is not working.

    How is it not working?

    Please post a link to your page or a running test case so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • anurag9179anurag9179 Posts: 6Questions: 2Answers: 0

    Hello All,

    Thanks for the reply. I solved this issue by my self and below is the code with jquery data table.


    table = $("#logisticList").DataTable({ "pageLength": 10, "bAutoWidth": false, responsive: true, searching: false, "processing": true, "lengthChange": true, "lengthMenu": [10, 15, 30, 50, 100], "bSortable": true, "order": [], "orderCellsTop": true, "bDestroy": true, "bScrollCollapse": true, "dom": 'lifrtp', "language": { "emptyTable": "No documents found" }, ajax: { url: '@Url.Action("GetResult")' + '?searchText=' + textSearch + '&datefile=' + dateFile + "&applicationId=" + appId + "&isSubCategory=" + flag, dataSrc: 'data', dataType: 'json', type: 'POST' }, "columnDefs": [ { "targets": [0], "visible": false, "bSortable": false }, { "targets": [1], "visible": false, "bSortable": false, //"className": 'dtr-control', }, { "targets": [2], "className": 'actiondropdown dtr-control', "bSortable": false, responsivePriority: 1, }, { "targets": [3], "className": 'dt-body-left', "bSortable": true, responsivePriority: 2 //,"visible": false } , { "targets": [4], "className": 'dt-body-left', "bSortable": true, "visible": true } , { "targets": [5], "bSortable": true, "className": 'dt-body-left', "sType": "date-uk" } , { "targets": [6], "bSortable": true, "className": 'dt-body-left' } ], "columns": [ { "data": "applicationId" }, { "data": "documentId" }, { "data": null, "render": function (d, t, r) { var url = '@Url.Action("downloadFile", "DocumentSearch")' + "?fileId=" + r.documentId + "&fileName=" + r.fileName; if (screen.width <= 414) { return '<div class="btn-group" tabindex="0"><button tabindex="0" class="btn mobile-btn-drp dropdown-toggle" style = "white-space: nowrap;" data-toggle="dropdown" href = "javascript:return false;"> <span class="caret"></span></button>' + '<ul class="dropdown-menu" tabindex="0">' + '<li>' + '<a tabindex="0" onclick="previewFile(' + "'" + r.documentId + "'" + ',' + "'" + r.fileName + "'" + ',' + "'" + r.fileextension + "'" + ');" href="javascript:;">Preview</a>' + '</li>' + '<li>' + '<a tabindex="0" onclick="fileDownload(' + "'" + r.documentId + "'" + ',' + "'" + r.fileName + "'" + ',' + "'" + r.fileextension + "'" + ');" href="javascript:;">Download</a>' + '</li>' + '<li>' + '<a tabindex="0" href="javascript:location.reload()">Related Records</a>' + '</li>' + '</ul></div>'; } else { return '<div class="btn-group" tabindex="0"><button tabindex="0" class="btn btn-drp dropdown-toggle" style = "white-space: nowrap;" data-toggle="dropdown" href = "javascript:return false;"> Action <span class="caret"></span></button>' + '<ul class="dropdown-menu" tabindex="0">' + '<li>' + '<a tabindex="0" onclick="previewFile(' + "'" + r.documentId + "'" + ',' + "'" + r.fileName + "'" + ',' + "'" + r.fileextension + "'" + ');" href="javascript:;">Preview</a>' + '</li>' + '<li>' + '<a tabindex="0" onclick="fileDownload(' + "'" + r.documentId + "'" + ',' + "'" + r.fileName + "'" + ',' + "'" + r.fileextension + "'" + ');" href="javascript:;">Download</a>' + '</li>' + '<li>' + '<a tabindex="0" href="javascript:location.reload()">Related Records</a>' + '</li>' + '</ul></div>'; } } }, { "data": "fileName" ,"render": function (d, t, r) { if (screen.width <= 414) { if (findLongestWord(d) > 25) { return d.substr(0, 25) + '…'; } else { return d; }; } else { return d; } }, }, { "data": "category" }, { "data": "fileDate" }, { "data": "fileSize" }, ] //,"initComplete": function (settings, json) { // if (screen.width <= 414) { // debugger; // //alert('Hello world'); // //$('#logisticList').css("width","412px important!"); // //$('#divResult').css("width", "409px;"); // //var api = new $.fn.dataTable.Api(settings); // //api.columns([1]).visible(true); // var ht = $('.container').innerHeight(); // $('.bg').css("height", (ht+100)+'px'); // } //}, }); $('#logisticList tbody').on('click', 'td.dtr-control', function () { $("tr.child").each(function () { $(this).remove(); }); $("tr.parent").each(function () { $(this).removeClass('parent'); }); });
Sign In or Register to comment.