ASPxVerticalGrid Class

A vertical grid control.

Assembly : DevExpress.Web.v25.2.dll

Declaration

C#
VB.NET

csharp

public class ASPxVerticalGrid :
    ASPxGridBase

Public Class ASPxVerticalGrid
    Inherits ASPxGridBase

The following members return ASPxVerticalGrid objects:

Remarks

The ASPxVerticalGrid is a data bound control that displays data source fields as columns and records as rows in a table.

Run Demo: Vertical Grid Demos

Create a Vertical Grid

Design Time

The ASPxVerticalGrid control is available on the DX.25.2: Data & Analytics toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control’s settings, or paste the control markup in the page’s source code.

Note

To properly function, DevExpress controls require that special modules, handlers and options are registered in the the Web.config file. Switch the Microsoft Visual Studio IDE to the Design tab to automatically update the Web.config file with the required DevExpress information.

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" runat="server" DataSourceID="SqlDataSource1" 
    KeyFieldName="SupplierID" Width="70%" >
    <Rows>
        <dx:VerticalGridCategoryRow Caption="Contact Information">
            <Rows>
                <dx:VerticalGridTextRow FieldName="CompanyName" VisibleIndex="1" />
                <dx:VerticalGridTextRow FieldName="ContactName" VisibleIndex="2" />
            </Rows>
        </dx:VerticalGridCategoryRow>
        <dx:VerticalGridCategoryRow Caption="Address Information">
            <Rows>
                <dx:VerticalGridTextRow FieldName="Country" VisibleIndex="3" />
                <dx:VerticalGridTextRow FieldName="City" VisibleIndex="4" />
                <dx:VerticalGridTextRow FieldName="Address" VisibleIndex="5" />
            </Rows>
        </dx:VerticalGridCategoryRow>
    </Rows>
    <SettingsPager Mode="ShowPager" PageSize="3"></SettingsPager>
</dx:ASPxVerticalGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;
  Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True" ProviderName="System.Data.OleDb" 
  SelectCommand="SELECT [SupplierID], [ContactName], [Country], [City], [Address], [CompanyName] FROM [Suppliers]">
</asp:SqlDataSource>

Run Time

ASPX

aspx

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;
  Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True" ProviderName="System.Data.OleDb" 
  SelectCommand="SELECT [SupplierID], [ContactName], [Country], [City], [Address], [CompanyName] FROM [Suppliers]">
</asp:SqlDataSource>

C#
VB.NET

csharp

using DevExpress.Web;
using DevExpress.Data;
...
protected void Page_Load(object sender, EventArgs e) {
    ASPxVerticalGrid verticalGrid1 = new ASPxVerticalGrid();
    verticalGrid1.ID = "VerticalGrid1";
    Page.Form.Controls.Add(verticalGrid1);
    verticalGrid1.AutoGenerateRows = false;
    verticalGrid1.DataSourceID = "SqlDataSource1";
    verticalGrid1.KeyFieldName = "SupplierID";
    verticalGrid1.Width = Unit.Percentage(80);

    VerticalGridCategoryRow category1 = new VerticalGridCategoryRow("Contact Information");

    VerticalGridTextRow row1 = new VerticalGridTextRow();
    row1.FieldName = "CompanyName";
    row1.VisibleIndex = 1;

    VerticalGridTextRow row2 = new VerticalGridTextRow();
    row2.FieldName = "ContactName";
    row2.VisibleIndex = 2;

    category1.Rows.Add(row1);
    category1.Rows.Add(row2);

    VerticalGridCategoryRow category2 = new VerticalGridCategoryRow("Address Information");

    VerticalGridTextRow row3 = new VerticalGridTextRow();
    row3.FieldName = "Country";
    row3.VisibleIndex = 3;

    VerticalGridTextRow row4 = new VerticalGridTextRow();
    row4.FieldName = "City";
    row4.VisibleIndex = 4;

    VerticalGridTextRow row5 = new VerticalGridTextRow();
    row5.FieldName = "Address";
    row5.VisibleIndex = 5;

    category2.Rows.Add(row3);
    category2.Rows.Add(row4);
    category2.Rows.Add(row5);

    verticalGrid1.Rows.Add(category1);
    verticalGrid1.Rows.Add(category2);

    verticalGrid1.SettingsPager.Mode = VerticalGridPagerMode.ShowPager;
    verticalGrid1.SettingsPager.PageSize = 3;
}

