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/202132.3800Vins et alcools ChevalierReimsFrance
10249TOMSPSuyama7/5/202111.6100Toms SpezialitätenMünsterGermany
10250HANARPeacock7/8/202165.8300Hanari CarnesRio de JaneiroBrazil
10251VICTELeverling7/8/202141.3400Victuailles en stockLyonFrance
10252SUPRDPeacock7/9/202151.3000Suprêmes délicesCharleroiBelgium
10253HANARLeverling7/10/202158.1700Hanari CarnesRio de JaneiroBrazil
10254CHOPSBuchanan7/11/202122.9800Chop-suey ChineseBernSwitzerland
10255RICSUDodsworth7/12/2021148.3300Richter SupermarktGenèveSwitzerland
10256WELLILeverling7/15/202113.9700Wellington ImportadoraResendeBrazil
10257HILAAPeacock7/16/202181.9100HILARION-AbastosSan CristóbalVenezuela
10258ERNSHDavolio7/17/2021140.5100Ernst HandelGrazAustria
10259CENTCPeacock7/18/20213.2500Centro comercial MoctezumaMéxico D.F.Mexico
10260OTTIKPeacock7/19/202155.0900Ottilies KäseladenKölnGermany
10261QUEDEPeacock7/19/20213.0500Que DelíciaRio de JaneiroBrazil
10262RATTCCallahan7/22/202148.2900Rattlesnake Canyon GroceryAlbuquerqueUSA
10263ERNSHDodsworth7/23/2021146.0600Ernst HandelGrazAustria
10264FOLKOSuyama7/24/20213.6700Folk och fä HBBräckeSweden
10265BLONPFuller7/25/202155.2800Blondel père et filsStrasbourgFrance
10266WARTHLeverling7/26/202125.7300Wartian HerkkuOuluFinland
10267FRANKPeacock7/29/2021208.5800FrankenversandMü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/20218/1/20217/16/202132.3800Vins et alcools ChevalierReims 51100France
10249TOMSPSuyama7/5/20218/16/20217/10/202111.6100Toms SpezialitätenMünster 44087Germany
10250HANARPeacock7/8/20218/5/20217/12/202165.8300Hanari CarnesRio de JaneiroRJ05454-876Brazil
10251VICTELeverling7/8/20218/5/20217/15/202141.3400Victuailles en stockLyon 69004France
10252SUPRDPeacock7/9/20218/6/20217/11/202151.3000Suprêmes délicesCharleroi B-6000Belgium
10253HANARLeverling7/10/20217/24/20217/16/202158.1700Hanari 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/202132.3800Vins et alcools ChevalierReimsFrance
10249TOMSPSuyama7/5/202111.6100Toms SpezialitätenMünsterGermany
10250HANARPeacock7/8/202165.8300Hanari CarnesRio de JaneiroBrazil
10251VICTELeverling7/8/202141.3400Victuailles en stockLyonFrance
10252SUPRDPeacock7/9/202151.3000Suprêmes délicesCharleroiBelgium
10253HANARLeverling7/10/202158.1700Hanari CarnesRio de JaneiroBrazil
10254CHOPSBuchanan7/11/202122.9800Chop-suey ChineseBernSwitzerland
10255RICSUDodsworth7/12/2021148.3300Richter SupermarktGenèveSwitzerland
10256WELLILeverling7/15/202113.9700Wellington ImportadoraResendeBrazil
10257HILAAPeacock7/16/202181.9100HILARION-AbastosSan CristóbalVenezuela
10258ERNSHDavolio7/17/2021140.5100Ernst HandelGrazAustria
10259CENTCPeacock7/18/20213.2500Centro comercial MoctezumaMéxico D.F.Mexico
10260OTTIKPeacock7/19/202155.0900Ottilies KäseladenKölnGermany
10261QUEDEPeacock7/19/20213.0500Que DelíciaRio de JaneiroBrazil
10262RATTCCallahan7/22/202148.2900Rattlesnake Canyon GroceryAlbuquerqueUSA
10263ERNSHDodsworth7/23/2021146.0600Ernst HandelGrazAustria
10264FOLKOSuyama7/24/20213.6700Folk och fä HBBräckeSweden
10265BLONPFuller7/25/202155.2800Blondel père et filsStrasbourgFrance
10266WARTHLeverling7/26/202125.7300Wartian HerkkuOuluFinland
10267FRANKPeacock7/29/2021208.5800FrankenversandMünchenGermany
10268GROSRCallahan7/30/202166.2900GROSELLA-RestauranteCaracasVenezuela
10269WHITCBuchanan7/31/20214.5600White Clover MarketsSeattleUSA
10270WARTHDavolio8/1/2021136.5400Wartian HerkkuOuluFinland
10271SPLIRSuyama8/1/20214.5400Split Rail Beer & AleLanderUSA
10272RATTCSuyama8/2/202198.0300Rattlesnake Canyon GroceryAlbuquerqueUSA
10273QUICKLeverling8/5/202176.0700QUICK-StopCunewaldeGermany
10274VINETSuyama8/6/20216.0100Vins et alcools ChevalierReimsFrance
10275MAGAADavolio8/7/202126.9300Magazzini Alimentari RiunitiBergamoItaly
10276TORTUCallahan8/8/202113.8400Tortuga RestauranteMéxico D.F.Mexico
10277MORGKFuller8/9/2021125.7700Morgenstern 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 ChevalierReims51100France32.38007/4/20217/16/2021
Toms SpezialitätenMünster44087Germany11.61007/5/20217/10/2021
Hanari CarnesRio de Janeiro05454-876Brazil65.83007/8/20217/12/2021
Victuailles en stockLyon69004France41.34007/8/20217/15/2021
Suprêmes délicesCharleroiB-6000Belgium51.30007/9/20217/11/2021
Hanari CarnesRio de Janeiro05454-876Brazil58.17007/10/20217/16/2021
Chop-suey ChineseBern3012Switzerland22.98007/11/20217/23/2021
Richter SupermarktGenève1204Switzerland148.33007/12/20217/15/2021
Wellington ImportadoraResende08737-363Brazil13.97007/15/20217/17/2021
HILARION-AbastosSan Cristóbal5022Venezuela81.91007/16/20217/22/2021
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