Kendo Grid Drag and Drop to sort by Ordinal
HTML
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.metro.min.css">
<!DOCTYPE html>
<html>
<head>
<title>Equipo frontend</title>
</head>
<body>
<h1 class="tituloP" align="center">
Quantum
</h1>
<div class="fraseN">
<em>
Mejor que todos los regalos
debajo del árbol de navidad es la
presencia de una familia feliz.
</em>
</div>
<h3 align="center">
¡Feliz Navidad!
</h3>
<style>
h1.tituloP {
color: blue
}
div.fraseN {
margin: 50px
}
</style>
</body>
</html>
CSS
html {
font: 400 12px Arial, Helvetica, sans-serif
}
JavaScript
(function () {
var countries = new kendo.data.DataSource({
data: [{
Name: "United States of America",
CategoryId: 0,
Category: "North America",
OriginalOrdinal: 0,
Ordinal: 0
}, {
Name: "Canada",
CategoryId: 0,
Category: "North America",
OriginalOrdinal: 1,
Ordinal: 1
}, {
Name: "Mexico",
CategoryId: 0,
Category: "North America",
OriginalOrdinal: 2,
Ordinal: 2
}, {
Name: "Argentina",
CategoryId: 1,
Category: "South America",
OriginalOrdinal: 0,
Ordinal: 0
}, {
Name: "Colombia",
CategoryId: 1,
Category: "South America",
OriginalOrdinal: 1,
Ordinal: 1
}, {
Name: "Chile",
CategoryId: 1,
Category: "South America",
OriginalOrdinal: 2,
Ordinal: 2
}],
group: {
field: "Category"
},
sort: {
field: "Ordinal",
dir: "asc"
}
});
var grid = jQuery('#grid').kendoGrid({
dataSource: countries,
autoBind: true,
scrollable: true,
sortable: false,
selectable: false,
filterable: false,
columns: [{
field: "Name",
title: "Countries"
}, {
field: "Ordinal",
title: "Ordinal",
width: 125
}, {
field: "OriginalOrdinal",
title: "Original Ordinal",
width: 125
}, {
...