All geek questions in one place

Cannot export hidden columns to Kendo grid

I want to hide some columns in Kendo Grid and export them to excel as visible columns. However, using Hidden (true) or Visible (false) does not make sense, and these fields are not exported. Workarounds on this page do not work. Any idea?

View:

@(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) ) ) )
+6
source share
2 answers

Check out this Plunker solution, the proposed solution on the Telerik website. To show a column in your export functions, bind this excelExport event to this grid.

 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 the first column and show in the export file

 <!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>
+1
source

I am also trying to use this example, just like my previous answer, only the jQuery binding event will be different.

You just need to make changes to the code by adding the grid Events(x => x.ExcelExport("excelExport")) event Events(x => x.ExcelExport("excelExport")) and the jQuery function excelExport(e) {} . Also use only Hidden(true) to hide the grid column.

ViewModel looks something like this:

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

The controller will be:

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

And view for this:

 <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>
+1
source

Source: https://habr.com/ru/post/984483/

More articles:


All Articles