This is a migrated thread and some comments may be shown as answers.

customizing data source for grid

2 Answers 97 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Gibran asked on 06 Mar 2017, 10:18 PM

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

2 Answers, 1 is accepted

Accepted