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 { }
Vue
App.vue
<template>
    <DxForm ...>
        <DxGroupItem ...>
            <DxColCountByScreen :xs="2" :sm="3"/>
            <DxSimpleItem .../>
        </DxGroupItem>
    </DxForm>
</template>
<script>
import DxForm, { DxSimpleItem, DxGroupItem, DxColCountByScreen } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxSimpleItem,
        DxGroupItem,
        DxColCountByScreen
    }
}
</script>
React
App.js
import React from 'react';
import Form, { SimpleItem, GroupItem, ColCountByScreen } from 'devextreme-react/form';

const App = () => {
    return (
        <Form ...>
            <GroupItem ...>
                <ColCountByScreen xs={2} sm={3} />
                <SimpleItem />
            </GroupItem>
        </Form>
    );
};

export default App;

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