@using DevExtreme.NETCore.Demos.Models
@model IEnumerable<OrderWithCustomerInfo>
@{
var filterValue = new object[] {
new object[] { "Employee", FilterBuilderFieldFilterOperations.Equal, "Clark Morgan" },
"and",
new object[] { "OrderDate", "weekends" }
};
}
@(Html.DevExtreme().DataGrid<OrderWithCustomerInfo>()
.ID("gridContainer")
.Height(440)
.ShowBorders(true)
.FilterPanel(f => f.Visible(true))
.HeaderFilter(h => h.Visible(true))
.Scrolling(s => s.Mode(GridScrollingMode.Infinite))
.DataSource(Model, "ID")
.FilterValue(filterValue)
.FilterBuilder(f =>
f.CustomOperations(co => {
var o = co.Add();
o.Name("weekends");
o.Caption("Weekends");
o.DataTypes(new[] { FilterBuilderFieldDataType.Date });
o.Icon("check");
o.HasValue(false);
o.CalculateFilterExpression("calculateFilterExpression");
})
.AllowHierarchicalFields(true))
.FilterBuilderPopup(p =>
p.Position(pos =>
pos.At(HorizontalAlignment.Center, VerticalAlignment.Top)
.My(HorizontalAlignment.Center, VerticalAlignment.Top)
.Offset(0, 10)
)
)
.FilterRow(f => f.Visible(true))
.Columns(columns => {
columns.AddFor(m => m.OrderNumber)
.HeaderFilter(filter => filter.GroupInterval(10000));
columns.AddFor(m => m.OrderDate);
columns.AddFor(m => m.SaleAmount)
.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.CustomerInfo.StoreCity);
columns.AddFor(m => m.CustomerInfo.StoreState);
})
)
<script>
function calculateFilterExpression() {
return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
}
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 FilterPanel() {
return View(SampleData.OrdersWithCustomerInfo);
}
}
}
using System;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class ApplyFilterType {
public string Key { get; set; }
public string Name { get; set; }
}
}
using System.ComponentModel.DataAnnotations;
namespace DevExtreme.NETCore.Demos.Models {
public class CustomerInfo {
[Display(Name = "State")]
public string StoreState { get; set; }
[Display(Name = "City")]
public string StoreCity { get; set; }
}
}
using DevExtreme.NETCore.Demos.Models;
using System;
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<OrderWithCustomerInfo> OrdersWithCustomerInfo = new[] {
new OrderWithCustomerInfo {
ID = 1,
OrderNumber = 35703,
OrderDate = DateTime.Parse("2014/04/10"),
SaleAmount = 11800,
Terms = "15 Days",
TotalAmount = 12175,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "Los Angeles"
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 4,
OrderNumber = 35711,
OrderDate = DateTime.Parse("2014/01/12"),
SaleAmount = 16050,
Terms = "15 Days",
TotalAmount = 16550,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "San Jose"
},
Employee = "Jim Packard"
},
new OrderWithCustomerInfo {
ID = 5,
OrderNumber = 35714,
OrderDate = DateTime.Parse("2014/01/22"),
SaleAmount = 14750,
Terms = "15 Days",
TotalAmount = 15250,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Las Vegas",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 7,
OrderNumber = 35983,
OrderDate = DateTime.Parse("2014/02/07"),
SaleAmount = 3725,
Terms = "15 Days",
TotalAmount = 3850,
CustomerInfo = new CustomerInfo {
StoreState = "Colorado",
StoreCity = "Denver",
},
Employee = "Todd Hoffman"
},
new OrderWithCustomerInfo {
ID = 9,
OrderNumber = 36987,
OrderDate = DateTime.Parse("2014/03/11"),
SaleAmount = 14200,
Terms = "15 Days",
TotalAmount = 14800,
CustomerInfo = new CustomerInfo {
StoreState = "Utah",
StoreCity = "Salt Lake City"
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 11,
OrderNumber = 38466,
OrderDate = DateTime.Parse("2014/03/01"),
SaleAmount = 7800,
Terms = "15 Days",
TotalAmount = 8200,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "Los Angeles"
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 14,
OrderNumber = 39420,
OrderDate = DateTime.Parse("2014/02/15"),
SaleAmount = 20500,
Terms = "15 Days",
TotalAmount = 9100,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "San Jose",
},
Employee = "Jim Packard"
},
new OrderWithCustomerInfo {
ID = 15,
OrderNumber = 39874,
OrderDate = DateTime.Parse("2014/02/04"),
SaleAmount = 9050,
Terms = "30 Days",
TotalAmount = 19100,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Las Vegas",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 18,
OrderNumber = 42847,
OrderDate = DateTime.Parse("2014/02/15"),
SaleAmount = 20400,
Terms = "30 Days",
TotalAmount = 20800,
CustomerInfo = new CustomerInfo {
StoreState = "Wyoming",
StoreCity = "Casper",
},
Employee = "Todd Hoffman"
},
new OrderWithCustomerInfo {
ID = 19,
OrderNumber = 43982,
OrderDate = DateTime.Parse("2014/05/29"),
SaleAmount = 6050,
Terms = "30 Days",
TotalAmount = 6250,
CustomerInfo = new CustomerInfo {
StoreState = "Utah",
StoreCity = "Salt Lake City",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 29,
OrderNumber = 56272,
OrderDate = DateTime.Parse("2014/02/06"),
SaleAmount = 15850,
Terms = "30 Days",
TotalAmount = 16350,
CustomerInfo = new CustomerInfo {
StoreState = "Utah",
StoreCity = "Salt Lake City",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 30,
OrderNumber = 57429,
OrderDate = DateTime.Parse("2013/12/31"),
SaleAmount = 11050,
Terms = "30 Days",
TotalAmount = 11400,
CustomerInfo = new CustomerInfo {
StoreState = "Arizona",
StoreCity = "Phoenix",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 32,
OrderNumber = 58292,
OrderDate = DateTime.Parse("2014/05/13"),
SaleAmount = 13500,
Terms = "15 Days",
TotalAmount = 13800,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "Los Angeles",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 36,
OrderNumber = 62427,
OrderDate = DateTime.Parse("2014/01/27"),
SaleAmount = 23500,
Terms = "15 Days",
TotalAmount = 24000,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Las Vegas",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 39,
OrderNumber = 65977,
OrderDate = DateTime.Parse("2014/02/05"),
SaleAmount = 2550,
Terms = "15 Days",
TotalAmount = 2625,
CustomerInfo = new CustomerInfo {
StoreState = "Wyoming",
StoreCity = "Casper",
},
Employee = "Todd Hoffman"
},
new OrderWithCustomerInfo {
ID = 40,
OrderNumber = 66947,
OrderDate = DateTime.Parse("2014/03/23"),
SaleAmount = 3500,
Terms = "15 Days",
TotalAmount = 3600,
CustomerInfo = new CustomerInfo {
StoreState = "Utah",
StoreCity = "Salt Lake City",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 42,
OrderNumber = 68428,
OrderDate = DateTime.Parse("2014/04/10"),
SaleAmount = 10500,
Terms = "15 Days",
TotalAmount = 10900,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "Los Angeles",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 43,
OrderNumber = 69477,
OrderDate = DateTime.Parse("2014/03/09"),
SaleAmount = 14200,
Terms = "15 Days",
TotalAmount = 14500,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "Anaheim",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 46,
OrderNumber = 72947,
OrderDate = DateTime.Parse("2014/01/14"),
SaleAmount = 13350,
Terms = "30 Days",
TotalAmount = 13650,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Las Vegas",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 47,
OrderNumber = 73088,
OrderDate = DateTime.Parse("2014/03/25"),
SaleAmount = 8600,
Terms = "30 Days",
TotalAmount = 8850,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Reno",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 50,
OrderNumber = 76927,
OrderDate = DateTime.Parse("2014/04/27"),
SaleAmount = 9800,
Terms = "30 Days",
TotalAmount = 10050,
CustomerInfo = new CustomerInfo {
StoreState = "Utah",
StoreCity = "Salt Lake City",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 51,
OrderNumber = 77297,
OrderDate = DateTime.Parse("2014/04/30"),
SaleAmount = 10850,
Terms = "30 Days",
TotalAmount = 11100,
CustomerInfo = new CustomerInfo {
StoreState = "Arizona",
StoreCity = "Phoenix",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 56,
OrderNumber = 84744,
OrderDate = DateTime.Parse("2014/02/10"),
SaleAmount = 4650,
Terms = "30 Days",
TotalAmount = 4750,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Las Vegas",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 57,
OrderNumber = 85028,
OrderDate = DateTime.Parse("2014/05/17"),
SaleAmount = 2575,
Terms = "30 Days",
TotalAmount = 2625,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Reno",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 59,
OrderNumber = 87297,
OrderDate = DateTime.Parse("2014/04/21"),
SaleAmount = 14200,
Terms = "30 Days",
CustomerInfo = new CustomerInfo {
StoreState = "Wyoming",
StoreCity = "Casper",
},
Employee = "Todd Hoffman"
},
new OrderWithCustomerInfo {
ID = 60,
OrderNumber = 88027,
OrderDate = DateTime.Parse("2014/02/14"),
SaleAmount = 13650,
Terms = "30 Days",
TotalAmount = 14050,
CustomerInfo = new CustomerInfo {
StoreState = "Utah",
StoreCity = "Salt Lake City",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 65,
OrderNumber = 94726,
OrderDate = DateTime.Parse("2014/05/22"),
SaleAmount = 20500,
Terms = "15 Days",
TotalAmount = 20800,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "San Jose",
},
Employee = "Jim Packard"
},
new OrderWithCustomerInfo {
ID = 66,
OrderNumber = 95266,
OrderDate = DateTime.Parse("2014/03/10"),
SaleAmount = 9050,
Terms = "15 Days",
TotalAmount = 9250,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Las Vegas",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 69,
OrderNumber = 98477,
OrderDate = DateTime.Parse("2014/01/01"),
SaleAmount = 23500,
Terms = "15 Days",
TotalAmount = 23800,
CustomerInfo = new CustomerInfo {
StoreState = "Wyoming",
StoreCity = "Casper",
},
Employee = "Todd Hoffman"
},
new OrderWithCustomerInfo {
ID = 70,
OrderNumber = 99247,
OrderDate = DateTime.Parse("2014/02/08"),
SaleAmount = 2100,
Terms = "15 Days",
TotalAmount = 2150,
CustomerInfo = new CustomerInfo {
StoreState = "Utah",
StoreCity = "Salt Lake City",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 78,
OrderNumber = 174884,
OrderDate = DateTime.Parse("2014/04/10"),
SaleAmount = 7200,
Terms = "30 Days",
TotalAmount = 7350,
CustomerInfo = new CustomerInfo {
StoreState = "Colorado",
StoreCity = "Denver",
},
Employee = "Todd Hoffman"
},
new OrderWithCustomerInfo {
ID = 81,
OrderNumber = 188877,
OrderDate = DateTime.Parse("2014/02/11"),
SaleAmount = 8750,
Terms = "30 Days",
TotalAmount = 8900,
CustomerInfo = new CustomerInfo {
StoreState = "Arizona",
StoreCity = "Phoenix",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 82,
OrderNumber = 191883,
OrderDate = DateTime.Parse("2014/02/05"),
SaleAmount = 9900,
Terms = "30 Days",
TotalAmount = 10150,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "Los Angeles",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 83,
OrderNumber = 192474,
OrderDate = DateTime.Parse("2014/01/21"),
SaleAmount = 12800,
Terms = "30 Days",
TotalAmount = 13100,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "Anaheim",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 84,
OrderNumber = 193847,
OrderDate = DateTime.Parse("2014/03/21"),
SaleAmount = 14100,
Terms = "30 Days",
TotalAmount = 14350,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "San Diego",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 85,
OrderNumber = 194877,
OrderDate = DateTime.Parse("2014/03/06"),
SaleAmount = 4750,
Terms = "30 Days",
TotalAmount = 4950,
CustomerInfo = new CustomerInfo {
StoreState = "California",
StoreCity = "San Jose",
},
Employee = "Jim Packard"
},
new OrderWithCustomerInfo {
ID = 86,
OrderNumber = 195746,
OrderDate = DateTime.Parse("2014/05/26"),
SaleAmount = 9050,
Terms = "30 Days",
TotalAmount = 9250,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Las Vegas",
},
Employee = "Harv Mudd"
},
new OrderWithCustomerInfo {
ID = 87,
OrderNumber = 197474,
OrderDate = DateTime.Parse("2014/03/02"),
SaleAmount = 6400,
Terms = "30 Days",
TotalAmount = 6600,
CustomerInfo = new CustomerInfo {
StoreState = "Nevada",
StoreCity = "Reno",
},
Employee = "Clark Morgan"
},
new OrderWithCustomerInfo {
ID = 88,
OrderNumber = 198746,
OrderDate = DateTime.Parse("2014/05/09"),
SaleAmount = 15700,
Terms = "30 Days",
TotalAmount = 16050,
CustomerInfo = new CustomerInfo {
StoreState = "Colorado",
StoreCity = "Denver",
},
Employee = "Todd Hoffman"
},
new OrderWithCustomerInfo {
ID = 91,
OrderNumber = 214222,
OrderDate = DateTime.Parse("2014/02/08"),
SaleAmount = 11050,
Terms = "30 Days",
TotalAmount = 11250,
CustomerInfo = new CustomerInfo {
StoreState = "Arizona",
StoreCity = "Phoenix",
},
Employee = "Clark Morgan"
}
};
}
}
using System;
using System.ComponentModel.DataAnnotations;
namespace DevExtreme.NETCore.Demos.Models {
public class OrderWithCustomerInfo {
public int ID { get; set; }
[Display(Name = "Invoice Number")]
public int OrderNumber { get; set; }
public DateTime OrderDate { get; set; }
public int SaleAmount { get; set; }
public string Terms { get; set; }
public int TotalAmount { get; set; }
public CustomerInfo CustomerInfo { get; set; }
public string Employee { get; set; }
}
}
.demo-container {
height: 570px;
}
#gridContainer {
height: 440px;
}
.dx-filterbuilder-overlay .dx-scrollable-container {
max-height: 400px;
}