colCountByScreen
Specifies the relation between the screen size qualifier and the number of columns in the grouped layout.
Type:
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;Feedback