Column Moving

The Bootstrap Grid View allows you to move grid columns using drag-and-drop. To move a column, drag the column's header to the desired position. The location in which the dragged column will be inserted after you release the left mouse button is visually indicated by two arrows. The initial column order is specified using the column.VisibleIndex property.

By default, when you move a grid column, the grid initiates a callback to re-render the grid layout accordingly. Setting the SettingsBehavior.ProcessColumnMoveOnClient to true allows the grid to re-render itself completely on the client, without sending a callback to the server.

First Name Last Name Title Birth Date Hire Date
NancyDavolioSales Representative12/8/19785/1/2005
AndrewFullerVice President, Sales2/19/19658/14/1992
JanetLeverlingSales Representative8/30/19854/1/2002
MargaretPeacockSales Representative9/19/19735/3/1993
StevenBuchananSales Manager3/4/195510/17/1993
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID" >
    <SettingsBehavior ProcessColumnMoveOnClient="true" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
        <dx:BootstrapGridViewDataColumn FieldName="LastName" />
        <dx:BootstrapGridViewDataColumn FieldName="Title" />
        <dx:BootstrapGridViewDataColumn FieldName="BirthDate" />
        <dx:BootstrapGridViewDataColumn FieldName="HireDate" />
    </Columns>
</dx:BootstrapGridView>

Column Resizing

The Bootstrap Grid View provides complete control over column availability and individual column size. End-users can easily modify column width by resizing the appropriate column header. To resize the column, hover the right border of the column you wish to resize (so that it displays a double-sided arrow), and drag the column border.

You can access all settings related to column resizing using the SettingsResizing property. The SettingsResizing.ColumnResizeMode property specifies how the Grid View behaves when an end-user resizes a column.

The SettingsResizing.Visualization property defines how the column resizing process is visually indicated. Two modes are available.

  • In the Live mode, grid columns are redrawn dynamically during resizing.
  • In the Postponed mode, grid columns are redrawn only after the operation has been completed.

The minimal column width can be set using the Settings.ColumnMinWidth or column.MinWidth property.

The Grid View can automatically truncate cell values if they don't fit into cell width. To indicate that the text is clipped, the grid displays an ellipsis ('...'). By default, this functionality is disabled, set the SettingsBehavior.AllowEllipsisInText property to true to enable it. Resize grid columns to see this feature in action. Point the mouse cursor over an ellipsis to display a tooltip with the full text.

Contact Name
Company Name
City
Region
Country
Maria AndersAlfreds FutterkisteBerlin Germany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F. Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F. Mexico
Thomas HardyAround the HornLondon UK
Christina BerglundBerglunds snabbköpLuleå Sweden
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <SettingsBehavior AllowEllipsisInText="true" />
    <SettingsResizing ColumnResizeMode="NextColumn" />
    <Settings ColumnMinWidth="50" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Region" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
</dx:BootstrapGridView>

Header Bands

The Bootstrap Grid View ships with a multi-row header feature to help you organize grid columns into logical groups (bands).

A band is visually represented by a header displayed above the headers of the columns it combines. Each band is of a specific column type - BootstrapGridViewBandColumn. Unlike data columns, a band column is not designed to display data values directly, but to contain data (child) columns within its Columns collection. This allows you to create a hierarchy of nested bands and place a data column and a band column at the same hierarchy level.

Bands provide both display and usability benefits. They can be dragged by end-users to reorder columns. This is extremely useful if you need to provide a quick way to rearrange columns while preserving their logical grouping. Note that columns (and bands) are only allowed to move within their parent bands - you cannot move a child column from one parent band to another. This prevents end-users from breaking column grouping logic.

Drag a column header here to group by that column
Sales Person Order
CompanyDate ProductQty
Name Country Region Name Unit Price
Steven BuchananVins et alcools ChevalierFrance 7/4/2014Queso Cabrales$14.0012
Steven BuchananVins et alcools ChevalierFrance 7/4/2014Singaporean Hokkien Fried Mee$10.0010
Steven BuchananVins et alcools ChevalierFrance 7/4/2014Mozzarella di Giovanni$35.005
Michael SuyamaToms SpezialitätenGermany 7/5/2014Tofu$19.009
Michael SuyamaToms SpezialitätenGermany 7/5/2014Manjimup Dried Apples$42.0040
ASPXCopy 
<dx:BootstrapGridView runat="server" AutoGenerateColumns="false" KeyFieldName="OrderID"
    DataSourceID="InvoicesDataSource">
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="Salesperson" Caption="Sales Person" />
        <dx:BootstrapGridViewBandColumn Caption="Order">
            <Columns>
                <dx:BootstrapGridViewBandColumn Caption="Company">
                    <Columns>
                        <dx:BootstrapGridViewTextColumn FieldName="CompanyName" Caption="Name" />
                        <dx:BootstrapGridViewTextColumn FieldName="Country" />
                        <dx:BootstrapGridViewTextColumn FieldName="Region" />
                    </Columns>
                </dx:BootstrapGridViewBandColumn>
                <dx:BootstrapGridViewDateColumn FieldName="OrderDate" Caption="Date" />
                <dx:BootstrapGridViewBandColumn Caption="Product">
                    <Columns>
                        <dx:BootstrapGridViewTextColumn FieldName="ProductName" Caption="Name" />
                        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice">
                            <PropertiesTextEdit DisplayFormatString="c" />
                        </dx:BootstrapGridViewTextColumn>
                    </Columns>
                </dx:BootstrapGridViewBandColumn>
                <dx:BootstrapGridViewTextColumn FieldName="Quantity" Caption="Qty" />
            </Columns>
            <CssClasses HeaderCell="text-center"></CssClasses>
        </dx:BootstrapGridViewBandColumn>
    </Columns>
    <Settings ShowGroupPanel="true" />
    <SettingsPager PageSize="5" NumericButtonCount="6"></SettingsPager>
