Responsive Mode

The Grid View control provides support for the responsive layout mode, which forces the Grid View to hide columns that do not fit the current screen resolution. Every grid row displays an ellipsis button if at least one column is hidden. Clicking this button expands an adaptive detail row displaying the hidden data.

Set the SettingsAdaptivity.AdaptivityMode to HideDataCells to enable the responsive mode.

  • SettingsAdaptivity - Provides access to settings defining how the grid reacts to changing the window resolution, allowing you to build responsive or adaptive grid layouts.
  • SettingsAdaptivity.AllowOnlyOneAdaptiveDetailExpanded - Specifies whether only one adaptive detail row can be expanded at a time. When this property is set to true, expanding an adaptive detail row collapses the previously expanded one.
  • GridViewColumn.AdaptivePriority - Defines the column hiding priority when the grid is sized down. The higher the AdaptivePriority property value is, the earlier the column is hidden.

Scroll to the Grid View displayed below and toggle between screen orientations using the corresponding buttons on the right to see the responsive behavior in action.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
ASPXCopy 
<dx:BootstrapGridView runat="server"  DataSourceID="DataSourceResponsiveLayout" KeyFieldName="ProductID" EnableRowsCache="false">
    <SettingsAdaptivity AdaptivityMode="HideDataCells" AllowOnlyOneAdaptiveDetailExpanded="true"></SettingsAdaptivity>
    <Settings ShowFooter="true" />
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsEditing Mode="EditForm"></SettingsEditing>
    <CssClasses Row="grid-nowrap-row" Control="grid-borderless" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" Width="50" AdaptivePriority="1" />
        <dx:BootstrapGridViewTextColumn FieldName="ProductName">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="QuantityPerUnit" AdaptivePriority="1" />
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice" Width="100px">
            <PropertiesSpinEdit DisplayFormatString="c" DisplayFormatInEditMode="true" MinValue="0" MaxValue="60000">
                <ValidationSettings RequiredField-IsRequired="true" />
            </PropertiesSpinEdit>
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitsInStock" Width="110px">
            <PropertiesSpinEdit MinValue="0" MaxValue="10000" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued" Width="100px" AdaptivePriority="2">
            <PropertiesCheckEdit AllowGrayed="true" AllowGrayedByClick="false" />
        </dx:BootstrapGridViewCheckColumn>
    </Columns>
    <TotalSummary>
        <dx:ASPxSummaryItem SummaryType="Count" FieldName="ProductName" />
    </TotalSummary>
    <settingspager PageSize="16" NumericButtonCount="6">
        <PageSizeItemSettings Visible="true" Items="8,16,30,50,100" />
    </settingspager>
</dx:BootstrapGridView>

Adaptive Mode

The adaptive layout mode allows the Grid View to automatically switch to a compact presentation when the screen resolution becomes less than or equal to the specified value. In this presentation, each data entry's fields are displayed within an adaptive detail row.

Set the SettingsAdaptivity.AdaptivityMode to HideDataCellsWindowLimit to enable the adaptive mode:

Scroll to the Grid View displayed below and toggle between screen orientations using the corresponding buttons on the right to see the adaptive behavior in action:

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
ASPXCopy 
<dx:BootstrapGridView runat="server"  DataSourceID="DataSourceAdaptiveLayout" KeyFieldName="ProductID" EnableRowsCache="false">
    <SettingsAdaptivity AdaptivityMode="HideDataCellsWindowLimit" HideDataCellsAtWindowInnerWidth="600" AdaptiveDetailColumnCount="1" />
    <Settings ShowFooter="true" />
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsEditing Mode="EditForm"></SettingsEditing>
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" Width="50" />
        <dx:BootstrapGridViewTextColumn FieldName="ProductName">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="QuantityPerUnit"  />
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice" Width="100px">
            <PropertiesSpinEdit DisplayFormatString="c" DisplayFormatInEditMode="true" MinValue="0" MaxValue="60000">
                <ValidationSettings RequiredField-IsRequired="true" />
            </PropertiesSpinEdit>
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitsInStock" Width="110px">
            <PropertiesSpinEdit MinValue="0" MaxValue="10000" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued" Width="100px" >
            <PropertiesCheckEdit AllowGrayed="true" AllowGrayedByClick="false" />
        </dx:BootstrapGridViewCheckColumn>
    </Columns>
    <TotalSummary>
        <dx:ASPxSummaryItem SummaryType="Count" FieldName="ProductName" />
    </TotalSummary>
    <settingspager PageSize="9" NumericButtonCount="6">
        <PageSizeItemSettings Visible="true" Items="2,9,15,30,50" />
    </settingspager>
</dx:BootstrapGridView>

Adaptive Mode with Form Layout

The adaptive detail row shown in the adaptive layout mode inherits the Form Layout functionality to arrange its items. You can customize the adaptive detail row's layout using the SettingsAdaptivity.AdaptiveDetailLayoutProperties.Items collection property. This collection allows items of the following types:

If the SettingsAdaptivity.AdaptiveDetailLayoutProperties.Items collection is empty, the default layout is generated automatically. Note that if you manually populate this collection, the SettingsAdaptivity.AdaptiveDetailColumnCount property's value is ignored.

