displayOrder

Since: Editor 1.5

Field elements have been inserted into the DOM.
Please note - this property requires the Editor extension for DataTables.

Description

This event can be used to determine when Editor has altered the form layout. Whenever Editor displays the fields in a form (in main editing, inline or bubble) it must place the fields to be used in the correct order in the DOM. As part of this process the form is always emptied - removing any existing elements before reattaching them.

The displayOrder event can be used to modify the Editor form, or to insert additional information if you require (tab buttons for example could be used).

The add(), clear() and order() methods can also trigger this event by updating the field list.

As this event may be triggered before the form has been displayed, you will often wish to use it in conjunction with the open event.

Type

`function( e, mode, action, form )`

Parameters:

	Name	Type	Optional
1	`e`	`object`	No
	Event object
2	`mode`	`string`	No
	The form display type. This will be one of: `main` `inline` `bubble` `false` - when the from is not displayed, this value will be given. This can occur when `displayOrder` is triggered before the form has been displayed, which Editor will do.
3	`action`	`string`	No
	The editing action being performed. This will be one of: `create` `edit` `remove`
4	`form`	`Dom`	No
	Since 1.5.4: A `Dom` instance that contains the DOM element that Editor uses to display the form fields. It can be used to manipulate the display of the Editor form fields. This element is always emptied prior to Editor inserting the fields to be displayed and the form fields always inserted in sequential order (i.e. if you want to show additional elements, they should be added every time this event occurs). Please note that prior to Editor 3, this parameter was a `jQuery` instance.

Example

Show a message in the editor:

editor.on('open displayOrder', function (e, mode, action) {
	if (mode === 'main' && action === 'edit') {
		document.querySelector('div.DTE_Body_Content').append('Now editing the form!');
	}
});

The following options are directly related and may also be useful in your application development.

API

Events

open