asp.net-mvc – 无法导出Kendo Grid中的隐藏列

发布时间：2020-05-25 10:46:17 所属栏目：asp.Net 来源：互联网

导读：我想在Kendo Grid上隐藏一些列,并将它们作为可见列导出到excel.但是,使用隐藏(true)或Visible(false)没有任何意义,并且不会导出这些字段. this页面上的变通方法无效.任何的想法？视图： @(Html.Kendo().GridContactViewModel() .Name(Grid) .Columns(columns

我想在Kendo Grid上隐藏一些列,并将它们作为可见列导出到excel.但是,使用隐藏(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)
        )
    )
)

解决方法

请参阅此解决方案 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"
        },field: "UnitsOnOrder",title: "Units On Order"
        },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>

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!