问题
I have a single page app, that often creates new data from an array
var searchData = new kendo.data.DataSource({data: buildData});
and then displays it in a grid,
this all looks good except the excel export missbehaves as follows:
run one search and the excel export works fine.
run a second search and the excel export downloads 2 files, the first being a repeat of the results of the first search, the second file being the new search.
run a third search and the excel exports three files.... and so on...
it appears the refresh isn't working for me, but i don't have any idea why not?
if(searchedArray) {
searchedArray.forEach(function (row) {
buildData.push({r:rowCount,w:row['w'],n:'1',nl:'2',o:row['o'],t:row['t'],d:row['d'];
rowCount++;
});
}
var searchData = new kendo.data.DataSource({data: buildData});
var sGrid=null;
sGrid = $("#searchedgrid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "filename.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
dataSource: searchData,
sortable: {
mode: "multiple",
allowUnsort: true
},
schema: {
model: {
fields: {
r: { type: "number" },
w: { type: "number" },
n: { type: "string" },
nl: { type: "string" },
o: { type: "string" },
t: { type: "string" },
d: { type: "date" }
}
}
},
height: sHeight,
scrollable: true,
pageable: false,
selectable: "multiple cell",
allowCopy: true,
columns: [
{ field: "r",width: 40,title: "Rank",template:'<center>#=r#</center>'},
{ field: "w",width: 50,title: "Weight",template:'<center>#=w#</center>'},
{ field: "n", title: "Number", width: "80px",template:'<center>#=n#</center>'},
{ field: "nl", title: " ", width: "14px",template:'<center><a href="#=nl#" onclick="javascript:void window.open(\'#=nl#\',\'details\',\'width=800,height=600,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0\');return false;"><div class="ambLink" id="detaillink" title="View details"></div></a></center>',sortable:false},
{ field: "o",width: 200,title: "Owner"},
{ field: "t",width: 400,title: "Title", attributes: {style: 'white-space: nowrap '} },
{ field: "d",width: 70,title: "Filed",template:'<center>#=d#</center>'}
]
}).data("kendoGrid");
$("#searchedgrid").data('kendoGrid').refresh();
回答1:
It worked for me by adding the .html('') after the selector:
$("#grid").html('').kendoGrid({
...
});
回答2:
Somehow I solve the problem by just clear the div that created the grid.
add:
document.getElementById("grid").innerHTML = "";
followed by:
$("#grid").kendoGrid({
......
});
回答3:
For some reason, KendoGrid coupled with the export to excel feature will missbehave when you initialize the grid multiple times, without proper housekeeping.
What I did to solve it was to create the grid only once :
$("#grid").kendoGrid({
columns: [
(FIELDS LIST)
],
groupable: false,
pageable: true,
scrollable: true,
filterable: false,
sortable: true,
pageSize: 50
});
And then, reset the datasource on the actual callback event, as you are already doing.
// Set Grid data source
$("#grid").data("kendoGrid").setDataSource(
new kendo.data.DataSource({
//Set the data of the grid as the result array of object.
data: result.customerStatus
})
);
$("#grid").data("kendoGrid").refresh();
来源:https://stackoverflow.com/questions/30971978/kendo-ui-excel-export-generating-multiple-files-not-refreshed-properly