functions not working on responsive mode in child rows

functions not working on responsive mode in child rows

hsoft2020hsoft2020 Posts: 12Questions: 5Answers: 0

Hi. I have table with multiple columns . some cols uses x-editable library for online editing. when table is not in responsive mode , all editable columns works fine but when I use responsive mode , the columns that are in child rows not working. Any classes that are in child rows are not detectable with jquery selectors.
I used "drawCallback" but it just work for multi-page simple columns and does not work in child rows

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    This is about Editor's inline editing not about x-editable. But maybe it gives you some hints on how to get this done.
    https://editor.datatables.net/examples/inline-editing/responsive

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited March 2022

    Any classes that are in child rows are not detectable with jquery selectors.

    That's because they don't exist (yet) when the jquery code is run. You need to use data table events to get the timing right.

    Like this for example:

    table
        .on( 'draw column-visibility responsive-resize', function () {
            ... do something with your jquery selectors 
                because potential child rows will now exist
        })
    

    Example: I have a button to toggle all child rows. The button should only be shown if there are child rows and the data table isn't empty.

    myDataTable
        .on( 'draw column-visibility responsive-resize', function () {
            var that = myDataTable;
            if ( that.responsive.hasHidden() && that.data().count() ) {
                that.button('showHideAllChildRowsButton:name').nodes().removeClass('hidden');
            } else {
                that.button('showHideAllChildRowsButton:name').nodes().addClass('hidden');
            }
        })
    

    Using "responsive.hasHidden()" you can check whether child rows exist and then activate your jquery selectors.

  • hsoft2020hsoft2020 Posts: 12Questions: 5Answers: 0

    Hi.thanks for your reply. I figure it out by something like your way but little simpler.
    I gave the table a class and use that class for selector.
    fore example table has tbl class and hidden column has col class. then
    using this selector:
    $('.tbl').on('focus','.col', function(){
    //mycode
    }
    it works fine

Sign In or Register to comment.