Configuration

Making Form disabled

Related sample:  Disabled - DHTMLX Form

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
});

Grouping Controls in Form

Related sample:  Blocks - DHTMLX Form

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",
                gravit: false,
                label: "title",
                name: "title",
                value: blockConfig.title,
                labelWidth: "100px",
                labelPosition: "right"
            },
            {
                type: "input",
                gravit: false,
                label: "width",
                name: "width",
                value: blockConfig.width,
                labelWidth: "100px",
                labelPosition: "right"
            },
            {
                // more controls
            }
        ]
    }]
});

Width/Height

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

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

Related sample:  Blocks - DHTMLX Form

Alignment

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

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

var form = new dhx.Form("form_container", {
    css: "dhx_widget--bordered",
    align: "center", // set alignment for rows     rows: [
        {
            align: "start", // set alignment for cols             css: "dhx_layout-cell--bordered",
            cols: [{
                type: "checkbox",
                label: "start",
                name: "align",
                gravity: false,
                labelInline: true,
                value: "start",
                checked: true
            },
            {
                type: "checkbox",
                label: "center",
                gravity: false,
                name: "align",
                labelInline: true,
                value: "center"
            }]
        }
    ]
});

Related sample:  Blocks - DHTMLX Form

The tables below demonstrate using the possible values for the align property in Form:

Basic positional alignment
"start" "center" "end"


Distributed alignment
"between" "around" "evenly"

Padding

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

var form = new dhx.Form("form_container", {
    css: "dhx_widget--bordered",
    padding: "10px",  // padding for rows    rows: [
        {
            padding: "10px",  // padding for cols            css: "dhx_layout-cell--bordered",
            cols: [{
                type: "checkbox",
                label: "start",
                name: "align",
                gravity: false,
                labelInline: true,
                value: "start",
                checked: true
            },
            {
                type: "checkbox",
                label: "center",
                gravity: false,
                name: "align",
                labelInline: true,
                value: "center"
            }]
        }
    ]
});

Related sample:  Blocks - DHTMLX Form

Title

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

var form = new dhx.Form("form_container", {
    css: "dhx_widget--bordered",
    title: "Form",  // title for rows    rows: [
        {
            title: "Controls",  // title for cols            css: "dhx_layout-cell--bordered",
            cols: [{
                type: "checkbox",
                label: "start",
                name: "align",
                gravity: false,
                labelInline: true,
                value: "start",
                checked: true
            },
            {
                type: "checkbox",
                label: "center",
                gravity: false,
                name: "align",
                labelInline: true,
                value: "center"
            }]
        }
    ]
});

Related sample:  Blocks - DHTMLX Form

Back to top