Preview Row

Preview rows are non-editable regions that allow large memo fields or custom data to be displayed across all columns in the Grid View. To enable the preview row, call the ShowPreview method (available through the column's Settings method) with the true argument. Use the PreviewFieldName method to bind the preview row to data.

The PreviewTemplate method (available through Templates) allows you to specify a template used for rendering preview rows.

First Name Last Name Title Birth Date Hire Date
NancyDavolioSales Representative12/8/19785/1/2005
Nancy received a BA degree in psychology from Colorado State University in 2000. She also completed "The Art of the Cold Call" course. She is a member of Toastmasters International.
AndrewFullerVice President, Sales2/19/19658/14/1992
Andrew received his BTS commercial in 1987 and a Ph.D. in international marketing at the University of Dallas in 1994. He speaks French and Italian fluently, and reads German. He joined the company as a sales representative. After that, he was promoted to sales manager in January 2005 and vice president of sales in March 2006. Andrew is a member of the Sales Management Round table, Seattle Chamber of Commerce, and Pacific Rim Importers Association.
JanetLeverlingSales Representative8/30/19854/1/2002
Janet received a BS degree in chemistry at Boston College in 2006. She also completed a certificate program in food retailing management. Janet was hired as a sales associate in 2013 and promoted to sales representative in February 2014.
MargaretPeacockSales Representative9/19/19735/3/1993
Margaret received a BA degree in English literature at Concordia College (1994) and an MA at the American Institute of Culinary Arts (2002). She was temporarily assigned to the London office from July until November 2008.
StevenBuchananSales Manager3/4/195510/17/1993
Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 1993. Mr. Buchanan completed the courses: "Successful Telemarketing" and "International Sales Management." He is fluent in French.
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridViewPreviewRow")
    .KeyFieldName("EmployeeID")
    .PreviewFieldName("Notes")
    .Settings(settings => settings.ShowPreview(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("PreviewRow")))
    .Bind(Model))

Striped

To enhance readability, you can highlight alternating (odd) grid rows with a different style. To do so, call the Striped method (available through SettingsBootstrap) with the true argument. The desired style depends on a selected bootstrap theme.

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
Hanna MoosBlauer See DelikatessenMannheim Germany
Frédérique CiteauxBlondesddsl père et filsStrasbourg France
Martín SommerBólido Comidas preparadasMadrid Spain
Laurence LebihanBon app'Marseille France
Elizabeth LincolnBottom-Dollar MarketsTsawassenBCCanada
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridViewStriped")
    .KeyFieldName("CustomerID")
    .SettingsBootstrap(settings => settings.Striped(true))
    .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("Striped")))
    .Bind(Model))

Row HotTrack

The hot track feature allows you to highlight a grid row under the cursor with a different style. Call the EnableRowHotTrack method (available through SettingsBehavior) with the true argument to enable this feature. The style used to highlight a row depends on the used bootstrap theme.

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
Hanna MoosBlauer See DelikatessenMannheim Germany
Frédérique CiteauxBlondesddsl père et filsStrasbourg France
Martín SommerBólido Comidas preparadasMadrid Spain
Laurence LebihanBon app'Marseille France
Elizabeth LincolnBottom-Dollar MarketsTsawassenBCCanada
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridViewRowHotTrack")
    .KeyFieldName("CustomerID")
    .SettingsBehavior(settings => settings.EnableRowHotTrack(true))
    .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("RowHotTrack")))
    .Bind(Model))

Cell Merging

The Bootstrap Grid View can automatically merge adjacent cells with the same values. By default the cell merging is disabled. Pass true to the AllowCellMerge method (available through SettingsBehavior) to allow the grid merging cells; or control the cell merging availability for a particular column by using the columns AllowCellMerge method.

Country
City Contact Name Company Name
ArgentinaBuenos AiresPatricio SimpsonCactus Comidas para llevar
Yvonne MoncadaOcéano Atlántico Ltda.
Sergio GutiérrezRancho grande
AustriaGrazRoland MendelErnst Handel
SalzburgGeorg PippsPiccolo und mehr
BelgiumBruxellesCatherine DeweyMaison Dewey
CharleroiPascale CartrainSuprêmes délices
BrazilSao PauloPedro AfonsoComércio Mineiro
Aria CruzFamilia Arquibaldo
CampinasAndré FonsecaGourmet Lanchonetes
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("gridViewCellMerging")
    .KeyFieldName("CustomerID")
    .SettingsBehavior(settings => settings.AllowCellMerge(true))
    .Columns(columns => {
        columns.Add().FieldName("Country").SortIndex(0).SortOrder(ColumnSortOrder.Ascending);
        columns.Add().FieldName("City");
        columns.Add().FieldName("ContactName");
        columns.Add().FieldName("CompanyName");
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("CellMerging")))
    .Bind(Model))
Screen Size
Color Themes
Demo QR Code