How do you get responsive editor to work with rowReorder?

How do you get responsive editor to work with rowReorder?

koniahinkoniahin Posts: 186Questions: 39Answers: 7

I noticed that when I enable row reordering with responsive that responsive fails. If you click on the + button it flickers maybe but the hidden columns don't display. I looked at a couple forum posts where this is discussed, yet I am not getting it to work. What I think needs to happen is that I need move either responsive of rowReorder so that they don't occupy the same column. I have tried a couple things:

columnDefs: [
  {
    /* orderable: false, targets: [ 1,2,3 ]  */
    orderable: false, targets: [ ]
  },
  {
    // "targets": [ 6 ],
    // "visible": false,
    "searchable": false
  }
],

Ignoring columnDefs:

rowReorder: {
  dataSrc: 'title',
  editor:  editor
},

Above I attempted to change rowReorder to use the 3rd field (2), title. I also tried the id field dataSrc: 'id'. In both cases it did nothing and the first column is still acting as the order column. Then I tried this:

responsive: {
        details: {
            type: 'column',
            target: 1
        }
    },
    rowReorder: {
        target: 0
    },

This failed with the responsive (+) icon not showing, but rowordering still working. I added a second iteration of response "responsive": true, and that causes the data to not load.What is the right syntax to make this right?

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited June 2019

    The responsive.details.target docs mention adding the class control to the column. Did you try that? There is an example in the docs. I believe this will help your last code snippet example.

    Kevin

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    I looked at the option and tried the two examples as is with no success, then various versions of the syntax mixing with what I have but none of it worked.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Here is an example of rowReorder and Responsive:
    http://live.datatables.net/qinowene/13/edit

    If something like this doesn't work for you make sure you are making the browser small enough to invoke responsive. Without seeing an example of what you are doing its hard to say what the problem might be. Please post a link to your page or a test case (update mine if you want) replicating the issue. This way we can provide suggestions to help.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • rmeetinrmeetin Posts: 97Questions: 23Answers: 1

    JS is not my skillset; I found someone to help. He got it working, partially. When you squeeze the browser and click on the icon it opens up below and displays the would be hidden columns.

    However it loses editing ability including Delete. Text that should be clickable becomes ordinary text.

    Here is the relevant code:

    /* FOR INLINE SAVING CHANGES ************************** */
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
      editor.inline( this, {
        onBlur: 'submit'
      } );
    } );
    

    /* RESPONSIVE, ROWREORDER and SORTABLE COL 1 **** */
    responsive: {
    details: {
    type: 'column',
    target: 1
    }
    },
    columnDefs: [
    { orderable: false, targets: 0 },
    { orderable: false, className: 'control', targets: 1 }
    ],
    rowReorder: {
    dataSrc: 'rowOrder',
    editor: editor
    },
    order: [[ 0, "asc" ]],

    Delete column definition:

      {
       data: null,
       defaultContent: '',
       className: 'select-checkbox',
       orderable: false
      } /* DELETE ROW */
    

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Yes, any bound events on the table cells will not automatically operate in the responsive view since they are not the same elements - they are new DOM elements with the same content.

    They way to address that is to bind another event handler for them:

    $('body').on('click', 'td.child ...', function () {
      var rowIdx = table.row( this ).index();
    
      editor.remove( rowIdx );
    });
    

    Where the ... would of course be the selector for your element.

    Allan

  • rmeetinrmeetin Posts: 97Questions: 23Answers: 1

    I don't know javascript - saying selector means nothing to me. You're talking about the column? They look like:

    columns: [
      { data: 'rowOrder', className: 'reorder' }, /* ROWORDER */
      { data: 'id' }, /* ID */
      { data: 'title' }, /* TITLE */
    

    Where would your code go in relation to the rest of the javascript? Something like:

    /* FOR INLINE SAVING CHANGES ******************************************* */
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
      editor.inline( this, {
        onBlur: 'submit'
      } );
    } );
    /* FOR INLINE SAVING CHANGES ******************************************* */
    

    $('body').on('click', 'td.child id', function () {
    var rowIdx = table.row( this ).index();
    editor.remove( rowIdx );
    });

    var table = $('#example').DataTable( {
    
    dom: 'Bfrtip',
    pageLength: 50,
    info: true,
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    The selector is more of a CSS thing actually :).

    What are you using to activate your edit link at the moment? Presumably that is using a selector to pick out the elements you want to activate a function on click?

    Allan

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    The 'Edit' link? If you mean the Edit link that is in one of the rows, that has nothing to do with the problem. It is a custom link I added so that I could get to an extensive non-datatables editor using ckeditor - and it works just fine.

    The problem is that with the fields that should be editable - and are so in wide/desktop mode - they are not in narrow browser or mobile mode. Not even Delete works. Yes I could click on a row then click on the Edit button and the top to open the datatables editor but that is an extra hop and I want to make this really easy.

    Here is a link to a temporary demo I set up: https://www.koniahin.club/responsive/responsive.php

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    By "Edit link" I'd meant the link in your screenshot above which says "Edit". But from your description here, I guess that isn't the issue.

    The problem is that with the fields that should be editable - and are so in wide/desktop mode - they are not in narrow browser or mobile mode

    You need to remember that the Responsive elements are not the same as shown in the table, so the event listeners on the table cells do not apply. Have a look at this example to see how Responsive works with inline editing.

    Allan

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    Some progress but not 100%. That was a different example from the one I modeled. I was using:

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
      editor.inline( this, {
        onBlur: 'submit'
      } );
    });
    

    And now:

    $('#example').on( 'click', 'tbody td:not(.child), tbody span.dtr-data', function (e) {
        if ( $(this).hasClass( 'control' ) || $(this).hasClass('select-checkbox') ) {
            return;
        }
        editor.inline( this );
    } );
    

    This get inline editing somewhat working. In your example as well as mine it fails with simple input fields with no data and also the calendar in yours. And in mine Quill is difficult because it is so squeezed. If there is no data in an input field it is completely impossible to click to open it. I dabbled with CSS and added the following:

    .ql-container .ql-editor {
    min-width: 200px; /* Quill */
    }

    .DTE_Field_Input {
    min-width: 200px; /* input field */
    }

    You would have to determine your own min-width, but this is now mostly workable.

    In your example with the calendar I could not successfully select a different date. By triple-clicking in the field I could select the date then delete it, however if I did that I could not get the calendar selector back. Maybe setting a min-width would fix that too?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Interesting one. If there is no data, then there is element displayed with the click event listener. You could use:

    span.dtr-data {
        display: inline-block;
        min-width: 100%;
        height: 1em;
    }
    

    I need to improve that - thanks.

    Allan

  • rmeetinrmeetin Posts: 97Questions: 23Answers: 1

    I adapted your CSS but with a few mods. However I found another problem. Although with the browser squeezed the columns to the right displayed and appeared editable they were not saving with:

    $('#example').on( 'click', 'tbody td:not(.child), tbody span.dtr-data', function (e) {
      if ( $(this).hasClass( 'control' ) || $(this).hasClass('select-checkbox') ) {
        return;
      }
      editor.inline( this );
    } );
    

    So I modified it to:

    $('#example').on( 'click', 'tbody td:not(.child), tbody span.dtr-data', function (e) {
      if ( $(this).hasClass( 'control' ) || $(this).hasClass('select-checkbox') ) {
         return;
      }
      editor.inline( this, {
        onBlur: 'submit' // <== the change
      } );
    } );
    

    My last version of CSS:

    .ql-container .ql-editor {
    min-width: 240px;
    }

    @media screen and (max-width: 640px) {
    span.dtr-data {
    display: inline-block;
    min-height: 1.25em;
    min-height: 1.0em;
    border: 1px dashed silver;
    min-width: 100%;
    min-width: 240px;
    margin-left: 2px;
    f/loat: right;
    }
    }

    @media screen and (max-width: 360px) {
    span.dtr-data {
    min-width: 100%;
    margin-left: 0px;
    }
    }

    I added the border as an indicator. It is still awkward. Oddly enough it defeats the purpose but disabling responsive and enabling horizontal scrolling is generally smoother.

This discussion has been closed.