Responsive Layout

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.

Call the AdaptivityMode method (available through SettingsAdaptivity) with the HideDataCells parameter to enable the responsive mode.

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.

@model IEnumerable<EditableProduct>
@(Html.DevExpress()
    .BootstrapGridView<EditableProduct>("gridResponsiveLayout")
    .SettingsAdaptivity(settings => settings
        .AdaptivityMode(GridViewAdaptivityMode.HideDataCells)
        .AllowOnlyOneAdaptiveDetailExpanded(true))
    .KeyFieldName(m => m.ProductID)
    .Columns(columns => {
        columns
            .AddCommandColumn()
            .ShowEditButton(true)
            .Width(50)
            .AdaptivePriority(1);
        columns.Add(m => m.ProductName);
        columns
            .Add(m => m.QuantityPerUnit)
            .AdaptivePriority(1);
        columns
            .AddSpinEditColumn(m => m.UnitPrice)
            ...
            .Width(50);
        columns
            .AddSpinEditColumn(m => m.UnitsInStock)
            ...
            .Width(110);
        columns
            .AddCheckColumn(m => m.Discontinued)
            .Width(100)
            .AdaptivePriority(2);
    })
    ...
    .Bind(Model))

Adaptive Layout

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.

Call the AdaptivityMode method (available through SettingsAdaptivity) with the HideDataCellsWindowLimit parameter to enable the adaptive layout 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:

@model IEnumerable<EditableProduct>
@(Html.DevExpress()
    .BootstrapGridView<EditableProduct>("gridAdaptiveLayout")
    .SettingsAdaptivity(settings => settings
        .AdaptivityMode(GridViewAdaptivityMode.HideDataCellsWindowLimit)
        .HideDataCellsAtWindowInnerWidth(600)
        .AdaptiveDetailColumnCount(1))
    .KeyFieldName(m => m.ProductID)
    .Columns(columns => {
        columns
            .AddCommandColumn()
            .ShowEditButton(true)
            .Width(50);
        columns.Add(m => m.ProductName);
        columns.Add(m => m.QuantityPerUnit);
        columns
            .AddSpinEditColumn(m => m.UnitPrice)
            ...
            .Width(100);
        columns
            .AddSpinEditColumn(m => m.UnitsInStock)
            ...
            .Width(110);
        columns
            .AddCheckColumn(m => m.Discontinued)
            ...
            .Width(100);
    })
    ...
    .Bind(Model))

Adaptive Layout with FormLayout

The adaptive detail row shown in the adaptive and responsive layout modes inherits the Form Layout functionality to arrange its items. This demo illustrates how to take advantage of this feature to control which data items are displayed within the adaptive detail row and how they adapt to the different screen resolutions.

You can specify layout settings for the adaptive detail row by calling the AdaptiveDetailLayoutProperties method (available through SettingsAdaptivity). The Items method available through AdaptiveDetailLayoutProperties allows you to populate the of layout items to specify which items should be displayed in the adaptive detail row. A layout item provides settings allowing you to associate it with a data item and define how it is sized using the Bootstrap grid system functionality to fit different screen resolutions:

@model AdaptiveLayoutWithFormLayoutModel
@(Html.DevExpress()
    .BootstrapGridView<EditableProduct>("gridAdaptiveLayoutWithFormLayout")
    .SettingsAdaptivity(settings => settings
        .AdaptivityMode(GridViewAdaptivityMode.HideDataCellsWindowLimit)
        .HideDataCellsAtWindowInnerWidth(600)
        .AdaptiveDetailLayoutProperties(p => p
            .Items(i => {
                i.Add()
                    .ColumnName("Commands")
                    .ColSpanSm(12)
                    .ShowCaption(false);
                i.Add(m => m.ProductName)
                    .ColSpanSm(12);
                i.Add(m => m.CategoryID)
                   .ColSpanSm(12);
                i.Add(m => m.QuantityPerUnit)
                   .ColSpanSm(12);
                i.Add(m => m.UnitsInStock)
                   .ColSpanSm(12);
                i.Add(m => m.UnitPrice)
                   .ColSpanSm(12);
                i.Add(m => m.Discontinued)
                   .ColSpanSm(12);
            })))
    .KeyFieldName(m => m.ProductID)
    .Columns(columns => {
        columns
            .AddCommandColumn()
            .ShowEditButton(true)
            .Width(50)
            .Name("Commands");
        columns.Add(m => m.ProductName);
        columns.Add(m => m.QuantityPerUnit);
        ...
    })
    ...
    .Bind(Model.Products))

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 d-none d-md-table-cell CSS classed 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 d-none d-md-block classed to provide a more compact pager presentation on extra small screens.

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

@model IEnumerable<EditableProduct>
@(Html.DevExpress()
    .BootstrapGridView<EditableProduct>("gridCssAdaptivity")
    .KeyFieldName(m => m.ProductID)
    .Columns(columns => {
        columns
            .AddCommandColumn()
            .ShowEditButton(true)
            .Width(50);
        columns.Add(m => m.ProductName);
        columns
            .Add(m => m.QuantityPerUnit)
            .CssClasses(c => c
                .DataCell("icon-column d-none d-md-table-cell")
                .HeaderCell("d-none d-md-table-cell")
                .FooterCell("d-none d-md-table-cell"));
        ...
        columns
            .AddCheckColumn(m => m.Discontinued)
            .Width(100)
            .PropertiesCheckEdit(p => p
                .AllowGrayed(true)
                .AllowGrayedByClick(false))
            .CssClasses(c => c
                .DataCell("d-none d-md-table-cell")
                .HeaderCell("d-none d-md-table-cell")
                .FooterCell("d-none d-md-table-cell"));
    })
    ...
    .CssClassesPager(css => css
        .PageNumber("d-none d-md-block")
        .Ellipsis("d-none d-md-block")
        .Summary("d-none d-md-block"))
    .Bind(Model))
Screen Size
Color Themes
Demo QR Code