Only one expanded detail visible at a time

4 posts, 0 answers
  1. Carlos
    Carlos avatar
    27 posts
    Member since:
    Jun 2019

    Posted 09 Nov 2020 Link to this post

    I have been trying to find a way to only show one row detail expanded at a time.  I found some code in Kendo UI for jquery but it does not see to work.  Does anyone have any idea what I am doing wrong?
    var lastContactId;
        function onShowDetail(e) {
            lastContactId = e.sender.dataItem(e.masterRow).ContactId;
     
            // collapse all but current
            var currentRow = e.masterRow;
            var grid = $('#grid_client_contact').data('kendoGrid');
            var masterRows = grid.table.find('tr.k-master-row');
            console.log(masterRows);
            var mappedRows = $.map(masterRows, function (row, rowIndex) {
     
                if ($(row).find("a.k-minus").length > 0 && !$(row).is(currentRow)) {
                    console.log(row);
                    return $(row);
                }
                return null;
            });
            console.log(mappedRows.length);
            for (var i = 0; i < mappedRows.length; i++) {
                grid.collapseRow(mappedRows[i]);
                console.log(i);
            }
        }
  2. Carlos
    Carlos avatar
    27 posts
    Member since:
    Jun 2019

    Posted 09 Nov 2020 in reply to Carlos Link to this post

    Never fails I find an answer after I post.  This may not be the best answer but if works for now.  If anyone has a better solution let me know.
    var lastContactId;
       function onShowDetail(e) {
           lastContactId = e.sender.dataItem(e.masterRow).ContactId;
     
           // collapse all but current
           var currentRow = e.masterRow;
           var grid = $('#grid_client_contact').data('kendoGrid');
           var rows = e.sender.tbody.children();
           for (var j = 0; j < rows.length; j++) {
               var row = $(rows[j]);
               var dataItem = e.sender.dataItem(row);
               var contact = dataItem.get("ContactId")
               if (contact != lastContactId) {
                   grid.collapseRow(row);
               }
           }
       }
  3. Carlos
    Carlos avatar
    27 posts
    Member since:
    Jun 2019

    Posted 09 Nov 2020 in reply to Carlos Link to this post

    Spoke too soon this only works one time.
  4. Carlos
    Carlos avatar
    27 posts
    Member since:
    Jun 2019

    Posted 10 Nov 2020 in reply to Carlos Link to this post

    Found a solution:
    function showOne(e) {
            e.sender.tbody.find('.k-detail-row').each(function (idx, item) {
                if (item !== e.detailRow[0]) {
                    e.sender.collapseRow($(item).prev());
                }
            })
        }
Back to Top