Data Column

A BootstrapGridViewDataColumn is a type of a grid column that automatically determines the actual column type (and, consequently, the control used for both displaying and editing cell data) based on the type of a data field to which a column is bound:

  • A DateEdit column is created for the DateTime data type
  • A CheckBox column is created for the Bool data type
  • A Text column is created for any other data type
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 ID="GridViewDataColumn" runat="server" DataSourceID="TasksDataSource" 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 BootstrapGridViewBinaryImageColumn column used to display images for columns that contain binary data. You can access the Binary Image settings using a column's PropertiesBinaryImage property.

Editing settings of the BinaryImage control are available via the PropertiesBinaryImage.EditingSettings property.

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

Button Edit Column

A BootstrapGridViewButtonEditColumn column displays the Button Edit control as its cell editor. You can access the cell editor’s settings using the column’s PropertiesButtonEdit property.

First NameLast NameTitle
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
MargaretPeacockSales Representative
StevenBuchananSales Manager
<dx:BootstrapGridView ID="GridViewButtonEditColumn" runat="server" DataSourceID="EmployeesDataSource" 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 BootstrapGridViewCheckColumn 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 ID="GridViewCheckColumn" runat="server" DataSourceID="ProductsDataSource" KeyFieldName="ProductID">
    <Columns>
        ...
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued" />
    </Columns>
</dx:BootstrapGridView>

ComboBox Column

A BootstrapGridViewComboBoxColumn 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.

Also, see the Editing-CascadingComboBoxes demo, which demonstrates how to link two ComboBox columns and populate items of the first column based on the selected value from the second column.

Contact NameCountry
Maria AndersGermany
Ana TrujilloMexico
Antonio MorenoMexico
Thomas HardyUK
Christina BerglundSweden
<dx:BootstrapGridView ID="GridViewComboBoxColumn" runat="server" DataSourceID="CustomersDataSource" 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 BootstrapGridViewDateColumn 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="EmployeesDataSource" KeyFieldName="EmployeeID">
    <Columns>
        ...
        <dx:BootstrapGridViewDateColumn FieldName="BirthDate">
        </dx:BootstrapGridViewDateColumn>
        <dx:BootstrapGridViewDateColumn FieldName="HireDate">
        </dx:BootstrapGridViewDateColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

A BootstrapGridViewDropDownEditColumn 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.

Order IDEmployee ID
102485
102496
102504
102513
102524
<dx:BootstrapGridView ID="GridViewDropDownEditColumn" runat="server" DataSourceID="OrdersDataSource" KeyFieldName="OrderID">
    <Columns>
        ...
        <dx:BootstrapGridViewDropDownEditColumn FieldName="EmployeeID">
            <PropertiesDropDownEdit ClientInstanceName="dropDownEdit">
                <DropDownWindowTemplate>
                    <dx:BootstrapGridView runat="server" ClientInstanceName="employeesGridView"
                        DataSourceID="EmployeesDataSource" 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 BootstrapGridViewHyperLinkColumn 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 ID="GridViewHyperLinkColumn" runat="server" DataSourceID="UsersDataSource" KeyFieldName="ID">
    <Columns>
        ...
        <dx:BootstrapGridViewHyperLinkColumn FieldName="Email">
            <PropertiesHyperLinkEdit NavigateUrlFormatString="mailto:{0}">
            </PropertiesHyperLinkEdit>
        </dx:BootstrapGridViewHyperLinkColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

Image Column

A BootstrapGridViewImageColumn 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
MargaretPeackopmargaret.peackop.devexpress.com
NancyDavolionancy.davolio@devexpress.com
<dx:BootstrapGridView ID="GridViewImageColumn" runat="server" DataSourceID="PersonsDataSource" KeyFieldName="ID">
    <Columns>
        ...
        <dx:BootstrapGridViewImageColumn FieldName="Photo" Width="120px">
            <PropertiesImage ImageUrlFormatString="~/images/persons/{0}" ImageHeight="100px" />
        </dx:BootstrapGridViewImageColumn>
    </Columns>