Use the BootstrapGridViewColumnLayoutItem.ColumnName property to associate a layout item with a data column.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
ASPXCopy 
<dx:BootstrapGridView runat="server"  DataSourceID="DataSourceAdaptiveLayoutWithFL" KeyFieldName="ProductID" EnableRowsCache="false">
    <SettingsAdaptivity AdaptivityMode="HideDataCellsWindowLimit" HideDataCellsAtWindowInnerWidth="600">
        <AdaptiveDetailLayoutProperties>
            <Items>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="Commands" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="ProductName" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="CategoryID" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="QuantityPerUnit" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="UnitsInStock" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="UnitPrice" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="Discontinued" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
            </Items>
        </AdaptiveDetailLayoutProperties>
    </SettingsAdaptivity>
    <Settings ShowFooter="true" ShowGroupPanel="true" />
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsEditing Mode="EditForm"></SettingsEditing>
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" Width="50" Name="Commands" />
        <dx:BootstrapGridViewTextColumn FieldName="ProductName">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewComboBoxColumn FieldName="CategoryID" Caption="Category Name" GroupIndex="0" >
            <PropertiesComboBox DataSourceID="CategoriesDataSource" ValueType="System.Int32" ValueField="CategoryID" TextField="CategoryName" />
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewTextColumn FieldName="QuantityPerUnit"  />
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice" Width="100px">
            <PropertiesSpinEdit DisplayFormatString="c" DisplayFormatInEditMode="true" MinValue="0" MaxValue="60000">
                <ValidationSettings RequiredField-IsRequired="true" />
            </PropertiesSpinEdit>
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitsInStock" Width="110px">
            <PropertiesSpinEdit MinValue="0" MaxValue="10000" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued" Width="100px" >
            <PropertiesCheckEdit AllowGrayed="true" AllowGrayedByClick="false" />
        </dx:BootstrapGridViewCheckColumn>
    </Columns>
    <TotalSummary>
        <dx:ASPxSummaryItem SummaryType="Count" FieldName="ProductName" />
    </TotalSummary>
    <settingspager PageSize="6" NumericButtonCount="6">
        <PageSizeItemSettings Visible="true" Items="2,6,12,20,50" />
    </settingspager>
</dx:BootstrapGridView>

Adaptive Mode with Adaptive Form Layout

This demo illustrates how to take advantage of the Form Layout functionality to control which data items are displayed within the adaptive detail row and how they adapt to the different screen resolutions.

A layout item provides settings allowing you to define how it is sized using the Bootstrap grid system functionality:

  • ColSpanXl - Specifies how many virtual columns the item should occupy on an extra large screen (1200px or wider).
  • ColSpanLg - Specifies how many virtual columns the item should occupy on a large screen (992px or wider).
  • ColSpanMd - Specifies how many virtual columns the item should occupy on a medium screen (768px or wider).
  • ColSpanSm - Specifies how many virtual columns the item should occupy on a small screen (576px or wider).
  • ColSpanXs - Specifies how many virtual columns the item should occupy on an extra small screen (less than 576px).

Refer to the Form Layout Rendering documentation topic to learn about the Form Layout rendering specifics and how to apply these specifics to construct efficient adaptive layouts.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
ASPXCopy 
<dx:BootstrapGridView runat="server"  DataSourceID="DataSourceAdaptiveLayoutWithFL" KeyFieldName="ProductID" EnableRowsCache="false">
    <SettingsAdaptivity AdaptivityMode="HideDataCellsWindowLimit" HideDataCellsAtWindowInnerWidth="1000">
        <AdaptiveDetailLayoutProperties>
            <Items>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="Commands" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="ProductName" ColSpanSm="6" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="CategoryID" ColSpanSm="6" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="QuantityPerUnit" BeginRow="true" ColSpanSm="6" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="UnitsInStock" ColSpanSm="6" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="UnitPrice" ColSpanSm="6" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="Discontinued" ColSpanSm="6" ColSpanXs="12"></dx:BootstrapGridViewColumnLayoutItem>
            </Items>
        </AdaptiveDetailLayoutProperties>
    </SettingsAdaptivity>
    <Settings ShowFooter="true" ShowGroupPanel="true" />
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsEditing Mode="EditForm"></SettingsEditing>
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" Width="50" Name="Commands" />
        <dx:BootstrapGridViewTextColumn FieldName="ProductName">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewComboBoxColumn FieldName="CategoryID" Caption="Category Name" GroupIndex="0" >
            <PropertiesComboBox DataSourceID="CategoriesDataSource" ValueType="System.Int32" ValueField="CategoryID" TextField="CategoryName" />
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewTextColumn FieldName="QuantityPerUnit"  />
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice" Width="100px">
            <PropertiesSpinEdit DisplayFormatString="c" DisplayFormatInEditMode="true" MinValue="0" MaxValue="60000">
                <ValidationSettings RequiredField-IsRequired="true" />
            </PropertiesSpinEdit>
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitsInStock" Width="110px">
            <PropertiesSpinEdit MinValue="0" MaxValue="10000" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued" Width="100px" >
            <PropertiesCheckEdit AllowGrayed="true" AllowGrayedByClick="false" />
        </dx:BootstrapGridViewCheckColumn>
    </Columns>
    <TotalSummary>
        <dx:ASPxSummaryItem SummaryType="Count" FieldName="ProductName" />
    </TotalSummary>
    <settingspager PageSize="6" NumericButtonCount="6">
        <PageSizeItemSettings Visible="true" Items="2,6,12,20,50" />
    </settingspager>
