EnhancedGrid in a TabContainer not working - spring

I've been beating my head against the wall on this one for a while.
I've done a ton of google searches and I think that I've set it up correctly, but it doesn't work.
I have an enhancedGrid on top and a tabContainer on the bottom.
The idea is to click on an item on the top and show different related data on the bottom tabs.
The top grid is displayed correctly (I've removed all the plugins to save on space).
The two tabs on the bottom display correctly if I have regular text in the contentPanes, but when I embed a grid in the first tab, the other tabs are not shown.
Thank you in advance for your help!
Chris
Here is my sourcecode:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:spring="http://www.springframework.org/tags"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
version="2.0" style="margin-bottom:3px">
<jsp:output omit-xml-declaration="yes"/>
<style type="text/css">
<spring:message code="dojo_version" var="dj" />
#import "<spring:url value="/resources/${dj}/dijit/themes/claro/claro.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />";
#import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />";
#accountDiv {height:15em; width:100%;}
#contactDiv {height:100%; width:100%;}
</style>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojox.layout.ContentPane");
dojo.ready(function() {
accountSetup();
contactSetup();
});
function accountSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var accountGrid = new dojox.grid.EnhancedGrid({
id: 'accountGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
accountGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("accountDiv").appendChild(accountGrid.domNode);
accountGrid.startup();
};
function contactSetup() {
var layout = [[
{ field: 'name', name: 'Name', width: '15%' },
{ field: 'description', name: 'Description', width: '14%' },
{ field: 'website', name: 'Website', width: '15%' },
{ field: 'numberEmployees', name: '# Emp', width: '5%' },
{ field: 'taxId', name: 'Tax ID #', width: '8%' },
{ field: 'taxExempt', name: 'Tax Exempt?', width: '8%' },
{ field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' }
]];
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, document.createElement('div'));
dojo.xhrGet({
url: "${pageContext.request.contextPath}/accounts/allShallow",
headers: {"Accept": "application/json"},
handleAs: "json",
load: function(data) {
contactGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}}));
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
dojo.byId("contactDiv").appendChild(contactGrid.domNode);
contactGrid.startup();
};
</script>
<div>
<util:panel title="Accounts" id="accountPanel">
<div id="accountDiv" />
</util:panel>
</div>
<div style="height:346px; width:100%">
<div data-dojo-type="dijit.layout.TabContainer" style="height: 100%">
<div data-dojo-type="dojox.layout.ContentPane" title="Contacts" selected="true">
<div id="contactDiv" />
</div>
<div data-dojo-type="dojox.layout.ContentPane" title="Projects">
123
</div>
</div>
</div>
</div>

How about directly targeting the desired <div> instead of creating a new one?
Eg.
var contactGrid = new dojox.grid.EnhancedGrid({
id: 'contactGrid',
selectionMode: "single",
structure: layout,
noDataMessage: "No accounts found"
}, "contactDiv");

Have you tried to use placeAt instead of appendChild
yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last');
yourGrid.startup();

You can just add css class to the grid,
<style type="text/css">
#accountDiv dojoxGridMasterHeader {height:15em; width:100%;}
#contactDiv dojoxGridMasterHeader {height:100%; width:100%;}
</style>
and now import the following when you want the grid to display your tabs to be displayed
dojo.addClass('accountDiv ', 'accountDiv dojoxGridMasterHeader');
here dojoxGridMasterHeader is for exaple as i wanted my header to be showen, you can use developers tool or firebug to get the exact tabs css and display it.

Related

Horizontal auto scroll when using drag and drop column reordering only works once

I have a Kendo UI grid which may have many columns and so I have enabled horizontal scrolling to allow all the columns to be shown.
I need to be able to re-order the columns and am using the Drag and Drop functionality to do so.
This works fine the first time as the selected column can be dragged to end and the grid auto scrolls but once dropped the auto scrolling no longer works for any other column I drag.
I have searched the Kendo documentation & forum and have not found an answer to this problem.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/column-reordering">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.fiori.mobile.min.css" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" style='width:400px;'>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShippedDate: {type: "date" }
}
}
},
pageSize: 15
},
height: 550,
reorderable: true,
scrollable:true,
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipCountry",
title: "Ship Country",
width: 120
},
{
field: "ShipCity",
title: "Ship City",
width: 120
},
{
field: "ShipName",
title: "Ship Name",
width: 120
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}",
width: 200
},
{
field: "OrderID",
title: "ID",
width: 80
}
]
});
});
</script>
</div>
</body>
</html>
Does any body have any ideas how to fix this?
Thanks
To clarify you meant horizontal scrolling no longer works? When I used Kendo's demo the vertical scrolling seemed to working after the drag and drop reordering. It sounds like you may have found a bug and you should submit to a support ticket to Telerik to see if they have a fix for it.
If you could post your code that would be helpful as well. It appears you just posted the Kendo Demo code which does not really help me fix what is wrong with your code.

