Impossibile esportare colonne nascoste in Kendo Grid

Desidero nascondere alcune colonne su Kendo Grid ed esportarle in Excel come colonne visibili. Tuttavia, l'utilizzo di nascosto (vero) o Visibile (falso) non ha alcun senso e questi campi non vengono esportati. Le soluzioni alternative nella pagina this non funzionano. Qualche idea?Impossibile esportare colonne nascoste in Kendo Grid

Vista:

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

fonte

2015-03-31 Clint Eastwood

Vai a questa soluzione Plunker, ha suggerito una soluzione sul Telerik sito. Per mostrare la colonna nella funzionalità di esportazione, associare questo evento "excelExport" di tale griglia.

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: Hide Prima colonna e spettacolo in file di esportazione

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

fonte

2015-03-31 10:05:57 111

Grazie s per la risposta. Ma, prima di creare questo problema, avevo applicato tutti i passaggi menzionati in quella pagina. D'altra parte, come vedi io uso wrapper invece di javascript per costruire la griglia. Quindi, come posso adattare il metodo javascript a mt grid (@ (Html.Kendo(). Grid ())? –

creazione del codice kendo grid codice-mvc rimarrà come è con Hidden (true) ; per le colonne che non vuoi vedere – 111

Prova semplicemente aggiungendo del codice jquery: associa il gestore di eventi 'excelExport' di quella griglia per mostrare/nascondere la colonna della griglia .. come ti mostro nel mio esempio – 111

provo con anche questo esempio, è lo stesso come il mio precedente risposta solo jQuery evento vincolante sarà diverso.

È sufficiente apportare modifiche al codice aggiungendo l'evento di griglia Events(x => x.ExcelExport("excelExport")) e jQuery function excelExport(e) {}. Utilizzare anche solo Hidden(true) per nascondere la colonna della griglia.

ViewModel è qualcosa di simile:

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 saranno:

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

E View per questo:

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

fonte

2015-04-02 04:10:30 111

'Kendo.Mvc.UI.Fluent.GridEventBuilder 'non contiene una definizione per' ExcelExport 'e nessun metodo di estensione' ExcelExport 'che accetta un primo argomento di tipo' Kendo.Mvc.UI.Fluent.GridEventBuilder 'potrebbe essere trovato (ti manca una direttiva using o un riferimento assembly?) errore riscontrato :( –

potrebbe essere un problema di versione di Kendo.MVC, io uso la versione v2014.3.1125.545 di kendo.mvc. Visualizza il riferimento della DLL Kendo.MVC nel browser degli oggetti, c'è la classe GridEventBuilder con il metodo ExcelExport (gestore di stringhe), allora funzionerà, altrimenti dovresti usare la versione aggiornata di kendo.mvc – 111

Sì, sembra essere un problema di versione ... Penso che non ci sia modo di farlo aggiungendo un metodo javascript, ecc. ... –

Impossibile esportare colonne nascoste in Kendo Grid

risposta

Problemi correlati