Data Grid - Local Virtual Scrolling

If the DataGrid component is bound to a large dataset, you can enable the virtual scroll feature to optimize data load times and improve user navigation. The component calculates the overall number of visible rows and displays a scrollbar that allows users to navigate to any section of rows. When users release the scroll thumb, the control loads records to be displayed in the viewport and removes other rows from memory.

To allow users to scroll the DataGrid virtually, set the scrolling.mode 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("gridContainer") .ShowBorders(true) .CustomizeColumns(@<text> function(columns) { columns[0].width = 70; columns[4].dataType = "date"; } </text>) .LoadPanel(loadPanel => loadPanel.Enabled(true)) .Scrolling( scrolling => scrolling.Mode(GridScrollingMode.Virtual)) .Sorting(sorting => sorting.Mode(GridSortingMode.None)) .DataSource(d => d.WebApi().Controller("DataGridScrolling").Key("Id")) .OnContentReady("onContentReady") ) <script> function onContentReady(e) { e.component.option("loadPanel.enabled", false); } </script>

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 VirtualScrolling() { return View(); } } }

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using System; using System.Collections.Generic; using System.Net.Http; using System.Web.Http; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { public class DataGridScrollingController : ApiController { [HttpGet] public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) { return Request.CreateResponse(DataSourceLoader.Load(GenerateData(100000), loadOptions)); } IEnumerable<User> GenerateData(int count) { var surnames = new[] { "Smith", "Johnson", "Brown", "Taylor", "Anderson", "Harris", "Clark", "Allen", "Scott", "Carter" }; var names = new[] { "James", "John", "Robert", "Christopher", "George", "Mary", "Nancy", "Sandra", "Michelle", "Betty" }; var gender = new[] { "Male", "Female" }; var startBirthDate = DateTime.Parse("1/1/1975"); var endBirthDate = DateTime.Parse("1/1/1992"); double s = 123456789; Func<double> random = () => { s = (1103515245 * s + 12345) % 2147483647; return s % (names.Length - 1); }; for(var i = 0; i < count; i++) { var birthDate = new DateTime(startBirthDate.Ticks + Convert.ToInt64(Math.Floor(random() * (endBirthDate.Ticks - startBirthDate.Ticks) / 10))); birthDate.AddHours(12); var nameIndex = Convert.ToInt32(random()); yield return new User { Id = i + 1, FirstName = names[nameIndex], LastName = surnames[Convert.ToInt32(random())], Gender = gender[Convert.ToInt32(Math.Floor(Convert.ToDouble(nameIndex / 5)))], BirthDate = birthDate }; } } } }

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class User { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Gender { get; set; } public DateTime BirthDate { get; set; } } }

#gridContainer { height: 440px; }

In this demo, the DataGrid is bound to a local dataset of 100,000 records. You can drag the scrollbar on the right to see that records within the viewport are updated immediately.