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 columns’ VisibleIndex method.

By default, when you move a grid column, the grid initiates a callback to re-render the grid layout accordingly. Passing true to the ProcessColumnMoveOnClient method (available through SettingsBehavior) 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
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridViewColumnMoving")
    .KeyFieldName("EmployeeID")
    .SettingsBehavior(settings => settings.ProcessColumnMoveOnClient(true))
    .Columns(columns => {
        columns.Add().FieldName("FirstName");
        columns.Add().FieldName("LastName");
        columns.Add().FieldName("Title");
        columns.Add().FieldName("BirthDate");
        columns.Add().FieldName("HireDate");
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("ColumnMoving")))
    .Bind(Model))

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 method. The ColumnResizeMode method (available through SettingsResizing) specifies how the Grid View behaves when an end-user resizes a column.

The Visualization method (available through SettingsResizing) defines how the column resizing process is visually indicated. Two modes are available.

The minimal column width can be set using the ColumnMinWidth method (available through Settings) or the column’s MinWidth method.

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, pass true to the AllowEllipsisInText method (available through SettingsBehavior) 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
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridViewColumnResizing")
    .KeyFieldName("CustomerID")
    .SettingsBehavior(settings => settings.AllowEllipsisInText(true))
    .SettingsResizing(settings => settings.ColumnResizeMode(ColumnResizeMode.NextColumn))
    .Settings(settings => settings.ColumnMinWidth(50))
    .Columns(columns => {
        columns.Add().FieldName("ContactName");
        columns.Add().FieldName("CompanyName");
        columns.Add().FieldName("City");
        columns.Add().FieldName("Region");
        columns.Add().FieldName("Country");
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("ColumnResizing")))
    .Bind(Model))

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 created using the AddBandColumn method. 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
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridViewHeaderBands")
    .KeyFieldName("OrderID")
    .Columns(columns => {
        columns.AddTextColumn().FieldName("Salesperson").Caption("Sales Person");
        columns.AddBandColumn().Caption("Order").Columns(orderColumns => {
            orderColumns.AddBandColumn().Caption("Company").Columns(companyColumns => {
                companyColumns.AddTextColumn().FieldName("CompanyName").Caption("Name");
                companyColumns.AddTextColumn().FieldName("Country");
                companyColumns.AddTextColumn().FieldName("Region");
            });
            orderColumns.AddDateEditColumn().FieldName("OrderDate").Caption("Date");
            orderColumns.AddBandColumn().Caption("Product").Columns(productColumns => {
                productColumns.AddTextColumn().FieldName("ProductName").Caption("Name");
                productColumns.AddTextColumn().FieldName("UnitPrice").PropertiesTextEdit(props => props.DisplayFormatString("c"));
            });
            orderColumns.AddDateEditColumn().FieldName("Quantity").Caption("Qty");
        }).CssClasses(css => css.HeaderCell("text-center"));
    })
    .Settings(settings => settings.ShowGroupPanel(true))
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("HeaderBands")))
    .Bind(Model))

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.

Within a banded layout, any column can serve as a parent to other columns. You can specify a collection of child columns using the Columns method.

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 grid. To allow end-users to modify the column hierarchy using drag-and-drop, call the ColumnMoveMode (available through SettingsBehavior) with the ThroughHierarchy argument.

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
328 S Kerema Ave, Milford, CT 06465
Dishwasher, Disposal, Refrigerator, Separate laundry room, Washer/Dryer on 2nd floor, Full bath downstairs, Formal dining room, Downstairs family room, Separate family room, Wet bar in family room, Breakfast nook (eating area), Garden window in kitchen, Granite countertops in kitchen, Kitchen island, Marble/Stone flooring in kitchen, Pantry, Formal living room, Front living room, Master bedroom separate from other, Master bedroom upstairs, Sitting room in master bedroom, Walk-in closet in master bedroom, 2nd bedroom: 16x12, 3rd bedroom: 13x16, 4th Bedroom: 18x12, Alarm system owned, Built-in microwave, Carpet, Ceiling fan(s), Double built-in electric ovens, Gas cooktop, Marble/Stone floors$350,000
4283562010
5119 Beryl Dr, San Antonio, TX 78212
Dishwasher, Disposal, Refrigerator, Separate laundry room, Full bath downstairs, Living/Dining room combo, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Granite countertops in kitchen, Kitchen custom cabinets, Kitchen island, Recessed lighting in kitchen, Tile flooring in kitchen, Walk-in pantry, Formal living room, Front living room, Ceiling fan in master bedroom, Master bedroom downstairs, Walk-in closet in master bedroom, 2nd bedroom: 15x13, 3rd bedroom: 12x12, 4th Bedroom: 14x12, Alarm system owned, Blinds, Built-in microwave, Carpet, Ceiling fan(s), Central vacuum, Convection oven, Double built-in electric ovens, Electric cooktop, Intercom system, Tile floors$455,000
4279802007
61207 16th St N, Moorhead, MN 56564
Dishwasher, Disposal, Separate laundry room, Washer/Dryer on 1st floor, 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, Formal living room, Rear living room, Sunken living room, Vaulted ceiling in living room, Balcony in master bedroom, Ceiling fan in master bedroom, Master bedroom separate from other, Master bedroom upstairs, Walk-in closet in master bedroom, 2nd bedroom: 16X17, 3rd bedroom: 14X16, 4th Bedroom: 13X13, 5th Bedroom: 12X12, Blinds, Built-in microwave, Carpet, Ceiling fan(s), Central vacuum, Double built-in electric ovens, Gas cooktop, Marble/Stone floors, Pot shelves, Water conditioner owned, Water filtering system, Window Coverings Throughout$1,700,000
54142502010
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridViewDataCellBands")
    .SettingsBehavior(settings => settings.ColumnMoveMode(GridColumnMoveMode.ThroughHierarchy))
    .Columns(columns => {
        columns.AddBinaryImageColumn().FieldName("Photo").PropertiesBinaryImage(props => props.ImageWidth(220));
        columns.Add().FieldName("Address").Columns(addressColumns => {
            addressColumns.Add().FieldName("Features").Columns(featuresColumns => {
                featuresColumns.Add().FieldName("Beds");
                featuresColumns.Add().FieldName("Baths");
                featuresColumns.Add().FieldName("HouseSize");
                featuresColumns.Add().FieldName("YearBuilt").CssClasses(css => css.DataCell("text-right"));
            });
            addressColumns.AddSpinEditColumn().FieldName("Price")
                .PropertiesSpinEdit(props => props.DisplayFormatString("c0"))
                .CssClasses(css => css.DataCell("font-weight-bold text-center"));
        }).CssClasses(css => css.HeaderCell("font-weight-bold"));
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("DataCellBands")))
    .Bind(Model))
Screen Size
Color Themes
Demo QR Code