堆栈内存溢出
  繁体   English   中英

"无法导出剑道网格中的隐藏列"

[英]Cannot export hidden columns in Kendo Grid

 原文  2015-03-31 06:40:49  1   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