Excel Export does not work

[Ismael]

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.});

[Stephen]

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.

[Alex Hajigeorgieva]

Hello Ismael,

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

Additionally, I would suggest instead of initializing a new , 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