If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import CheckBox, { CheckBoxTypes } from 'devextreme-react/check-box';
import Form from 'devextreme-react/form';
import employee from './data.ts';
const colCountByScreen = {
sm: 2,
md: 4,
};
const App = () => {
const [calculateColCountAutomatically, setCalculateColCountAutomatically] = useState(false);
const onCalculateColCountAutomaticallyChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
setCalculateColCountAutomatically(e.value);
}, [setCalculateColCountAutomatically]);
return (
<div>
<Form
id="form"
formData={employee}
colCountByScreen={calculateColCountAutomatically ? null : colCountByScreen}
labelLocation="top"
minColWidth={233}
colCount="auto"
screenByWidth={screenByWidth}
/>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox
text="Calculate the number of columns automatically"
value={calculateColCountAutomatically}
onValueChanged={onCalculateColCountAutomaticallyChanged}
/>
</div>
</div>
</div>
);
};
function screenByWidth(width: number) {
return width < 720 ? 'sm' : 'md';
}
export default App;
xxxxxxxxxx
import React, { useCallback, useState } from 'react';
import CheckBox from 'devextreme-react/check-box';
import Form from 'devextreme-react/form';
import employee from './data.js';
const colCountByScreen = {
sm: 2,
md: 4,
};
const App = () => {
const [calculateColCountAutomatically, setCalculateColCountAutomatically] = useState(false);
const onCalculateColCountAutomaticallyChanged = useCallback(
(e) => {
setCalculateColCountAutomatically(e.value);
},
[setCalculateColCountAutomatically],
);
return (
<div>
<Form
id="form"
formData={employee}
colCountByScreen={calculateColCountAutomatically ? null : colCountByScreen}
labelLocation="top"
minColWidth={233}
colCount="auto"
screenByWidth={screenByWidth}
/>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<CheckBox
text="Calculate the number of columns automatically"
value={calculateColCountAutomatically}
onValueChanged={onCalculateColCountAutomaticallyChanged}
/>
</div>
</div>
</div>
);
};
function screenByWidth(width) {
return width < 720 ? 'sm' : 'md';
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
export default {
ID: 1,
FirstName: 'John',
LastName: 'Heart',
CompanyName: 'Super Mart of the West',
Position: 'CEO',
OfficeNo: '901',
BirthDate: new Date(1964, 2, 16),
HireDate: new Date(1995, 0, 15),
Address: '351 S Hill St.',
City: 'Los Angeles',
State: 'CA',
Zipcode: '90013',
Phone: '+1(213) 555-9392',
Email: 'jheart@dx-email.com',
Skype: 'jheart_DX_skype',
};
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export default {
ID: 1,
FirstName: 'John',
LastName: 'Heart',
CompanyName: 'Super Mart of the West',
Position: 'CEO',
OfficeNo: '901',
BirthDate: new Date(1964, 2, 16),
HireDate: new Date(1995, 0, 15),
Address: '351 S Hill St.',
City: 'Los Angeles',
State: 'CA',
Zipcode: '90013',
Phone: '+1(213) 555-9392',
Email: 'jheart@dx-email.com',
Skype: 'jheart_DX_skype',
};
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#form {
padding: 10px 10px 110px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
left: 0;
position: absolute;
bottom: 0;
right: 0;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
You can determine the number of columns in the Form in one of the following ways:
Calculate the Number of Columns Automatically
To automatically calculate the number of columns based on the screen width, follow these steps:
-
Assign "auto" to the colCount property to make the number of columns adapt to any screen size.
-
Use the minColWidth property to specify the minimum column width.
In this demo, the number of columns is calculated automatically when the check box under the Form is clear.
Predefine the Number of Columns for Each Screen Size
In this case, screen sizes are classified into one of the following categories called "size qualifiers": extra small, small, medium, or large. You specify the number of columns for each size qualifier. Follow the steps below to configure this behavior:
-
Use the screenByWidth function to map screen widths to size qualifiers. This demo classifies screens narrower than 720 pixels as small and treats all other screens as medium.
-
Specify the colCountByScreen property to define how many columns the Form should contain depending on the available screen qualifiers.
In this demo, mark the check box under the Form to enable this configuration.