You are viewing page for the pre-release version of DevExtreme. Bear in mind that this document may be changed with the final release.

Vue Form - colCountByScreen

Specifies dependency between the screen factor and the count of columns in the form layout.

Selector: DxColCountByScreen

Type:

Object

Default Value: undefined

The following code sample illustrates how to set this property:

jQuery

JavaScript

$(function() {
    $("#formContainer").dxForm({
        // ...
        colCountByScreen: {
            xs: 2
        }
    });
});

Angular

HTML

TypeScript

<dx-form ... >
    <dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
</dx-form>

import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxForm ...>
        <DxColCountByScreen :xs="2"/>
    </DxForm>
</template>
<script>
import DxForm, { DxColCountByScreen } from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxColCountByScreen
    }
}
</script>

React

App.js

import React from 'react';
import Form, { ColCountByScreen } from 'devextreme-react/form';

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

export default App;

View Demo