static

Show the editing form in a pre-defined location.
Please note - this property requires the Editor extension for DataTables.

Description

The static option is one of the three display controllers that are built into Editor. It is used to have Editor insert the form that Editor generates into any pre-existing element on the page. A selector is used to designate where the form should be inserted. This ability is particularly useful when you are using Editor to drive a single form on a page (i.e. standalone mode).

The static display controller is invoked by calling it as a function, with a single argument (the target element selector) and assigning the result to display - e.g. the following will insert the form (when displayed) into an element with id myForm:

let editor = new DataTable.Editor({
    display: DataTabled.Editor.display.static('#myForm'),
    // ...
});

The target element can contain HTML which will be displayed until the editing form is activated. At that point it will be removed and replaced by the Editor form. Once Editor closes its form (close() or once the editing has finished), the original content will then be restored. This can be used to add instructions for the end user (e.g. "Click a row to edit").

There are no configuration options for the static display controller.

It is worth noting that Editor will treat a string given for display as a selector for this display controller if there isn't a display controller of the name given - i.e. Editor will treat the following as the same as the example shown above:

```js let editor = new DataTable.Editor({ display: '#myForm', // ... });

A running example of the static display controller is available in the Editor examples.

Type

This option can be given in the following type(s):

• object

Examples

let editor = new DataTable.Editor({
	ajax: '/api/data',
	display: '#formDisplay',
	fields: [
		// ...
	]
});

// Immediately trigger editing
editor.edit({
	title: 'My form',
	buttons: 'Save'
});

let editor = new DataTable.Editor({
	ajax: '/api/data',
	display: DataTabled.Editor.display.static('#formDisplay'),
	fields: [
		// ...
	]
});

// Immediately trigger editing
editor.edit({
	title: 'My form',
	buttons: 'Save'
});