Your search did not match any results.
Range Selector

Use Range Selection for Filtering

Documentation

The RangeSelector widget allows you to handle changes of the currently selected range. For this purpose, the callback function is specified in the onValueChanged option. This demo illustrates how to use the newly selected range for filtering data.

@model IEnumerable<DevExtreme.NETCore.Demos.Models.SelectedEmployee> @(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m.Top(20)) .DataSource(Model) .DataSourceField("BirthYear") .Scale(s => s .TickInterval(1) .MinorTickInterval(1) .Label(f => f.Format(Format.Decimal))) .Behavior(b => b.CallValueChanged(ValueChangedCallMode.OnMoving)) .Title("Filter Employee List by Birth Year") .OnValueChanged("rangeSelector_valueChanged") ) <h2 class="grid-header">Selected Employees</h2> @(Html.DevExtreme().DataGrid() .ID("data-grid") .DataSource(Model) .ShowBorders(true) .ColumnAutoWidth(true) .Columns(c => { c.Add().DataField("FirstName"); c.Add().DataField("LastName"); c.Add().DataField("BirthYear"); c.Add().DataField("City"); c.Add().DataField("Title"); }) ) <script> var _employees = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); function rangeSelector_valueChanged(e) { var selectedEmployees = $.grep(_employees, function(employee) { return employee.BirthYear >= e.value[0] && employee.BirthYear <= e.value[1]; }); $("#data-grid").dxDataGrid({ dataSource: selectedEmployees }); } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult UseRangeSelectionForFiltering() { return View(SampleData.SelectedEmployees); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class SelectedEmployee { public string LastName { get; set; } public string FirstName { get; set; } public int BirthYear { get; set; } public string City { get; set; } public string Title { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<SelectedEmployee> SelectedEmployees = new[] { new SelectedEmployee() { LastName = "Davolio", FirstName = "Nancy", BirthYear = 1948, City = "Seattle", Title = "Sales Representative" }, new SelectedEmployee() { LastName = "Fuller", FirstName = "Andrew", BirthYear = 1952, City = "Tacoma", Title = "Vice President, Sales" }, new SelectedEmployee() { LastName = "Leverling", FirstName = "Janet", BirthYear = 1963, City = "Kirkland", Title = "Sales Representative" }, new SelectedEmployee() { LastName = "Peacock", FirstName = "Margaret", BirthYear = 1937, City = "Redmond", Title = "Sales Representative" }, new SelectedEmployee() { LastName = "Buchanan", FirstName = "Steven", BirthYear = 1955, City = "London", Title = "Sales Manager" }, new SelectedEmployee() { LastName = "Suyama", FirstName = "Michael", BirthYear = 1963, City = "London", Title = "Sales Representative" }, new SelectedEmployee() { LastName = "King", FirstName = "Robert", BirthYear = 1960, City = "London", Title = "Sales Representative" }, new SelectedEmployee() { LastName = "Callahan", FirstName = "Laura", BirthYear = 1958, City = "Seattle", Title = "Inside Sales Coordinator" }, new SelectedEmployee() { LastName = "Dodsworth", FirstName = "Anne", BirthYear = 1966, City = "London", Title = "Sales Representative" } }; } }
h2.grid-header { font-size: 20px; margin: 38px 0 10px; text-align: center; } #range-selector { height: 140px; }