</dx:BootstrapGridView>

Data Cell Bands

The Bootstrap Grid View provides you with a capability to organize grid columns into logical groups (bands). It allows columns to be arranged in multiple rows, and column headers and cells to occupy more than one row. A collection of a column's child columns can be accessed using the BootstrapGridViewDataColumn.Columns property.

Bands provide both display and usability benefits. Header bands can be dragged by end-users to reorder columns. This is extremely useful if you need to provide a quick way to rearrange columns while preserving their logical grouping. Note that by default, columns (and bands) are only allowed to move within their parent bands, and when a parent band is moved, it is moved along with all its children. This prevents end-users from changing the hierarchy of columns within the grids. To allow end-users to modify the column hierarchy using drag-and-drop, set the SettingsBehavior.ColumnMoveMode to ThroughHierarchy.

PhotoAddress
Features Price
Beds Baths House Size Year Built
652 Avonwick Gate, Toronto, ON M3A25
Dishwasher, Disposal, Separate laundry room, 3/4 bath downstairs, Formal dining room, Downstairs family room, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Granite countertops in kitchen, Hardwood flooring in kitchen, Kitchen island, Solid surface countertops in kitchen, Entry foyer, Front living room, Ceiling fan in master bedroom, Master bedroom separate from other, Mirrored door closet in master bedroom, 2nd bedroom: 11x13, 3rd bedroom: 11x14, 4th Bedroom: 18x13, Alarm system owned, Built-in microwave, Carpet, Ceiling fan(s), Convection oven, Double built-in gas ovens, Gas cooktop, Gas stove, Marble/Stone floors$780,000
4475002008
82649 Topeka St, Riverbank, CA 95360
Dishwasher, Disposal, Separate laundry room, Full bath downstairs, Formal dining room, Downstairs family room, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Granite countertops in kitchen, Kitchen custom cabinets, Kitchen island, Pantry, Walk-in pantry, Entry foyer, Formal living room, Rear living room, Vaulted ceiling in living room, Balcony in master bedroom, Master bedroom separate from other, Master bedroom upstairs, Sitting room in master bedroom, Walk-in closet in master bedroom, 2nd bedroom: 13X20, 3rd bedroom: 13X17, 4th Bedroom: 13X18, 5th Bedroom: 14X16, Alarm system owned, Blinds, Built-in electric oven, Built-in microwave, Carpet, Ceiling fan(s), Gas cooktop, Intercom system, Marble/Stone floors, Water conditioner owned, Water filtering system, Window Coverings Throughout$1,750,000
53125002009
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="HomesDataSource">
    <SettingsBehavior ColumnMoveMode="ThroughHierarchy" />
    <Columns>
        <dx:BootstrapGridViewImageColumn FieldName="PhotoUrl" Caption="Photo">
            <PropertiesImage ImageWidth="220" />
        </dx:BootstrapGridViewImageColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Address">
            <Columns>
                <dx:BootstrapGridViewDataColumn FieldName="Features">
                    <Columns>
                        <dx:BootstrapGridViewDataColumn FieldName="Beds" />
                        <dx:BootstrapGridViewDataColumn FieldName="Baths" />
                        <dx:BootstrapGridViewDataColumn FieldName="HouseSize" />
                        <dx:BootstrapGridViewDataColumn FieldName="YearBuilt">
                            <CssClasses DataCell="text-right" />
                        </dx:BootstrapGridViewDataColumn>
                    </Columns>
                </dx:BootstrapGridViewDataColumn>
                <dx:BootstrapGridViewSpinEditColumn FieldName="Price">
                    <PropertiesSpinEdit DisplayFormatString="c0" />
                    <CssClasses DataCell="font-weight-bold text-center" />
                </dx:BootstrapGridViewSpinEditColumn>
            </Columns>
            <CssClasses DataCell="font-weight-bold" />
        </dx:BootstrapGridViewDataColumn>
    </Columns>
    <SettingsPager PageSize="2" NumericButtonCount="6"></SettingsPager>
    <CssClasses HeaderRow="text-center" />
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code