@using DevExtreme.MVC.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)
.Alignment(HorizontalAlignment.Right)
.Width(120)
.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)
.Alignment(HorizontalAlignment.Right)
.Width(180)
.DataType(GridColumnDataType.DateTime)
.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.AllowSearch(true));
})
.DataSource(d => d.WebApi().Controller("DataGridFiltering").Key("ID"))
)
<div class="options">
<div class="caption">Options</div>
<div class="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)
.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.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class DataGridController : Controller {
public ActionResult Filtering() {
return View();
}
}
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Net.Http;
using System.Web.Http;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
public class DataGridFilteringController : ApiController {
[HttpGet]
public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) {
return Request.CreateResponse(DataSourceLoader.Load(SampleData.OrdersWithDelivery, loadOptions));
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.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.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.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;
}