Datatables select -- not selecting row or a checkbox, cdn loaded... everything else works, check box shown but not selectable

Have tried with and without a checkbox(checkbox will be shown but not selectable), also using editor. Project is local dev in laravel. Code snippets is best i got. I am at about 5 hours searching the web. Everything else is working except select, and the edit and remove buttons because i can't select. No console errors. Inline editing works great.
I tried both dataTables.select.js and dataTables.select.min.js. Tried many different versions of select.
JS and CSS
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.0/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="{{asset('plugins/editor/js/dataTables.editor.js')}}"></script>
<script src="{{asset('plugins/editor/js/editor.bootstrap4.min.js')}}"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.4/css/select.bootstrap4.min.css">
<link rel="stylesheet" href="/plugins/editor/css/dataTables.editor.css">
<link rel="stylesheet" href="/plugins/editor/css/editor.bootstrap4.min.css">
Table
<table class="table" id="example">
<thead>
<tr>
<th></th> <!--Checkbox Column --!>
<th></th> <!-- Avatar Column --!>
<th>Name</th>
<th>Priority</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
</table>
JS
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': '{{csrf_token()}}'
}
});
var editor = new $.fn.dataTable.Editor({
ajax: "manage",
table: "#example",
idSrc: 'id',
fields: [
{label:"Title", name: "title", type:"textarea"},
{label:"Priority", name: "priority_id", type: "select",
options: [
#foreach ($priorities as $priority)
{ label: "{{$priority['name'] }}", value: "{{$priority['id']}}" },
#endforeach
]
},
{label:"user_id", name: "user_id", type: "select", def: "Unassigned",
options: [
#foreach ($users as $user)
{ label: "{{$user['first_name'] }} {{$user['last_name']}}", value: "{{$user['id']}}" },
#endforeach
]
},
{label:"Body", name: "body", type:"textarea"}
]
});
$('#example').on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this, {
buttons: {label: '&gt', fn:function(){ this.submit()}},
onBlur: 'submit',
submit: 'allIfChanged'
});
});
$(function() {
var table = $('#example').DataTable({
ajax: '/manage/data',
dom: 'Bfrtip',
order: [3, 'asc'],
processing: true,
serverSide: true,
deferRender: true,
select:[
{style: 'multi'},
{selector: 'td:first-child'}
],
columns: [
{
data : null,
defaultContent : '',
className : 'select-checkbox',
title : '',
orderable : false,
searchable : false
},
{data: 'user_avatar', name:"user_avatar", render: function(data,type,row){ // column
if (row.user == null) {
var avatar = "<img style='width:75px' src='/storage/users/default.png'>";
} else {
var avatar = "<img style='width:75px' src='/storage/"+ row.user.avatar +"'>";
}
return avatar;
}},
{ data: null, name: 'user.name', editField: "user_id", defaultContent: '', render: function(data,type,row){ //column
if(row.user === null){
var name = 'Unassigned';
} else {
var name = row.user.first_name +" "+ row.user.last_name;
}
return name;
} },
{
data: 'priority.name',
name: 'priority.name',
editField:"priority_id"
},
{
data: 'title',
name: 'title'
},
{
data: 'body',
name: 'body'
}
],
buttons: [
{extend: 'create', editor: editor},
{extend: 'edit', editor: editor},
{extend: 'remove', editor: editor},
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
});
});
})
I have also tried using
$('#example tbody').on( 'click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );

kendo customised TreeList manual adding childnode unexpected result

List item
I have a page which loads a kendo TreeList by pressing a button. The data is for the moment statically defined in a variable where it stays as a basis for the Kendo TreeList datasource.
I have a datasource definition which I mostly copied from Telerik Website.
I have a treelist with a couple of requirements in terms of CRUD.
level1 - nothing
level2 - add new childnodes only
level3 - edit and delete
Edit should be doubleclick on a level3 item
CRUD command buttons need to be icon-only (no text in the buttons)
I could not achieve this with the buildin CRUD controls unfortunately so I used a Template column where the buttons are placed based on their "Type" field.
Now this has worked but after some changes which I can't undo somehow the add function does not work anymore. It works but new childnode is only visible after a edit ordelete of another node. (as if the change event is not triggered during add). The Add button in the treeList calls a function addProduct where at the end I try to pushCreate directly to the datasource. However the Transport.create is never invoked. It only gets invoked after another Crud action triggers it
Can anybody see what's wrong and couldn't this all be achieve with much easier approach?
Here's the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Grid - CRUD operations with local data</title>
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<!--<script src="Scripts/kendo.all.min.js"></script>-->
<script src="Scripts/kendo.all.js"></script>
</head>
<body>
<style>
.hidden {
display: none;
}
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 0px;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
}
</style>
<div id="buttons">
<br />
<p>
<button name="clear" id="clear" onclick="myclear()">Clear grid</button>
<button name="load" id="load" onclick="loadLocal()">Load from local DB</button>
</p>
<br />
version 1.01<br />
<br />
</div>
<div id="treelist"></div>
<script id="btn-template" type="text/x-kendo-template">
# if (Code == "Product") { #
<a id="btnupdate" class="k-button k-button-icontext k-grid-update column hidden" title="Update product" onclick="update(this)" href="\#"><span class="k-icon k-update"></span></a>
<a id="btndelete" class="k-button k-button-icontext k-grid-delete column" title="Delete product" data-command="destroy" href="\#"><span class="k-icon k-delete"></span></a>
# } else if (Code == "Requirement") { #
<a class="k-button k-button-icontext k-grid-add column" title="Add a product to this requirement" onclick="addProduct(this)" href="\#"><span class="k-icon k-add"></span></a>
# } #
</script>
<script>
var EPDdata // For holding the data of the TreeList
function loadLocal() {
EPDdata = [
{ Id: 1, Description: "Item1", Code: "Category", parentId: null },
{ Id: 2, Description: "Item2", Code: "Requirement", parentId: 1 },
{ Id: 3, Description: "Item3", Code: "Product", parentId: 2 },
{ Id: 4, Description: "Item4", Code: "Requirement", parentId: 1 },
{ Id: 5, Description: "Item5", Code: "Product", parentId: 4 },
{ Id: 6, Description: "Item6", Code: "Product", parentId: 4 },
{ Id: 7, Description: "Item7", Code: "Requirement", parentId: 1 },
{ Id: 8, Description: "Item8", Code: "Requirement", parentId: 1 },
{ Id: 9, Description: "Item9", Code: "Product", parentId: 8 },
{ Id: 10, Description: "Item10", Code: "Product", parentId: 8 }
]
LoadTree();
};
function LoadTree() {
var EPDdataNextID = EPDdata.length + 1;
var LocaldataSource = new kendo.data.TreeListDataSource({
transport: {
read: function (e) {
// on success
e.success(EPDdata);
},
create: function (e) {
// assign an ID to the new item
e.data.Id = EPDdataNextID++;
// save data item to the original datasource
EPDdata.push(e.data);
// on success
e.success(e.data);
},
update: function (e) {
// locate item in original datasource and update it
EPDdata[getIndexById(e.data.Id)] = e.data;
// on success
e.success();
},
destroy: function (e) {
// locate item in original datasource and remove it
EPDdata.splice(getIndexById(e.data.Id), 1);
// on success
e.success();
}
},
error: function (e) {
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
pageSize: 10,
expanded: true,
batch: false,
schema: {
model: {
id: "Id",
expanded: true,
fields: {
Id: { type: "number", editable: false, nullable: true },
Description: { type: "string", validation: { required: true } },
Code: { type: "string" },
parentId: { type: "number", editable: true, nullable: true }
}
}
}
});
$("#treelist").empty(); // only 1 treelist on the page please
$("#treelist").kendoTreeList({
dataSource: LocaldataSource,
pageable: false,
edit: onEdit,
columns: [
{ field: "Description", title: "Description", width: "400px" },
{ field: "Code", width: "120px" },
{ field: "Id", title: "ID", width: "30px" },
{ field: "parentId", title: "PID", width: "30px" },
{ width: "35px", template: $("#btn-template").html() },
{ command: ["create", "edit", "destroy"] }
],
editable: "inline"
});
var treeList = $("#treelist").on("dblclick", function (e) {
var treeList = $("#treelist").data("kendoTreeList");
var rowindex = e.target.parentNode.rowIndex; // get rowindex
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var dataItem = $("#treelist").data("kendoTreeList").dataItem(tr);
if (dataItem.Code == "Product") {
$("#treelist").find(".edit").addClass("hidden");
$("#treelist").find(".edit").removeClass("edit");
$("#treelist").find(".delete").removeClass("hidden");
$("#treelist").find(".delete").removeClass("delete");
treeList.saveRow(); // first save all other rows
treeList.editRow(tr[0]);
};
}); // double click function
}; // Function CreatetreeList
function onEdit(arg) {
var tr = $(arg.container);//.closest("tr"); // get the current table row (tr)
tr.find("#btndelete").addClass("hidden"); //remove btndelete from commandcolumn
tr.find("#btndelete").addClass("delete"); //put class to select the btn later on
tr.find("#btnupdate").removeClass("hidden"); //make btnupdate visible in commandcolumn
tr.find("#btnupdate").addClass("edit"); //put class to select the btn later on
};
function update(e) { // update the edited row
var tr = $(e).closest("tr"); // get the current table row (tr)
var treeList = $("#treelist").data("kendoTreeList");
treeList.saveRow();
tr.find("#btndelete").removeClass("hidden");
tr.find("#btndelete").removeClass("delete");
tr.find("#btnupdate").addClass("hidden");
tr.find("#btnupdate").removeClass("edit");
};
function addProduct(e) {
var treeList = $("#treelist").data("kendoTreeList");
var dataSource = treeList.dataSource;
var data = dataSource.data;
var tr = $(e).closest("tr"); // get the current table row (tr)
var dataItem = treeList.dataItem(tr);
dataSource.pushCreate({ Id: 15, Description: "New", Code: "Product", parentId: dataItem.Id });
alert("Done");
};
function getIndexById(id) {
var idx,
l = EPDdata.length;
for (var j; j < l; j++) {
if (EPDdata[j].Id == id) {
return j;
}
}
return null;
}
</script>
</body>
</html>
I found the answer !!!
The datasource pagesize is set to 10 and the TreeList was set to paging: false. In all my tests I started with sample data of 10 nodes. All the time I was adding an 11th and 12th record which wasn't showing up until I deleted another node...
Do these things only happen to me?

Implementing DoJo enhanced Grid with Json

I have been trying to implement DoJo Enhanced Grid with Json and I have not been successful thus far.
This is what I have done so far;
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:util="urn:jsptagdir:/WEB-INF/tags/util" xmlns:spring="http://www.springframework.org/tags" version="2.0">
<jsp:output omit-xml-declaration="yes"/>
<spring:url value="/students/listdata" var="mydatasource"/>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
dojo.require("dijit.form.Button");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function() {
dojo.parser.parse();
loadGrid(dataGrid);
});
function loadGrid(dataGrid) {
dojo.xhrGet({
url: "${mydatasource}",
load: function(data, ioArgs) {
dataGrid.setStore(
new dojo.data.ItemFileReadStore(
{data: {items : data}})
);
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
}
</script>
<util:panel id="titlePane" title="Course List">
<div id="addButton" dojoType="dijit.form.Button">
Add
</div>
<div id="deleteButton" dojoType="dijit.form.Button">
Delete
</div>
<div id="grid" jsId="dataGrid" dojoType="dojox.grid.EnhancedGrid"
structure ="[
{ field: 'id', name: 'ID', width: '55px' },
{ field: 'firstName', name: 'First Name', width: '230px' },
{ field: 'lastName', name: 'Last Name', width: '50px' },
{ field: 'gender', name: 'Gender', width: '145px'}
]"
autoWidth="true"
autoHeight="true"
plugins="{indirectSelection: true}"
selectionMode="single">
</div>
</util:panel>
As you can see, I am getting the Json String via the AJAX call by DOJO. The grid is generating however, it is not being populated with data. Only two check boxes comes up in the grid...
Is there anything that I'm doing wrongly?
I have never used the EnhancedGrid, but for a regular grid I did this by creating the store declaratively, attaching its ID to the grid (via store=... attribute in the HTML), and then when I wanted to refresh the grid with new store info, called:
grid.setStore(...,null,null);
found out the problem to the grid not loading data.
Actually I needed to handle the data as a Json String.
below is copy of the code that works:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
dojo.require("dijit.form.Button");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function() {
dojo.parser.parse();
loadGrid(dataGrid);
});
function loadGrid(dataGrid) {
dojo.xhrGet({
url: "${mydatasource}",
handleAs: "json",
load: function(data, ioArgs) {
dataGrid.setStore(
new dojo.data.ItemFileReadStore(
{data: {items : data}})
);
},
error: function(error) {
console.log("loading of grid data failed. Exception...", error);
}
});
}
</script>

Kendo UI GRid column reorder

How do I toggle a kendo grid's reorder able property for columns on a button click?
I tried
grid.reorderable = true
But it does not work!
Check this demo site. It's same example of the reordering columns. It will help you.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="grid"></div>
index<input type="text" id="txtIndex" value="0" />
<br />
column name
<input type="text" id="txtColName" value="ID" />
<br />
<input type="button" value="reorder" onclick="reordercolumn()" />
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShippedDate: { type: "date" }
}
}
},
pageSize: 15
},
height: 550,
sortable: true,
reorderable: true,
resizable: true,
pageable: true,
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipCountry",
title: "Ship Country"
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}",
width: 200
},
{
field: "OrderID",
title: "ID",
width: 80
}
]
});
});
function reordercolumn() {
var grid = $("#grid").data("kendoGrid");
var columnindex = 0;
for (var i = 0; i < $("#grid").data("kendoGrid").columns.length; i++) {
var col = $("#grid").data("kendoGrid").columns[i];
if (col.title == $("#txtColName").val().trim()) {
columnindex = i;
}
}
grid.reorderColumn($("#txtIndex").val().trim(), grid.columns[columnindex]);
}
</script>
</body>
</html>
Let me know if any concern.

Resources