Export hidden fields to Excel using KendoGrid throw error

拥有回忆 提交于 2019-12-24 08:23:17

问题


I have a button Export Excel:

 <script type="text/x-kendo-template" id="template">
        <div class="toolbar">
             <button id="ExportExcel" class="btn btn-default " onclick="ExportExcel(); return false;"><i class="fa fa-file-excel-o"></i> Exportar</button>
        </div>
 </script>

Normally I have a function to Export Excel like this:

   function ExportExcel() {
        $("#lstEmployees").data("kendoGrid").saveAsExcel(); // export grid to excel
   }

And below I populate grid like this:

 function onPageOperationsSuccess(response) {


        var data = response;
        var dataSource = new kendo.data.DataSource({
            data: data,
            pageSize: 10
        });

        $("#lstEmployees").kendoGrid({
            dataSource: {
                data: response,
                schema: {
                    model: {
                        fields: {
                            Id: { type: "int" },
                            Code: { type: "string" },
                            Name: { type: "string" },
                            Department: { type: "string" },
                            Area: { type: "string" },
                            Occupation: { type: "string" },
                            AdmissionDate: { type: "date" }

                        }
                    }
                },
                pageSize: 10
            },
            height: 630,
            toolbar: kendo.template($("#template").html()),
            scrollable: true,
            sortable: true,
            rezisable: true,
            pageable: {
                input: true,
                numeric: false
            },
            columns: [
                { field: "Code", title: "No empleado", width: "130px" },
                { field: "Name", title: "Nombre", width: "150px", },
                { field: "Department", title: "Departamento", width: "120px" },
                { field: "Area", title: "Área", width: "120px" },
                { field: "Occupation", title: "Ocupación", width: "120px" },
                { field: "AdmissionDate", title: "Fecha de ingreso", width: "120px", format: '{0:dd/MM/yyyy}' },
                {
                    field: "", title: "Acciones", width: "120px",
                    template: function (item) {
                        var id = item.Id;
                        var dropbox;
                        dropbox = "<div class='actions'><div class='btn-group'><a class='btn btn-mini dropdown-toggle' data-toggle='dropdown'><i class='fa fa-cog'></i> <span class='caret'></span></a><ul class='dropdown-menu pull-right'><li><a href='javascript:loadModalEditCreate(" + id + ");' role='button' data-toggle='modal'><i class='fa fa-pencil-square-o'></i> Editar</a></li></ul></div></div>";

                        return dropbox;

                    }
                }
            ]
        });

The problem is when I want to export to excel hidden values, so I just add field like:

Sexo: { type: "string"},

and field column like:

{ field: "Sexo", title:"Sexo", width:"150px", hidden: true},

Well, I read that I need to call function to read hidden fields and export to excel, so now, below grid populate I agree this code:

function onPageOperationsSuccess(response) {


    var data = response;
    var dataSource = new kendo.data.DataSource({
        data: data,
        pageSize: 10
    });

    $("#lstEmployees").kendoGrid({
        dataSource: {
            data: response,
            schema: {
                model: {
                    fields: {
                        Id: { type: "int" },
                        Code: { type: "string" },
                        Name: { type: "string" },
                        Sexo: { type: "string"},
                        Department: { type: "string" },
                        Area: { type: "string" },
                        Occupation: { type: "string" },
                        AdmissionDate: { type: "date" }

                    }
                }
            },
            pageSize: 10
        },
        height: 630,
        toolbar: kendo.template($("#template").html()),
        scrollable: true,
        sortable: true,
        rezisable: true,
        pageable: {
            input: true,
            numeric: false
        },
        columns: [
            { field: "Code", title: "No empleado", width: "130px" },
            { field: "Name", title: "Nombre", width: "150px", },
            { field: "Sexo", title:"Sexo", width:"150px", hidden: true},
            { field: "Department", title: "Departamento", width: "120px" },
            { field: "Area", title: "Área", width: "120px" },
            { field: "Occupation", title: "Ocupación", width: "120px" },
            { field: "AdmissionDate", title: "Fecha de ingreso", width: "120px", format: '{0:dd/MM/yyyy}' },
            {
                field: "", title: "Acciones", width: "120px",
                template: function (item) {
                    var id = item.Id;
                    var dropbox;
                    dropbox = "<div class='actions'><div class='btn-group'><a class='btn btn-mini dropdown-toggle' data-toggle='dropdown'><i class='fa fa-cog'></i> <span class='caret'></span></a><ul class='dropdown-menu pull-right'><li><a href='javascript:loadModalEditCreate(" + id + ");' role='button' data-toggle='modal'><i class='fa fa-pencil-square-o'></i> Editar</a></li></ul></div></div>";

                    return dropbox;

                }
            }
        ]
    });

    var exportFlag = false;
    $("#lstEmployees").data("kendoGrid").bind("ExportExcel", 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(1);
            e.preventDefault();
            exportFlag = true;
            setTimeout(function () {
                e.sender.saveAsExcel();
            });
        } else {
            e.sender.hideColumn(5);
            e.sender.hideColumn(6);
            exportFlag = false;
        }
    });


    $("#searchbox").keyup(function () {
        var val = $('#searchbox').val();
        $("#lstEmployees").data("kendoGrid").dataSource.filter({
            logic: "or",
            filters: [
                {
                    field: "Code",
                    operator: "contains",
                    value: val
                },
                {
                    field: "Name",
                    operator: "contains",
                    value: val
                },
                {
                    field: "Department",
                    operator: "contains",
                    value: val
                },
                {
                    field: "Area",
                    operator: "contains",
                    value: val
                },
                {
                    field: "Occupation",
                    operator: "contains",
                    value: val
                }

            ]
        });


    });
}

But I get issue in Google Chrome Inspector:

VM951 AdminEmployee:1 Uncaught TypeError: ExportExcel is not a function

Can anyone help me what is wrong there? Regards

来源:https://stackoverflow.com/questions/40493010/export-hidden-fields-to-excel-using-kendogrid-throw-error

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!