BootstrapGridView Class

A control that provides a two-dimensional representation of data from a data source in grid format.

Namespace: DevExpress.Web.Bootstrap

Assembly: DevExpress.Web.Bootstrap.v19.1.dll

Declaration

C#

[ToolboxTabName("DX.19.1: Bootstrap Controls")]
[DXClientDocumentationProviderWeb("BootstrapGridView")]
public class BootstrapGridView :
    ASPxGridView,
    ISimpleRenderControl,
    IBootstrapGridCssClassesOwner

VB.NET

<ToolboxTabName("DX.19.1: Bootstrap Controls")>
<DXClientDocumentationProviderWeb("BootstrapGridView")>
Public Class BootstrapGridView
    Inherits ASPxGridView
    Implements ISimpleRenderControl,
               IBootstrapGridCssClassesOwner

Related API Members

The following members return BootstrapGridView objects:

• BootstrapGridViewBandColumn.Grid
• BootstrapGridViewColumnCollection.Grid
• BootstrapGridViewCommandColumn.Grid
• BootstrapGridViewDataColumn.Grid

Remarks

The BootstrapGridView is a data-bound control that provides a two-dimensional representation of data from a data source in grid format. Data source fields and records are presented as columns and rows in a table.

Columns

The BootstrapGridView control stores its columns in the BootstrapGridView.Columns collection.

Data columns can be automatically created for each field in the data source when the BootstrapGridView is rendered, or created manually, based on the ASPxGridView.AutoGenerateColumns property value. By default, the property is set to true, forcing the BootstrapGridView to render each field from the data source as a data column. The order of columns is the same as the order of fields in the data source.

To manually control which columns appear in the BootstrapGridView, set the ASPxGridView.AutoGenerateColumns property to false. In this case, you should manually add data columns to the BootstrapGridView.Columns collection.

Client-Side API

The BootstrapGridView control provides you with comprehensive client-side functionality implemented using JavaScript code:

• The control’s client-side equivalent is represented by the BootstrapClientGridView object.
• On the client side, the client object can be accessed directly by the name specified via the ASPxGridBase.ClientInstanceName property.
• The available client events can be accessed by using the ASPxGridView.ClientSideEvents property.

The client-side API is always available for this control.

Example

The example demonstrates the basic functionality of the Grid View control.

• Initialize a new instance of the BootstrapGridView class.
• Bind the Grid View control to the required data storage. For this purpose, assign the identifier of your data storage to the BootstrapWebClientUIWidget.DataSourceID property.
• Assign the required key field’s name to the ASPxGridBase.KeyFieldName property.
• The Grid View control renders each field from the data source as a column, by default. The order of columns is the same as the order of fields in the data source. Alternatively, you can manually control which columns are to appear in the control by setting the ASPxGridView.AutoGenerateColumns property to false. In this case, you should manually add columns to the BootstrapGridView.Columns collection.
• Use other BootstrapGridView class properties to customize the control’s appearance in addition. For example, add summaries (ASPxGridView.GroupSummary or ASPxGridView.TotalSummary), show either the Group Panel (ASPxGridViewSettings.ShowGroupPanel) or the Filter row (ASPxGridViewSettings.ShowFilterRow), etc.

The image below shows the result:

ASPX

<dx:BootstrapGridView ID="GridViewServerMode" runat="server" DataSourceID="EntityServerModeDataSource" KeyFieldName="ID" AutoGenerateColumns="False"
    OnCustomColumnDisplayText="GridViewServerMode_CustomColumnDisplayText" OnSummaryDisplayText="GridViewServerMode_SummaryDisplayText">
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="From" />
        <dx:BootstrapGridViewTextColumn FieldName="Subject" />
        <dx:BootstrapGridViewDateColumn FieldName="Sent" Width="220px" />
        <dx:BootstrapGridViewCheckColumn Caption="Has Attachments" FieldName="HasAttachment" Width="150px" />
        <dx:BootstrapGridViewTextColumn FieldName="Size">
            <Settings AllowAutoFilter="False" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
    <TotalSummary>
        <dx:ASPxSummaryItem FieldName="Size" SummaryType="Sum" />
    </TotalSummary>
    <GroupSummary>
        <dx:ASPxSummaryItem SummaryType="Count" />
    </GroupSummary>
    <Settings ShowGroupPanel="True" ShowFooter="True" ShowFilterRow="true" ShowFilterRowMenu="true"/>
</dx:BootstrapGridView>
<dx:EntityServerModeDataSource ID="EntityServerModeDataSource" runat="server"

Inheritance

Object

Control

WebControl

ASPxWebControlBase

ASPxWebControl

ASPxDataWebControlBase

ASPxDataWebControl

ASPxGridBase

ASPxGridView

BootstrapGridView