Material Light
Material Blue Light
Material Lime Light
Material Orange Light
Material Purple Light
Material Teal Light
Material Dark
Material Blue Dark
Material Lime Dark
Material Orange Dark
Material Purple Dark
Material Teal Dark
Material Light Compact
Material Blue Light Compact
Material Lime Light Compact
Material Orange Light Compact
Material Purple Light Compact
Material Teal Light Compact
Material Dark Compact
Material Blue Dark Compact
Material Lime Dark Compact
Material Orange Dark Compact
Material Purple Dark Compact
Material Teal Dark Compact
Generic Light
Generic Light
Carmine
Soft Blue
Green Mist
Generic Dark
Generic Dark
Contrast
Dark Violet
Dark Moon
Generic Light Compact
Generic Light Compact
Generic Dark Compact
Generic Dark Compact
Contrast Dark Compact
Fluent Light
Fluent Light
Fluent SaaS Light
Fluent Dark
Fluent Dark
Fluent SaaS Dark
Fluent Light Compact
Fluent Light Compact
Fluent SaaS Light Compact
Fluent Dark Compact
Fluent Dark Compact
Fluent SaaS Dark Compact
Backend API
@using DevExtreme.NETCore.Demos.Models;@(Html.DevExtreme().DataGrid<OrderWithDelivery>() .ID("gridContainer") .ShowBorders(true) .FilterRow(filterRow => filterRow .Visible(true) .ApplyFilter(GridApplyFilterMode.Auto) ) .SearchPanel(searchPanel => searchPanel .Visible(true) .Width(240) .Placeholder("Search...") ) .HeaderFilter(headerFilter => headerFilter.Visible(true)) .Columns(columns => { columns.AddFor(m => m.OrderNumber) .Width(140) .HeaderFilter(filter => filter.GroupInterval(10000)); columns.AddFor(m => m.OrderDate) .Width(120) .Alignment(HorizontalAlignment.Right) .CalculateFilterExpression(@<text> function(value, selectedFilterOperations, target) { if(target === "headerFilter" && value === "weekends") { return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]]; } return this.defaultCalculateFilterExpression.apply(this, arguments); } </text>) .HeaderFilter(filter => filter.DataSource(@<text> function(data) { data.dataSource.postProcess = function(results) { results.push({ text: "Weekends", value: "weekends" }); return results; }; } </text>)); columns.AddFor(m => m.DeliveryDate) .Width(180) .Alignment(HorizontalAlignment.Right) .Format("M/d/yyyy, HH:mm"); columns.AddFor(m => m.SaleAmount) .Alignment(HorizontalAlignment.Right) .Format(Format.Currency) .EditorOptions(new { format = "currency", showClearButton = true }) .HeaderFilter(filter => filter.DataSource(new[] { new { text = "Less than $3000", value = new object[] { "SaleAmount", "<", 3000 } }, new { text = "$3000 - $5000", value = new object[] { new object[] { "SaleAmount", ">=", 3000 }, new object[] { "SaleAmount", "<", 5000 } } }, new { text = "$5000 - $10000", value = new object[] { new object[] { "SaleAmount", ">=", 5000 }, new object[] { "SaleAmount", "<", 10000 } } }, new { text = "$10000 - $20000", value = new object[] { new object[] { "SaleAmount", ">=", 10000}, new object[] { "SaleAmount", "<", 20000}} }, new { text = "Greater than $20000", value = new object[] { "SaleAmount", ">=", 20000 } } })); columns.AddFor(m => m.Employee); columns.AddFor(m => m.CustomerStoreCity).HeaderFilter(hf => { hf.Search(hfs => hfs.Enabled(true)); }); }) .DataSource(d => d.Mvc().Controller("DataGridFiltering").LoadAction("Get").Key("ID")))<div class="options"> <div class="caption">Options</div> <div class="apply-filter option"> <span>Apply Filter</span> @{ var dataSource = new[] { new ApplyFilterType { Key = "auto", Name = "Immediately" }, new ApplyFilterType { Key = "onClick", Name = "On Button Click" } }; } @(Html.DevExtreme().SelectBox() .ID("applyFilterEditor") .DataSource(dataSource) .Value(dataSource[0].Key) .InputAttr("aria-label", "Filter") .ValueExpr("Key") .DisplayExpr("Name") .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.option("filterRow.applyFilter", data.value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Filter Row") .Value(true) .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.clearFilter(); dataGrid.option("filterRow.visible", data.value); $("#applyFilterEditor") .dxSelectBox("instance") .option("disabled", !data.value); } </text>) ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Header Filter") .Value(true) .OnValueChanged(@<text> function(data) { var dataGrid = $("#gridContainer").dxDataGrid("instance"); dataGrid.clearFilter(); dataGrid.option("headerFilter.visible", data.value); } </text>) ) </div></div><script> function getOrderDay(rowData) { return (new Date(rowData.OrderDate)).getDay(); }</script>
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 Filtering() { return View(); } }}
using DevExtreme.AspNet.Data;using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System.Net.Http;namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers { [Route("api/[controller]")] public class DataGridFilteringController : Controller { [HttpGet] public object Get(DataSourceLoadOptions loadOptions) { return DataSourceLoader.Load(SampleData.OrdersWithDelivery, loadOptions); } }}
using System;using System.Collections.Generic;namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<OrderWithDelivery> OrdersWithDelivery = new[] { new OrderWithDelivery { ID = 1, OrderNumber = 35703, OrderDate = DateTime.Parse("2017/04/10"), DeliveryDate = DateTime.Parse("2017/04/13 9:00"), SaleAmount = 11800, Terms = "15 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 4, OrderNumber = 35711, OrderDate = DateTime.Parse("2017/01/12"), DeliveryDate = DateTime.Parse("2017/01/13 9:00"), SaleAmount = 16050, Terms = "15 Days", CustomerStoreCity = "San Jose, CA", Employee = "Jim Packard" }, new OrderWithDelivery { ID = 5, OrderNumber = 35714, OrderDate = DateTime.Parse("2017/01/22"), DeliveryDate = DateTime.Parse("2017/01/27 9:00"), SaleAmount = 14750, Terms = "15 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 7, OrderNumber = 35983, OrderDate = DateTime.Parse("2017/02/07"), DeliveryDate = DateTime.Parse("2017/02/10 13:00"), SaleAmount = 3725, Terms = "15 Days", CustomerStoreCity = "Denver, CO", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 11, OrderNumber = 38466, OrderDate = DateTime.Parse("2017/03/01"), DeliveryDate = DateTime.Parse("2017/03/03 17:45"), SaleAmount = 7800, Terms = "15 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 14, OrderNumber = 39420, OrderDate = DateTime.Parse("2017/02/15"), DeliveryDate = DateTime.Parse("2017/02/17 11:45"), SaleAmount = 20500, Terms = "15 Days", CustomerStoreCity = "San Jose, CA", Employee = "Jim Packard" }, new OrderWithDelivery { ID = 15, OrderNumber = 39874, OrderDate = DateTime.Parse("2017/02/04"), DeliveryDate = DateTime.Parse("2017/02/10 15:00"), SaleAmount = 9050, Terms = "30 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 18, OrderNumber = 42847, OrderDate = DateTime.Parse("2017/02/15"), DeliveryDate = DateTime.Parse("2017/02/17 8:30"), SaleAmount = 20400, Terms = "30 Days", CustomerStoreCity = "Casper, WY", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 30, OrderNumber = 57429, OrderDate = DateTime.Parse("2017/05/16"), DeliveryDate = DateTime.Parse("2017/05/19 11:45"), SaleAmount = 11050, Terms = "30 Days", CustomerStoreCity = "Phoenix, AZ", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 32, OrderNumber = 58292, OrderDate = DateTime.Parse("2017/05/13"), DeliveryDate = DateTime.Parse("2017/05/19 14:30"), SaleAmount = 13500, Terms = "15 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 36, OrderNumber = 62427, OrderDate = DateTime.Parse("2017/01/27"), DeliveryDate = DateTime.Parse("2017/02/03 18:00"), SaleAmount = 23500, Terms = "15 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 39, OrderNumber = 65977, OrderDate = DateTime.Parse("2017/02/05"), DeliveryDate = DateTime.Parse("2017/02/10 13:15"), SaleAmount = 2550, Terms = "15 Days", CustomerStoreCity = "Casper, WY", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 42, OrderNumber = 68428, OrderDate = DateTime.Parse("2017/04/10"), DeliveryDate = DateTime.Parse("2017/04/14 11:30"), SaleAmount = 10500, Terms = "15 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 43, OrderNumber = 69477, OrderDate = DateTime.Parse("2017/03/09"), DeliveryDate = DateTime.Parse("2017/03/10 12:00"), SaleAmount = 14200, Terms = "15 Days", CustomerStoreCity = "Anaheim, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 46, OrderNumber = 72947, OrderDate = DateTime.Parse("2017/01/14"), DeliveryDate = DateTime.Parse("2017/01/20 9:00"), SaleAmount = 13350, Terms = "30 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 47, OrderNumber = 73088, OrderDate = DateTime.Parse("2017/03/25"), DeliveryDate = DateTime.Parse("2017/03/31 17:15"), SaleAmount = 8600, Terms = "30 Days", CustomerStoreCity = "Reno, NV", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 51, OrderNumber = 77297, OrderDate = DateTime.Parse("2017/04/30"), DeliveryDate = DateTime.Parse("2017/05/05 18:00"), SaleAmount = 10850, Terms = "30 Days", CustomerStoreCity = "Phoenix, AZ", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 56, OrderNumber = 84744, OrderDate = DateTime.Parse("2017/02/10"), DeliveryDate = DateTime.Parse("2017/02/17 14:00"), SaleAmount = 4650, Terms = "30 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 57, OrderNumber = 85028, OrderDate = DateTime.Parse("2017/05/17"), DeliveryDate = DateTime.Parse("2017/05/19 12:00"), SaleAmount = 2575, Terms = "30 Days", CustomerStoreCity = "Reno, NV", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 59, OrderNumber = 87297, OrderDate = DateTime.Parse("2017/04/21"), DeliveryDate = DateTime.Parse("2017/04/28 9:00"), SaleAmount = 14200, Terms = "30 Days", CustomerStoreCity = "Casper, WY", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 65, OrderNumber = 94726, OrderDate = DateTime.Parse("2017/05/22"), DeliveryDate = DateTime.Parse("2017/05/26 13:30"), SaleAmount = 20500, Terms = "15 Days", CustomerStoreCity = "San Jose, CA", Employee = "Jim Packard" }, new OrderWithDelivery { ID = 66, OrderNumber = 95266, OrderDate = DateTime.Parse("2017/03/10"), DeliveryDate = DateTime.Parse("2017/03/17 11:45"), SaleAmount = 9050, Terms = "15 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 69, OrderNumber = 98477, OrderDate = DateTime.Parse("2017/01/01"), DeliveryDate = DateTime.Parse("2017/01/06 9:00"), SaleAmount = 23500, Terms = "15 Days", CustomerStoreCity = "Casper, WY", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 78, OrderNumber = 174884, OrderDate = DateTime.Parse("2017/04/10"), DeliveryDate = DateTime.Parse("2017/04/14 8:30"), SaleAmount = 7200, Terms = "30 Days", CustomerStoreCity = "Denver, CO", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 81, OrderNumber = 188877, OrderDate = DateTime.Parse("2017/02/11"), DeliveryDate = DateTime.Parse("2017/02/17 16:00"), SaleAmount = 8750, Terms = "30 Days", CustomerStoreCity = "Phoenix, AZ", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 82, OrderNumber = 191883, OrderDate = DateTime.Parse("2017/02/05"), DeliveryDate = DateTime.Parse("2017/02/10 18:30"), SaleAmount = 9900, Terms = "30 Days", CustomerStoreCity = "Los Angeles, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 83, OrderNumber = 192474, OrderDate = DateTime.Parse("2017/01/21"), DeliveryDate = DateTime.Parse("2017/01/27 12:45"), SaleAmount = 12800, Terms = "30 Days", CustomerStoreCity = "Anaheim, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 84, OrderNumber = 193847, OrderDate = DateTime.Parse("2017/03/21"), DeliveryDate = DateTime.Parse("2017/03/24 9:00"), SaleAmount = 14100, Terms = "30 Days", CustomerStoreCity = "San Diego, CA", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 85, OrderNumber = 194877, OrderDate = DateTime.Parse("2017/03/06"), DeliveryDate = DateTime.Parse("2017/03/10 18:15"), SaleAmount = 4750, Terms = "30 Days", CustomerStoreCity = "San Jose, CA", Employee = "Jim Packard" }, new OrderWithDelivery { ID = 86, OrderNumber = 195746, OrderDate = DateTime.Parse("2017/05/26"), DeliveryDate = DateTime.Parse("2017/06/02 17:00"), SaleAmount = 9050, Terms = "30 Days", CustomerStoreCity = "Las Vegas, NV", Employee = "Harv Mudd" }, new OrderWithDelivery { ID = 87, OrderNumber = 197474, OrderDate = DateTime.Parse("2017/03/02"), DeliveryDate = DateTime.Parse("2017/03/03 11:00"), SaleAmount = 6400, Terms = "30 Days", CustomerStoreCity = "Reno, NV", Employee = "Clark Morgan" }, new OrderWithDelivery { ID = 88, OrderNumber = 198746, OrderDate = DateTime.Parse("2017/05/09"), DeliveryDate = DateTime.Parse("2017/05/12 15:45"), SaleAmount = 15700, Terms = "30 Days", CustomerStoreCity = "Denver, CO", Employee = "Todd Hoffman" }, new OrderWithDelivery { ID = 91, OrderNumber = 214222, OrderDate = DateTime.Parse("2017/02/08"), DeliveryDate = DateTime.Parse("2017/02/10 9:45"), SaleAmount = 11050, Terms = "30 Days", CustomerStoreCity = "Phoenix, AZ", Employee = "Clark Morgan" } }; }}
using System;using System.ComponentModel.DataAnnotations;namespace DevExtreme.NETCore.Demos.Models { public class OrderWithDelivery { public int ID { get; set; } [Display(Name = "Invoice Number")] public int OrderNumber { get; set; } public DateTime OrderDate { get; set; } public DateTime DeliveryDate { get; set; } public int SaleAmount { get; set; } public string Terms { get; set; } public int TotalAmount { get; set; } [Display(Name = "City")] public string CustomerStoreCity { get; set; } public string Employee { get; set; } }}
#gridContainer { height: 440px;}.options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15);}.caption { font-size: 18px; font-weight: 500;}.option { margin-top: 10px;}.option > span { margin-right: 10px;}.option > .dx-selectbox { display: inline-block; vertical-align: middle;}