</dx:BootstrapGridView>

Adaptive Edit Form Layout

The layout of an edit form adaptive mode can be customized using the SettingsEditing.FormLayoutProperties.Items collection property. This collection allows items of the following types:

All these classes expose ColSpanXX properties that allow you to use the Bootstrap grid system functionality to align layout elements based on the display resolution.

If the SettingsEditing.FormLayoutProperties.Items collection is empty, the default layout is generated automatically.

Use the BootstrapGridViewColumnLayoutItem.ColumnName property to associate a layout item with a data column.

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="DataSourceEditingEditForm"
    KeyFieldName="EmployeeID" EnableRowsCache="False" PreviewFieldName="Notes">
    <Settings ShowPreview="true" />
    <SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
    <SettingsBehavior AllowEllipsisInText="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" Width="60px" />
        <dx:BootstrapGridViewTextColumn FieldName="FirstName" />
        <dx:BootstrapGridViewTextColumn FieldName="LastName" />
        <dx:BootstrapGridViewTextColumn FieldName="Title" />
        <dx:BootstrapGridViewDateColumn FieldName="BirthDate" Width="100px" />
        <dx:BootstrapGridViewMemoColumn FieldName="Notes" Visible="false">
            <PropertiesMemoEdit Rows="4"></PropertiesMemoEdit>
        </dx:BootstrapGridViewMemoColumn>
    </Columns>
    <SettingsEditing>
        <FormLayoutProperties>
            <Items>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="FirstName" ColSpanSm="6"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="LastName" ColSpanSm="6"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="Title" ColSpanSm="6"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="BirthDate" ColSpanSm="6"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapGridViewColumnLayoutItem ColumnName="Notes" ColSpanSm="12"></dx:BootstrapGridViewColumnLayoutItem>
                <dx:BootstrapEditModeCommandLayoutItem HorizontalAlign="Right"></dx:BootstrapEditModeCommandLayoutItem>
            </Items>
        </FormLayoutProperties>
    </SettingsEditing>
</dx:BootstrapGridView>

Css Adaptivity

This demo illustrates how you can use the bootstrap classes' functionality to achieve granular control over the adaptive behavior of Grid View's visual elements. The Grid View control displayed below hides its Discontinued and Quantity per Unit columns when orientated vertically, after assigning column elements (data cells, header cells, and footer cells) to the hidden-xs CSS class provided by Bootstrap. Assigning this class specifies that the element should not be displayed when the Grid View is viewed with an extra small display resolution.

Similarly, some elements of the grid pager are assigned to the hidden-xs class to provide a more compact pager presentation on extra small screens.

You can use other responsive utility Bootstrap classes to control the visibility of control elements with different screen sizes: Bootstrap responsive utility classes

Show QRCode
QRCode Please click here to open the demonstration page in the fullscreen mode
ASPXCopy 
<dx:BootstrapGridView runat="server"  DataSourceID="DataSourceCssAdaptivity" KeyFieldName="ProductID" EnableRowsCache="false">
    <Settings ShowFooter="true" />
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsEditing Mode="EditForm"></SettingsEditing>
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" Width="50" />
        <dx:BootstrapGridViewTextColumn FieldName="ProductName">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="QuantityPerUnit" >
            <CssClasses DataCell="d-none d-sm-table-cell icon-column" HeaderCell="d-none d-sm-table-cell" FooterCell="d-none d-sm-table-cell" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice" Width="100px">
            <PropertiesSpinEdit DisplayFormatString="c" DisplayFormatInEditMode="true" MinValue="0" MaxValue="60000">
                <ValidationSettings RequiredField-IsRequired="true" />
            </PropertiesSpinEdit>
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitsInStock" Width="110px">
            <PropertiesSpinEdit MinValue="0" MaxValue="10000" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued" Width="100px">
            <PropertiesCheckEdit AllowGrayed="true" AllowGrayedByClick="false" />
            <CssClasses DataCell="d-none d-sm-table-cell" HeaderCell="d-none d-sm-table-cell" FooterCell="d-none d-sm-table-cell" />
        </dx:BootstrapGridViewCheckColumn>
    </Columns>
    <TotalSummary>
        <dx:ASPxSummaryItem FieldName="ProductName" SummaryType="Count"/>
    </TotalSummary>
    <settingspager PageSize="14" NumericButtonCount="6" >
        <PageSizeItemSettings Visible="true" Items="8,14,30,50,100" />
    </settingspager>
    <CssClassesPager PageNumber="d-none d-sm-block" Ellipsis="d-none d-sm-block" Summary="d-none d-sm-block" />
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code