Vertical Scrolling

This demo illustrates the Grid View control's vertical scrolling capability.

By default, the grid height is determined by the number of rows displayed within a page. To reduce the grid's height, display the vertical scrollbar using the Settings.VerticalScrollBarMode property, and specify the height of the scrollable area (in pixels) using the Settings.VerticalScrollableHeight property.

The Settings.VerticalScrollBarMode property accepts the following values:

  • Auto - The scrollbar is automatically shown when the size of the control content exceeds the size of the control itself.
  • Hidden - The scrollbar is hidden.
  • Visible - The scrollbar is visible.
10248VINETBuchanan7/4/201432Vins et alcools ChevalierReimsFrance
10249TOMSPSuyama7/5/201412Toms SpezialitätenMünsterGermany
10250HANARPeacock7/8/201466Hanari CarnesRio de JaneiroBrazil
10251VICTELeverling7/8/201441Victuailles en stockLyonFrance
10252SUPRDPeacock7/9/201451Suprêmes délicesCharleroiBelgium
10253HANARLeverling7/10/201458Hanari CarnesRio de JaneiroBrazil
10254CHOPSBuchanan7/11/201423Chop-suey ChineseBernSwitzerland
10255RICSUDodsworth7/12/2014148Richter SupermarktGenèveSwitzerland
10256WELLILeverling7/15/201414Wellington ImportadoraResendeBrazil
10257HILAAPeacock7/16/201482HILARION-AbastosSan CristóbalVenezuela
10258ERNSHDavolio7/17/2014141Ernst HandelGrazAustria
10259CENTCPeacock7/18/20143Centro comercial MoctezumaMéxico D.F.Mexico
10260OTTIKPeacock7/19/201455Ottilies KäseladenKölnGermany
10261QUEDEPeacock7/19/20143Que DelíciaRio de JaneiroBrazil
10262RATTCCallahan7/22/201448Rattlesnake Canyon GroceryAlbuquerqueUSA
10263ERNSHDodsworth7/23/2014146Ernst HandelGrazAustria
10264FOLKOSuyama7/24/20144Folk och fä HBBräckeSweden
10265BLONPFuller7/25/201455Blondel père et filsStrasbourgFrance
10266WARTHLeverling7/26/201426Wartian HerkkuOuluFinland
10267FRANKPeacock7/29/2014209FrankenversandMünchenGermany
ASPXCopy 
<dx:BootstrapGridView runat="server" AutoGenerateColumns="False" Width="100%"
    DataSourceID="OrdersDataSource" KeyFieldName="OrderID">
    <Settings VerticalScrollableHeight="300" VerticalScrollBarMode="Auto" />
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="OrderID" Width="80" />
        <dx:BootstrapGridViewTextColumn FieldName="CustomerID" />
        <dx:BootstrapGridViewComboBoxColumn FieldName="EmployeeID" Caption="Employee">
            <PropertiesComboBox DataSourceID="EmployeesDataSource" ValueType="System.Int32" ValueField="EmployeeID" TextField="LastName" />
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewDateColumn FieldName="OrderDate" Width="100" />
        <dx:BootstrapGridViewTextColumn FieldName="Freight" Width="80" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipName" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipCity" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipCountry" />
    </Columns>
    <SettingsPager PageSize="20" NumericButtonCount="6">
        <Summary Visible="false" />
        <PageSizeItemSettings Visible="true" ShowAllItem="true" />
    </SettingsPager>
</dx:BootstrapGridView>

Horizontal Scrolling

This demo illustrates the Grid View control's horizontal scrolling capability.

Use the Settings.HorizontalScrollBarMode property to specify the horizontal scrollbar's display mode. This property accepts the following values:

  • Auto - The scrollbar is automatically shown when the size of the control content exceeds the size of the control itself.
  • Hidden - The scrollbar is hidden.
  • Visible - The scrollbar is visible.
Order ID
Customer ID
Employee
Order Date
Required Date
Shipped Date
Freight
Ship Name
Ship City
Ship Region
Ship Postal Code
Ship Country
10248VINETBuchanan7/4/20148/1/20147/16/201432Vins et alcools ChevalierReims 51100France
10249TOMSPSuyama7/5/20148/16/20147/10/201412Toms SpezialitätenMünster 44087Germany
10250HANARPeacock7/8/20148/5/20147/12/201466Hanari CarnesRio de JaneiroRJ05454-876Brazil
10251VICTELeverling7/8/20148/5/20147/15/201441Victuailles en stockLyon 69004France
10252SUPRDPeacock7/9/20148/6/20147/11/201451Suprêmes délicesCharleroi B-6000Belgium
10253HANARLeverling7/10/20147/24/20147/16/201458Hanari CarnesRio de JaneiroRJ05454-876Brazil
ASPXCopy 
<dx:BootstrapGridView runat="server" AutoGenerateColumns="False" Width="100%"
    DataSourceID="OrdersDataSource" KeyFieldName="OrderID">
    <Settings HorizontalScrollBarMode="Auto" />
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="OrderID" Width="90" />
        <dx:BootstrapGridViewTextColumn FieldName="CustomerID" Width="120" />
        <dx:BootstrapGridViewComboBoxColumn FieldName="EmployeeID" Caption="Employee" Width="120">
            <PropertiesComboBox DataSourceID="EmployeesDataSource" ValueType="System.Int32" ValueField="EmployeeID" TextField="LastName" />
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewDateColumn FieldName="OrderDate" Width="100" />
        <dx:BootstrapGridViewDateColumn FieldName="RequiredDate" Width="130" />
        <dx:BootstrapGridViewDateColumn FieldName="ShippedDate" Width="120" />
        <dx:BootstrapGridViewTextColumn FieldName="Freight" Width="90" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipName" Width="200" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipCity" Width="100" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipRegion" Width="120" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipPostalCode" Width="140" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipCountry" Width="120" />
    </Columns>
    <SettingsPager PageSize="6" NumericButtonCount="6" />
</dx:BootstrapGridView>

Virtual Paging

The Grid View control supports a virtual paging mode that allows end-users to navigate through grid pages using the vertical scroll bar. The vertical scroll bar can be used with or without the built-in pager to dynamically load requested page data using callbacks.

Use the Settings.VerticalScrollBarStyle property to activate virtual paging. This property allows the following values:

  • Standard - The vertical scrollbar operates in the standard way; it scrolls data rows displayed within the current page.
  • Virtual - Enables the virtual paging mode. End-users can navigate through data rows using the vertical scrollbar. When a scroll button is clicked, the Grid View switches to the next/previous page.
  • VirtualSmooth - Enables the virtual paging mode. End-users can navigate through data rows using the vertical scrollbar. When a scroll button is clicked, the Grid View smoothly scrolls data.

In this demo, the Settings.VerticalScrollBarStyle property is set to VirtualSmooth.

10248VINETBuchanan7/4/201432Vins et alcools ChevalierReimsFrance
10249TOMSPSuyama7/5/201412Toms SpezialitätenMünsterGermany
10250HANARPeacock7/8/201466Hanari CarnesRio de JaneiroBrazil
10251VICTELeverling7/8/201441Victuailles en stockLyonFrance
10252SUPRDPeacock7/9/201451Suprêmes délicesCharleroiBelgium
10253HANARLeverling7/10/201458Hanari CarnesRio de JaneiroBrazil
10254CHOPSBuchanan7/11/201423Chop-suey ChineseBernSwitzerland
10255RICSUDodsworth7/12/2014148Richter SupermarktGenèveSwitzerland
10256WELLILeverling7/15/201414Wellington ImportadoraResendeBrazil
10257HILAAPeacock7/16/201482HILARION-AbastosSan CristóbalVenezuela
10258ERNSHDavolio7/17/2014141Ernst HandelGrazAustria
10259CENTCPeacock7/18/20143Centro comercial MoctezumaMéxico D.F.Mexico
10260OTTIKPeacock7/19/201455Ottilies KäseladenKölnGermany
10261QUEDEPeacock7/19/20143Que DelíciaRio de JaneiroBrazil
10262RATTCCallahan7/22/201448Rattlesnake Canyon GroceryAlbuquerqueUSA
10263ERNSHDodsworth7/23/2014146Ernst HandelGrazAustria
10264FOLKOSuyama7/24/20144Folk och fä HBBräckeSweden
10265BLONPFuller7/25/201455Blondel père et filsStrasbourgFrance
10266WARTHLeverling7/26/201426Wartian HerkkuOuluFinland
10267FRANKPeacock7/29/2014209FrankenversandMünchenGermany
10268GROSRCallahan7/30/201466GROSELLA-RestauranteCaracasVenezuela
10269WHITCBuchanan7/31/20145White Clover MarketsSeattleUSA
10270WARTHDavolio8/1/2014137Wartian HerkkuOuluFinland
10271SPLIRSuyama8/1/20145Split Rail Beer & AleLanderUSA
10272RATTCSuyama8/2/201498Rattlesnake Canyon GroceryAlbuquerqueUSA
10273QUICKLeverling8/5/201476QUICK-StopCunewaldeGermany
10274VINETSuyama8/6/20146Vins et alcools ChevalierReimsFrance
10275MAGAADavolio8/7/201427Magazzini Alimentari RiunitiBergamoItaly
10276TORTUCallahan8/8/201414Tortuga RestauranteMéxico D.F.Mexico
10277MORGKFuller8/9/2014126Morgenstern GesundkostLeipzigGermany
ASPXCopy 
<dx:BootstrapGridView runat="server" AutoGenerateColumns="False" Width="100%"
    DataSourceID="OrdersDataSource">
    <Settings VerticalScrollBarMode="Visible" VerticalScrollBarStyle="VirtualSmooth" />
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="OrderID" Width="80" />
        <dx:BootstrapGridViewTextColumn FieldName="CustomerID" />
        <dx:BootstrapGridViewComboBoxColumn FieldName="EmployeeID" Caption="Employee">
            <PropertiesComboBox DataSourceID="EmployeesDataSource" ValueType="System.Int32" ValueField="EmployeeID" TextField="LastName" />
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewDateColumn FieldName="OrderDate" Width="100" />
        <dx:BootstrapGridViewTextColumn FieldName="Freight" Width="80" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipName" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipCity" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipCountry" />
    </Columns>
    <SettingsPager PageSize="20" NumericButtonCount="6" />
</dx:BootstrapGridView>

Fixed Columns

The Grid View control allows you to anchor columns to the left edge. When fixed, columns are always displayed, and not scrolled horizontally with the grid. This feature is active when horizontal scrolling is enabled via the Settings.HorizontalScrollBarMode property, and the total width of the columns exceeds the grid's width. To fix a column, set its Fixed property value to true. Non-fixed columns (whose Fixed property is set to false) cannot be positioned before fixed columns.

Fixed columns support complex layout scenarios that utilize such features as grouping, detail rows, preview rows and row templates. This demo illustrates the use of fixed columns within a grouped grid.

Contact Name
Company Name
City
Region
Address
Postal Code
Phone
Fax
Country: Argentina
 Patricio SimpsonCactus Comidas para llevarBuenos Aires Cerrito 3331010(1) 135-5555(1) 135-4892
 Yvonne MoncadaOcéano Atlántico Ltda.Buenos Aires Ing. Gustavo Moncada 8585 Piso 20-A1010(1) 135-5333(1) 135-5535
 Sergio GutiérrezRancho grandeBuenos Aires Av. del Libertador 9001010(1) 123-5555(1) 123-5556
Country: Austria (Continued on the next page)
 Roland MendelErnst HandelGraz Kirchgasse 680107675-34257675-3426
ASPXCopy 
<dx:BootstrapGridView runat="server" Width="100%"
    DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <Settings HorizontalScrollBarMode="Auto" />
    <CssClasses FixedColumn="bg-light text-body" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" Width="200" Fixed="true" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" Width="250" Fixed="true" />
        <dx:BootstrapGridViewDataColumn FieldName="City" Width="130" />
        <dx:BootstrapGridViewDataColumn FieldName="Region" Width="100" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" GroupIndex="1" />
        <dx:BootstrapGridViewDataColumn FieldName="Address" Width="320" />
        <dx:BootstrapGridViewDataColumn FieldName="PostalCode" Width="150" />
        <dx:BootstrapGridViewDataColumn FieldName="Phone" Width="160" />
        <dx:BootstrapGridViewDataColumn FieldName="Fax" Width="160" />
    </Columns>
    <SettingsBehavior AutoExpandAllGroups="true" />
    <SettingsPager PageSize="6" NumericButtonCount="6" />
</dx:BootstrapGridView>

Endless Paging

The Grid View control supports the endless paging mode. This mode allows grid rows to load on demand. To enable this functionality, set the SettingsPager.Mode property to EndlessPaging. In this mode, the grid loads more rows automatically when the end-user scrolls down to the bottom of the control.

Use the Settings.VerticalScrollableHeight property to specify the scrollable area's height.

The Settings.VerticalScrollBarMode property specifies the vertical scrollbar's display mode. This property accepts the following values:

  • Auto - The scrollbar is automatically shown when the size of the control content exceeds the size of the control itself.
  • Hidden - The scrollbar is hidden.
  • Visible - The scrollbar is visible.
Drag a column header here to group by that column
Vins et alcools ChevalierReims51100France327/4/20147/16/2014
Toms SpezialitätenMünster44087Germany127/5/20147/10/2014
Hanari CarnesRio de Janeiro05454-876Brazil667/8/20147/12/2014
Victuailles en stockLyon69004France417/8/20147/15/2014
Suprêmes délicesCharleroiB-6000Belgium517/9/20147/11/2014
Hanari CarnesRio de Janeiro05454-876Brazil587/10/20147/16/2014
Chop-suey ChineseBern3012Switzerland237/11/20147/23/2014
Richter SupermarktGenève1204Switzerland1487/12/20147/15/2014
Wellington ImportadoraResende08737-363Brazil147/15/20147/17/2014
HILARION-AbastosSan Cristóbal5022Venezuela827/16/20147/22/2014
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="OrdersDataSource" Width="100%" KeyFieldName="OrderID">
    <Settings ShowGroupPanel="true" VerticalScrollBarMode="Visible" VerticalScrollableHeight="300" />
    <SettingsPager Mode="EndlessPaging" PageSize="10" />
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="ShipName" Width="200" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipCity" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipPostalCode" />
        <dx:BootstrapGridViewTextColumn FieldName="ShipCountry" />
        <dx:BootstrapGridViewTextColumn FieldName="Freight" />
        <dx:BootstrapGridViewDateColumn FieldName="OrderDate" />
        <dx:BootstrapGridViewDateColumn FieldName="ShippedDate" />
    </Columns>
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code