Reorder Columns In Kendo Grid

Gowtham K
7y
3k
0
0
25
Blog

ReorderColumn.rar

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>