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.

jQuery Form - GroupItem.colCountByScreen

Specifies the relation between the screen size qualifier and the number of columns in the grouped layout.

Type:

Object

Default Value: undefined

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "group",
            items: [ ... ],
            colCountByScreen: {
                xs: 2, 
                sm: 3  
            }
        },
        // ...
        ]
    });
});
Angular
app.component.html
app.module.ts
<dx-form ... >
    <dxi-item itemType="group">
        <dxo-col-count-by-screen 
            [xs]="2"  
            [sm]="3"> 
        </dxo-col-count-by-screen>
        <dxi-item ... ></dxi-item>
    </dxi-item>
</dx-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFormModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFormModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

lg

The count of columns for a large screen size.

Type:

Number

Default Value: undefined

md

The count of columns for a middle-sized screen.

Type:

Number

Default Value: undefined

sm

The count of columns for a small-sized screen.

Type:

Number

Default Value: undefined

xs

The count of columns for an extra small-sized screen.

Type:

Number

Default Value: undefined