Aggregate ordering
Version 15 contains a data set of 1000 items for large testing.
by sparksterz
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="grid"></div>
CSS
.k-grid-header .k-header .k-link {
display: block;
float: left;
min-height: 18px;
line-height: 18px;
margin: -0.5em -0.6em -0.4em -0.6em;
padding: .5em .6em .4em .6em;
overflow: hidden;
white-space: nowrap;
width: 50px;
text-overflow: ellipsis;
}
.k-grid-header .k-filterable .k-link {
padding-right: 2.4em;
}
JavaScript
var dataSource = new kendo.data.DataSource({
data: [{
"State": "NY",
"City": "Rochester",
"App": "Outlook",
"DefaultMonoCPP": 0.0339,
"DefaultColorCPP": 0.0795,
"Volume": 12000,
"Cost": 2300,
"ColorVol": 8000,
"MonoVol": 4000
}, {
"State": "NY",
"City": "Rochester",
"App": "Chrome",
"DefaultMonoCPP": 0.0347,
"DefaultColorCPP": 0.0748,
"Volume": 15000,
"Cost": 2000,
"ColorVol": 8500,
"MonoVol": 6500
}, {
"State": "NY",
"City": "Rochester",
"App": "Reader",
"DefaultMonoCPP": 0.0521,
"DefaultColorCPP": 0.646,
"Volume": 5000,
"Cost": 520,
"ColorVol": 4000,
"MonoVol": 1000
}, {
"State": "NY",
"City": "Rochester",
"App": "Notepad",
"DefaultMonoCPP": 0.0323,
"DefaultColorCPP": 0.0779,
"Volume": 20000,
"Cost": 4679,
"ColorVol": 9000,
"MonoVol": 11000
}, {
"State": "NY",
"City": "Rochester",
"App": "Word",
"DefaultMonoCPP": 0.0113,
"DefaultColorCPP": 0.0219,
"Volume": 5020,
"Cost": 1790,
"ColorVol": 1000,
"MonoVol": 4200
}, {
"State": "NY",
"City": "New York",
"App": "Outlook",
"DefaultMonoCPP": 0.033,
"DefaultColorCPP": 0.646,
"Volume": 200,
"Cost": 10,
"ColorVol": 80,
"MonoVol": 120
}, {
"State": "NY",
"City": "New York",
"App": "Excel",
"DefaultMonoCPP": 0.0231,
"DefaultColorCPP": 0.0722,
"Volume": 22000,
"Cost": 2780,
"ColorVol": 18800,
...