6

我想隱藏Kendo Grid上的一些列並將它們導出到Excel中作爲可見列。但是,使用隱藏(true)可見(false)沒有任何意義,並且不導出這些字段。 this頁面上的解決方法不起作用。任何想法?無法導出Kendo Grid中的隱藏列

查看:

@(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>

+0

謝謝回覆。但是,在創建這個問題之前,我已經應用了該頁面上提到的所有步驟。另一方面,正如你所看到的,我用包裝代替javascript來構建網格。那麼,我該如何將javascript方法調整爲mt grid(@(Html.Kendo()。Grid ())? – 2015-03-31 11:15:41

+0

創建kendo網格代碼-mvc代碼將會保持原樣,這與Hidden(true) ;對於你不想看到的列 – 111 2015-03-31 11:25:50

+0

你只是嘗試通過添加一些jQuery代碼:綁定'excelExport'該網格的事件處理程序顯示/隱藏網格列..正如我在我的例子中顯示你 – 111 2015-03-31 11:28:24

1

我嘗試用這個例子還,這是同我以前的答案只是jQuery的綁定事件會不同。

您只需通過添加網格事件Events(x => x.ExcelExport("excelExport"))和jQuery function excelExport(e) {}來更改代碼。 也只能使用Hidden(true)隱藏網格列。

視圖模型是這樣的:

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> 
+0

「Kendo.Mvc.UI.Fluent。GridEventBuilder'沒有包含「ExcelExport」的定義,並且沒有找到接受類型'Kendo.Mvc.UI.Fluent.GridEventBuilder'的第一個參數的擴展方法'ExcelExport'(你是否缺少using指令或程序集引用? )遇到的錯誤:( – 2015-04-02 11:18:19

+1

可能是Kendo.MVC版本問題,我使用的是v2014.3.1125.545版本的kendo.mvc。在對象瀏覽器中查看引用的Kendo.MVC dll,還有就是用ExcelExport類的GridEventBuilder(字符串處理函數)方法,那麼它將工作,否則你必須使用更新版本的kendo.mvc – 111 2015-04-03 04:27:51

+0

是的,它似乎是版本問題...我認爲沒有辦法通過添加一個javascript方法等來執行此操作嗎? ... – 2015-04-03 06:19:10