Excel Export does not work

3 posts, 0 answers
  1. Ismael
    Ismael avatar
    10 posts
    Member since:
    Nov 2014

    Posted 23 Nov 2016 Link to this post

    Hello Kendo Team,

    I'm trying to implement the Grid / Export to Excel feature in Kendo grid, but I can't make it work, here is my js code, hope you can find what I am missing,

    (Line 045)

    Thanks in advance! 

    001.var NoFoundMessage = $("#NoFoundMessage");
    002.var Kendogrid = $("#grid");
    003.var isOrderById = false;
    004.(function (MyOrders, $) {
    005. 
    006.    MyOrders.OrderHistory = (function () {
    007. 
    008.        var load = function (isLoadingMore) {
    009.            kendo.ui.progress(Kendogrid, true);
    010.            Kendogrid.kendoGrid({
    011.                noRecords: true,
    012.                dataSource: {
    013.                    type: "POST",
    014.                    transport: {
    015.                        read: function (options) {
    016.                            if (isOrderById === false) {
    017.                                getOrdersDataSource(myOrders.SearchControl.pagingSearch(), options);
    018.                            }
    019.                            else {
    020.                                getOrderByIdDataSource(localStorage.OrderID, options);
    021.                                isOrderById = false;
    022.                            }
    023.                        }
    024.                    },
    025.                    batch: true,
    026.                    schema: {
    027.                        type: 'json',
    028.                        model: {
    029.                            id: "OrderID",
    030.                            fields: {
    031.                                OrderID: { type: "string" },
    032.                                PurchasedBy: { type: "string" },
    033.                                ReceivedDate: { type: "date" },
    034.                                OrderStatusDesc: { type: "string" },
    035.                                HAPOrderStatus: { type: "string" },
    036.                                OrderPurpose: { type: "string" },
    037.                                PurchaserName: { type: "string" },
    038.                                Recipient: { type: "string" },
    039.                                VolumePoints: { type: "string" },
    040.                                OrderAgain: { type: "string" },
    041.                                ViewReceipt: { type: "string" }
    042.                            }
    043.                        }
    044.                    },
    045.                    toolbar: ["excel"],
    046.                    excel: {
    047.                        fileName: "MyOrders.xlsx",
    048.                        //proxyURL: "//demos.telerik.com/kendo-ui/service/export",
    049.                        filterable: true,
    050.                        allPages: true
    051.                    },
    052.                    pageSize: 10
    053.                },
    054.                groupable: false,
    055.                sortable: true,
    056.                dataBound: onDataBound,
    057.                pageable: {
    058.                    refresh: false,
    059.                    pageSizes: true,
    060.                    buttonCount: 10
    061.                },
    062.                columns: [{
    063.                    field: "OrderID",
    064.                    title: "ORDER #",
    065.                    template: function (data) {
    066.                        var url = getUrlWithLocale("/Account/OrderHistory/GetOrderDetails/");
    067.                        return "<a id='btnViewDetails' data-orderID='" + data.OrderID + "' href='" + url + data.OrderID + "/Ds'>" + data.OrderID + "</a>";
    068.                    }
    069.                },
    070.                {
    071.                    field: "PurchasedBy",
    072.                    title: "P/S/Q"
    073.                }, {
    074.                    field: "ReceivedDate",
    075.                    title: "DATE",
    076.                    template: function (data) {
    077.                        return data.ReceivedDate.toLocaleDateString();
    078.                    }
    079.                }, {
    080.                    field: "OrderStatusDesc",
    081.                    title: "STATUS",
    082.                    template: function (data) {
    083.                        if (data.OrderStatusDesc === 'ORDER COMPLETE') {
    084.                            return "<span class='complete'>" + data.OrderStatusDesc + "</span>";
    085.                        }
    086.                        else if (data.OrderStatusDesc === "CANCELLED") {
    087.                            return "<span class='cancelled'>" + data.OrderStatusDesc + "</span>";
    088.                        }
    089.                        else {
    090.                            return "<span class='processing'>" + data.OrderStatusDesc + "</span>";
    091.                        }
    092.                    },
    093.                },
    094.                {
    095.                    field: "HapOrderStatus",
    096.                    title: "STATUS",
    097.                    hidden: true,
    098.                    template: function (data) {
    099.                        if (data.HapOrderStatus === "ACTIVE") {
    100.                            return "<span class='complete'>" + data.HapOrderStatus + "<span>";
    101.                        }
    102.                        else if (data.HapOrderStatus === "CANCELLED") {
    103.                            return "<span class='cancelled'>" + data.HapOrderStatus + "<span>";
    104.                        }
    105.                        else {
    106.                            return "<span class='processing'>" + data.HapOrderStatus + "<span>";
    107.                        }
    108.                    }
    109.                },
    110.                {
    111.                    field: "OrderPurpose",
    112.                    title: "ORDER PURPOSE"
    113.                },
    114.                {
    115.                    field: "PurchaserName",
    116.                    title: "PURCHASER",
    117.                    attributes: {
    118.                        "class": "tablet"
    119.                    },
    120.                    template: "#:PurchaserInfo.PurchaserName#"
    121.                },
    122.                {
    123.                    field: "Recipient",
    124.                    title: "SHIP TO",
    125.                    attributes: {
    126.                        "class": "tablet"
    127.                    },
    128.                    template: "#:Shipment.Recipient#"
    129.                },
    130.                {
    131.                    field: "VolumePoints",
    132.                    title: "VOLUME",
    133.                    template: "#:Pricing.VolumePoints#"
    134.                },
    135.                {
    136.                    field: "Order Again",
    137.                    title: "ORDER AGAIN",
    138.                    template: (function () {
    139.                        var url = getUrlWithLocale("/Shop/Cart/Copy/Index/");
    140.                        if (myOrders.SearchControl.pagingSearch().IsHapOrder === false) {
    141.                            return "<a class='icon-files-ln-3' href='" + url + "#:OrderID#/Ds'> </a>";
    142.                        }
    143.                        return "";
    144.                    }())
    145.                },
    146.                {
    147.                    field: "ViewReceipt",
    148.                    title: "VIEW RECEIPT",
    149.                    template: "<a href='javascript:void();'><i class='icon-receipt-ln-4'></i></a>",
    150.                }]
    151.            });
    152.            $(Kendogrid).kendoPager({
    153.                messages: { itemsPerPage: "results per page" }
    154.            });
    155.        }
    156.        var getUrlWithLocale = function (url) {
    157.            var pathArray = window.location.pathname.split('/');
    158.            var segment = pathArray[1];
    159.            var regex = /^([a-zA-Z]{2}-[a-zA-Z]{2})$/;
    160. 
    161.            if (regex.test(segment)) {
    162.                return "/" + segment + url;
    163.            }
    164.            return url;
    165.        }
    166.        var searchByOrderId = function (orderId) {
    167.            localStorage.searchByOrderId = true;
    168.            isOrderById = true;
    169.            localStorage.OrderID = orderId;
    170.            load(false);
    171.        }
    172.        function getOrdersDataSource(data, options) {
    173.            $.ajax({
    174.                url: getUrlWithLocale("/Account/OrderInquiry/GetOrders"),
    175.                data: data,
    176.                dataType: "json",
    177.                success: function (result) {
    178.                    if (result == null) {
    179.                        noFound();
    180.                    }
    181.                    else {
    182.                        showGrid();
    183.                    }
    184.                    kendo.ui.progress(Kendogrid, false);
    185.                    options.success(result);
    186.                }
    187.            });
    188.        }
    189.        function getOrderByIdDataSource(orderId, options) {
    190.            $.ajax({
    191.                url: getUrlWithLocale("/Account/OrderInquiry/GetOrderById"),
    192.                data: { orderId: orderId },
    193.                dataType: "json",
    194.                success: function (result) {
    195.                    if (result == null) {
    196.                        noFound();
    197.                    }
    198.                    else {
    199.                        showGrid();
    200.                    }
    201.                    kendo.ui.progress(Kendogrid, false);
    202.                    options.success(result);
    203.                }
    204.            });
    205.        }
    206.        function noFound() {
    207.            Kendogrid.hide();
    208.            NoFoundMessage.show();
    209.        }
    210.        function showGrid() {
    211.            NoFoundMessage.hide();
    212.            Kendogrid.css("display", "block");
    213.        };
    214.        function formatColumns() {
    215.            var grid = Kendogrid.data("kendoGrid");
    216.            if (myOrders.SearchControl.pagingSearch().IsHapOrder === true) {
    217.                grid.hideColumn("Recipient");
    218.                grid.hideColumn("Order Again");
    219.                grid.hideColumn("ViewReceipt");
    220.                grid.hideColumn("OrderStatusDesc");
    221.                grid.hideColumn("PurchasedBy");
    222.                grid.hideColumn("PurchaserName");
    223.                grid.showColumn("HapOrderStatus");
    224. 
    225.                $("#grid thead [data-field=ReceivedDate] .k-link").html("Start Date");
    226.            }
    227.            else {
    228.                grid.showColumn("Recipient");
    229.                grid.showColumn("Order Again");
    230.                grid.showColumn("View Receipt");
    231.                grid.showColumn("OrderStatusDesc");
    232.                grid.showColumn("PurchasedBy");
    233.                grid.showColumn("PurchaserName");
    234.                grid.hideColumn("HapOrderStatus");
    235. 
    236.                $("#grid thead [data-field=ReceivedDate] .k-link").html("Date");
    237.            }
    238.        }
    239. 
    240.        function onDataBound(arg) {
    241.            var grid = Kendogrid.data("kendoGrid");
    242.            if (myOrders.SearchControl.pagingSearch().IsHapOrder === true) {
    243.                grid.hideColumn("Recipient");
    244.                grid.hideColumn("Order Again");
    245.                grid.hideColumn("ViewReceipt");
    246.                grid.hideColumn("OrderStatusDesc");
    247.                grid.hideColumn("PurchasedBy");
    248.                grid.hideColumn("PurchaserName");
    249.                grid.showColumn("HapOrderStatus");
    250. 
    251.                $("#grid thead [data-field=ReceivedDate] .k-link").html("Start Date");
    252.            }
    253.            else {
    254.                grid.showColumn("Recipient");
    255.                $("th[data-field='Recipient']").show();
    256.                grid.showColumn("OrderAgain");
    257.                $("th[data-field='Order Again']").show();
    258.                grid.showColumn("ViewReceipt");
    259.                $("th[data-field='ViewReceipt']").show();
    260.                grid.showColumn("OrderStatusDesc");
    261.                $("th[data-field='OrderStatusDesc']").show();
    262.                grid.showColumn("PurchasedBy");
    263.                $("th[data-field='PurchasedBy']").show();
    264.                grid.showColumn("PurchaserName");
    265.                $("th[data-field='PurchaserName']").show();
    266.                grid.hideColumn("HapOrderStatus");
    267.                $("th[data-field='HapOrderStatus']").hide();
    268.                $("#grid thead [data-field=ReceivedDate] .k-link").html("Date");
    269.            }
    270.        }
    271.        return {
    272.            load: load,
    273.            gerUrlWithLocale: getUrlWithLocale,
    274.            searchByOrderId: searchByOrderId
    275.        };
    276.    }())
    277. 
    278.})(window.myOrders = window.myOrders || {}, jQuery);
    279. 
    280.$(document).ready(function () {
    281. 
    282.    myOrders.OrderHistory.load(false);
    283. 
    284.    $("#show-form").click(function () {
    285.        clearErrors();
    286.        $("#search-form").slideToggle();
    287.        $(this).find("i").toggleClass("icon-arrow-circle-ln-29 icon-arrow-circle-ln-30");
    288.    });
    289. 
    290.});
  2. Stephen
    Stephen avatar
    90 posts
    Member since:
    Jan 2011

    Posted 24 Nov 2016 in reply to Ismael Link to this post

    The toolbar and excel config options are GRID options, not DATASOURCE options.

    You have them in your datasource options.  Move them into your grid options and you should be good.

  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    593 posts

    Posted 25 Nov 2016 Link to this post

    Hello Ismael,

    Stephen is correct in his comment to move the toolbar configuration setting.

    Additionally, I would suggest instead of initializing a new pager, use the Kendo UI Grid configuration to customise the messages  through the pageable messages or pageable messages display:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pageable.messages

    Kind Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top