Imports DevExpress.Web
Imports DevExpress.Data
...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim verticalGrid1 As ASPxVerticalGrid = New ASPxVerticalGrid()
    verticalGrid1.ID = "VerticalGrid1"
    Page.Form.Controls.Add(verticalGrid1)
    verticalGrid1.AutoGenerateRows = False
    verticalGrid1.DataSourceID = "SqlDataSource1"
    verticalGrid1.KeyFieldName = "SupplierID"
    verticalGrid1.Width = Unit.Percentage(80)

    Dim category1 As VerticalGridCategoryRow = New VerticalGridCategoryRow("Contact Information")

    Dim row1 As VerticalGridTextRow = New VerticalGridTextRow()
    row1.FieldName = "CompanyName"
    row1.VisibleIndex = 1
    Dim row2 As VerticalGridTextRow = New VerticalGridTextRow()
    row2.FieldName = "ContactName"
    row2.VisibleIndex = 2

    category1.Rows.Add(row1)
    category1.Rows.Add(row2)

    Dim category2 As VerticalGridCategoryRow = New VerticalGridCategoryRow("Address Information")

    Dim row3 As VerticalGridTextRow = New VerticalGridTextRow()
    row3.FieldName = "Country"
    row3.VisibleIndex = 3
    Dim row4 As VerticalGridTextRow = New VerticalGridTextRow()
    row4.FieldName = "City"
    row4.VisibleIndex = 4
    Dim row5 As VerticalGridTextRow = New VerticalGridTextRow()
    row5.FieldName = "Address"
    row5.VisibleIndex = 5

    category2.Rows.Add(row3)
    category2.Rows.Add(row4)
    category2.Rows.Add(row5)

    verticalGrid1.Rows.Add(category1)
    verticalGrid1.Rows.Add(category2)
    verticalGrid1.SettingsPager.Mode = VerticalGridPagerMode.ShowPager
    verticalGrid1.SettingsPager.PageSize = 3
End Sub

KB Article : How to create controls dynamically

Client-Side API

Availability

Available by default.

| |

Client object type

ASPxClientVerticalGrid

| |

Access name

ASPxVerticalGrid.ClientInstanceName

| |

Events

ASPxVerticalGrid.ClientSideEvents

Data Binding

The ASPxVerticalGrid works only in bound mode. You can bind the vertical grid to any standard data source type: SqlDataSource, ObjectDataSource, XmlDataSource, AccessDataSource, and SiteMapDataSource.

Use the ASPxVerticalGrid.KeyFieldName property to set a data source’s key field name. The ASPxVerticalGrid.DataSourceID and ASPxVerticalGrid.DataSource properties specify the data source’s ID and the data source object, respectively.

ASPxVerticalGrid.DataSourceID:

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" runat="server" DataSourceID="SqlDataSource1" 
    KeyFieldName="SupplierID" Width="70%" >
    <Rows>
        <dx:VerticalGridCategoryRow Caption="Contact Information">
            <Rows>
                <dx:VerticalGridTextRow FieldName="CompanyName" VisibleIndex="1" />
                <dx:VerticalGridTextRow FieldName="ContactName" VisibleIndex="2" />
            </Rows>
        </dx:VerticalGridCategoryRow>
        <dx:VerticalGridCategoryRow Caption="Address Information">
            <Rows>
                <dx:VerticalGridTextRow FieldName="Country" VisibleIndex="3" />
                <dx:VerticalGridTextRow FieldName="City" VisibleIndex="4" />
                <dx:VerticalGridTextRow FieldName="Address" VisibleIndex="5" />
            </Rows>
        </dx:VerticalGridCategoryRow>
    </Rows>
    <SettingsPager Mode="ShowPager" PageSize="3" />
</dx:ASPxVerticalGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;
  Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True" ProviderName="System.Data.OleDb" 
  SelectCommand="SELECT [SupplierID], [ContactName], [Country], [City], [Address], [CompanyName] FROM [Suppliers]">
</asp:SqlDataSource>

ASPxVerticalGrid.DataSource:

C#
VB.NET

csharp

SqlDataSource dataSource1 = new SqlDataSource(@"Provider=Microsoft.Jet.OLEDB.4.0;
    Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True", 
    "SELECT [SupplierID], [ContactName], [Country], [City], [Address], [CompanyName] FROM [Suppliers]");
dataSource1.ProviderName = "System.Data.OleDb";
dataSource1.ID = "DataSource1";
...
vgrid.DataSource = dataSource1;
vgrid.KeyFieldName = "SupplierID";
vgrid.DataBind();
...

Dim dataSource1 As SqlDataSource = New SqlDataSource("Provider=Microsoft.Jet.OLEDB.4.0;
    Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True", 
    "SELECT [SupplierID], [ContactName], [Country], [City], [Address], [CompanyName] FROM [Suppliers]")
dataSource1.ProviderName = "System.Data.OleDb"
dataSource1.ID = "DataSource1"
...
vgrid.DataSource = dataSource1
vgrid.KeyFieldName = "SupplierID"
vgrid.DataBind()

Learn more | See demo

