template

Form layout template.
Please note - this property requires the Editor extension for DataTables.

Description

Editor's default form layout is a simple linear layout for the fields that have been defined. While this works well for simple forms, for more complex forms you may wish to present the form with a custom layout, grouping similar fields and making full use of the space available.

This option can be provided to tell Editor how the form should be laid out, referencing an HTML element that contains the structure you wish for your form. CSS would then typically be used to style the form as required. With this method, any form layout can be easily achieved with Editor.

To give Editor a template, you must give the template initialisation option a element that has the template inside it, or a CSS selector to that element. The element can be:

• template (since 3.0) - the template element is ideal for this use case as the browser will not display the template, so you won't see a flash of unstyled content as the page is initialised. The contents of the template are cloned and used as the template for the form.
• Any other element (typically a div will be used though). This element will be detached from the DOM when Editor is initialised, and then used as the form template (i.e. it is not cloned, the original element is used).

To tell Editor where to insert the fields when the form is drawn, a HTML5 custom tag <editor-field> should be used with a name attribute that defines the field to be shown at that point.

For example, consider the following HTML:

<template id="usersForm">
    <div>
        <fieldset class="name">
            <legend>Name</legend>

            <editor-field name="first_name"></editor-field>
            <editor-field name="last_name"></editor-field>
        </fieldset>
        <fieldset class="office">
            <legend>Office</legend>

            <editor-field name="office"></editor-field>
            <editor-field name="extn"></editor-field>
        </fieldset>
        <fieldset class="hr">
            <legend>HR info</legend>

            <editor-field name="position"></editor-field>
            <editor-field name="salary"></editor-field>
            <editor-field name="start_date"></editor-field>
        </fieldset>
    </div>
</template>

An example of a template in use can be found here.

Alternatively, rather than using the custom HTML tag, you can use the data-editor-template attribute on an empty element. The target field from the attribute value will be inserted into that element. The following example shows the same as above, but with the attribute method instead:

<template id="customForm">
    <div class="customForm">
        <fieldset class="name">
            <legend>Name</legend>

            <div data-editor-template="first_name"/>
            <div data-editor-template="last_name"/>
        </fieldset>
        <fieldset class="office">
            <legend>Office</legend>

            <div data-editor-template="office"/>
            <div data-editor-template="extn"/>
        </fieldset>
        <fieldset class="hr">
            <legend>HR info</legend>

            <div data-editor-template="position"/>
            <div data-editor-template="salary"/>
            <div data-editor-template="start_date"/>
        </fieldset>
    </div>
</template>

Further information is also available in Editor's online manual.

Type

string|node

Example

var editor = new DataTable.Editor({
	ajax: '/api/users',
	table: '#users',
	template: '#usersForm',
	fields: [
		{
			label: 'First name:',
			name: 'first_name'
		},
		{
			label: 'Last name:',
			name: 'last_name'
		},
		{
			label: 'Position:',
			name: 'position'
		},
		{
			label: 'Office:',
			name: 'office'
		},
		{
			label: 'Extension:',
			name: 'extn'
		},
		{
			label: 'Start date:',
			name: 'start_date',
			type: 'datetime'
		},
		{
			label: 'Salary:',
			name: 'salary'
		}
	]
});

Related

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