"dependent" with an Editor containing field type "datatable" not working

rf1234

This could be similar to this post: https://datatables.net/forums/discussion/comment/207580

I have quite a few Editor field dependencies in an Editor instance that contains a field of type "datatable". The "datatable" field is "vat_qa[].id" by the way but I think that is not important.

I had most of these dependencies coded using Editor "dependent". Unlike "dependent"s usual behavior it didn't trigger on Editor form open. It only got triggered with later changes. It didn't help to trigger the change manually like this:
$( self.field('ctr.VAT_decision').node() ).change();
Hence I changed my approach and got rid of all "dependent"s as shown below.

I have very similar dependencies in a different Editor that doesn't contain field type "datatable". There I have absolutely no problems with "dependent".

I think this is a bug.

ctrPSCEditor
    .on('open', function ( e, mode, action ) {
        tooltipsPopups(this);
        $('.modal-dialog').addClass("modal-xl-static");
        this.field('vat_qa[].id').dt().ajax.reload();
        var self = this;       
        //it is not possible to attach an event handler to a quill field
        //beause it is so deeply embedded in those divs ...
        $( self.field('vat_qa[].id').node() ).change( function() {
            if ( $( self.val('vat_result.vat_result') ).text() <= " " &&
                 $( self.val('vat_result.vat_hint') ).text() <= " "      ) {
                self.set( { 'ctr.VAT_decision': 0, 'ctr.VAT_charged': 0,
                            'ctr.VAT_start_date': '', 'ctr.VAT_rate': 0,
                            'ctr.VAT_mixed_rate': '', 'ctr.VAT_comment': '' } )
                    .hide(['vat_result.vat_result', 'vat_result.vat_hint',
                           'ctr.VAT_decision', 'ctr.VAT_charged',
                           'ctr.VAT_start_date', 'ctr.VAT_rate',
                           'ctr.VAT_mixed_rate', 'ctr.VAT_comment' ]);
            } else {
                self.show(['vat_result.vat_result', 'vat_result.vat_hint',
                           'ctr.VAT_decision', 'ctr.VAT_charged',
                           'ctr.VAT_start_date', 'ctr.VAT_rate',
                           'ctr.VAT_mixed_rate', 'ctr.VAT_comment' ]);
            }
        });
        $( self.field('vat_qa[].id').node() ).change();
    })
    .on('opened', function ( e, mode, action ) { //event handler is somewhat slower
        var self = this;   
        $( [ self.field('vat_result.vat_subcategory_id').node(),
             self.field('vat_qa[].id').node() ] ).change( function() {
            if ( self.field("vat_qa[].id").dt().rows().count() > 0 ) {
                self.field("vat_result.vat_subcategory_id").disable();
            } else {
                self.field("vat_result.vat_subcategory_id").enable();
            }
        });
        $( self.field('vat_result.vat_subcategory_id').node() ).change();
        
        $( self.field('ctr.VAT_decision').node() ).change( function() {
            if (self.val('ctr.VAT_decision') == '1') {
                self.show( ['ctr.VAT_charged', 'ctr.VAT_comment'] );
            } else {
                self.set( { 'ctr.VAT_charged': 0, 'ctr.VAT_start_date': '',
                            'ctr.VAT_rate': 0, 'ctr.VAT_mixed_rate': '', 
                            'ctr.VAT_comment': '' } )
                    .hide( ['ctr.VAT_charged', 'ctr.VAT_start_date', 
                            'ctr.VAT_rate', 'ctr.VAT_mixed_rate', 
                            'ctr.VAT_comment'] );
            }
        });
        $( self.field('ctr.VAT_decision').node() ).change();
        
        $( self.field('ctr.VAT_charged').node() ).change( function() {
            if (self.val('ctr.VAT_charged') == '1') {
                self.show( ['ctr.VAT_start_date', 'ctr.VAT_rate'] );
            } else {
                self.set( { 'ctr.VAT_start_date': '', 'ctr.VAT_rate': 0 } )
                    .hide( ['ctr.VAT_start_date', 'ctr.VAT_rate'] );
            }
        });
        $( self.field('ctr.VAT_charged').node() ).change();
        
        $( self.field('ctr.VAT_rate').node() ).change( function() {
            if (self.val('ctr.VAT_rate') == '3') {
                self.show( ['ctr.VAT_mixed_rate'] );
            } else {
                self.set( { 'ctr.VAT_mixed_rate': '' } )
                    .hide( ['ctr.VAT_mixed_rate'] );
            }
        })
        $( self.field('ctr.VAT_rate').node() ).change();
    })
    .on('close', function() {
        $('.modal-dialog').removeClass("modal-xl-static");
        $( [ this.field('vat_result.vat_subcategory_id').node(),
             this.field('vat_qa[].id').node() ] ).off( 'change' );
        $( this.field('vat_qa[].id').node() ).off( 'change' );
        $( this.field('ctr.VAT_decision').node() ).off( 'change' );
        $( this.field('ctr.VAT_charged').node() ).off( 'change' );
        $( this.field('ctr.VAT_rate').node() ).off( 'change' );
    })

allan

Hi Roland,

To confirm my understanding - the bug is that the dependent() callback isn't happening when the form is displayed?

I'm not actually seeing that issue in this example. If you:

1) Load the example page
2) Pop open the console and enter:

editor.dependent('users.site', function (val) {
  console.log('selected value', val);
  return {};
})

3) Select a row and click edit
4) The console statement will be shown.

This also works on the mjoin example, which is a little more like your own.

Could you link me to a page showing the issue please?

Thanks,
Allan

rf1234

To confirm my understanding - the bug is that the dependent() callback isn't happening when the form is displayed?

Yes, that is the issue.

I see your example working (in my discarded text I forgot to hit "enter" after copying your code into the console. That's why it didn't work...)

Unfortunately I can't give you a link to the page showing the isse because I haven't got one: I discarded everything and replaced it with my work around which is ok for me.

rf1234

Another question in the same context: How do you use "dependent" or "node().change()" with a quill field? I couldn't get it working. So many nested divs in an Editor quill field...