Hi,
I have extended my Kendo UI Grid with the kendo.ui.Grid.extend/kendo.ui.plugin functionality as per this article:
http://www.aspnetwiki.com/page:kendo-ui-grid-export-excel
Everything works great except it causes the loss of grouping and reordering - the Drag and Drop no longer works.
I suspect it may have to do with the shift from:
$("#myGrid").data("kendoGrid");
$("#myGrid").data("kendoExcelGrid");
or is there something else going on with the Drag and Drop?
Cheers,
Kori
13 Answers, 1 is accepted
I would suggest you to check the code-library article which we created that shows how to export the Grid to Excel. Using the approach there (the link below) seems a little bit shorter to me and should not cause any issues of that kind you mentioned.
http://www.kendoui.com/code-library/mvc/grid/export-grid-to-excel.aspx
Kind Regards,
Petur Subev
the Telerik team

As you can see, I am not using Kendo UI MVC, so and Kendo UI MVC example is of no use and does not address the problem.
Kendo UI Web Grid has the functionality to be extended. Why does an extension cause a loss of grouping and reordering?
i.e kendo.ui.Grid.extend()
The web site http://www.aspnetwiki.com does not contain official Kendo UI documentation and we cannot comment why the code demonstrated there doesn't work. We recommend contacting the maintainer of that web site.
Here is a short demo showing how grouping and reordering works when extending the Grid: http://jsbin.com/eluyex/2/edit
Atanas Korchev
the Telerik team

I found the culprit. The extension works fine with the reorderable, groupable.
I reuse my grid by clearing the data beforehand:
$grid = $("#grid");
if ($grid.length > 0 && $grid.data().kendoExcelGrid) {
var thisKendoGrid = $grid.data().kendoExcelGrid;
if (thisKendoGrid.dataSource) {
$grid.removeData('kendoExcelGrid');
$grid.empty();
}
}
I will investigate how to get around this.
Cheers,

The groupable and reorderable functionality is lost between release 2012.2.913 and 2012.3.1315.
If I switch the css and script links to the older code then all of the functionality for the grid works.
Below is sample code that will fail in release 2012.3.1315:
(function ($) {
var ExcelGrid = kendo.ui.Grid.extend({
options: {
name: "ExcelGrid"
},
exportToExcel: function () {
var that = $("#DataTable").data("kendoExcelGrid");
// Define the data to be sent to the server to create the spreadsheet.
data = {
model: JSON.stringify(that.columns),
data: JSON.stringify(that.dataSource.data().toJSON()),
title: that.options.exporting.title
};
// Create the spreadsheet.
$.post(location.href + that.options.exporting.createUrl, data, function () {
// Download the spreadsheet.
window.location.replace(kendo.format("{0}?title={1}",
location.href + that.options.exporting.downloadUrl,
that.options.exporting.title));
});
}
});
kendo.ui.plugin(ExcelGrid);
})(jQuery);
$("#grid").kendoExcelGrid({
dataSource: [ {
foo: "foo",
bar: "bar"
}],
groupable: true,
reorderable: true
});
$grid = $("#grid");
if ($grid.length > 0 && $grid.data().kendoExcelGrid) {
var thisKendoGrid = $grid.data().kendoExcelGrid;
if (thisKendoGrid.dataSource) {
$grid.removeData('kendoExcelGrid');
$grid.empty();
}
}
$("#grid").kendoExcelGrid({
dataSource: [ {
foo: "foo",
bar: "bar"
}],
groupable: true,
reorderable: true
});
My example is using 2012.3.1315. Can you modify it so it mimics your exact scenario? Also have you tried using the destroy method of the grid? I guess you trying to achieve the same with empty() and removeData().
Kind regards,
the Telerik team

I am aware that your example uses 2012.3.1315.
The code example I have provided works in 2012.2.913 but not 2012.3.1315.
Your example works fine in either, but does not provide an indication of why there is an issue.
I dynamically create an extended grid, along with a new datasource and model. The removeData() and empty() clear the grid and allow for a new one to be instantiated.
The problem is that reordering and grouping fail to be re-instantiated in 2012.3.1315.
Please test 2012.2.913 and 2012.3.1315 with the code sample I included to see what I mean.
The grid.destroy(); does not work in any scenario that I have tested for a dynamic grid - hence the removeData() and empty().
Cheers,
The proper way of destroying previous widget instance is to call its destroy method. However it seems that some handlers(related to reorderable feature) remains unattached. This will be fixed in one of the next internal builds.
As a temporary solution you can manually call jQuery .off for the grid element. This will remove all handlers left after destroy. Here is a sample for this: http://jsbin.com/eluyex/10/edit
Related code:
thisKendoGrid.destroy();
//<-- call Grid `destroy` method
$grid.off();
//<-- detach any handlers left
All the best,
Nikolay Rusevthe Telerik team

