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, set the Settings.ShowPreview property to true. Use the PreviewFieldName property to bind the preview row to data.

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.
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="EmployeesDataSource"
    KeyFieldName="EmployeeID" PreviewFieldName="Notes">
    <Settings ShowPreview="True" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
        <dx:BootstrapGridViewDataColumn FieldName="LastName" />
        <dx:BootstrapGridViewDataColumn FieldName="Title" />
        <dx:BootstrapGridViewDataColumn FieldName="BirthDate" />
        <dx:BootstrapGridViewDataColumn FieldName="HireDate" />
    </Columns>
    <SettingsPager PageSize="5"></SettingsPager>
</dx:BootstrapGridView>

Striped

To enhance readability, you can highlight alternating (odd) grid rows with a different style. To do so, set the SettingsBootstrap.Striped property to true. The style used to highlight rows 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
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <SettingsBootstrap Striped="true" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Region" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
    <SettingsPager NumericButtonCount="6"></SettingsPager>
</dx:BootstrapGridView>

Row HotTrack

The hot track feature allows you to highlight a grid row under the cursor with a different style. Set the SettingsBehavior.EnableRowHotTrack property to true 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
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <SettingsBehavior EnableRowHotTrack="true" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Region" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
    <SettingsPager NumericButtonCount="6"></SettingsPager>
</dx:BootstrapGridView>

Cell Merging

The Bootstrap Grid View can automatically merge adjacent cells with the same values. By default the cell merging is disabled. Set the SettingsBehavior.AllowCellMerge property to true to allow the grid merging cells; or control the cell merging availability for a particular column by using the GridViewDataColumnSettings.AllowCellMerge property.

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
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <SettingsBehavior AllowCellMerge="true" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="Country" SortIndex="0" SortOrder="Ascending" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
    </Columns>
    <SettingsPager NumericButtonCount="6"></SettingsPager>
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code