问题
I have a button Export Excel:
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<button id="ExportExcel" class="btn btn-default " onclick="ExportExcel(); return false;"><i class="fa fa-file-excel-o"></i> Exportar</button>
</div>
</script>
Normally I have a function to Export Excel like this:
function ExportExcel() {
$("#lstEmployees").data("kendoGrid").saveAsExcel(); // export grid to excel
}
And below I populate grid like this:
function onPageOperationsSuccess(response) {
var data = response;
var dataSource = new kendo.data.DataSource({
data: data,
pageSize: 10
});
$("#lstEmployees").kendoGrid({
dataSource: {
data: response,
schema: {
model: {
fields: {
Id: { type: "int" },
Code: { type: "string" },
Name: { type: "string" },
Department: { type: "string" },
Area: { type: "string" },
Occupation: { type: "string" },
AdmissionDate: { type: "date" }
}
}
},
pageSize: 10
},
height: 630,
toolbar: kendo.template($("#template").html()),
scrollable: true,
sortable: true,
rezisable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "Code", title: "No empleado", width: "130px" },
{ field: "Name", title: "Nombre", width: "150px", },
{ field: "Department", title: "Departamento", width: "120px" },
{ field: "Area", title: "Área", width: "120px" },
{ field: "Occupation", title: "Ocupación", width: "120px" },
{ field: "AdmissionDate", title: "Fecha de ingreso", width: "120px", format: '{0:dd/MM/yyyy}' },
{
field: "", title: "Acciones", width: "120px",
template: function (item) {
var id = item.Id;
var dropbox;
dropbox = "<div class='actions'><div class='btn-group'><a class='btn btn-mini dropdown-toggle' data-toggle='dropdown'><i class='fa fa-cog'></i> <span class='caret'></span></a><ul class='dropdown-menu pull-right'><li><a href='javascript:loadModalEditCreate(" + id + ");' role='button' data-toggle='modal'><i class='fa fa-pencil-square-o'></i> Editar</a></li></ul></div></div>";
return dropbox;
}
}
]
});
The problem is when I want to export to excel hidden values, so I just add field like:
Sexo: { type: "string"},
and field column like:
{ field: "Sexo", title:"Sexo", width:"150px", hidden: true},
Well, I read that I need to call function to read hidden fields and export to excel, so now, below grid populate I agree this code:
function onPageOperationsSuccess(response) {
var data = response;
var dataSource = new kendo.data.DataSource({
data: data,
pageSize: 10
});
$("#lstEmployees").kendoGrid({
dataSource: {
data: response,
schema: {
model: {
fields: {
Id: { type: "int" },
Code: { type: "string" },
Name: { type: "string" },
Sexo: { type: "string"},
Department: { type: "string" },
Area: { type: "string" },
Occupation: { type: "string" },
AdmissionDate: { type: "date" }
}
}
},
pageSize: 10
},
height: 630,
toolbar: kendo.template($("#template").html()),
scrollable: true,
sortable: true,
rezisable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "Code", title: "No empleado", width: "130px" },
{ field: "Name", title: "Nombre", width: "150px", },
{ field: "Sexo", title:"Sexo", width:"150px", hidden: true},
{ field: "Department", title: "Departamento", width: "120px" },
{ field: "Area", title: "Área", width: "120px" },
{ field: "Occupation", title: "Ocupación", width: "120px" },
{ field: "AdmissionDate", title: "Fecha de ingreso", width: "120px", format: '{0:dd/MM/yyyy}' },
{
field: "", title: "Acciones", width: "120px",
template: function (item) {
var id = item.Id;
var dropbox;
dropbox = "<div class='actions'><div class='btn-group'><a class='btn btn-mini dropdown-toggle' data-toggle='dropdown'><i class='fa fa-cog'></i> <span class='caret'></span></a><ul class='dropdown-menu pull-right'><li><a href='javascript:loadModalEditCreate(" + id + ");' role='button' data-toggle='modal'><i class='fa fa-pencil-square-o'></i> Editar</a></li></ul></div></div>";
return dropbox;
}
}
]
});
var exportFlag = false;
$("#lstEmployees").data("kendoGrid").bind("ExportExcel", function (e) {
if (!exportFlag) {
// e.sender.showColumn(0); for demo
// for your case show column that you want to see in export file
e.sender.showColumn(1);
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn(5);
e.sender.hideColumn(6);
exportFlag = false;
}
});
$("#searchbox").keyup(function () {
var val = $('#searchbox').val();
$("#lstEmployees").data("kendoGrid").dataSource.filter({
logic: "or",
filters: [
{
field: "Code",
operator: "contains",
value: val
},
{
field: "Name",
operator: "contains",
value: val
},
{
field: "Department",
operator: "contains",
value: val
},
{
field: "Area",
operator: "contains",
value: val
},
{
field: "Occupation",
operator: "contains",
value: val
}
]
});
});
}
But I get issue in Google Chrome Inspector:
VM951 AdminEmployee:1 Uncaught TypeError: ExportExcel is not a function
Can anyone help me what is wrong there? Regards
来源:https://stackoverflow.com/questions/40493010/export-hidden-fields-to-excel-using-kendogrid-throw-error