Bootstrap GridView Column Types Demo | DevExpress Bootstrap Controls for ASP.NET

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

Name:

Start Date:

June 2004

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
23	30	31	1	2	3	4	5
24	6	7	8	9	10	11	12
25	13	14	15	16	17	18	19
26	20	21	22	23	24	25	26
27	27	28	29	30	1	2	3
28	4	5	6	7	8	9	10

End Date:

July 2004

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
27	27	28	29	30	1	2	3
28	4	5	6	7	8	9	10
29	11	12	13	14	15	16	17
30	18	19	20	21	22	23	24
31	25	26	27	28	29	30	31
32	1	2	3	4	5	6	7

Done:

Writing CustomPrintingLink

6/2/2004

7/7/2004

Testing

Writing examples

7/9/2004

7/7/2004

ASPX Copy

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

PropertiesBinaryImage.ImageWidth - specifies the width of the image displayed within a column
PropertiesBinaryImage.ImageHeight - specifies the height of the image displayed within a column

First Name	Last Name	Title
Nancy	Davolio	Sales Representative
Andrew	Fuller	Vice President, Sales
First Name: Last Name: Title: Photo: Drop file(s) here Drop image file here No image Uploading...
Janet	Leverling	Sales Representative

ASPX Copy

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

PropertiesButtonEdit.Buttons - a collection property that allows you to specify buttons that should be displayed within the cell editor.

First Name	Last Name	Title
Nancy	Davolio	Sales Representative
Andrew	Fuller	Vice President, Sales
First Name: Last Name: Title:
Janet	Leverling	Sales Representative
Margaret	Peacock	Sales Representative
Steven	Buchanan	Sales Manager

ASPX Copy

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

CheckBoxProperties.UseDisplayImages - specifies whether the editor's check state is represented by icons or specific texts in browse mode
CheckBoxProperties.DisplayTextChecked / DisplayTextUnchecked - specifies the text that represents the checked/unchecked state of a column editor in browse mode
CheckBoxProperties.DisplayTextChecked / GridView.CssClassesEditor.IconCheckColumnChecked / IconCheckColumnUnchecked - specifies the icons that represent the checked/unchecked state of a column editor in browse mode

Product Name	Discontinued
Chai
Chang
Product Name: Discontinued:
Aniseed Syrup
Chef Anton's Cajun Seasoning
Chef Anton's Gumbo Mix

ASPX Copy

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

PropertiesComboBox.Items - specifies collection of Combo Box items
PropertiesComboBox.DataSourceID - allows to bind Combo Box item collection to a data source

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
Contact Name: Country:
Antonio Moreno	Mexico
Thomas Hardy	UK
Christina Berglund	Sweden

ASPX Copy

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

PropertiesDateEdit.EditFormat - specifies possible formats of the date column: Time, DateTime, Date, Custom

Employee

Birth Date

Hire Date

Nancy Davolio

12/8/1978

5/1/2005

Andrew Fuller

2/19/1965

8/14/1992

Birth Date:

February 1965

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
05	31	1	2	3	4	5	6
06	7	8	9	10	11	12	13
07	14	15	16	17	18	19	20
08	21	22	23	24	25	26	27
09	28	1	2	3	4	5	6
10	7	8	9	10	11	12	13

Hire Date:

August 1992

	Sun	Mon	Tue	Wed	Thu	Fri	Sat
31	26	27	28	29	30	31	1
32	2	3	4	5	6	7	8
33	9	10	11	12	13	14	15
34	16	17	18	19	20	21	22
35	23	24	25	26	27	28	29
36	30	31	1	2	3	4	5

Janet Leverling

8/30/1985

4/1/2002

Margaret Peacock

9/19/1973

5/3/1993

Steven Buchanan

3/4/1955

10/17/1993

ASPX Copy

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

PropertiesDropDownEdit.DropDownWindowTemplate - specifies a template used to display the editor's drop-down window content

Order ID

Employee ID

10248

10249

Order ID:

Employee ID:

Last Name	First Name	Title
Davolio	Nancy	Sales Representative
Fuller	Andrew	Vice President, Sales
Leverling	Janet	Sales Representative
Peacock	Margaret	Sales Representative
Buchanan	Steven	Sales Manager
Suyama	Michael	Sales Representative
King	Robert	Sales Representative
Callahan	Laura	Inside Sales Coordinator
Dodsworth	Anne	Sales Representative

10250

10251

10252

ASPX JS Copy

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

