All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Add an Empty Space

If you need to add an empty space between neighboring items, use an empty item. To create it, assign "empty" to the itemType option. To define how many columns the empty item must span, specify the colSpan option. For the full list of available options, visit the Empty Item section.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        formData: {
            firstName: "John",
            lastName: "Heart",
            position: "CEO"
        },
        colCount: 2,
        items: [{
            itemType: "empty"
        }, "firstName", {
            itemType: "empty",
            colSpan: 2
        }, "lastName", "position"]
    });
});
Angular
HTML
TypeScript
<dx-form
    [(formData)]="employee"
    [colCount]="2">
    <dxi-item itemType="empty"></dxi-item>
    <dxi-item dataField="firstName"></dxi-item>
    <dxi-item itemType="empty" [colSpan]="2"></dxi-item>
    <dxi-item dataField="lastName"></dxi-item>
    <dxi-item dataField="position"></dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = {
        firstName: "John",
        lastName: "Heart",
        position: "CEO"
    }
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})
See Also