Data Grid - Infinite Scrolling

If the DataGrid component is bound to a large dataset, you can enable infinite scroll mode to optimize data load times and improve user navigation. The component initially displays one page of rows. When users scroll to the end of the view, the DataGrid loads an additional page. Users can only load pages sequentially and cannot skip to arbitrary positions within the dataset.

To enable infinite scroll mode, set the scrolling.mode to "infinite".

In this demo, the DataGrid is bound to a dataset of 100,000 records. Scroll to the last record to load the next page of records.

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") .CustomizeColumns("customizeColumns") .LoadPanel(loadPanel => loadPanel.Enabled(false)) .Scrolling(scrolling => scrolling.Mode(GridScrollingMode.Infinite)) .RemoteOperations(true) .Sorting(sorting => sorting.Mode(GridSortingMode.None)) .DataSource(d => d.WebApi().Controller("DataGridScrolling").Key("Id")) .ShowBorders(true) ) <script> function customizeColumns(columns) { columns[0].width = 70; columns[4].dataType = "date"; } </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 InfiniteScrolling() { return View(); } } }

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using Newtonsoft.Json; 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; }