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:

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 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:

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

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

const 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:

const 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:

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 help of 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 sizes of a control group with the corresponding properties height and width:

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",
}]
}
]
});