Data Grid - Horizontal Virtual Scrolling

Horizontal virtual scrolling improves the rendering performance because the DataGrid only renders columns that are in the viewpoint. To enable this feature, set the scrolling.columnRenderingMode property to "virtual".

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

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

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

using System.Collections.Generic; using System.Dynamic; using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class DataGridHorizontalScrollingController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(GenerateData(50, 500), loadOptions); } IEnumerable<object> GenerateData(int rowCount, int columnCount) { for(var i = 0; i < rowCount; i++) { var item = new ExpandoObject() as IDictionary<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; }