Wednesday 13 December 2023

Datatable Client Side Open & Close Events

 Editor will emit custom DOM events when it performs particular operations, providing the ability to listen for these events and take action on them when they occur, for example starting or completing an edit for a particular row.

open

This event is triggered when the form has been instructed to be displayed for end user input. This is triggered by a call to the open(), bubble() or inline() methods (note that open() can be called automatically by create(), edit() and remove()).
This event is triggered after the display controller is instructed to display the form. As such, the form will typically be available in the document (for addition of events, etc, if required) - it is for the two built in display controllers, although it will still be animating into place.

below is an example. If we want to initialise a field with date picker upon opening the form, we can do that on open event.

  editor.on("open",function(e){

        var cal_settings = {
            enableTime: false,
            dateFormat: js_date_pattern,
            time_24hr:false,
        };

         $(editor.field("field.name")
                        .input()
                    ).flatpickr(cal_settings);
    });

preopen

Before a form is displayed, this event is fired. It allows the open action to be cancelled by returning false from the function.

This event is cancellable by returning false from the event handler, which will block any further action from happening (i.e. actually displaying the form), leaving the form in its existing state.

editor.on("

preOpen

preOpen",function(e){
  alert("Form Pre Opened..");
});


close

This event is triggered when the form has been instructed to close by a call to the close() method (which can occur internally on form submission, background click, close button click, etc, as well as an external call).

Note that the close event is triggered immediately upon the call to close(). As such, if the display controller uses animation to hide the form display (as both of the built in display controllers do) the form DOM elements will still be in the document until the animation is complete - i.e. they will still be present when this method is called. This can be useful for unbinding events that might have been used in the opened form. The display() method should be used to determine whether or not the Editor form is visible or not at any given time.

  editor.on("close",function(e){
  alert("Form Closed..");
});

preClose

Before a form is closed, this event is fired. It allows the close action to be cancelled by returning false from the function. This can be useful for confirming that the user actually wants to close the display (if they have unsaved changes for example).

This event is cancellable by returning false from the event handler, which will block any further action from happening, leaving the form in its existing state.

editor.on("preClose",function(e){
  alert("Form Closed..");
});

closed

This event is triggered when the form has finished closing, taking into account any animation - for example display of a modal for the main form. It can be used to tidy up the document or remove event handlers that were added to the rest of the document.

editor.on("closed",function(e){
  alert("Form Closed Completely..");
});

opened

This event is triggered when the form has finished opening (displaying), taking into account any animation - for example display of a modal for the main form. It can be used to add event handlers or perform any calculations required once the form has fully displayed.

editor.on("opened",function(e){
  alert("Form Opened Completely..");
});

No comments:

Post a Comment