堆棧內存溢出
  簡體   English   中英

"無法導出劍道網格中的隱藏列"

[英]Cannot export hidden columns in Kendo Grid

 原文  2015-03-31 06:40:49  5   3    asp.net-mvc/ kendo-ui/ kendo-grid/ export-to-excel/ kendo-asp.net-mvc

問題描述

我想隱藏 Kendo Grid 上的一些列並將它們作為可見列導出到 excel 中。 但是，使用Hidden(true)<\/strong>或Visible(false)<\/strong>沒有任何意義，並且不會導出這些字段。 此<\/a>頁面上的解決方法不起作用。 任何的想法？

看法：<\/strong>

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

3 個解決方案

解決方案1
 2  2015-03-31 10:05:57

請參閱此解決方案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>

解決方案2
 1  2015-04-02 04:10:30

我也嘗試了這個例子，它與我之前的答案相同，只是jQuery綁定事件會有所不同。

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

ViewModel是這樣的： 

 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>

解決方案3
 0  2022-02-02 16:56:04

...
columns.Bound(x => x.Id).Visible(false);
columns.Bound(x => x.Siege).Width(150);
columns.Bound(x => x.Societe).Width(150);
columns.Bound(x => x.Matricule).Width(100).Hidden(true);
columns.Bound(x => x.Civilite).Width(80);
...


var exportFlag = false;
$("#myGrid").data("kendoGrid").bind("excelExport", function (e) {

    var grid = e.sender;
    var columns = grid.columns;
      
    if (!exportFlag) {

        $.each(columns, function (index, value) {

            var col = this;
            if (col.hidden == true) {
                col.hidden = false;
            }
        });

        e.preventDefault();
        exportFlag = true;

        setTimeout(function () {
            e.sender.saveAsExcel();
        });
    }
    else {

        $.each(columns, function (index, value) {

            var col = this;
            if (col.hidden == false) {
                col.hidden = true;
            }
        });

        exportFlag = false;
    }
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 劍道網格出口優秀 在MVC 5中將Kendo Grid導出到Excel 為什么 Kendo MVC Grid 導出 excel function 隱藏 excel 文件中的所有列？ Kendo MVC網格列未鎖定 將復選框列添加到劍道網格 Kendo Grid MVC多行中的列 劍道網格中總和列的總和 Kendo Grid在大型數據集上導出到Excel錯誤 Kendo Grid導出功能更改日期值 導出CSV-帶有過濾器的Kendo UI網格
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM