Skip to main content

Configuration

Alignment#

The align property allows you to set aligning direction for all controls in Form.

You can apply various options of alignment for different control groups by specifying the align property for the rows and cols:

var form = new dhx.Form("form", {    css: "dhx_widget--bordered",    height: "200px",    width: "400px",    align: "end", // sets the alignment for rows     padding: "20px",      rows: [        {            type: "text",            name: "text",            value: "Do you agree with our terms and conditions?"        },        {            padding: "10px",              align: "start", // sets the alignment for columns             cols: [{                type: "checkbox",                width: "80px",                label: "I agree",                name: "agree",                id: "agree",                checked: true            },            {                type: "checkbox",                label: "I disagree",                name: "align",            }]        }    ]});

Related Sample: Form. Alignment

Related sample: Form. Blocks

Grouping Controls in Form#

Related sample: Form. Blocks

You can combine controls into groups by placing controls into rows and columns with any level of complexity. To do this, use the rows and cols options in the configuration object of the component:

var form = new dhx.Form("form_container", {    css: "dhx_widget--bordered",    cols: [{ /*!*/        padding: "20px",        rows: [ /*!*/            {                type: "input",                label: "title",                name: "title",                value: blockConfig.title,                labelWidth: "100px",                labelPosition: "right"            },            {                type: "input",                label: "width",                name: "width",                value: blockConfig.width,                labelWidth: "100px",                labelPosition: "right"            },            {                // more controls            }        ]    }]});

Making Form disabled#

Related sample: Form. Disabled

By default, Form is enabled. To make Form disabled, set the disabled configuration property to true:

var form = new dhx.Form("form_container", {    css: "dhx_widget--bordered",    disabled: true});

Making Form hidden#

By default, Form is visible. To make Form hidden, set the hidden configuration property to true:

var form = new dhx.Form("form_container", {    css: "dhx_widget--bordered",    hidden: true});

Padding#

To generate space around a control group, make use of the padding parameter:

var form = new dhx.Form("form", {    css: "dhx_widget--bordered",    padding: "20px",  // sets padding for rows     rows: [        {            type: "text",            name: "text",            value: "Do you agree with our terms and conditions?"        },        {            padding: "10px", // sets padding for cols            cols: [{                type: "checkbox",                width: "80px",                 label: "I agree",                name: "agree",                checked: true            },            {                type: "checkbox",                label: "I disagree",                name: "align",            }]        }    ]});

Title#

You can define a title for a control group with the help of the title property:

var form = new dhx.Form("form", {    css: "dhx_widget--bordered",    padding: "20px",      title: "Form", // sets the title for rows    rows: [        {            padding: "10px",            title: "Checkbox controls of Form", // sets the title for cols            css: "dhx_widget--bordered",            cols: [{                type: "checkbox",                width: "80px",                 label: "I agree",                name: "agree",                checked: true            },            {                type: "checkbox",                label: "I disagree",                name: "align",            }]        }      ]});

Width/Height#

You can adjust sizes of a control group with the corresponding properties height and width:

var form = new dhx.Form("form", {    css: "dhx_widget--bordered",    height: "200px", // sets the common height for rows     width: "400px", // sets the common width for rows    padding: "20px",       rows: [        {            type: "text",            name: "text",            value: "Do you agree with our terms and conditions?"        },        {            padding: "10px",            height: "100px", // sets the common height for cols            width: "200px", // sets the common width for cols            align: "end",            cols: [{                type: "checkbox",                width: "80px",                 label: "I agree",                name: "agree",                id: "agree",                checked: true            },            {                type: "checkbox",                label: "I disagree",                name: "align",            }]        }    ]});