Questions on Kendo UI for jQuery Forum

2 answers

136 views

[Solved] customizing data source for grid

Hello,

I'll experimenting with the Kendo grid. I am able to get this working:

[code]
<html>
<head>
<link href="kendo/examples-offline.css" rel="stylesheet">

<link href="kendo/kendo.common.min.css" rel="stylesheet">

<link href="kendo/kendo.rtl.min.css" rel="stylesheet">

<link href="kendo/kendo.default.min.css" rel="stylesheet">

<link href="kendo/kendo.default.mobile.min.css" rel="stylesheet">

<script src="kendo/jquery.min.js"></script>

<script src="kendo/jszip.min.js"></script>

<script src="kendo/kendo.all.min.js"></script>

<script src="kendo/console.js"></script>
</head>

<body>

<div id="grid"></div>

<script>
$(document).ready(function () {
$("#grid").kendoGrid({

dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>

</body>
</html>
[/code]

But now I'd like to play with the data. For that, I need a data source I can access and manipulate.

So I put this into a json file:

[code]
[{
"Contact Name": "Gibran shah",
"Contact Title": "Software Developer",
"Company Name": "ACM",
"Country": "Canada"
}]
[/code]

...and I tried to bind to it using this:

[code]
$("#grid").kendoGrid({

dataSource: {
type: "odata",
transport: {
read: {
url: "kendo_data.json",
dataType: "json"
}
},

...
[/code]

That didn't work because the Chrome console threw an error: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

So I tried prefixing the url with http: like this: "http://kendo_data.json"

That got rid of the error but the data still failed to load.

I also tried this:

[code]
$("#grid").kendoGrid({

...

data: [{"Contact Name": "Gibran shah","Contact Title": "Software Developer","Company Name": "ACM","Country": "Canada"}]

...

});
[/code]

...but again the data failed to load.

My question: how to load from a data source I have access to and control? Please keep in mind I'm just working in Notepad++, not a fancy IDE in which I can run an ajax call and get the data.

Thanks

Grid

answered on 08 Mar 2017

2 answers

160 views

[Solved] js/css references cause Visual Studio to abort

Hello,

I'm trying to create a kendo grid and the js and css references are breaking my application.

Here are my references:

[code]
<link href="Kendo/examples-offline.css" rel="stylesheet">
<link href="Kendo/Kendo.common.min.css" rel="stylesheet">
<link href="Kendo/Kendo.rtl.min.css" rel="stylesheet">
<link href="Kendo/Kendo.default.min.css" rel="stylesheet">
<link href="Kendo/Kendo.default.mobile.min.css" rel="stylesheet">
<script type="text/javascript" src="Kendo/jquery.min.js"></script>
<script type="text/javascript" src="Kendo/jszip.min.js"></script>
<script type="text/javascript" src="Kendo/Kendo.all.min.js"></script>
<script type="text/javascript" src="Kendo/console.js"></script>
[/code]

When I try to start my application in Visual Studio 2015, Task Runner Explorer reports these errors:

[code]
Web\Features\Shared\Kendo\console.js
line 1 col 23 Missing space before opening curly brace
line 1 col 23 One (or more) spaces required before opening brace for block expressions
line 4 col 34 Invalid quote mark found
line 4 col 12 Multiple var declaration
line 5 col 45 Invalid quote mark found
line 12 col 18 Invalid quote mark found
line 12 col 38 Invalid quote mark found
line 12 col 57 Invalid quote mark found
line 12 col 63 Invalid quote mark found
line 15 col 51 Invalid quote mark found
line 15 col 63 Invalid quote mark found
line 18 col 33 Invalid quote mark found
line 20 col 58 Invalid quote mark found
line 20 col 70 Invalid quote mark found
line 28 col 32 Invalid quote mark found
line 28 col 65 Invalid quote mark found
line 48 col 17 Invalid quote mark found
line 48 col 36 Invalid quote mark found
line 48 col 57 Invalid quote mark found
line 48 col 76 Invalid quote mark found
line 48 col 96 Invalid quote mark found
line 48 col 114 Invalid quote mark found
line 48 col 123 Invalid quote mark found
line 48 col 159 Line must be at most 150 characters
line 50 col 53 Invalid quote mark found
line 55 col 35 Invalid quote mark found
line 59 col 19 Invalid quote mark found
line 59 col 25 Invalid quote mark found
line 59 col 35 Invalid quote mark found
line 99 col 34 Invalid quote mark found
line 99 col 73 Invalid quote mark found
line 103 col 19 Invalid quote mark found
line 112 col 21 Invalid quote mark found
line 113 col 10 Invalid quote mark found
line 113 col 62 Invalid quote mark found
line 119 col 25 Invalid quote mark found
line 120 col 51 Invalid quote mark found
line 122 col 33 Invalid quote mark found
line 122 col 45 Invalid quote mark found
line 122 col 67 Invalid quote mark found
line 127 col 6 Invalid quote mark found
‼ 41 warnings
Web\Features\Shared\Kendo\jquery.min.js
line 2 col 2497 Use '===' to compare with 'null'.
line 2 col 205 Missing semicolon.
line 2 col 211 Missing semicolon.
line 2 col 424 Missing semicolon.
line 2 col 530 Missing semicolon.
line 2 col 632 Missing semicolon.
line 2 col 661 Use '!==' to compare with 'null'.
line 2 col 709 Missing semicolon.
line 2 col 818 Missing semicolon.
line 2 col 858 Missing semicolon.
line 2 col 943 Missing semicolon.
line 2 col 946 Missing semicolon.
line 2 col 1011 Missing semicolon.
line 2 col 1047 Missing semicolon.
line 2 col 1083 Missing semicolon.
line 2 col 1178 Missing semicolon.
line 2 col 1237 Missing semicolon.
line 2 col 1503 Use '!==' to compare with 'null'.
line 2 col 1704 Expected an assignment or function call and instead saw an expression.
line 2 col 1714 Missing semicolon.
line 2 col 1826 Missing semicolon.
line 2 col 1897 Missing semicolon.
line 2 col 1959 Missing semicolon.
line 2 col 1993 Use '!==' to compare with 'null'.
line 2 col 2009 Missing semicolon.
line 2 col 2096 Missing semicolon.
line 2 col 2158 Missing semicolon.
line 2 col 2361 Missing semicolon.
line 2 col 2379 Missing semicolon.
line 2 col 2467 Missing semicolon.
line 2 col 210 Expected an assignment or function call and instead saw an expression.
line 2 col 2578 Missing semicolon.
line 2 col 2660 Missing semicolon.
line 2 col 2664 Expected an assignment or function call and instead saw an expression.
line 2 col 2665 Missing semicolon.
line 2 col 2727 Missing semicolon.
line 2 col 2813 Missing semicolon.
line 2 col 2901 Confusing use of '!'.
line 2 col 2909 Missing semicolon.
line 2 col 2951 Confusing use of '!'.
line 2 col 2968 Missing semicolon.
line 2 col 2998 Use '===' to compare with 'null'.
line 2 col 3025 Missing semicolon.
line 2 col 3074 Use '!==' to compare with 'null'.
line 2 col 3143 Missing semicolon.
line 2 col 3286 Missing semicolon.
line 2 col 3295 Missing semicolon.
line 2 col 3434 Missing semicolon.
line 2 col 3531 Expected an assignment or function call and instead saw an expression.
line 2 col 3541 Missing semicolon.
line 2 col 3541 Too many errors. (33% scanned).
line 2 col 12 One space required before function parameter 'b'
line 2 col 14 One (or more) spaces required before opening brace for block expressions
line 2 col 14 Missing space before opening curly brace
line 2 col 15 Invalid quote mark found
line 2 col 23 Operator == should not stick to preceding expression
line 2 col 25 Operator == should not stick to following expression
line 2 col 38 Operator && should not stick to preceding expression
line 2 col 40 Invalid quote mark found
line 2 col 40 Operator && should not stick to following expression
× 1 error
‼ 59 warnings
Web\Features\Shared\Kendo\jszip.min.js
line 12 col 17569 This character may get silently deleted by one or more browsers.
line 12 col 274 Expected an assignment or function call and instead saw an expression.
line 12 col 275 Missing semicolon.
line 12 col 494 Missing semicolon.
line 12 col 494 Expected an identifier and instead saw '='.
line 12 col 494 Expected an assignment or function call and instead saw an expression.
line 12 col 495 Missing semicolon.
line 12 col 514 Expected an assignment or function call and instead saw an expression.
line 12 col 515 Missing semicolon.
line 12 col 607 Missing semicolon.
line 12 col 629 Missing semicolon.
line 12 col 649 Missing semicolon.
line 12 col 731 Missing semicolon.
line 12 col 17570 Control character in string: <non-printable>.
line 12 col 17571 Control character in string: <non-printable>.
line 12 col 17599 Control character in string: <non-printable>.
line 12 col 17600 Control character in string: <non-printable>.
line 12 col 17630 Control character in string: <non-printable>.
line 12 col 17631 Control character in string: <non-printable>.
line 12 col 17671 Control character in string: <non-printable>.
line 12 col 17672 Control character in string: <non-printable>.
line 12 col 17708 Control character in string: <non-printable>.
line 12 col 17709 Control character in string: <non-printable>.
line 12 col 17733 Control character in string: <non-printable>.
line 12 col 786 Possible strict violation.
line 12 col 798 Possible strict violation.
line 12 col 810 Possible strict violation.
line 12 col 827 Possible strict violation.
line 12 col 840 Possible strict violation.
line 12 col 850 Expected an assignment or function call and instead saw an expression.
line 12 col 866 Possible strict violation.
line 12 col 900 Missing semicolon.
line 12 col 942 Missing '()' invoking a constructor.
line 12 col 1004 Missing semicolon.
line 12 col 1263 Missing semicolon.
line 12 col 1425 Missing semicolon.
line 12 col 1437 Expected an assignment or function call and instead saw an expression.
line 12 col 1438 Missing semicolon.
line 12 col 1822 Expected an assignment or function call and instead saw an expression.
line 12 col 1832 Missing semicolon.
line 12 col 2182 Expected an assignment or function call and instead saw an expression.
line 12 col 2192 Missing semicolon.
line 12 col 2192 Expected an assignment or function call and instead saw an expression.
line 12 col 2193 Missing semicolon.
line 12 col 2244 Possible strict violation.
line 12 col 2266 Possible strict violation.
line 12 col 2290 Possible strict violation.
line 12 col 2303 Possible strict violation.
line 12 col 2331 Possible strict violation.
line 12 col 2354 Expected an assignment or function call and instead saw an expression.
line 12 col 2354 Too many errors. (85% scanned).
× 4 errors
‼ 47 warnings
[/code]

...and Visual Studio just quits. The application doesn't start.

Notice the last message reads: Too many errors. (85% scanned).

I'm using the basic example that comes with the free Kendo package. I ported all the references into my solution.

Has anyone else experienced this before? How can it be overcome?

I'm also open to referencing online resources. Does Telerik make the js and css reference files available online?

Thanks.

General Discussions

answered on 08 Mar 2017

1 answer

511 views

How to use different tooltips for different series types

Hello,

I am using different series types in my chart, like column, line and rangeColumn. I have a problem with the settings for my tooltip, because I don't know how to use different tooltips for different types of series.

While for the types column and line my used template "#= series.name #: #= value #" works perfectly fine, for my rangeColumns I'd need "#= series.name #: #= value.from #" , because otherwise I just see nonsense as pointed out in the attached picture.

Is there any possibility to customize the tooltips for each series type?

Thank you and best regards,

Harald

Charts

answered on 08 Mar 2017

3 answers

306 views

Copy & Paste multiple column at once, Change event only trigger the first column

Hi,

My spreadsheet might have hundred of records, but I'm intend to detect the changes row each time user click on save button.

I found that when user copy from external excel and paste to kendo spreadsheet, change event only trigger the first value changed.

Below are the code that I tried:

change: function (e) {
var row = e.range._ref.topLeft.row - 1;
if (rowIndexChanged.indexOf(row + "|") >= 0)
return;

rowIndexChanged += row.toString() + "|";
}

Is there any other simpler way to get the changes of row's index from spreadsheet?

Thank you!

Regards,

Su Pei

Spreadsheet

answered on 08 Mar 2017

5 answers

1.6K+ views

Iterate through Kendo adatasource

I am trying to iterate through a Kendo datasource using the $.map function to inspect the values.

How do I do this?

So far I have this... but I cant seem to get to the actual value...

$.map(ds.data(), function (value, index) {

var $row = $(this);

$.each($row, function (index, value) {

alert(value.toString());

});

Data Source

answered on 08 Mar 2017

2 answers

431 views

[Solved] Page number

I have the pageable as true for my grid. But when I select such as page 3. The number 3 will show at the beginning before other page numbers. Do you know how to avoid that display? Thanks.

Grid

answered on 08 Mar 2017

5 answers

414 views

[Solved] Scheduler refresh

Hi guys,

in my scenario I show only one day - view as we use the scheduler for building complex agendas with many rooms. When an user adds (or edits existing event) at the bottom of the custom edit box is an option to move the session to another day. If user selects other day and clicks on the save button on the controller we change start/end date of the session and save that to the database

var item = eventService.GetAgendaDay(sesssion.EventAgendaDayId); //selected id of the another day

//changing start/end date
sesssion.Start = new DateTime(item.Date.Year, item.Date.Month, item.Date.Day, sesssion.Start.Hour, sesssion.Start.Minute, sesssion.Start.Second);
sesssion.End = new DateTime(item.Date.Year, item.Date.Month, item.Date.Day, sesssion.End.Hour, sesssion.End.Minute, sesssion.End.Second);

and once we perform the save option we return the session back

return Json(new[] { sesssion }.ToDataSourceResult(request, ModelState));

At this moment, the newly created session/or edited belongs to the another day and it should not be visible anymore on the screen, but it is. that is reason why I'm asking how to manualy refresh the source after save

thanks

Scheduler

answered on 08 Mar 2017

5 answers

565 views

[Solved] Passing Date from Scheduler into DropDownList datasource

I am retrieving the start date of my Scheduler like this:

function get_date() {
var scheduler = $("#scheduler").data("kendoScheduler");
var view = scheduler._selectedView;
var startDate = view._startDate;

return startDate;
}

I am trying to pass that date via ajax in order to populate my dropdownlist:

$("#drpHall").kendoDropDownList({
dataTextField: "hallname",
dataValueField: "hallid",
dataSource: {
transport: {
read: {
url: "chart_functions.cfc?method=GetHalls&returnformat=json",
data : {
dt: get_date()
},
dataType: "Json"
,success : function(result) {

alert(JSON.stringify(result));
}
}
}
, pageSize:10
},
index: 0
});

I am using the function get_date(), but the dropdownlist does not render when I do this. If I replace it with a simple "new Date()" parameter instead, the control renders (but obviously using the wrong date).

What do I need to do to pass that scheduler date properly?

Thanks!

DropDownList