Reorder Columns In Kendo Grid

Introduction

This blog tells you how to reorder Kendo Grid columns, which is based on the reorderColumn method and column reordering properties in Kendo Grid.

Kendo Grid with DataSource

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [
{ field: "name", title:"Name"},
{ field: "age", title:"Age" },
{ field:"Designation", title:"Designation"}
],
dataSource: [
{ name: "Jane Doe", age: 30, Designation:"Software Engineer" },
{ name: "John Doe", age: 33, Designation : "Tester" }
]
});
});
</script>
</div>
</body>
</html>

Result

Reorder the column based on reorderColumn function

The reorderColumn function is used to change the position of the column in the Grid. It consist of the two parameters given below.

The new position of the column
Column whose position should be changed.

ReorderColumn .html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reorder Column</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [
{ field: "name", title:"Name"},
{ field: "age", title:"Age" },
{ field:"Designation", title:"Designation"}
],
dataSource: [
{ name: "Jane Doe", age: 30, Designation:"Software Engineer" },
{ name: "John Doe", age: 33, Designation : "Tester" }
]
});
var grid = $("#grid").data("kendoGrid");
grid.reorderColumn(2, grid.columns[1]);
});
</script>
</div>
</body>
</html>

From the code given above, you can notice the reorderColumn function consists of the two parameters, which says change the age column position from 1 to 2, as show below.

Reordering the columns based on the Reorderable property

The reorderable property is used to change the position of the Grid column just by dragging the header cell. By default, this property is disabled.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reorder Column</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
columns: [
{ field: "name", title:"Name"},
{ field: "age", title:"Age" },
{ field:"Designation", title:"Designation"}
],
dataSource: [
{ name: "Jane Doe", age: 30, Designation:"Software Engineer" },
{ name: "John Doe", age: 33, Designation : "Tester" }
] ,
reorderable: true,
});
});
</script>
</div>
</body>
</html>

Result

I hope you have enjoyed this blog. Your valuable feedback, questions or comments about this blog are always welcome.

1 Comment

Join the conversation! Your thoughts help the community grow.

Jay Joshi4y ago
Thanks Goetham for your example it’s very helpful. I have scenario where I need to reorder column as per inception date(available in the controller and value of one of the row in the same grid). You help is appreciated.