Data Cell Bands

• Aug 01, 2019
• 2 minutes to read

Data cell bands allow you to present grid data in a multi-row (banded) layout.

Data Cell Bands Hierarchy

In contrast with header bands, the hierarchy of data cell bands is reflected not only by column headers, but by data rows as well. In a banded layout, each data record is presented by multiple rows organized in a hierarchical manner.

Within a banded layout, any column can serve as a parent to other columns. A parent column stores its child columns in the GridViewColumn.Columns collection property.

To efficiently arrange a column header and data cells in the data cell band layouts (for instance, make the layout more compact), use the GridViewDataColumn.CellRowSpan and GridViewCommandColumn.CellRowSpan properties. They allow you to specify the number of rows that a column (i.e., a column header and data cells containing the column data) spans.

The code sample below demonstrates how a banded layout can be defined at design-time.

ASPX

<dx:ASPxGridView ID="Grid" runat="server" DataSourceID="HomesDataSource" Width="100%">
    <Columns>
        <dx:GridViewDataImageColumn FieldName="PhotoUrl" Caption="Photo" CellRowSpan="3">
            <PropertiesImage ImageWidth="220" />
        </dx:GridViewDataImageColumn>
        <dx:GridViewDataColumn FieldName="Address">
            <Columns>
                <dx:GridViewDataColumn FieldName="Features">
                    <Columns>
                        <dx:GridViewDataColumn FieldName="Beds" />
                        <dx:GridViewDataColumn FieldName="Baths" />
                        <dx:GridViewDataColumn FieldName="HouseSize" />
                        <dx:GridViewDataColumn FieldName="YearBuilt" CellStyle-HorizontalAlign="Right" />
                    </Columns>
                </dx:GridViewDataColumn>
                <dx:GridViewDataSpinEditColumn FieldName="Price">
                    <PropertiesSpinEdit DisplayFormatString="c0" />
                    <CellStyle CssClass="price-cell" />
                </dx:GridViewDataSpinEditColumn>
            </Columns>
            <CellStyle CssClass="address-cell" />
        </dx:GridViewDataColumn>
    </Columns>
    <SettingsPager PageSize="3" />
    <Styles>
        <Header HorizontalAlign="Center" />
    </Styles>
</dx:ASPxGridView>

End-User Manipulations

End-users can reorder grid columns by moving their headers using drag-and-drop (see the Column Moving topic). You can define how end-users can rearrange grid columns by setting the ASPxGridViewBehaviorSettings.ColumnMoveMode property to one of the following values:

• GridColumnMoveMode.AmongSiblings (set by default). This mode allows end-users to move columns and bands only within their parent bands, and when a parent band is moved, it is moved along with all its children.
• GridColumnMoveMode.ThroughHierarchy. This mode allows end-users to move columns and bands between parents and hierarchy levels to create a custom banded layout.

Each column move operation updates the GridViewColumn.Columns collection of the affected columns in both modes.

Data Cell Bands Limitations

The ASPxGridView layout incorporated data cell bands imposes certain limitations on the features that are described in the list below:

• Responsive layout mode is not supported.
• Setting the ASPxGridViewSettings.GridLines property is not in effect. Both grid lines (vertical and horizontal) are always displayed.