Your search did not match any results.
Data Grid

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").LoadAction("Get").Key("ID")) .OnContentReady(@<text> function(e) { e.component.option("loadPanel.enabled", false); } </text>) )
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 VirtualScrolling() { return View(); } } }
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]/[action]")] public class DataGridScrollingController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return 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; namespace DevExtreme.NETCore.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; }