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 List<DevExtreme.MVC.Demos.Models.SelectedEmployee> @(Html.DevExtreme().RangeSelector() .ID("range-selector-demo") .Margin(m => m.Top(20)) .Size(s => s.Height(140)) .DataSource(Model) .DataSourceField("BirthYear") .Scale(s => s.TickInterval(1).MinorTickInterval(1)) .Behavior(b => b.CallValueChanged(ValueChangedCallMode.OnMoving)) .Title("Filter Employee List by Birth Year") .OnValueChanged("rangeSelector_valueChanged") ) <script> var _employees = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); function showEmployees(employees) { var employee, tableHtml; if($('#selectedEmployees').length === 0) { $('#range-selector-demo').append("<center><h2>Selected Employees</h2> <div id='selectedEmployees' /></center>"); } $('#selectedEmployees').empty(); tableHtml = '<table><tr>'; $.each(['First Name', 'Last Name', 'Birth Year', 'City', 'Title'], function() { tableHtml += '<td><b>' + this + '</b></td>'; }); tableHtml += '</tr>'; $.each(employees, function() { tableHtml += '<tr><td>' + this.FirstName + '</td><td>' + this.LastName + '</td><td>' + this.BirthYear + '</td><td>' + this.City + '</td><td>' + this.Title + '</td></tr>'; }); tableHtml += '</table>'; $('#selectedEmployees').html(tableHtml); }; function rangeSelector_valueChanged(e) { var selectedEmployees = $.grep(_employees, function(employee) { return employee.BirthYear >= e.value[0] && employee.BirthYear <= e.value[1]; }); showEmployees(selectedEmployees); } $(function() { showEmployees(_employees); }); </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult UseRangeSelectionForFiltering() { return View(SampleData.SelectedEmployees); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.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.MVC.Demos.Models.SampleData { public partial class SampleData { public static List<SelectedEmployee> SelectedEmployees = new List<SelectedEmployee>() { 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" } }; } }
#range-selector-demo { height: 440px; width: 100%; } h2 { margin-top: 38px; text-align: center; } table { width: 100%; } td { width: 20%; }