Export Excel Error for Grid

[Ismael]

Hello, I am having this error when I try to export to excel my Kendo Grid:

SyntaxError: missing ) in parenthetical
return (d.Order Again)

not sure what is happening, somebody could give me a hand with this issue?

thanks in advance!

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

[Dimiter Topalov]

Hi Ismael,

The field names must be valid JavaScript identifiers:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.field

... whereas "field: "Order Again" is not. In general this should not be related to the Grid excel export functionality and should throw an error, regardless of the export.

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Ismael]

Thank's a lot Dimiter this fix the bug, for some reason the grid was rendered ok, this issue appears until I added the excel export feature,

Regards!