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
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
2 Answers, 1 is accepted
0
Accepted
Hi Gibran,
If you would like to tinker with the data you can bind the Grid to local data as illustrated in the example below:
Note that dataSource.data is directly populated with data there is no need to use read method in that scenario.
Regards,
Viktor Tachev
Telerik by Progress
If you would like to tinker with the data you can bind the Grid to local data as illustrated in the example below:
Note that dataSource.data is directly populated with data there is no need to use read method in that scenario.
Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Gibran
Top achievements
Rank 1
Rank 1
answered on 08 Mar 2017, 05:57 PM
Thanks Viktor,
That example helped.