无法导出 Kendo Grid 中的隐藏列 [英] Cannot export hidden columns in Kendo Grid
本文介绍了无法导出 Kendo Grid 中的隐藏列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想隐藏 Kendo Grid 上的一些列，并将它们作为可见列导出到 excel.但是，使用 Hidden(true) 或 Visible(false) 没有任何意义，并且不会导出这些字段.this 页面上的解决方法不起作用.有什么想法吗?
查看:
@(Html.Kendo().Grid().Name("网格").Columns(columns =>{columns.Bound(m => m.NameSurname).Title("Name Surname").Width("%100");columns.Bound(m => m.InstituteName).Title("Institute Name").Width("250px");columns.Bound(m => m.CityName).Title("City").Width("145px");columns.Bound(m => m.RegionName).Title("Region").Width("145px");columns.Bound(m => m.ContactMobile).Title("Mobile").Width("125px");columns.Bound(m => m.ContactAddress).Title("Address").Hidden(true);//我想导出这些字段columns.Bound(m => m.ContactAddress).Title("Address").Visible(false);//我想导出这些字段}).ToolBar(工具栏 =>{工具栏.模板(@<文本><div class="工具栏"><button class="btn btn-primary btn-xs pull-right k-button k-button-icontext k-grid-excel"><span class="k-icon k-excel"></span>列表 (xls) </text>);}).Excel(excel => excel.FileName("List.xlsx").Filterable(真).AllPages(真).ProxyURL(Url.Action("Excel_Export_Save", "Controller"))).DataSource(dataSource => 数据源.Ajax().Read(read => read.Action("Index_Read", "Controller")).ServerOperation(假).PageSize(12))))
解决方案
查看此解决方案 Plunker，Telerik 网站上的建议解决方案.要在导出功能中显示列，请绑定该网格的excelExport"事件.
var exportFlag = false;$("#grid").data("kendoGrid").bind("excelExport", function (e) {如果 (!exportFlag) {//e.sender.showColumn(0);用于演示//对于您的案例，显示您想在导出文件中看到的列e.sender.showColumn(5);e.sender.showColumn(6);e.preventDefault();出口标志 = 真；设置超时(函数(){e.sender.saveAsExcel();});} 别的 {e.sender.hideColumn(5);e.sender.hideColumn(6);出口标志 = 假；}});演示:隐藏第一列并在导出文件中显示
<头><base href="http://demos.telerik.com/kendo-ui/grid/excel-export"><风格>html {字体大小:12px；字体系列:Arial、Helvetica、sans-serif；}</风格><title></title><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common-material.min.css"/><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.material.min.css"/><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css"/><link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.material.min.css"/><script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script><script src="http://cdn.kendostatic.com/2015.1.318/js/jszip.min.js"></script><script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script><身体><div id="示例"><div id="grid" style="width: 900px"></div><脚本>$("#grid").kendoGrid({工具栏:["excel"],擅长:{fileName: "Kendo UI Grid Export.xlsx",proxyURL: "http://demos.telerik.com/kendo-ui/service/export",可过滤:真实},数据源: {类型:odata"，运输: {阅读:http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"},架构:{模型: {字段:{单位库存:{类型:数字"},产品名称: {类型:字符串"},单价: {类型:数字"},订购单位:{类型:数字"},单位库存:{类型:数字"}}}},页面大小:7},可排序:真实，可分页:真实，列: [{宽度:10%"，字段:产品名称"，title: "产品名称",隐藏:真实}, {宽度:10%"，字段:单价"，标题:单价"}, {宽度:10%"，字段:UnitsOnOrder"，标题:订购单位"}, {宽度:10%"，字段:UnitsInStock"，标题:库存单位"}]});var exportFlag = false;$("#grid").data("kendoGrid").bind("excelExport", function (e) {如果 (!exportFlag) {e.sender.showColumn(0);e.preventDefault();出口标志 = 真；设置超时(函数(){e.sender.saveAsExcel();});} 别的 {e.sender.hideColumn(0);出口标志 = 假；}});</html>
I want to hide some columns on Kendo Grid and export them to the excel as the visible columns. However, using Hidden(true) or Visible(false) does not make any sense and these fields are not exported. The workarounds on this page is not working. Any idea?
View:
@(Html.Kendo().Grid<ContactViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(m => m.NameSurname).Title("Name Surname").Width("%100");
columns.Bound(m => m.InstituteName).Title("Institute Name").Width("250px");
columns.Bound(m => m.CityName).Title("City").Width("145px");
columns.Bound(m => m.RegionName).Title("Region").Width("145px");
columns.Bound(m => m.ContactMobile).Title("Mobile").Width("125px");
columns.Bound(m => m.ContactAddress).Title("Address").Hidden(true); //I want to export these fields
columns.Bound(m => m.ContactAddress).Title("Address").Visible(false); //I want to export these fields
})
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<button class="btn btn-primary btn-xs pull-right k-button k-button-icontext k-grid-excel">
<span class="k-icon k-excel"></span>
Liste (xls)
</button>
</div>
</text>);
})
.Excel(excel => excel
.FileName("List.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Controller"))
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Index_Read", "Controller"))
.ServerOperation(false)
.PageSize(12)
)
)
)
解决方案
See this solution Plunker, suggested solution on Telerik website. To show column in your export functionality, bind this 'excelExport' event of that grid.
var exportFlag = false;
$("#grid").data("kendoGrid").bind("excelExport", 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(5);
e.sender.showColumn(6);
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn(5);
e.sender.hideColumn(6);
exportFlag = false;
}
});
Demo: Hide First column and show in export file
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/excel-export">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid" style="width: 900px"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema: {
model: {
fields: {
UnitsInStock: {
type: "number"
},
ProductName: {
type: "string"
},
UnitPrice: {
type: "number"
},
UnitsOnOrder: {
type: "number"
},
UnitsInStock: {
type: "number"
}
}
}
},
pageSize: 7
},
sortable: true,
pageable: true,
columns: [{
width: "10%",
field: "ProductName",
title: "Product Name",
hidden: true
}, {
width: "10%",
field: "UnitPrice",
title: "Unit Price"
}, {
width: "10%",
field: "UnitsOnOrder",
title: "Units On Order"
}, {
width: "10%",
field: "UnitsInStock",
title: "Units In Stock"
}]
});
var exportFlag = false;
$("#grid").data("kendoGrid").bind("excelExport", function (e) {
if (!exportFlag) {
e.sender.showColumn(0);
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn(0);
exportFlag = false;
}
});
</script>
</div>
</body>
</html>
这篇关于无法导出 Kendo Grid 中的隐藏列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
