Your search did not match any results.
DataGrid

Virtual Scrolling

Documentation

The DataGrid widget supports virtual record scrolling, allowing end users to navigate the contents of the widget by using its vertical scrollbar. In this demo, the DataGrid is connected to 100,000 records and virtual scroll mode has been enabled to simplify record navigation and eliminate the use of data pagers.

@(Html.DevExtreme().DataGrid() .ID("gridContainer") .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(@<text> function(e) { e.component.option("loadPanel.enabled", false); } </text>) )
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 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)); } List<User> GenerateData(int count) { var data = new List<User>(); var surnames = new List<string> { "Smith", "Johnson", "Brown", "Taylor", "Anderson", "Harris", "Clark", "Allen", "Scott", "Carter" }; var names = new List<string> { "James", "John", "Robert", "Christopher", "George", "Mary", "Nancy", "Sandra", "Michelle", "Betty" }; var gender = new List<string> { "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.Count - 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()); var user = 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 }; data.Add(user); } return data; } } }
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; }