Selected row bg not changed (Bs 3 legacy) and fixedColumns().relayout is not a function

Selected row bg not changed (Bs 3 legacy) and fixedColumns().relayout is not a function

kalman.albert@promax.rokalman.albert@promax.ro Posts: 7Questions: 1Answers: 0

Hello there,

In the first place, a styling error:
In the Bootstrap 3 Legacy version, on the selected row the background is not blue (as usually). Only the text color is changing.

In Datatable 10.x, I used the below code very often.
It is a mix of BS3 with some css flex classes from BS4, but it works.

In DataTable 1.11.5 with fixedColumns 4.0.2, is not working anymore.

Is there a reason? Is relayout retired?

Link to test case:
live.datatables.net/wufajoho/4/edit

Error messages shown:
Uncaught TypeError:
$table.columns.adjust(...).fixedColumns(...).relayout is not a function

Also it is weird (at least for me) that calling

$table.columns.adjust().fixedColumns().fixedColumns().fixedColumns().fixedColumns()

is not a problem

Javascript

$(document).ready( function () {
 
    var $table = $('#example').DataTable( {
      
      "dom": "<'panel panel-info d-flex flex-column flex-fill flex-grow-1 h-100'<'panel-heading p-1 clearfix'<'pull-right dataTables_buttons'B><'dataTables_crud_buttons'>><'panel-body d-flex flex-column flex-fill flex-grow-1 h-100'" +
      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
      "<'row d-flex flex-column flex-fill h-100'<'col-sm-12 d-flex flex-column flex-fill flex-grow-1 h-100'tr>>" +
      "<'row'<'col-sm-5'i><'col-sm-7'p>> >>",
      
        scrollY:        "300px",//resizeDataTableBody(),//
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,

        fixedColumns:   {
            left: 1,
            right: 1
        },
        select: true
    } );
  
    $($table.table().container()).addClass("d-flex flex-column flex-fill flex-grow-1 h-100 border border-red");
  
    var debounce = function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

    
    var resizeDataTableBody = debounce(function() {
        // All the taxing stuff you do
        var $t = $( $table.table().node() );

        var $scrollBody = $t.closest('.dataTables_scrollBody');
        var $scrollHead = $scrollBody.prev('.dataTables_scrollHead');
        var $scrollContainer = $scrollBody.closest('.col-sm-12.d-flex');
        var $bottom = $scrollContainer.closest('.panel-body').find('.row:nth-child(3)');

        var wHeight = $scrollContainer.height();
        var header = $scrollHead.height();
        var bottom = $bottom.height();

        var ret =  Math.max(wHeight - header - bottom, 50);

        $scrollBody.css('max-height',ret);

        console.log('some heights',wHeight, header, bottom,ret );
        //console.log('weird?',$table.columns.adjust().fixedColumns().fixedColumns().fixedColumns().fixedColumns());

        $table.columns.adjust().fixedColumns().relayout();

        return ret;


    }, 500);
  
    $(window).on('resize', resizeDataTableBody);
  
    setTimeout(resizeDataTableBody, 100);
} );

Thank you

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    The FixedColumns extension had a complete rewrite last year to use sticky features. Because of this the relayout() is no longer needed, the code is much smarter than it was before.

    If you are seeing a problem, please let us know, we'd be happy to take a look,

    Colin

  • kalman.albert@promax.rokalman.albert@promax.ro Posts: 7Questions: 1Answers: 0

    Thank You Colin.
    I will.

  • kalman.albert@promax.rokalman.albert@promax.ro Posts: 7Questions: 1Answers: 0
    edited April 2022

    In Bootstrap 3 Legacy version it looks like FixedColumns extension css is messing up select extension css

    Simply enabeling the FixedColumns css link in the header, hides the background of select extension.

    Link to test case:
    http://live.datatables.net/todesuqo/2/edit

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Thanks for the test case, but it looks the FixedColumn extension isn't active there, so it's not demonstrating the issue.

    Colin

  • kalman.albert@promax.rokalman.albert@promax.ro Posts: 7Questions: 1Answers: 0

    Yes Colin, it is not activated and the select background shows itself. If you activate the FixedColumn (like in the first test case where FixedColumn was included with the whole Datatable package), the select background is not showing anymore.
    Please see it for yourself: the activated one here:

    My solution was this:

    /* reset the trouble makers */
    table.dataTable.table-striped tbody tr.odd td {
        background-color: initial;
    }
    table.dataTable tbody tr td {
        background-color: initial;
    }
    /* the fixed css */
    table.dataTable.table-striped tbody tr.odd:not(.selected) td {
        background-color: #f9f9f9;
    }
    table.dataTable tbody tr:not(.selected) td {
        background-color: #fff;
    }
    
    

    Not related with the case but another css problem in BS3 legacy (too small to make another discussion only for this).
    Can't close the modal editor from the close button (that little x) because mouse click is blocked by postition: absolute; from DTE_Header. The solution is use of z-index.

    div.DTE div.DTE_Header{
        z-index:1;
    }
    

    Thank you.

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    The latest nightly builds fix this issue: http://live.datatables.net/todesuqo/5/edit .

    We'll be doing releases of the software soon, as there are a bunch of changes to how the row selection colouring works.

    Allan

  • kalman.albert@promax.rokalman.albert@promax.ro Posts: 7Questions: 1Answers: 0

    Thank you Allan

Sign In or Register to comment.