React Form - GroupItem.colCountByScreen
Specifies the relation between the screen size qualifier and the number of columns in the grouped layout.
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;
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.