</dx:BootstrapGridView>

Memo Column

A BootstrapGridViewMemoColumn 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 ID="GridViewMemoColumn" runat="server" DataSourceID="CategoriesDataSource" KeyFieldName="CategoryID">
    <Columns>
        ...
        <dx:BootstrapGridViewMemoColumn FieldName="Description" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

ProgressBar Column

A BootstrapGridViewProgressBarColumn 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 ID="GridViewProgressBarColumn" runat="server" DataSourceID="TasksDataSource" KeyFieldName="ID">
    <Columns>
        ...
        <dx:BootstrapGridViewProgressBarColumn FieldName="Complete">
            <PropertiesProgressBar Minimum="0" Maximum="1"></PropertiesProgressBar>
        </dx:BootstrapGridViewProgressBarColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

SpinEdit Column

A BootstrapGridViewSpinEditColumn 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.

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 ID="GridViewSpinEditColumn" runat="server" DataSourceID="ProductsDataSource" 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>

Tag Box Column

A BootstrapGridViewTagBoxColumn is a column used to display and edit values with the Tag Box editor. You can access the cell editor’s settings using the column’s PropertiesTagBox property.

Full NameRoles
Andrew FullerAdministrator, Marketing Manager
Anne DodsworthHR Manager
Janet LeverlingProduct Manager, Technical Evangelist, Technical Writer
Laura CallahanTechnical Writer
Margaret PeacockDeveloper, Technical Evangelist
Michael SuyamaTeam Leader, Sales Manager
Nancy DavolioMarketing Manager, Product Manager
Robert KingSupport Engineer, Sales Manager
Steven BuchananProduct Manager
<dx:BootstrapGridView ID="GridViewTagBoxColumn" runat="server" DataSourceID="CompanyEmployeesDataSource" KeyFieldName="ID">
    <Columns>
        ...
        <dx:BootstrapGridViewTagBoxColumn FieldName="Roles">
            <PropertiesTagBox TextField="Name" ValueField="ID" DataSourceID="CompanyEmployeeRolesDataSource" />
        </dx:BootstrapGridViewTagBoxColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

Text Column

A BootstrapGridViewTextColumn 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 ID="GridViewTextColumn" runat="server" DataSourceID="EmployeesDataSource" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="FirstName" />
        <dx:BootstrapGridViewTextColumn FieldName="LastName" />
        <dx:BootstrapGridViewTextColumn FieldName="Title" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

TimeEdit Column

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

NamePlanned DateStart TimeEnd Time
Sprint Planning11/27/20172:00 PM4:00 PM
Daily Standup11/28/20179:15 AM9:30 AM
Daily Standup11/29/20179:15 AM9:30 AM
Daily Standup11/30/20179:15 AM9:30 AM
Sprint Review12/1/20172:00 PM3:00 PM
Sprint Retrospective12/1/20173:00 PM4:00 PM
<dx:BootstrapGridView ID="GridViewTimeEditColumn" runat="server" DataSourceID="MeetingsDataSource" KeyFieldName="ID">
    <Columns>
        ...
        <dx:BootstrapGridViewTimeEditColumn FieldName="StartTime" />
        <dx:BootstrapGridViewTimeEditColumn FieldName="EndTime" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>

Command Column

A BootstrapGridViewCommandColumn 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. You can process a click on a custom button in the client-side CustomButtonClick event.

  • args.buttonID - identifies the clicked custom button
  • args.processOnServer - specifies whether the event should be finally processed on the server side
  • args.visibleIndex - identifies the row whose custom button has been clicked
  • CustomButton.ID - specifies a string indentifier of the custom button
  • GridView.CustomButtonCallback - occurs on the server side when a custom command button has been clicked provided that args.processOnServer is set to true (the default value)
#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 ID="GridViewCommandColumn" runat="server" DataSourceID="EmployeesDataSource" 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