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 Date Edit column is created for the DateTime data type
  • A Check Box 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" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
</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 Binary Image 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:BootstrapGridViewTextColumn FieldName="FirstName" ReadOnly="true">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="LastName" ReadOnly="true">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="Title" ReadOnly="true">
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewBinaryImageColumn FieldName="Photo" Width="120px">
            <PropertiesBinaryImage ImageHeight="100px" />
        </dx:BootstrapGridViewBinaryImageColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="3" Visible="false"></SettingsPager>
</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-sync" />
                </Buttons>
            </PropertiesButtonEdit>
        </dx:BootstrapGridViewButtonEditColumn>
        <dx:BootstrapGridViewButtonEditColumn FieldName="Title">
            <PropertiesButtonEdit>
                <Buttons>
                    <dx:BootstrapEditButton IconCssClass="fa fa-download" />
                </Buttons>
            </PropertiesButtonEdit>
        </dx:BootstrapGridViewButtonEditColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
</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:BootstrapGridViewTextColumn FieldName="ProductName" ReadOnly="true" />
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
</dx:BootstrapGridView>

Combo Box 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 Combo Box 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:BootstrapGridViewDataColumn FieldName="ContactName" ReadOnly="true"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewComboBoxColumn FieldName="Country">
            <PropertiesComboBox TextField="CountryName" ValueField="CountryName" EnableSynchronization="False"
                IncrementalFilteringMode="StartsWith" DataSourceID="CountriesDataSource">
            </PropertiesComboBox>
        </dx:BootstrapGridViewComboBoxColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
    <SettingsEditing>
        <FormLayoutProperties LayoutType="Vertical"></FormLayoutProperties>
    </SettingsEditing>
</dx:BootstrapGridView>

Date Edit 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:BootstrapGridViewDataColumn Caption="Employee">
            <SettingsEditForm Visible="False" />
            <DataItemTemplate>
                <%# Eval("FirstName") %> <%# Eval("LastName") %>
            </DataItemTemplate>
        </dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDateColumn FieldName="BirthDate">
        </dx:BootstrapGridViewDateColumn>
        <dx:BootstrapGridViewDateColumn FieldName="HireDate">
        </dx:BootstrapGridViewDateColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
    <SettingsEditing>
        <FormLayoutProperties LayoutType="Vertical"></FormLayoutProperties>
    </SettingsEditing>
</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:BootstrapGridViewDataColumn FieldName="OrderID" ReadOnly="true"></dx:BootstrapGridViewDataColumn>
        <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" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
    <SettingsEditing>
        <FormLayoutProperties LayoutType="Vertical"></FormLayoutProperties>
    </SettingsEditing>
</dx:BootstrapGridView>
function selectionChanged(s, e) {
    dropDownEdit.SetValue(employeesGridView.GetSelectedKeysOnPage()[0]);
    dropDownEdit.HideDropDown();
}

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:BootstrapGridViewDataColumn FieldName="FirstName" ReadOnly="true"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="LastName" ReadOnly="true"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewHyperLinkColumn FieldName="Email">
            <PropertiesHyperLinkEdit NavigateUrlFormatString="mailto:{0}">
            </PropertiesHyperLinkEdit>
        </dx:BootstrapGridViewHyperLinkColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
    <SettingsEditing>
        <FormLayoutProperties LayoutType="Vertical"></FormLayoutProperties>
    </SettingsEditing>
</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:BootstrapGridViewDataColumn FieldName="FirstName"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="LastName"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Email"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewImageColumn FieldName="Photo" Width="120px">
            <PropertiesImage ImageUrlFormatString="~/images/persons/{0}" ImageHeight="100px" />
        </dx:BootstrapGridViewImageColumn>
    </Columns>
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="3" Visible="false"></SettingsPager>
    <SettingsEditing>
        <FormLayoutProperties LayoutType="Vertical"></FormLayoutProperties>
    </SettingsEditing>
