Telerik Forums
Kendo UI for jQuery Forum
2 answers
287 views

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.});
Ismael
Top achievements
Rank 1
 answered on 09 Dec 2016
5 answers
337 views

Hi,

Are the demo's from the website also available for download somewhere? I can't find them in the download on the "my account page"

 

With kind regards,

Maurice Lucas

Vessy
Telerik team
 answered on 09 Dec 2016
1 answer
243 views

I've got two kendo sortable list wherein I can drag the multi-selected items left to right. All looks good but I experienced this weird behavior. The second time I drag diagonally upwards (north east), the placeholder "Drop here" will not appear until you move the mouse downward a little.
Start dragging "Strawberries" then "Pinapples" to the right list. Remember that your cursor should move north east until you reach the below of "Strawberries"
Is this a limitation of kendo drag and drop?

Here is the Dojo that I am using.

Stefan
Telerik team
 answered on 09 Dec 2016
1 answer
123 views

I've been looking at this example (dragging event from external grid and dropping to Scheduler): http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/drag_and_drop_grid_scheduler

The look and feel is not consistent with when I drag and drop events within scheduler (while moving over drop area there is a semi-transparent event with start and end time updating while you move).

Is there a way of achieving the same behaviour for events from external grid? If there is no easy solution, would you point me into right direction?

 

 

 

Ivan Danchev
Telerik team
 answered on 09 Dec 2016
4 answers
3.3K+ views
So I have a grid on a search page that I need to rebind on button click.

here is my code.

var sourceUrl = "Dynamic source url";

        var dataSource1 = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: sourceUrl
            },
            serverOperation: false,
            serverSorting: true
        });

        var grid = $("#grid").data("kendoGrid");

        grid.dataSource = dataSource1;

        grid.dataSource.transport.read();
        grid.dataSource.read();

        grid.refresh(); 


This all happens on a button click event outside of the grid.  


The problem is, is that the grid is not actually refreshing.  The data is being pulled back successfully, but it is not getting displayed.
Since I have server sorting turned on on the grid, I clicked on one of the column headers and the data displayed properly.

What is server sorting doing to the grid to refresh it that is different than what I am doing?
Rosen
Telerik team
 answered on 09 Dec 2016
1 answer
145 views
Apologies if this is apparent, but if my tasks already contain the parent/child identifiers, what is the best way to populate the dependency datasource with that information. Do I need to make a call back to the server?
Peter Milchev
Telerik team
 answered on 09 Dec 2016
5 answers
814 views

Hi I have a tabstrip inside a kendo window which works perfect until i close the window, When i try to reopen the window the tabstrip doesn't work.

All i see is the html not in a tabstrip 

this is my function which is called on a click 

function MyAccountWindow() {  

    var kendoWindow = $("<div id='window'/>").kendoWindow({
        title: "User Details",
        width: "600px",
        height:"400px",
        resizable: true,
        modal: true,       
        content: {
            template: tabTemplate
        }
    }).data("kendoWindow");
    
    var tab = $("#tabstrip").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            }
        },
    });  
        kendoWindow.open().center();    
}

 

my tabtemplate is just a variable with html inside.

 

Any help would be appreciated

Paul
Top achievements
Rank 1
 answered on 09 Dec 2016
5 answers
202 views

I am  trying to read from the following webservice :

http://apis.io/api/apis

Here is the code snippet :

Telerik Dojo Code Snippet

http://dojo.telerik.com/@phcc1t/oSEBa

 

Could you please let me know where is the issue

Alex Hajigeorgieva
Telerik team
 answered on 09 Dec 2016
1 answer
162 views

In this example, I can successfully change the properties/style of a Note on Chart on noteClick... http://dojo.telerik.com/@pagemedias/oVuWI

What I need to do is 'trigger' this from outside the Chart.

Example: I am outputting the same list of Notes that appear on the chart under the chart and when user clicks/hovers over note under chart I want to change colour/style of same Note in chart (see attached).

I have been able to highlight note under chart (has css class of 'key-A') when click on note in chart (get noteText which = 'A' and add a new styling class to 'key-A' under chart). But I also want to achieve the same thing, just the other way around (click note under chart and highlight note in chart).

How do I access e.visual of a particular note in chart?

Daniel
Telerik team
 answered on 09 Dec 2016
1 answer
317 views

I'm trying to create a custom filter on a date field to show items that have a date in the next 30, 60 and 90 days, including any overdue (i.e. dated in the past).

The current code creates a filter with the needed options, but how can the filters be implemented? The 30 day filter is to be applied when the data is loaded initially.

var pending = [ "60 days", "90 days" ];
 
var riskFilter = function(e) {
   e.kendoDropDownList({  optionLabel: "30 days", dataSource: pending });
}
 
$('#current-reviews').kendoGrid({
     theme: 'npw',
     columns: [
          { width: "240px", field: "nextreview", title: "Next Review Date",
            format: "{0:dd MMMM yyyy}", filterable: { ui: pendingFilter } },
],
filterable: {
       extra: false,
       operators: {
          date: {
           lte: "Is due within"
          }
       }
 }
Rosen
Telerik team
 answered on 09 Dec 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?