Data Grid - Horizontal Virtual Scrolling

Horizontal virtual scrolling improves performance by rendering only displayed columns. To enable this feature, set scrolling.columnRenderingMode to "virtual".

Backend API

@(Html.DevExtreme().DataGrid() .ID("grid") .Scrolling(scrolling => scrolling.ColumnRenderingMode(GridColumnRenderingMode.Virtual)) .Paging(paging => paging.Enabled(false)) .DataSource(d => d.WebApi().Controller("DataGridHorizontalScrolling").Key("field1")) .ColumnWidth(100) .ShowBorders(true) )

using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.DataGrid; using DevExtreme.MVC.Demos.Models.SampleData; using System; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DataGridController : Controller { public ActionResult HorizontalVirtualScrolling() { return View(); } } }

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using System; using System.Collections.Generic; using System.Net.Http; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class DataGridHorizontalScrollingController : ApiController { [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(GenerateData(50, 500), loadOptions)); } IEnumerable<object> GenerateData(int rowCount, int columnCount) { for(var i = 0; i < rowCount; i++) { var item = new Dictionary<string, object>(); for(var j = 0; j < columnCount; j++) { item[string.Format("field{0}", j + 1)] = string.Format("{0}-{1}", i + 1, j + 1); } yield return item; } } } }

#grid { max-height: 440px; }

You can scroll the component's data horizontally using Shift + Scroll Wheel. Utilize the Home/End keys to jump to the focused row's first/last cells, and Ctrl + Home/Ctrl + End to jump to the first cell of the first row/last cell of the last row.