Hi, We are using the following code but not able to populate the Grid. Our Json is in the form of string . the json structure is something like this. "d : [{"ID":"1","Name":"Umesh"}]"
$(document).ready(
function () {
$(
"#customergriddiv").kendoGrid
({
height: 400,
pageable: true,
scrollable: false,
sortable: true,
columns: [{ field: "ID", title: "ID" }, { field: "Name", title: "Name"}],
datasource: {
transport: {
read: {
type: "POST",
url: "GetJson.asmx/GetCustomers",
contentType: 'application/json; charset=utf-8',
dataType: "json"
}
},
schema: {
data:
"d"
}
, pageSize: 10
}
});
});
<
div id="customergriddiv"></div>
3 Answers, 1 is accepted
0
Alexandru
Top achievements
Rank 1
Rank 1
answered on 19 Dec 2011, 04:39 AM
Hi,
I was trying to do the same and it wasn’t working for me either.
Here is the workaround I found:
function getData() {
var _resData;
$.ajax({
type: 'GET',
url: 'Someurl',
dataType: 'json',
success: function (data) {
_resData = data;
},
data: {},
async: false
});
return _resData;
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: getData(),
schema: {
model: {
fields: {
ColumnNameExample: { type: "number" }
}
}
},
pageSize: 10
},
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
"ColumnNameExample"
]
});
});
It’s very disappointing that it’s not working for such a basic scenario. Thinking about giving up to this control...
I was trying to do the same and it wasn’t working for me either.
Here is the workaround I found:
function getData() {
var _resData;
$.ajax({
type: 'GET',
url: 'Someurl',
dataType: 'json',
success: function (data) {
_resData = data;
},
data: {},
async: false
});
return _resData;
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: getData(),
schema: {
model: {
fields: {
ColumnNameExample: { type: "number" }
}
}
},
pageSize: 10
},
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
"ColumnNameExample"
]
});
});
It’s very disappointing that it’s not working for such a basic scenario. Thinking about giving up to this control...
0
Cagatay
Top achievements
Rank 1
Rank 1
answered on 19 Dec 2011, 02:13 PM
@Alexandru, @Chetan I am facing the same problem. And I'd like to thank @Chetan for workaround.. And this issue is showstopper and buying stopper according to me.
0
Luis
Top achievements
Rank 1
Rank 1
answered on 24 Apr 2012, 12:46 PM
I got it to work with this:
The example.json is this one:
Cheers
<!DOCTYPE html><html><head> <script src="js/jquery.min.js"></script> <script src="js/kendo.web.js"></script> <script src="js/kendo.all.js"></script> <link href="styles/kendo.metro.css" rel="stylesheet" /> <link href="styles/kendo.common.css" rel="stylesheet" /> <link href="styles/kendo.default.css" rel="stylesheet" /></head><body> <div id="grid"></div> <script> $(function() { $("#grid").kendoGrid({ dataSource: { transport: { read: { url:"example.json" } }, schema: { data: "data" } }, columns: [{ field: "FirstName" }, { field: "LastName" }] }); }); </script> </body></html>The example.json is this one:
{"data":[{"EmployeeID":"1","LastName":"Dav","FirstName":"Nact"},{"EmployeeID":"2","LastName":"John","FirstName":"Mac"},{"EmployeeID":"3","LastName":"Jim","FirstName":"Afsdsa"}]}Cheers