Database Server Mode

The vertical grid supports database server mode. In this mode, the control loads only required items to the server memory and implements data-aware operations (for example, filtering) at the database level.

Learn more | See demo

Unbound Rows

The control supports unbound rows that are not bound to any data source field. Use the CustomUnboundRowData event or specify the VerticalGridDataRow.UnboundExpression property to populate an unbound row with data.

VerticalGridDataRow.UnboundExpression:

ASPX

aspx

<dx:ASPxVerticalGrid ID="VerticalGrid" runat="server" DataSourceID="SqlDataSource1" 
    KeyFieldName="SupplierID" >
    <Rows>
        <dx:VerticalGridTextRow FieldName="UnitPrice" VisibleIndex="1" />
        <dx:VerticalGridTextRow FieldName="Quantity" VisibleIndex="2" />
        <dx:VerticalGridTextRow FieldName="Discount" VisibleIndex="4" />
        <dx:VerticalGridTextRow FieldName="Total" UnboundType="Decimal" 
            UnboundExpression="UnitPrice*Quantity*(1-Discount)" />
    </Rows>
</dx:ASPxVerticalGrid>

ASPxVerticalGrid.CustomUnboundRowData event:

ASPX

aspx

<dx:ASPxVerticalGrid ID="VerticalGrid" runat="server" DataSourceID="SqlDataSource1" 
    KeyFieldName="SupplierID" OnCustomUnboundRowData="VerticalGrid_CustomUnboundRowData" >
    <Rows>
        <dx:VerticalGridTextRow FieldName="UnitPrice" VisibleIndex="1" />
        <dx:VerticalGridTextRow FieldName="Quantity" VisibleIndex="2" />
        <dx:VerticalGridTextRow FieldName="Discount" VisibleIndex="4" />
        <dx:VerticalGridTextRow FieldName="Total" UnboundType="Decimal" />
    </Rows>
</dx:ASPxVerticalGrid>

C#
VB.NET

csharp

protected void VerticalGrid_CustomUnboundRowData(object sender,
    ASPxVerticalGridRowDataEventArgs e) {
    if (e.Row.FieldName == "Total") {
        decimal unitPrice = Convert.ToDecimal(e.GetListSourceFieldValue("UnitPrice"));
        int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));
        decimal discount = Convert.ToDecimal(e.GetListSourceFieldValue("Discount"));
        e.Value = unitPrice * quantity * (1 - discount);
    }
}

Protected Sub VerticalGrid_CustomUnboundRowData(ByVal sender As Object, ByVal e As ASPxVerticalGridRowDataEventArgs)
    If e.Row.FieldName = "Total" Then
        Dim unitPrice As Decimal = Convert.ToDecimal(e.GetListSourceFieldValue("UnitPrice"))
        Dim quantity As Integer = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"))
        Dim discount As Decimal = Convert.ToDecimal(e.GetListSourceFieldValue("Discount"))
        e.Value = unitPrice * quantity * (1 - discount)
    End If
End Sub

Learn more

Rows Management

The vertical grid displays data records as columns and data fields as rows.

Fixed Rows

The vertical grid allows you to fix rows on the top side and display these rows onscreen when the rows’ total height exceeds the control height. Enable the vertical scrolling (Settings.VerticalScrollBarMode) and set a row’s Fixed property to true to fix the row.

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" runat="server" DataSourceID="SqlDataSource1" 
    KeyFieldName="SupplierID" Width="70%" >
    <Rows>
        <dx:VerticalGridImageRow FieldName="PhotoUrl" Fixed="True" Caption="Photo"/>
        <dx:VerticalGridDataRow FieldName="Model" Fixed="True" />
        <!-- ... -->
    </Rows>
</dx:ASPxVerticalGrid>

See demo

Truncate Cell Text

The vertical grid can truncate cell (‘…’) values if they do not fit the cells’ width ( AllowEllipsisInText).

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" runat="server" DataSourceID="SqlDataSource1" >
    <Rows>
        <!-- ... -->
    </Rows>
    <SettingsBehavior AllowEllipsisInText="True" />
</dx:ASPxVerticalGrid>

Data Edit

The vertical grid supports batch edit mode (Mode). In this mode, you can use in-line editors to edit control’s data. The vertical grid colors the modified cells in green. Deleted records are highlighted with gray and display the Recover command item.

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" runat="server" >
    <Rows>
        <!-- ... -->
    </Rows>
    <SettingsEditing Mode="Batch" />
</dx:ASPxVerticalGrid>

Learn more | See demo

Data Management

Sort Data

You can sort data by an unlimited number of rows. Use the control’s AllowSort option to allow end users to sort the specified row or all rows in the vertical grid.

