@model IEnumerable<DevExtreme.MVC.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.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;
namespace DevExtreme.MVC.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;
}