无法导出剑道网格中的隐藏列
Posted
技术标签:
【中文标题】无法导出剑道网格中的隐藏列【英文标题】：Cannot export hidden columns in Kendo Grid 【发布时间】：2015-06-04 09:52:31 【问题描述】：我想隐藏 Kendo Grid 上的一些列并将它们作为可见列导出到 excel。但是，使用 Hidden(true) 或 Visible(false) 没有任何意义，并且不会导出这些字段。 this 页面上的解决方法不起作用。有什么想法吗？
查看：
@(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)
)
)
)
【问题讨论】：
【参考方案1】：查看此解决方案Plunker，Telerik 网站上的建议解决方案。 要在导出功能中显示列，请绑定该网格的此“excelExport”事件。
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;
);
演示：隐藏第一列并在导出文件中显示
<!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>【讨论】：
感谢您的回复。但是，在创建这个问题之前，我已经应用了该页面上提到的所有步骤。另一方面，如您所见，我使用 wraper 而不是 javascript 来构建网格。那么，如何使 javascript 方法适应 mt 网格 (@(Html.Kendo().Grid我也尝试使用此示例，它与我之前的答案相同，只是 jQuery 绑定事件会有所不同。
您只需要通过添加网格事件Events(x => x.ExcelExport("excelExport")) 和jQuery function excelExport(e) 来更改代码。
也只使用Hidden(true) 来隐藏网格列。
ViewModel 是这样的：
public class ContactViewModel
public string NameSurname get; set;
public string InstituteName get; set;
public string CityName get; set;
public string RegionName get; set;
public string ContactMobile get; set;
public string ContactAddress get; set;
控制器将是：
public class TestController : Controller
public ActionResult Index()
return View();
public ActionResult Index_Read([DataSourceRequest]DataSourceRequest request)
var listOfContactViewModel = new List<ContactViewModel>()
new ContactViewModel() NameSurname = "N1", InstituteName = "I1", CityName ="C1",RegionName = "R1",ContactMobile = "M1", ContactAddress = "C1" ,
new ContactViewModel() NameSurname = "N2", InstituteName = "I2", CityName ="C2",RegionName = "R2",ContactMobile = "M2", ContactAddress = "C2" ,
new ContactViewModel() NameSurname = "N3", InstituteName = "I3", CityName ="C3",RegionName = "R3",ContactMobile = "M3", ContactAddress = "C3" ,
new ContactViewModel() NameSurname = "N4", InstituteName = "I4", CityName ="C4",RegionName = "R4",ContactMobile = "M4", ContactAddress = "C4" ,
new ContactViewModel() NameSurname = "N5", InstituteName = "I5", CityName ="C5",RegionName = "R5",ContactMobile = "M5", ContactAddress = "C5"
;
return Json(listOfContactViewModel.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
[HttpPost]
public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
var fileContents = Convert.FromBase64String(base64);
return File(fileContents, contentType, fileName);
并查看：
<h2>Index</h2>
@(Html.Kendo().Grid<KendoUIMVC5.Models.ContactViewModel>()
.Name("Grid")
.Events(x => x.ExcelExport("excelExport"))
.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").Hidden(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", "Test"))
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Index_Read", "Test"))
.ServerOperation(false)
.PageSize(12)
)
)
<script type="text/javascript">
var exportFlag = false;
function excelExport(e)
if (!exportFlag)
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;
</script>
【讨论】：
'Kendo.Mvc.UI.Fluent.GridEventBuilder' 不包含“ExcelExport”的定义，并且没有扩展方法“ExcelExport”接受“Kendo.Mvc.UI.Fluent”类型的第一个参数。可以找到 GridEventBuilder'（您是否缺少 using 指令或程序集引用？）遇到错误:( 可能是 Kendo.MVC 版本问题，我使用的是 v2014.3.1125.545 版本的 kendo.mvc。在对象浏览器中查看 Kendo.MVC dll 的参考，有类 GridEventBuilder 和 ExcelExport(string handler) 方法，然后它就可以工作了。否则你必须使用更新版本的 kendo.mvc 是的，好像是版本问题……我觉得没有办法通过添加javascript方法等来执行，不是吗？谢谢...【参考方案3】：...
columns.Bound(x => x.Id).Visible(false);
columns.Bound(x => x.Siege).Width(150);
columns.Bound(x => x.Societe).Width(150);
columns.Bound(x => x.Matricule).Width(100).Hidden(true);
columns.Bound(x => x.Civilite).Width(80);
...
var exportFlag = false;
$("#myGrid").data("kendoGrid").bind("excelExport", function (e)
var grid = e.sender;
var columns = grid.columns;
if (!exportFlag)
$.each(columns, function (index, value)
var col = this;
if (col.hidden == true)
col.hidden = false;
);
e.preventDefault();
exportFlag = true;
setTimeout(function ()
e.sender.saveAsExcel();
);
else
$.each(columns, function (index, value)
var col = this;
if (col.hidden == false)
col.hidden = true;
);
exportFlag = false;
);
【讨论】：
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。以上是关于无法导出剑道网格中的隐藏列的主要内容，如果未能解决你的问题，请参考以下文章