See demo

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
    <Rows>
        <!-- ... -->
    </Rows>
    <SettingsBehavior AllowSort="False" />
</dx:ASPxVerticalGrid>

Filter Data

You can use the following UI elements to filter data:

Built-in Search Panel (See demo)
Header Filter (See demo)
Filter Control (See demo)

Data Summary

You can calculate aggregate functions against all values within a row. The ASPxVerticalGrid control offers 5 built-in aggregate functions. Use event handlers to implement custom aggregate functions.

The following summary types are available:

Total Summary - Add the ASPxVerticalGridSummaryItem object(s) to the TotalSummary collection.
Custom Summary - Set the ASPxVerticalGridSummaryItem.SummaryType property to Custom and handle the ASPxVerticalGrid.CustomSummaryCalculate event to calculate the custom summary.

See demo

Validation

You can validate data in records and display error icons/messages for invalid fields.

Validate Records - RecordValidating
Validate Edit Cells - ValidationSettings
Custom Validation - EnableCustomValidation

Learn more

Export

The vertical grid allows you to export data in the following formats: PDF, XLS, XLSX, RTF, DOCX.

ASPX

aspx

<dx:ASPxVerticalGrid ID="VerticalGrid" runat="server" >
    <Toolbars>
    <dx:VerticalGridToolbar EnableAdaptivity="true">
            <Items>
                <dx:VerticalGridToolbarItem Command="ExportToXls" />
                <dx:VerticalGridToolbarItem Command="ExportToXlsx" />
            </Items>
        </dx:VerticalGridToolbar>
    </Toolbars>
    <!-- ... -->
</dx:ASPxVerticalGrid>

Learn more | See demo

Selection

You can use the UI elements (ShowSelectCheckbox, ShowSelectButton, SelectAllCheckboxMode) or APIs on the client and server side to select vertical grid records.

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
    <Rows>
        <dx:VerticalGridCommandRow ShowSelectCheckbox="true" />
        <!-- ... -->
    </Rows>        
</dx:ASPxVerticalGrid>

See demo

The vertical grid provides the built-in pager (SettingsPager) that enables users to navigate through data. The pager consists of navigation buttons: “next”, “last”, “previous”, “first”, “All”;

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
    <Rows>
        <!-- ... -->
    </Rows>
    <SettingsPager PageSize="10" EnableAdaptivity="true" />
</dx:ASPxVerticalGrid>

See demo

Scroll Data

Use the Settings.HorizontalScrollBarMode and Settings.VerticalScrollBarMode properties to enable the horizontal and vertical scroll bars.

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
    <Rows>
        <!-- ... -->
    </Rows>
    <Settings HorizontalScrollBarMode="Auto" VerticalScrollBarMode="Visible" />
</dx:ASPxVerticalGrid>

See demo

Customization Tools

The toolbar enables you to group the vertical grid’s commands. The vertical grid stores toolbars (VerticalGridToolbar) in its Toolbars collection. You can add or remove toolbars, change their availability and position, and populate them with toolbar items (VerticalGridToolbarItem).

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
    <Rows>
        <!-- ... -->
    </Rows>
    <Toolbars>
        <dx:VerticalGridToolbar>
            <Items>
                <dx:VerticalGridToolbarItem GroupName="View" Name="All" Text="Display all" Checked="true" />
                <dx:VerticalGridToolbarItem GroupName="View" Name="Distinct" Text="Display differences" />
                <dx:VerticalGridToolbarItem Command="ShowFilterEditor" BeginGroup="true" />
                <dx:VerticalGridToolbarItem Command="ShowSearchPanel" BeginGroup="true" />
            </Items>
        </dx:VerticalGridToolbar>
    </Toolbars>    
</dx:ASPxVerticalGrid>

Learn more | See demo

Appearance Customization

Templates

The vertical grid supports templates and allows you to customize its UI elements’ appearance and layout.

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
    <Rows>
        <dx:VerticalGridTextRow FieldName="UnitPrice">
            <DataItemTemplate>
                <!-- ... -->
            </DataItemTemplate>
        </dx:VerticalGridTextRow>
    </Rows>
</dx:ASPxVerticalGrid>

See demo

Conditional Formatting

You can apply format rules (the GridFormatConditionBase object descendants) to the vertical grid (FormatConditions) to customize the appearance of the records.

ASPX

aspx

<dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
    <!-- ... -->
    <FormatConditions>
        <dx:VerticalGridFormatConditionTopBottom Rule="BottomItems" Threshold="10" FieldName="UnitPrice" Format="BoldText" />
        <dx:VerticalGridFormatConditionTopBottom Rule="BottomItems" Threshold="10" FieldName="UnitPrice" Format="GreenText" />
        <!-- ... -->
    </FormatConditions>    
</dx:ASPxVerticalGrid>

See demo