无法导出剑道网格中的隐藏列答案

【问题标题】：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)
        )
    )
)

【问题讨论】：

标签： asp.net-mvc kendo-ui kendo-grid export-to-excel kendo-asp.net-mvc

【解决方案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())？
创建剑道网格代码-mvc 代码将与 Hidden(true) 保持原样；对于您不想看到的列
您只需尝试添加一些 jquery 代码：将该网格的 'excelExport' 事件处理程序绑定到显示/隐藏网格列......就像我在示例中向您展示的那样
当我使用 excel 按钮的单击事件时，代码会命中 javascript 函数，而不会命中网格。另一方面，由于网格上的按钮没有参数，我需要上面代码中的工作示例。您能否更新您的答案如何将此脚本应用于我在 mvc 中的剑道网格？
当你点击导出按钮时，添加一些你的 jQuery 代码 [使用 $("#grid").data("kendoGrid").bind("excelExport", function (e) { }) ;] 设置剑道网格的显示/隐藏库设置，而服务器端代理的 URL [MVC 操作方法保持原样] 会将文件流式传输给最终用户。所以尝试添加我的第一个 jQuery 代码 sn-p。

【解决方案2】：

我也尝试使用此示例，它与我之前的答案相同，只是 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。