6

Chcę ukryć niektóre kolumny w Kendo Grid i wyeksportować je do programu Excel jako widoczne kolumny. Jednak użycie Ukryte (true) lub Widoczne (fałsz) nie ma sensu i te pola nie są eksportowane. Obejścia na stronie this nie działają. Dowolny pomysł?Nie można wyeksportować ukrytych kolumn w Kendo Grid

Widok:

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

Odpowiedz

1

Zobacz to rozwiązanie Plunker zaproponował rozwiązanie na Telerik internetowej. Aby wyświetlić kolumnę w funkcji eksportu, należy powiązać to wydarzenie 'excelExport' tej siatki.

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: Ukryj pierwszej kolumnie i show w pliku eksportu

<!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

Thank s dla odpowiedzi. Ale zanim stworzyłem ten problem, zastosowałem wszystkie kroki wspomniane na tej stronie. Z drugiej strony, jak widzisz, używam Wraper zamiast javascript do budowania siatki. Więc jak mogę zaadaptować metodę javascript do mt grid (@ (Html.Kendo(). Grid ())? –

+0

Tworzenie kodu KTC w kodzie-mvc pozostanie niezmienione z Hidden (true) ; dla kolumn, których nie chcesz, aby zobaczyć – 111

+0

Po prostu spróbuj dodać trochę kodu jQuery: bind 'excelExport' obsługujący zdarzenia z tej siatki, aby pokazać/ukryć kolumnę siatki .. jak pokazuję w moim przykładzie – 111

1

próbuję z tego przykładu również, że jest taki sam jak mój poprzedni odpowiedź tylko jQuery wydarzenie wiążące będzie różne.

Trzeba tylko wprowadzić zmiany w kodzie, dodając zdarzenie siatki Events(x => x.ExcelExport("excelExport")) i jQuery function excelExport(e) {}. Użyj również tylko Hidden(true), aby ukryć kolumnę siatki.

ViewModel jest coś takiego:

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; } 
    } 

Controller będą:

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); 
     } 
    } 

I Zobacz do tego:

<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 "nie zawiera definicji" ExcelExport "i nie można znaleźć metody rozszerzającej" ExcelExport "akceptującej pierwszy argument typu" Kendo.Mvc.UI.Fluent.GridEventBuilder "(czy brakuje instrukcji użycia lub odniesienia do zestawu?) napotkano błąd :( –

+1

może być problem z wersją Kendo.MVC, używam wersji kendo.mvc w wersji v2014.3.1125.545.Odkryj odnośnik pliku dll Kendo.MVC w przeglądarce obiektów, istnieje klasa GridEventBuilder z opcją ExcelExport (funkcja obsługi ciągu znaków), to będzie działać, w przeciwnym razie musisz użyć zaktualizowanej wersji kendo.mvc – 111

+0

Tak, wydaje się być problem z wersją ... Myślę, że nie ma sposobu, aby to zrobić, dodając metodę javascript, itp. czyż nie? ... –

Powiązane problemy