ASPxVerticalGrid Class

A vertical grid control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

public class ASPxVerticalGrid :
    ASPxGridBase

VB.NET

Public Class ASPxVerticalGrid
    Inherits ASPxGridBase

Related API Members

The following members return ASPxVerticalGrid objects:

• ASPxVerticalGridExporter.VerticalGrid
• VerticalGridBaseTemplateContainer.Grid
• VerticalGridRow.Grid
• VerticalGridRowCollection.Grid

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

<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

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

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;
}

VB.NET

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

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

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();
...

VB.NET

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

<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

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

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

VB.NET

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.

Categories

The control allows you to group rows in categories (category rows). A category row (VerticalGridCategoryRow) stores its rows within the VerticalGridCategoryRow.Rows collection. Individual rows are objects of the VerticalGridDataRow, VerticalGridImageRow, VerticalGridHyperLinkRow types.

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>

See demo

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

<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

<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

<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

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

  ASPX

  <dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
      <!-- ... -->
      <SettingsSearchPanel Visible="True" />
  </dx:ASPxVerticalGrid>
  

• Header Filter (See demo)

  ASPX

  <dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
      <!-- ... -->
      <Settings ShowHeaderFilterButton="true" />
  </dx:ASPxVerticalGrid>
  

• Filter Control (See demo)

  ASPX

  <dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
      <!-- ... -->
      <Settings ShowFilterBar="Visible" />
      <SettingsFilterControl ViewMode="VisualAndText" AllowHierarchicalColumns="true" />        
  </dx:ASPxVerticalGrid>
  

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.

  ASPX

  <dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" >
      <Rows>
          <!-- ... -->
          <dx:VerticalGridTextRow FieldName="UnitPrice" />
          <dx:VerticalGridTextRow FieldName="Quantity" />
          <dx:VerticalGridTextRow FieldName="Total" UnboundType="Decimal" 
              UnboundExpression="UnitPrice * Quantity * (1 - Discount)" />
      </Rows>        
      <Settings ShowSummaryPanel="true" />
      <TotalSummary>
          <dx:ASPxVerticalGridSummaryItem FieldName="Total" SummaryType="Sum" 
              ValueDisplayFormat="<b>{0:c}</b>" />
      </TotalSummary>        
  </dx:ASPxVerticalGrid>
  

• Custom Summary - Set the ASPxVerticalGridSummaryItem.SummaryType property to Custom and handle the ASPxVerticalGrid.CustomSummaryCalculate event to calculate the custom summary.

  ASPX

  <dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" OnCustomSummaryCalculate="ASPxVerticalGrid1_CustomSummaryCalculate">
      <Rows>
          <!-- ... -->
          <dx:VerticalGridTextRow FieldName="UnitPrice" />
          <dx:VerticalGridTextRow FieldName="Quantity" />
      </Rows>        
      <Settings ShowSummaryPanel="true" />
      <TotalSummary>
          <dx:ASPxVerticalGridSummaryItem FieldName="Total" SummaryType="Custom" ShowInColumn="UnitPrice" 
              DisplayFormat="Total price for selected products: {0:c}" ValueDisplayFormat="{0}:c" />
      </TotalSummary>        
  </dx:ASPxVerticalGrid>
  

  C#

  protected void ASPxVerticalGrid1_CustomSummaryCalculate(object sender, DevExpress.Data.CustomSummaryEventArgs e) {
      // your code
  }
  

  VB.NET

  Protected Sub ASPxVerticalGrid1_CustomSummaryCalculate(ByVal sender As Object, ByVal e As DevExpress.Data.CustomSummaryEventArgs)
      ' your code
  End Sub
  

See demo

Validation

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

• Validate Records - RecordValidating

  ASPX

  <dx:ASPxVerticalGrid ID="VerticalGrid" OnRecordValidating="VerticalGrid_RecordValidating" ... >
      <Rows>
          <!-- ... -->
      </Rows>
      <SettingsEditing Mode="Batch" />
  </dx:ASPxVerticalGrid>
  

  C#

  protected void VerticalGrid_RecordValidating(object sender, ASPxVerticalGridDataValidationEventArgs e){
      foreach (VerticalGridRow row in VerticalGrid.Rows){
          VerticalGridDataRow dataRow = row as VerticalGridDataRow;
          if (dataRow == null) continue;
          if (e.NewValues[dataRow.FieldName] == null)
              e.Errors[dataRow] = "Value cannot be null.";
      }
      //...
  }
  

  VB.NET

  Protected Sub VerticalGrid_RecordValidating(ByVal sender As Object, ByVal e As ASPxVerticalGridDataValidationEventArgs)
      For Each row As VerticalGridRow In VerticalGrid.Rows
          Dim dataRow As VerticalGridDataRow = TryCast(row, VerticalGridDataRow)
          If dataRow Is Nothing Then Continue For
          If e.NewValues(dataRow.FieldName) Is Nothing Then e.Errors(dataRow) = "Value cannot be null."
      Next
  End Sub
  

• Validate Edit Cells - ValidationSettings

  ASPX

  <dx:ASPxVerticalGrid ID="VerticalGrid" runat="server" KeyFieldName="ProductID" ...>
      <Rows>
          ...
          <dx:VerticalGridTextRow FieldName="ProductName">
              <PropertiesTextEdit>
                  <ValidationSettings>
                      <RequiredField ErrorText="Custom Error Text" IsRequired="true" />
                  </ValidationSettings>
              </PropertiesTextEdit>
          </dx:VerticalGridTextRow>
          ...
      </Rows>
      <SettingsEditing Mode="Batch" />
  </dx:ASPxVerticalGrid>
  

• Custom Validation - EnableCustomValidation

  ASPX

  <dx:ASPxVerticalGrid ID="VerticalGrid" runat="server" KeyFieldName="ProductID" ...>
      <Rows>
          ...
          <dx:VerticalGridComboBoxRow FieldName="CategoryID" Caption="Category Name">
              <PropertiesComboBox ClientInstanceName="comboBox" ...>
                  <ValidationSettings EnableCustomValidation="true" ValidateOnLeave="false" />
                  <ClientSideEvents TextChanged="onChanged" />
              </PropertiesComboBox>
          </dx:VerticalGridComboBoxRow>
      </Rows>
      <SettingsEditing Mode="Batch" />
  </dx:ASPxVerticalGrid>
  

  JS

  function onChanged(s, e) {
      if (comboBox.GetText() == 'Produce') {
          comboBox.SetIsValid(false);
          comboBox.SetErrorText('invalid value');
      }
  } 
  

Learn more

Export

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

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

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

See demo

Built-In Pager

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

<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

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

See demo

Customization Tools

Toolbar

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

<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

<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

<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

Implements

Show 17 items

IComponent

IDisposable

IParserAccessor

IDataBindingsAccessor

IControlBuilderAccessor

IControlDesignerAccessor

IExpressionsAccessor

IAttributeAccessor

IUrlResolutionService

INamingContainer

IPostBackDataHandler

IPostBackEventHandler

ICallbackEventHandler

IDataSourceViewSchemaAccessor

DevExpress.Data.IDataControllerSort

IPropertiesOwner

IBasePrintable

Inheritance

Object

Control

WebControl

ASPxWebControlBase

ASPxWebControl

ASPxDataWebControlBase

ASPxDataWebControl

ASPxGridBase

ASPxVerticalGrid

MVCxVerticalGrid