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
Name | Start Date | End Date | Done |
PrintingSystem | 6/19/2004 | 7/9/2004 | |
Testing and writing examples | 6/19/2004 | 7/9/2004 | |
|
Writing CustomPrintingLink | 6/2/2004 | 7/7/2004 | |
Testing | | | |
Writing examples | 7/9/2004 | 7/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 Name | Last Name | Title | Photo |
Nancy | Davolio | Sales Representative | |
Andrew | Fuller | Vice President, Sales | |
|
Janet | Leverling | Sales 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>
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.
<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 Name | Discontinued |
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 Name | Country |
Maria Anders | Germany |
Ana Trujillo | Mexico |
|
Antonio Moreno | Mexico |
Thomas Hardy | UK |
Christina Berglund | Sweden |
<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.
Employee | Birth Date | Hire Date |
Nancy Davolio
| 12/8/1978 | 5/1/2005 |
Andrew Fuller
| 2/19/1965 | 8/14/1992 |
|
Janet Leverling
| 8/30/1985 | 4/1/2002 |
Margaret Peacock
| 9/19/1973 | 5/3/1993 |
Steven Buchanan
| 3/4/1955 | 10/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>
Drop-Down Edit Column
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 ID | Employee ID |
10248 | 5 |
10249 | 6 |
|
10250 | 4 |
10251 | 3 |
10252 | 4 |
<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.
<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 Name | Last Name | Email | Photo |
Andrew | Fuller | andrew.fuller@devexpress.com | |
Margaret | Peackop | margaret.peackop.devexpress.com | |
Nancy | Davolio | nancy.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 Name | Description |
Beverages | Soft drinks, coffees, teas, beers, and ales |
Condiments | Sweet and savory sauces, relishes, spreads, and seasonings |
|
Confections | Desserts, candies, and sweet breads |
Dairy Products | Cheeses |
Grains/Cereals | Breads, 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.
Name | Complete |
PrintingSystem | |
|
Testing and writing examples | |
Writing CustomPrintingLink | |
Testing | |
Writing examples | |
<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 Name | Unit 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 Name | Roles |
Andrew Fuller | Administrator, Marketing Manager |
Anne Dodsworth | HR Manager |
Janet Leverling | Product Manager, Technical Evangelist, Technical Writer |
|
Laura Callahan | Technical Writer |
Margaret Peacock | Developer, Technical Evangelist |
Michael Suyama | Team Leader, Sales Manager |
Nancy Davolio | Marketing Manager, Product Manager |
Robert King | Support Engineer, Sales Manager |
Steven Buchanan | Product 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 Name | Last Name | Title |
Nancy | Davolio | Sales Representative |
Andrew | Fuller | Vice President, Sales |
|
Janet | Leverling | Sales Representative |
Margaret | Peacock | Sales Representative |
Steven | Buchanan | Sales 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.
Name | Planned Date | Start Time | End Time |
Sprint Planning | 11/5/2024 | 2:00 PM | 4:00 PM |
|
Daily Standup | 11/6/2024 | 9:15 AM | 9:30 AM |
Daily Standup | 11/7/2024 | 9:15 AM | 9:30 AM |
Daily Standup | 11/8/2024 | 9:15 AM | 9:30 AM |
Sprint Review | 11/11/2024 | 2:00 PM | 3:00 PM |
Sprint Retrospective | 11/11/2024 | 3:00 PM | 4: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).
<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 + ")");
}