HyperLinkProperties.NavigateUrlFormatString - specifies the pattern used to format the hyperlink location url in display mode

First Name	Last Name	Email
Paul	Bailey	paulb@westchestercounty.com
Brad	Barnes	barkk@barnesfamilywebsite.com
First Name: Last Name: Email:
Jerry	Campbell	jerryc@campbellfamilywebsite.com
Carl	Lucas	carl@lucasfamilywebsite.com
Peter	Dolan	peter@dolanfamilywebsite.com

ASPX Copy

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

PropertiesImage.ImageUrlFormatString - specifies the pattern used to format the URL that points to the image displayed in the cell

First Name	Last Name	Email
Andrew	Fuller	andrew.fuller@devexpress.com
Margaret	Peackop	margaret.peackop.devexpress.com
Nancy	Davolio	nancy.davolio@devexpress.com

ASPX Copy

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

PropertiesMemoEdit.Columns - gets or sets the textarea's width in characters
PropertiesMemoEdit.Rows - gets or sets the textarea's height in characters

Category Name	Description
Beverages	Soft drinks, coffees, teas, beers, and ales
Condiments	Sweet and savory sauces, relishes, spreads, and seasonings
Category Name: Description: Sweet and savory sauces, relishes, spreads, and seasonings
Confections	Desserts, candies, and sweet breads
Dairy Products	Cheeses
Grains/Cereals	Breads, crackers, pasta, and cereal

ASPX Copy

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

PropertiesProgressBar.Minimum - specifies the minimum range value of a progress bar column (when the progress bar is empty)
PropertiesProgressBar.Maximum - specifies the maximum range value of a progress bar column (when the progress bar is completely filled)

Name	Complete
PrintingSystem	23%
Name: Complete:
Testing and writing examples	0%
Writing CustomPrintingLink	100%
Testing	68%
Writing examples	100%

ASPX Copy

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

PropertiesSpinEdit.Increment - specifies the value by which the spin editor's value is changed when clicking a small increment/decrement spin button
PropertiesSpinEdit.NumberFormat - specifies possible display formats for a spin editor's value: Number, Currency, Percent, Custom
PropertiesSpinEdit.MinValue / MaxValue - specify the minimum and maximum values of the column editor

Product Name	Unit Price
Chai	$18.00
Chang	$19.00
Product Name: Unit Price:
Aniseed Syrup	$10.00
Chef Anton's Cajun Seasoning	$22.00
Chef Anton's Gumbo Mix	$21.00

ASPX Copy

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

PropertiesTagBox.Tags - provides access a collection of editor tags
PropertiesTagBox.DataSourceID - allows to bind the tags collection to a data source
PropertiesTagBox.AllowCustomTags - specifies whether end-users can input tokens that are not contained in the Tags collection

Full Name	Roles
Andrew Fuller	Administrator, Marketing Manager
Anne Dodsworth	HR Manager
Janet Leverling	Product Manager, Technical Evangelist, Technical Writer
Full Name: Roles: Product ManagerTechnical EvangelistTechnical 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

ASPX Copy

<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
First Name: Last Name: Title:
Janet	Leverling	Sales Representative
Margaret	Peacock	Sales Representative
Steven	Buchanan	Sales Manager

ASPX Copy

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

PropertiesTimeEdit.EditFormat - specifies possible formats of the date column: Time, DateTime, Date, Custom

Name	Planned Date	Start Time	End Time
Sprint Planning	4/26/2024	2:00 PM	4:00 PM
Start Time: End Time:
Daily Standup	4/29/2024	9:15 AM	9:30 AM
Daily Standup	4/30/2024	9:15 AM	9:30 AM
Daily Standup	5/1/2024	9:15 AM	9:30 AM
Sprint Review	5/2/2024	2:00 PM	3:00 PM
Sprint Retrospective	5/2/2024	3:00 PM	4:00 PM

ASPX Copy

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

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
Michael	Suyama	Sales Representative
Robert	King	Sales Representative
Laura	Callahan	Inside Sales Coordinator
Anne	Dodsworth	Sales Representative

ASPX JS Copy

<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 + ")");
}

Data Column

Binary Image Column

Button Edit Column

Check Column

Combo Box Column

Date Edit Column

Drop-Down Edit Column

Hyperlink Column

Image Column

Memo Column

Progress Bar Column

Spin Edit Column

Tag Box Column

Text Column

Time Edit Column

Command Column

Screen Size

Color Themes

Demo QR Code