editor.hide() hide ALL fields WITHOUT animation

blabablaba

Hi Allan,

Is there a way to use editor.hide() shorthand AND disable animation?

editor.hide() will hide ALL fields from a form
editor.show([fieldNames]) will show the required fields

editor.hide() triggers an animation by default. This is undesirable.

From the documentation, animation can be disabled by declaring a second parameter true|false. I am unclear on how to disable animation while hiding ALL fields WITHOUT declaring every field by name.

https://editor.datatables.net/reference/api/hide()
https://editor.datatables.net/reference/api/show()

These are my attempts and results:

Removes all fields, but animation is undesired:

        editor.hide()
        editor.show(['redirectUrl'])
        editor.create()

This works as desired, but it seems onerous just to access animation true|false

        editor.hide(['url','title','meta','httpCode_ID'],false)
        editor.show(['redirectUrl'])
        editor.create()

Doesn't work as field list won't accept null

        editor.hide(null,false)
        editor.show(['redirectUrl'])
        editor.create()

Doesn't work as an empty array results in no fields hidden:

        editor.hide([],false)
        editor.show(['redirectUrl'])
        editor.create()

I look forward to hearing from you.

Steve

Documentation update:

https://editor.datatables.net/reference/api/field().show()

Under Heading "Type", the heading is:

function field(…).hide( [ animate ] )

Shouldn't this be:

function field(…).show( [ animate ] )

I hope this helps.

colin

Hi @blabablaba ,

One option is to disable the animation at the jQuery level with $.fx.off = true;, something like this here.

Would that work?

Thanks for the doc updates - I made those changes and that will be pushed when the website is next updated.

Cheers,

Colin

colin

Ah, better still, just pass in undefined, see here.

blabablaba

Thanks @Colin! I had used 'undefined' instead of undefined. It works!

In the code below, I'm using a Select2 to edit onChange.

editor.submit() works well for this purpose.

However, there are 2 options in the Select2 (301 and 307) which require a new editor form to open. The code below opens a new form.

With the form open, a button submits ALL rows to the server, as opposed to a single row. I think I need to (somehow) pass the tr node into editor.edit()

I'm having difficulty getting editor.edit() within the onChange function below to identify and submit ONLY the current row to the server. Any ideas?

editor.field( 'httpCode_ID' ).input().on( 'change', function (e,d) {

    if ( !d || !d.editor ) {
      var httpCode_ID = editor.field( 'httpCode_ID' ).val()
      if(httpCode_ID == '301' || httpCode_ID == '307') {
        editor.hide(undefined,false)
        editor.show(['redirectUrl'])
        editor.edit(  )  // <--------------- SUBMITS EVERY ROW??
            .title( 'Set up redirect' )
            .buttons( 'Update redirect' )
            .open()        
      } else 
        editor.submit()  // <------------ SUBMITS CURRENT ROW ON CHANGE
    }
} )

allan

Sorry - you can't do that with Editor as such. You'd need a second Editor instance for your inner edit. A single instance of Editor can only perform one CRUD action at a time.

editor.edit( ) // <--------------- SUBMITS EVERY ROW??

Yes, because you haven't given edit() a row selector.

Allan

blabablaba

Hi Allan,

Thank you for your reply. I think my code is doing a single CRUD action; It is EITHER editor.submit() row on change (if not 301,307) OR editor.edit(DT_RowID) to open a form

I had tried to obtain the row selector using:

editor.edit( table.row( $(this).parents('tr') ).data().DT_Row_ID )

However, the above is undefined.

Do you know how I might access the row ID from inside edit() ? Or am I breaking the rules and must use a second editor instance?

I really appreciate some clarification. Many thanks

blabablaba

Hi Allan and Colin,

I solved the problem (after a night sleep!)

To access the DT_RowID from within Editor, I needed to use editor.modifier() and then navigate to the parent tr. It's been a good journey finding it out.

The following forum post helped me:

https://datatables.net/forums/discussion/30037/get-row-id-on-edit

I note a comment from Allan "Edit - Having a method in Editor to get the ids of the rows being edited sounds sensible, I'll look into that"

In light of Allan's comment, is my chosen approach the best way?

My solution (in case it helps others) is here:

editor.field( 'httpCode_ID' ).input().on( 'change', function (e,d) {
    if ( !d || !d.editor ) {
      var modifier = editor.modifier()
      var rowSel = table.row( $(modifier).parents('tr') )
      var httpCode_ID = editor.field( 'httpCode_ID' ).val()
      editor.hide(undefined,false)
      editor.show(['redirectUrl'])
      editor.edit( rowSel )
          .title( 'form title' )
          .buttons( 'update' )
          .open()
    }
} )

colin

Hi @blabablaba ,

I think he was referring to ids() , but your way is as good as any. Glad all sorted,

Cheers,

Colin