</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:BootstrapGridViewDataColumn FieldName="CategoryName" ReadOnly="true" />
        <dx:BootstrapGridViewMemoColumn FieldName="Description" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
    <SettingsEditing EditFormColumnSpan="12">
        <FormLayoutProperties LayoutType="Vertical"></FormLayoutProperties>
    </SettingsEditing>
</dx:BootstrapGridView>

Progress Bar 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:BootstrapGridViewDataColumn FieldName="Name" ReadOnly="true"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewProgressBarColumn FieldName="Complete">
            <PropertiesProgressBar Minimum="0" Maximum="1"></PropertiesProgressBar>
        </dx:BootstrapGridViewProgressBarColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
    <SettingsEditing>
        <FormLayoutProperties LayoutType="Vertical"></FormLayoutProperties>
    </SettingsEditing>
</dx:BootstrapGridView>

Spin Edit 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:BootstrapGridViewDataColumn FieldName="ProductName" ReadOnly="true"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice">
            <PropertiesSpinEdit LargeIncrement="1" Increment="0.1" NumberType="Float" NumberFormat="Currency">
                <SpinButtons ShowLargeIncrementButtons="true" />
            </PropertiesSpinEdit>
        </dx:BootstrapGridViewSpinEditColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
    <SettingsEditing>
        <FormLayoutProperties LayoutType="Vertical"></FormLayoutProperties>
    </SettingsEditing>
</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
Product ManagerTechnical EvangelistTechnical 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:BootstrapGridViewDataColumn FieldName="FullName" ReadOnly="true"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewTagBoxColumn FieldName="Roles">
            <PropertiesTagBox TextField="Name" ValueField="ID" DataSourceID="CompanyEmployeeRolesDataSource" />
        </dx:BootstrapGridViewTagBoxColumn>
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager Visible="false"></SettingsPager>
    <SettingsEditing EditFormColumnSpan="12" />
</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" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager PageSize="5" Visible="false"></SettingsPager>
</dx:BootstrapGridView>

Time Edit 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/5/20242:00 PM4:00 PM
Daily Standup11/6/20249:15 AM9:30 AM
Daily Standup11/7/20249:15 AM9:30 AM
Daily Standup11/8/20249:15 AM9:30 AM
Sprint Review11/11/20242:00 PM3:00 PM
Sprint Retrospective11/11/20243:00 PM4:00 PM
<dx:BootstrapGridView ID="GridViewTimeEditColumn" runat="server" DataSourceID="MeetingsDataSource" KeyFieldName="ID">
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="Name">
            <SettingsEditForm Visible="False" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewDateColumn FieldName="PlannedDate" ReadOnly="true">
            <SettingsEditForm Visible="False" />
        </dx:BootstrapGridViewDateColumn>
        <dx:BootstrapGridViewTimeEditColumn FieldName="StartTime" />
        <dx:BootstrapGridViewTimeEditColumn FieldName="EndTime" />
    </Columns>
    <SettingsDataSecurity AllowEdit="true" />
    <SettingsBehavior AllowSort="false" />
    <SettingsPager Visible="false"></SettingsPager>
</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 Name Last Name Title
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="EmployeesDemoDataSource" KeyFieldName="EmployeeID">
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowEditButton="true" ShowSelectCheckbox="true"  >
            <CustomButtons>
                <dx:BootstrapGridViewCommandColumnCustomButton IconCssClass="fa fa-sync" />
                <dx:BootstrapGridViewCommandColumnCustomButton IconCssClass="fa fa-question" />
            </CustomButtons>
        </dx:BootstrapGridViewCommandColumn>
        <dx:BootstrapGridViewDataColumn FieldName="FirstName"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="LastName"></dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Title"></dx:BootstrapGridViewDataColumn>
    </Columns>
    <ClientSideEvents CustomButtonClick="onCustomButtonClick" />
    <SettingsDataSecurity AllowEdit="true" />
</dx:BootstrapGridView>
function onCustomButtonClick(s, e) {
    dxbsDemo.showToast("The custom button " + e.buttonID + " has been clicked (row index: " + e.visibleIndex + ")");
}
Screen Size
Color Themes
Demo QR Code