繁体   English   中英

无法导出Kendo Grid中的隐藏列

Cannot export hidden columns in Kendo Grid

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想在Kendo Grid上隐藏一些列,并将它们作为可见列导出到excel。 但是,使用隐藏(true)Visible(false)没有任何意义,并且不会导出这些字段。 页面上的变通方法无效。 任何想法?

视图:

@(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)
        )
    )
)
2 个回复

请参阅此解决方案PlunkerTelerik网站上的建议解决方案。 要在导出功能中显示列,请绑定该网格的“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> 

我也尝试了这个例子,它与我之前的答案相同,只是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>
4 如何在angular js中打印和导出kendo-grid数据?

我正在尝试向我的项目添加两个功能。 一种是将网格数据作为其视图导出到excel(我正在使用kendo-grid ,并且网格数据已从UI端格式化),第二种是使用网格线打印网格数据。 我把两者都加了,但是我有两个问题。 1.使用格式化的数字导出到excel。 我用了这个例子http://js ...

7 ForeignKey列不选择Kendo-Grid中的值

我有一个带有一些列的网格,其中一列是foreignKey列。 我想在组合框中显示该列的所有可能值。 ViewData["States"]是一个IList&lt;State&gt; ,其中State有一个Id字段和一个Name字段。 为此,我修改了模板“GridForeignKey. ...

9 Kendo-Vue隐藏列中的按钮?

我正在为此苦苦挣扎,我需要隐藏一个按钮,我的意思是基于列值的命令按钮。 我从kendo页面获取以下示例,我想基于“ Discontinued”值显示/隐藏“ View Details”按钮。 我已经用:visible或:hide属性测试过,但没有成功。 https://stackb ...

10 如何在剑道网格中隐藏列组

我想在我的剑道网格中隐藏一个列组,我的列组下面有五列,我想隐藏所有五列以及列组。 任何帮助,将不胜感激。 谢谢... ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM