Data Column

A Data Column is a type of a grid column that automatically dispatches a cell editor based on the type of a data field, to which a column is bound.

NameStart DateEnd DateDone
PrintingSystem6/19/20047/9/2004
Testing and writing examples6/19/20047/9/2004
Writing CustomPrintingLink6/2/20047/7/2004
Testing   
Writing examples7/9/20047/7/2004 
<dx:BootstrapGridView runat="server" DataSourceID="DataSource0" KeyFieldName="ID">
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="Name" />
        <dx:BootstrapGridViewDataColumn FieldName="StartDate" />
        <dx:BootstrapGridViewDataColumn FieldName="EndDate" />
        <dx:BootstrapGridViewDataColumn FieldName="Done" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

Binary Image Column

A Binary Image Column is a column used to display images from a binary stream. You can access the cell editor's settings using the column's PropertiesBinaryImage property.

First NameLast NameTitlePhoto
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
<dx:BootstrapGridView runat="server" DataSourceID="DataSource12" KeyFieldName="EmployeeID">
    <Columns>
        ...
        <dx:BootstrapGridViewBinaryImageColumn FieldName="Photo" Width="120px">
            <PropertiesBinaryImage ImageHeight="100px"></PropertiesBinaryImage>
        </dx:BootstrapGridViewBinaryImageColumn>
    </Columns>
</dx:BootstrapGridView>

Button Edit Column

A Button Edit Column displays the Button Edit control as its cell editor. You can access the cell editor’s settings using the column’s PropertiesButtonEdit property. For example, the PropertiesButtonEdit.Buttons collection property allows you to specify buttons that should be displayed within the cell editor.

First NameLast NameTitle
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
MargaretPeacockSales Representative
StevenBuchananSales Manager
<dx:BootstrapGridView runat="server" DataSourceID="DataSource2" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapGridViewButtonEditColumn FieldName="FirstName">
            <PropertiesButtonEdit>
                <ClearButton DisplayMode="Always" />
            </PropertiesButtonEdit>
        </dx:BootstrapGridViewButtonEditColumn>
        <dx:BootstrapGridViewButtonEditColumn FieldName="LastName">
            <PropertiesButtonEdit>
                <Buttons>
                    <dx:BootstrapEditButton Text="Button" />
                    <dx:BootstrapEditButton IconCssClass="fa fa-refresh" />
                </Buttons>
            </PropertiesButtonEdit>
        </dx:BootstrapGridViewButtonEditColumn>
        <dx:BootstrapGridViewButtonEditColumn FieldName="Title">
            <PropertiesButtonEdit>
                <Buttons>
                    <dx:BootstrapEditButton IconCssClass="fa fa-download" />
                </Buttons>
            </PropertiesButtonEdit>
        </dx:BootstrapGridViewButtonEditColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

Check Column

A Check Column is a column using a check box to display and edit data from Boolean data fields. You can access the cell editor's settings using the column's PropertiesCheckEdit property.

Product NameDiscontinued
Chai 
Chang 
Aniseed Syrup 
Chef Anton's Cajun Seasoning 
Chef Anton's Gumbo Mix
<dx:BootstrapGridView runat="server" DataSourceID="DataSource3" KeyFieldName="ProductID">
    <Columns>
        ...
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued" />
    </Columns>
</dx:BootstrapGridView>

ComboBox Column

A Combo Box Column is a column whose values are edited using the Combo Box editor. You can access the cell editor’s settings using the column’s PropertiesComboBox property.

Contact NameCountry
Maria AndersGermany
Ana TrujilloMexico
Antonio MorenoMexico
Thomas HardyUK
Christina BerglundSweden
<dx:BootstrapGridView runat="server" DataSourceID="DataSource4" KeyFieldName="CustomerID">
    <Columns>
        ...
        <dx:BootstrapGridViewComboBoxColumn FieldName="Country">
            <PropertiesComboBox TextField="CountryName" ValueField="CountryName" EnableSynchronization="False"
                IncrementalFilteringMode="StartsWith" DataSourceID="CountriesDataSource">
            </PropertiesComboBox>
        </dx:BootstrapGridViewComboBoxColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

DateEdit Column

A Date Edit Column is is a column using the Date Edit control to display and edit data from a DateTime data field. You can access the cell editor's settings using the column's PropertiesDateEdit property.

EmployeeBirth DateHire Date
Nancy Davolio 12/8/19785/1/2005
Andrew Fuller 2/19/19658/14/1992
Janet Leverling 8/30/19854/1/2002
Margaret Peacock 9/19/19735/3/1993
Steven Buchanan 3/4/195510/17/1993
<dx:BootstrapGridView runat="server" DataSourceID="DataSource5" KeyFieldName="EmployeeID">
    <Columns>
        ...
        <dx:BootstrapGridViewDateColumn FieldName="BirthDate">
        </dx:BootstrapGridViewDateColumn>
        <dx:BootstrapGridViewDateColumn FieldName="HireDate">
        </dx:BootstrapGridViewDateColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

A Drop Down Edit Column provides a cell editor containing a customizable drop-down window. You can access the cell editor’s settings using the column’s PropertiesDropDownEdit property. For example, the PropertiesDropDownEdit.DropDownWindowTemplate property allows you to specify a template used to display the editor’s drop-down window content.

Order IDEmployee ID
102485
102496
102504
102513
102524
<dx:BootstrapGridView runat="server" DataSourceID="DataSource6" KeyFieldName="OrderID">
    <Columns>
        ...
        <dx:BootstrapGridViewDropDownEditColumn FieldName="EmployeeID">
            <PropertiesDropDownEdit ClientInstanceName="dropDownEdit">
                <DropDownWindowTemplate>
                    <dx:BootstrapGridView runat="server" ClientInstanceName="employeesGridView"
                        DataSourceID="DataSource6Employees" KeyFieldName="EmployeeID">
                        <ClientSideEvents SelectionChanged="selectionChanged" />
                        <SettingsBehavior AllowSelectByRowClick="true" AllowSelectSingleRowOnly="true" />
                        <Columns>
                            <dx:BootstrapGridViewDataColumn FieldName="LastName" />
                            <dx:BootstrapGridViewDataColumn FieldName="FirstName" />
                            <dx:BootstrapGridViewDataColumn FieldName="Title" />
                        </Columns>
                    </dx:BootstrapGridView>
                </DropDownWindowTemplate>
            </PropertiesDropDownEdit>
        </dx:BootstrapGridViewDropDownEditColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

HyperLink Column

A Hyperlink Column represents a data column with hyperlink functionality. You can access settings of a displayed hyperlink using the PropertiesHyperLinkEdit property.

By default, if no display text is provided for a hyperlink through the corresponding settings (HyperLinkProperties.Text, HyperLinkProperties.TextField), the hyperlink displays the URL obtained from the column's data field. You can disable this behavior by setting the BootstrapGridViewHyperLinkColumn.ShowUrlAsDisplayText property to false.

First NameLast NameEmail
PaulBaileypaulb@westchestercounty.com
BradBarnesbarkk@barnesfamilywebsite.com
JerryCampbelljerryc@campbellfamilywebsite.com
CarlLucascarl@lucasfamilywebsite.com
PeterDolanpeter@dolanfamilywebsite.com
<dx:BootstrapGridView runat="server" DataSourceID="DataSource7" KeyFieldName="ID">
    <Columns>
        ...
        <dx:BootstrapGridViewHyperLinkColumn FieldName="Email">
            <PropertiesHyperLinkEdit NavigateUrlFormatString="mailto:{0}">
            </PropertiesHyperLinkEdit>
        </dx:BootstrapGridViewHyperLinkColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

Image Column

An Image Column is a column used to display images from specified URLs. You can access the cell editor's settings using the column's PropertiesImage property.

First NameLast NameEmailPhoto
AndrewFullerandrew.fuller@devexpress.com
NancyDavolionancy.davolio@devexpress.com
MargaretPeackopmargaret.peackop.devexpress.com
<dx:BootstrapGridView runat="server" DataSourceID="DataSource13" KeyFieldName="ID">
    <Columns>
        ...
        <dx:BootstrapGridViewImageColumn FieldName="Photo" Width="120px">
            <PropertiesImage ImageUrlFormatString="~/images/persons/{0}" ImageHeight="100px" />
        </dx:BootstrapGridViewImageColumn>
    </Columns>