The following code works for dynamically generating an extended grid in 2012.3.1315:
However .destroy() and .off() are insufficient, and require a grid.thead.remove(); in order to work properly.
BUT when the following is implemented in a splitter the filter dialogs fail to work and the grid fails to resize to its container. So the snippet works, but some combination with other Kendo UI elements causes my code to fail in 2012.3.1315 (but not 2012.2.913). Headache.
<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
"http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"http://code.jquery.com/jquery-1.8.2.min.js"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"
></
script
>
<
meta
charset
=
utf
-8 />
<
title
>JS Bin</
title
>
</
head
>
<
body
>
<
div
id
=
"grid"
></
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"template"
>
<
div
class
=
"tabstrip"
>
<
ul
>
<
li
class
=
"k-state-active"
>
Orders
</
li
>
<
li
>
Contact Information
</
li
>
</
ul
>
<
div
>
<
div
class
=
"orders"
></
div
>
</
div
>
</
div
>
</
script
>
</
body
>
</
html
>
(
function
($) {
//var kendo = window.kendo;
var
ExcelGrid = kendo.ui.Grid.extend({
options: {
name:
"ExcelGrid"
},
exportToExcel:
function
() {
var
that = $(
"#grid"
).data(
"kendoExcelGrid"
);
// Define the data to be sent to the server to create the spreadsheet.
data = {
model: JSON.stringify(that.columns),
data: JSON.stringify(that.dataSource.data().toJSON()),
title: that.options.exporting.title
};
// Create the spreadsheet.
$.post(location.href + that.options.exporting.createUrl, data,
function
() {
// Download the spreadsheet.
window.location.replace(kendo.format(
"{0}?title={1}"
,
location.href + that.options.exporting.downloadUrl,
that.options.exporting.title));
});
}
});
kendo.ui.plugin(ExcelGrid);
})(jQuery);
var
columns1 = [{field:
"orderId"
,format:
null
, hidden:
false
, template:
null
, title:
"orderId"
, type:
"number"
, width:250 },{field:
"customerName"
,format:
null
, hidden:
false
, template:
null
, title:
"customerName"
, type:
"string"
, width:250 } ]
var
model1 = kendo.data.Model.define({
id:
"orderId"
, fields: {
"orderId"
: { type:
"number"
},
"customerName"
: { type:
"string"
}}
});
var
orders1 = [ { orderId: 10248, customerName:
"Paul Smith"
}, { orderId: 10249, customerName:
"Jane Jones"
}];
DataGridDataSource1 =
new
kendo.data.DataSource({
data: orders1,
schema: {
model: model1
}
});
$(
"#grid"
).kendoExcelGrid({
dataSource: DataGridDataSource1,
columns: columns1,
groupable:
true
,
reorderable:
true
,
filterable:
true
,
resizable:
true
,
scrollable: {
virtual:
false
},
sortable:
true
,
selectable:
"multiple"
,
change:
function
() {},
detailTemplate: kendo.template($(
"#template"
).html()),
detailInit:
function
(){}
});
var
grid = $(
"#grid"
).data(
"kendoExcelGrid"
);
grid.columns = [];
//reset columns
grid.thead.remove();
//reset the header
var
$grid = $(
"#grid"
);
var
thisKendoGrid = $grid.data().kendoExcelGrid;
thisKendoGrid.destroy();
$grid.off();
var
columns2 = [{field:
"newId"
,format:
null
, hidden:
false
, template:
null
, title:
"newId"
, type:
"number"
, width:250 },{field:
"Job"
,format:
null
, hidden:
false
, template:
null
, title:
"Job"
, type:
"string"
, width:250 } ,{field:
"Name"
,format:
null
, hidden:
false
, template:
null
, title:
"Name"
, type:
"string"
, width:250 } ]
var
model2 = kendo.data.Model.define({
id:
"newId"
, fields: {
"newId"
: { type:
"number"
},
"Job"
: { type:
"string"
},
"Name"
: { type:
"string"
}}
});
var
orders2 = [ { newId: 10249, Job:
"Handyman"
, Name:
"George Smith"
}, { newId: 10249, Job:
"President"
, Name:
"Jane Jones"
}];
var
DataGridDataSource2 =
new
kendo.data.DataSource({
data: orders2,
schema: {
model: model2
}
});
$(
"#grid"
).kendoExcelGrid({
dataSource:DataGridDataSource2,
columns: columns2,
groupable:
true
,
reorderable:
true
,
filterable:
true
,
resizable:
true
,
//pageable: true,
scrollable: {
virtual:
true
},
sortable:
true
,
selectable:
"multiple"
,
change:
function
() {},
detailTemplate: kendo.template($(
"#template"
).html()),
detailInit:
function
(){}
});
When the grid is initialized from html it will attempt to infer the columns definition. This will result the odd behavior that you observe. In such scenarios I suggest you to clean the html of the grid after destroy. i.e:
thisKendoGrid.destroy();
thisKendoGrid.wrapper.off().empty();
Here is an updated example: http://jsbin.com/ajicux/5/edit
Regards, Nikolay Rusev
the Telerik team

Testing reveals the following:
with:
jquery-1.7.1.min.js
2012.2.913/kendo.all.min.js
var
$grid = $(
"#DataTable"
);
if
($grid.length > 0 && $grid.data().kendoExcelGrid) {
var
thisKendoGrid = $grid.data().kendoExcelGrid;
if
(thisKendoGrid.dataSource) {
$grid.removeData(
'kendoExcelGrid'
);
$grid.empty();
}
}
with:
jquery-1.8.2.min.js
Seems to cause unexpected behavior with the grid resizing to its container.
Loss of grouping, reordering with 2012.2.913/kendo.all.min.js
2012.3.1315/kendo.all.min.js loses grouping, reordering, even with
var
thisKendoGrid = $grid.data().kendoExcelGrid;
thisKendoGrid.destroy();
thisKendoGrid.wrapper.off().empty();
I have tried all permutations and their seems to be some issues with the jquery release as well as the newer release of kendo.
I am sticking with 2012.2.913.
Why not update to 2013 Q1 Release? It seems to be working in your scenario.
Nikolay Rusev
the Telerik team

It complained about "SCRIPT1028: Expected identifier, string or number " and blank screen at the following line...
Please help...
...........
filterable: true
}
],
export: {
cssClass: "k-grid-export-image",
title: title + "-" + customerno ,
createUrl: "/ExecutiveDashBoard/Home/ExportToExcel",
downloadUrl: "/ExecutiveDashBoard/Home/GetExcelFile"
},
change: ontrafficMongridChange
//dataBound: ontrafficMonGridDatabound