Configuration

Alignment

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

You can also apply different alignment options to separate control groups. Specify the align property for the rows and cols properties:

const form = new dhx.Form("form_container", {
    css: "dhx_widget--bordered",
    height: "150px",
    width: "400px",
    // sets alignment for rows
    align: "start", // "center", "end", "between", "around", "evenly"
    padding: "20px",   
    rows: [
        {
            padding: "10px", 
            // sets alignment for columns
            align: "start",  // "center", "end", "between", "around", "evenly"
            cols: [
                {
                    name: "radiogroup",
                    type: "radioGroup",
                    label: "Do you agree with our terms and conditions?",
                    value: "agree",
                    options: {
                        cols: [
                            {
                                type: "radioButton",
                                text: "Yes",
                                value: "agree",
                            },
                            {
                                type: "radioButton",
                                text: "No",
                                value: "disagree"
                            },
                        ]
                    },
                },
            ]
        }
    ]
});

Related Sample: Form. Alignment

Related sample: Form. Change Form configuration

Grouping controls in Form

You can combine controls into groups and place them into rows and columns with any level of nesting. Use the rows and cols options in the component configuration object:

const form = new dhx.Form("form_container", {
    css: "dhx_widget--bordered",
    cols: [
        {
            align: "center",
            rows: [
                {
                    title: "Align:",
                    padding: "10px",
                    align: "around",
                    css: "dhx_layout-cell--bordered",
                    rows: [
                        {
                            type: "radioGroup",
                            name: "align",
                            options: {
                                padding: "10px",
                                align: "center",
                                rows: [
                                    {
                                        type: "radioButton",
                                        text: "start",
                                        value: "start",
                                        checked: true,
                                        autoWidth: true,
                                    },
                                    {
                                        type: "radioButton",
                                        text: "center",
                                        value: "center",
                                        autoWidth: true,
                                    },
                                    // more options
                                ],
                            },
                        },
                    ],
                },
                {
                    title: "Direction:",
                    css: "dhx_layout-cell--bordered dhx_layout-cell--no-border_top",
                    padding: "10px",
                    rows: [
                        {
                            type: "radioGroup",
                            name: "dir",
                            options: {
                                padding: "10px",
                                align: "center",
                                cols: [
                                    {
                                        type: "radioButton",
                                        text: "as rows",
                                        value: "rows",
                                        checked: true,
                                        autoWidth: true,
                                    },
                                    {
                                        type: "radioButton",
                                        text: "as cols",
                                        value: "cols",
                                        autoWidth: true,
                                    },
                                ],
                            },
                        },
                    ],
                },
            ],
        }
    ]
});

Related sample: Form. Change Form configuration

Making Form disabled

Related sample: Form. Disabled

The default Form state is enabled. To disable Form, set the disabled configuration property to true:

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

Making Form hidden

The default Form state is visible. To hide Form, set the hidden configuration property to true:

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

Padding

To add space around a control group, use the padding property:

const form = new dhx.Form("form_container", {
    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 title property:

const form = new dhx.Form("form_container", {
    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 the size of a control group with the height and width properties:

const form = new dhx.Form("form_container", {
    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",
            }]
        }
    ]
});