</dx:BootstrapGridView>

Memo Column

A Memo Column is a data column used to display and edit multiline text data. You can access the cell editor's settings using the column's PropertiesMemoEdit property.

Category NameDescription
BeveragesSoft drinks, coffees, teas, beers, and ales
CondimentsSweet and savory sauces, relishes, spreads, and seasonings
ConfectionsDesserts, candies, and sweet breads
Dairy ProductsCheeses
Grains/CerealsBreads, crackers, pasta, and cereal
<dx:BootstrapGridView runat="server" DataSourceID="DataSource8" KeyFieldName="CategoryID">
    <Columns>
        ...
        <dx:BootstrapGridViewMemoColumn FieldName="Description" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

ProgressBar Column

A Progress Bar Column presents numeric data as a progress bar. You can access settings of a displayed progress bar using the column’s PropertiesProgressBar property.

NameComplete
PrintingSystem
23%
Testing and writing examples
0%
Writing CustomPrintingLink
100%
Testing
68%
Writing examples
100%
<dx:BootstrapGridView runat="server" DataSourceID="DataSource9" KeyFieldName="ID">
    <Columns>
        ...
        <dx:BootstrapGridViewProgressBarColumn FieldName="Complete">
            <PropertiesProgressBar Minimum="0" Maximum="1"></PropertiesProgressBar>
        </dx:BootstrapGridViewProgressBarColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

SpinEdit Column

A Spin Edit Column is a column used to display and edit numeric data. The column data is edited using the Spin Edit control. You can access the Spin Edit settings using the column’s PropertiesSpinEdit property. For Example, the PropertiesSpinEdit.SpinButtons.ShowLargeIncrementButtons property allows you to enable large increment spin buttons.

Product NameUnit Price
Chai$18.00
Chang$19.00
Aniseed Syrup$10.00
Chef Anton's Cajun Seasoning$22.00
Chef Anton's Gumbo Mix$21.00
<dx:BootstrapGridView runat="server" DataSourceID="DataSource10" KeyFieldName="ProductID">
    <Columns>
        ...
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice">
            <PropertiesSpinEdit LargeIncrement="1" Increment="0.1" NumberType="Float" NumberFormat="Currency">
                <SpinButtons ShowLargeIncrementButtons="true" />
            </PropertiesSpinEdit>
        </dx:BootstrapGridViewSpinEditColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

Text Column

A Text Column is a data column used to display and edit text. You can access the cell editor's settings using the column's PropertiesTextEdit property.

First NameLast NameTitle
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
MargaretPeacockSales Representative
StevenBuchananSales Manager
<dx:BootstrapGridView runat="server" DataSourceID="DataSource1" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="FirstName" />
        <dx:BootstrapGridViewTextColumn FieldName="LastName" />
        <dx:BootstrapGridViewTextColumn FieldName="Title" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

Command Column

A Command Column is a special column type intended for displaying commands that allow end-users to switch the Grid View to the edit mode, update data, delete rows, etc. A command column allows multiple items to be displayed within a cell. In this demo, the Edit button, the Delete button and the row selection check box are enabled by setting the ShowEditButton, ShowDeleteButton and ShowSelectCheckbox properties to true.

In addition to standard command items, a Command Column can display custom command buttons. The collection of custom command buttons to display is available through the column’s CustomButtons property. Each button within the collection is represented by a BootstrapGridViewCommandColumnCustomButton object.

#First NameLast NameTitle
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
MargaretPeacockSales Representative
StevenBuchananSales Manager
MichaelSuyamaSales Representative
RobertKingSales Representative
LauraCallahanInside Sales Coordinator
AnneDodsworthSales Representative
<dx:BootstrapGridView runat="server" DataSourceID="DemoDataSource11" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" ShowSelectCheckbox="true" ShowDeleteButton="true">
            <CustomButtons>
                <dx:BootstrapGridViewCommandColumnCustomButton IconCssClass="fa fa-refresh" />
                <dx:BootstrapGridViewCommandColumnCustomButton IconCssClass="fa fa-question" />
            </CustomButtons>
        </dx:BootstrapGridViewCommandColumn>
        ...
    </Columns>
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code