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

KendoGrid not displaying remote data

11 Answers 414 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Luis
Top achievements
Rank 1
Luis asked on 07 Jun 2013, 12:32 AM
Not sure why my remote json data is not showing up within the Grid, but I have tried different suggestions for a fix and still not been able to show the data.  I have verified that the data is coming across correctly. Can someone tell me what the problem may be?  Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Task Scheduler</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>
<body>
<!-- <button id="openButton">Open Window</button> -->

<div id="main" class="k-content">
<div id="tasklist"></div>
</div>

<script>
// Displays main widget
$(document).ready(function(){
$("#main").kendoWindow({
actions: ["Maximize", "Minimize", "Close"],
title: "Tasker",
visible: true,
width: "700px",
height: "300px"
}).data("kendoWindow");

var mainWindow = $("#main").data("kendoWindow");
mainWindow.center();
});

$(document).ready(function() {
var datasource = new kendo.data.DataSource({
transport: {
type: "odata",
read: {
url: "http://localhost:8282/tasker/retrieve",
dataType: "jsonp"
}
}
});

//alert(datasource);

$("#tasklist").kendoGrid({
dataSource: datasource,
schema: {
data: "results",
total: "Total",
aggregates: "AggregateResults",
errors: "Errors",
data: function(result) {
return result.results || results
},
total: function(data) {
data = data.results || data;
return data.length;
},
model: {
fields: {
id: { type: "number" },
name: { type: "string" },
description: { type: "string" },
schedule: {
id: { type: "number" },
startDateTime: { type: "number" },
endDateTime: { type: "number" },
interval: { type: "string" },
event: { type: "string" },
status: { type: "string" }
}
}
}
},
height: 200,
sortable: false,
scrollable: false,
resizable: false,
selectable: "row",
navigatable: false,
columns: [
{
field: "id",
title: "ID",
width: 50
},
{
field: "name",
title: "Name",
width: 120
},
{
field: "description",
title: "Description",
width: 200
}
]
});
});

</script>


</body>
</html>

11 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 07 Jun 2013, 09:12 AM
Hi Luis,

I believe that the problem is caused by a syntax mistake - schema should be part of the DataSource, not the Grid. Also the type should be set to the DataSource object, not transport:
var datasource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: {
            url: "http://localhost:8282/tasker/retrieve",
            dataType: "jsonp"
        }
    },
    schema: {
        data: "results",
        total: "Total",
        aggregates: "AggregateResults",
        errors: "Errors",
        data: function(result) {
            return result.results || results
        },
        total: function(data) {
            data = data.results || data;
            return data.length;
        },
        model: {
            fields: {
                id: { type: "number" },
                name: { type: "string" },
                description: { type: "string" },
                schedule: {
                    id: { type: "number" },
                    startDateTime: { type: "number" },
                    endDateTime: { type: "number" },
                    interval: { type: "string" },
                    event: { type: "string" },
                    status: { type: "string" }
                }
            }
        }
    }
});

I hope this information will help. In case the data still does not show please:
  • verify that you are using "odata" (usually our customers just copy that from the demo)
  • verify that you are using jsonp - there is a difference between json and jsonp
  • provide a sample of the Json response so I can examine it

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Luis
Top achievements
Rank 1
answered on 07 Jun 2013, 02:24 PM
Alexander,
I made the prescribed changes you indicated and moved the datasource and grid together, but still not seeing the data.  I have included my changes and the json I get from the server:


// Grid
$(document).ready(function() {
$("#tasklist").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://localhost:8282/task-scheduler/retrieve",
dataType: "jsonp"
}
},
schema: {
data: "results",
total: "Total",
aggregates: "AggregateResults",
errors: "Errors",
data: function(result) {
return result.results || results
},
total: function(data) {
data = data.results || data;
return data.length;
},
model: {
fields: {
id: { type: "number" },
name: { type: "string" },
description: { type: "string" },
schedule: {
id: { type: "number" },
startDateTime: { type: "number" },
endDateTime: { type: "number" },
interval: { type: "string" },
event: { type: "string" },
status: { type: "string" }
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 200,
sortable: true,
scrollable: true,
pageable: true,
resizable: true,
selectable: "row",
columns: [
{
field: "id",
title: "ID",
width: 50
},
{
field: "name",
title: "Name",
width: 120
},
{
field: "description",
title: "Description",
width: 200
}
]
});
});

Here is the json from the server:
[{"id":2,"name":"Task One","description":"Task used for service testing.","schedule":[]},{"id":3,"name":"Task VKB","description":"Task used for service testing.","schedule":[{"id":3,"startDateTime":1370463273000,"endDateTime":1370549672000,"interval":"","event":"Data Scraping and Ingestion","status":"Running Task Now: Task VKB"}]}]

Thanks,
Luis

0
Luis
Top achievements
Rank 1
answered on 08 Jun 2013, 11:29 AM
I ran your remote data binding Grid demo and looked at the response data coming from your server and the json data was much more detailed. Does all json remote data need to be in this format in order for it to display in the Grid?  If it does, how do we get it into this format?

jQuery191013593195712156791_1370689953949({
"d" : {
"results": [
{
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10248)", "type": "SampleModel.Order"
}, "OrderID": 10248, "CustomerID": "VINET", "EmployeeID": 5, "OrderDate": "\/Date(836438400000)\/", "RequiredDate": "\/Date(838857600000)\/", "ShippedDate": "\/Date(837475200000)\/", "ShipVia": 3, "Freight": "32.38", "ShipName": "Vins et alcools Chevalier", "ShipAddress": "59 rue de l'Abbaye", "ShipCity": "Reims", "ShipRegion": null, "ShipPostalCode": "51100", "ShipCountry": "France", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10248)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10248)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10248)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10248)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10249)", "type": "SampleModel.Order"
}, "OrderID": 10249, "CustomerID": "TOMSP", "EmployeeID": 6, "OrderDate": "\/Date(836524800000)\/", "RequiredDate": "\/Date(840153600000)\/", "ShippedDate": "\/Date(836956800000)\/", "ShipVia": 1, "Freight": "11.61", "ShipName": "Toms Spezialit\u00e4ten", "ShipAddress": "Luisenstr. 48", "ShipCity": "M\u00fcnster", "ShipRegion": null, "ShipPostalCode": "44087", "ShipCountry": "Germany", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10249)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10249)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10249)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10249)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10250)", "type": "SampleModel.Order"
}, "OrderID": 10250, "CustomerID": "HANAR", "EmployeeID": 4, "OrderDate": "\/Date(836784000000)\/", "RequiredDate": "\/Date(839203200000)\/", "ShippedDate": "\/Date(837129600000)\/", "ShipVia": 2, "Freight": "65.83", "ShipName": "Hanari Carnes", "ShipAddress": "Rua do Pa\u00e7o, 67", "ShipCity": "Rio de Janeiro", "ShipRegion": "RJ", "ShipPostalCode": "05454-876", "ShipCountry": "Brazil", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10250)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10250)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10250)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10250)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10251)", "type": "SampleModel.Order"
}, "OrderID": 10251, "CustomerID": "VICTE", "EmployeeID": 3, "OrderDate": "\/Date(836784000000)\/", "RequiredDate": "\/Date(839203200000)\/", "ShippedDate": "\/Date(837388800000)\/", "ShipVia": 1, "Freight": "41.34", "ShipName": "Victuailles en stock", "ShipAddress": "2, rue du Commerce", "ShipCity": "Lyon", "ShipRegion": null, "ShipPostalCode": "69004", "ShipCountry": "France", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10251)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10251)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10251)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10251)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10252)", "type": "SampleModel.Order"
}, "OrderID": 10252, "CustomerID": "SUPRD", "EmployeeID": 4, "OrderDate": "\/Date(836870400000)\/", "RequiredDate": "\/Date(839289600000)\/", "ShippedDate": "\/Date(837043200000)\/", "ShipVia": 2, "Freight": "51.30", "ShipName": "Supr\u00eames d\u00e9lices", "ShipAddress": "Boulevard Tirou, 255", "ShipCity": "Charleroi", "ShipRegion": null, "ShipPostalCode": "B-6000", "ShipCountry": "Belgium", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10252)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10252)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10252)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10252)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10253)", "type": "SampleModel.Order"
}, "OrderID": 10253, "CustomerID": "HANAR", "EmployeeID": 3, "OrderDate": "\/Date(836956800000)\/", "RequiredDate": "\/Date(838166400000)\/", "ShippedDate": "\/Date(837475200000)\/", "ShipVia": 2, "Freight": "58.17", "ShipName": "Hanari Carnes", "ShipAddress": "Rua do Pa\u00e7o, 67", "ShipCity": "Rio de Janeiro", "ShipRegion": "RJ", "ShipPostalCode": "05454-876", "ShipCountry": "Brazil", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10253)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10253)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10253)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10253)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10254)", "type": "SampleModel.Order"
}, "OrderID": 10254, "CustomerID": "CHOPS", "EmployeeID": 5, "OrderDate": "\/Date(837043200000)\/", "RequiredDate": "\/Date(839462400000)\/", "ShippedDate": "\/Date(838080000000)\/", "ShipVia": 2, "Freight": "22.98", "ShipName": "Chop-suey Chinese", "ShipAddress": "Hauptstr. 31", "ShipCity": "Bern", "ShipRegion": null, "ShipPostalCode": "3012", "ShipCountry": "Switzerland", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10254)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10254)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10254)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10254)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10255)", "type": "SampleModel.Order"
}, "OrderID": 10255, "CustomerID": "RICSU", "EmployeeID": 9, "OrderDate": "\/Date(837129600000)\/", "RequiredDate": "\/Date(839548800000)\/", "ShippedDate": "\/Date(837388800000)\/", "ShipVia": 3, "Freight": "148.33", "ShipName": "Richter Supermarkt", "ShipAddress": "Starenweg 5", "ShipCity": "Gen\u00e8ve", "ShipRegion": null, "ShipPostalCode": "1204", "ShipCountry": "Switzerland", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10255)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10255)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10255)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10255)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10256)", "type": "SampleModel.Order"
}, "OrderID": 10256, "CustomerID": "WELLI", "EmployeeID": 3, "OrderDate": "\/Date(837388800000)\/", "RequiredDate": "\/Date(839808000000)\/", "ShippedDate": "\/Date(837561600000)\/", "ShipVia": 2, "Freight": "13.97", "ShipName": "Wellington Importadora", "ShipAddress": "Rua do Mercado, 12", "ShipCity": "Resende", "ShipRegion": "SP", "ShipPostalCode": "08737-363", "ShipCountry": "Brazil", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10256)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10256)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10256)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10256)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10257)", "type": "SampleModel.Order"
}, "OrderID": 10257, "CustomerID": "HILAA", "EmployeeID": 4, "OrderDate": "\/Date(837475200000)\/", "RequiredDate": "\/Date(839894400000)\/", "ShippedDate": "\/Date(837993600000)\/", "ShipVia": 3, "Freight": "81.91", "ShipName": "HILARION-Abastos", "ShipAddress": "Carrera 22 con Ave. Carlos Soublette #8-35", "ShipCity": "San Crist\u00f3bal", "ShipRegion": "T\u00e1chira", "ShipPostalCode": "5022", "ShipCountry": "Venezuela", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10257)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10257)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10257)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10257)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10258)", "type": "SampleModel.Order"
}, "OrderID": 10258, "CustomerID": "ERNSH", "EmployeeID": 1, "OrderDate": "\/Date(837561600000)\/", "RequiredDate": "\/Date(839980800000)\/", "ShippedDate": "\/Date(838080000000)\/", "ShipVia": 1, "Freight": "140.51", "ShipName": "Ernst Handel", "ShipAddress": "Kirchgasse 6", "ShipCity": "Graz", "ShipRegion": null, "ShipPostalCode": "8010", "ShipCountry": "Austria", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10258)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10258)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10258)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10258)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10259)", "type": "SampleModel.Order"
}, "OrderID": 10259, "CustomerID": "CENTC", "EmployeeID": 4, "OrderDate": "\/Date(837648000000)\/", "RequiredDate": "\/Date(840067200000)\/", "ShippedDate": "\/Date(838252800000)\/", "ShipVia": 3, "Freight": "3.25", "ShipName": "Centro comercial Moctezuma", "ShipAddress": "Sierras de Granada 9993", "ShipCity": "M\u00e9xico D.F.", "ShipRegion": null, "ShipPostalCode": "05022", "ShipCountry": "Mexico", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10259)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10259)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10259)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10259)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10260)", "type": "SampleModel.Order"
}, "OrderID": 10260, "CustomerID": "OTTIK", "EmployeeID": 4, "OrderDate": "\/Date(837734400000)\/", "RequiredDate": "\/Date(840153600000)\/", "ShippedDate": "\/Date(838598400000)\/", "ShipVia": 1, "Freight": "55.09", "ShipName": "Ottilies K\u00e4seladen", "ShipAddress": "Mehrheimerstr. 369", "ShipCity": "K\u00f6ln", "ShipRegion": null, "ShipPostalCode": "50739", "ShipCountry": "Germany", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10260)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10260)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10260)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10260)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10261)", "type": "SampleModel.Order"
}, "OrderID": 10261, "CustomerID": "QUEDE", "EmployeeID": 4, "OrderDate": "\/Date(837734400000)\/", "RequiredDate": "\/Date(840153600000)\/", "ShippedDate": "\/Date(838684800000)\/", "ShipVia": 2, "Freight": "3.05", "ShipName": "Que Del\u00edcia", "ShipAddress": "Rua da Panificadora, 12", "ShipCity": "Rio de Janeiro", "ShipRegion": "RJ", "ShipPostalCode": "02389-673", "ShipCountry": "Brazil", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10261)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10261)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10261)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10261)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10262)", "type": "SampleModel.Order"
}, "OrderID": 10262, "CustomerID": "RATTC", "EmployeeID": 8, "OrderDate": "\/Date(837993600000)\/", "RequiredDate": "\/Date(840412800000)\/", "ShippedDate": "\/Date(838252800000)\/", "ShipVia": 3, "Freight": "48.29", "ShipName": "Rattlesnake Canyon Grocery", "ShipAddress": "2817 Milton Dr.", "ShipCity": "Albuquerque", "ShipRegion": "NM", "ShipPostalCode": "87110", "ShipCountry": "USA", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10262)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10262)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10262)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10262)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10263)", "type": "SampleModel.Order"
}, "OrderID": 10263, "CustomerID": "ERNSH", "EmployeeID": 9, "OrderDate": "\/Date(838080000000)\/", "RequiredDate": "\/Date(840499200000)\/", "ShippedDate": "\/Date(838771200000)\/", "ShipVia": 3, "Freight": "146.06", "ShipName": "Ernst Handel", "ShipAddress": "Kirchgasse 6", "ShipCity": "Graz", "ShipRegion": null, "ShipPostalCode": "8010", "ShipCountry": "Austria", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10263)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10263)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10263)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10263)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10264)", "type": "SampleModel.Order"
}, "OrderID": 10264, "CustomerID": "FOLKO", "EmployeeID": 6, "OrderDate": "\/Date(838166400000)\/", "RequiredDate": "\/Date(840585600000)\/", "ShippedDate": "\/Date(840758400000)\/", "ShipVia": 3, "Freight": "3.67", "ShipName": "Folk och f\u00e4 HB", "ShipAddress": "\u00c5kergatan 24", "ShipCity": "Br\u00e4cke", "ShipRegion": null, "ShipPostalCode": "S-844 67", "ShipCountry": "Sweden", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10264)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10264)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10264)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10264)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10265)", "type": "SampleModel.Order"
}, "OrderID": 10265, "CustomerID": "BLONP", "EmployeeID": 2, "OrderDate": "\/Date(838252800000)\/", "RequiredDate": "\/Date(840672000000)\/", "ShippedDate": "\/Date(839808000000)\/", "ShipVia": 1, "Freight": "55.28", "ShipName": "Blondel p\u00e8re et fils", "ShipAddress": "24, place Kl\u00e9ber", "ShipCity": "Strasbourg", "ShipRegion": null, "ShipPostalCode": "67000", "ShipCountry": "France", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10265)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10265)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10265)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10265)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10266)", "type": "SampleModel.Order"
}, "OrderID": 10266, "CustomerID": "WARTH", "EmployeeID": 3, "OrderDate": "\/Date(838339200000)\/", "RequiredDate": "\/Date(841968000000)\/", "ShippedDate": "\/Date(838771200000)\/", "ShipVia": 3, "Freight": "25.73", "ShipName": "Wartian Herkku", "ShipAddress": "Torikatu 38", "ShipCity": "Oulu", "ShipRegion": null, "ShipPostalCode": "90110", "ShipCountry": "Finland", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10266)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10266)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10266)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10266)/Shipper"
}
}
}, {
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10267)", "type": "SampleModel.Order"
}, "OrderID": 10267, "CustomerID": "FRANK", "EmployeeID": 4, "OrderDate": "\/Date(838598400000)\/", "RequiredDate": "\/Date(841017600000)\/", "ShippedDate": "\/Date(839289600000)\/", "ShipVia": 1, "Freight": "208.58", "ShipName": "Frankenversand", "ShipAddress": "Berliner Platz 43", "ShipCity": "M\u00fcnchen", "ShipRegion": null, "ShipPostalCode": "80805", "ShipCountry": "Germany", "Customer": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10267)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10267)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10267)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Orders(10267)/Shipper"
}
}
}
], "__count": "830"
}
})
0
Alexander Valchev
Telerik team
answered on 11 Jun 2013, 11:06 AM
Hi Luis,

Thank you for providing a sample of the server response. Straight to the question:

Does all json remote data need to be in this format in order for it to display in the Grid?
- No, the Json data doesn't have to be in this format. The problem is that your DataSource is configured to expect and load this format.

dataSource: {
    //type: "odata", //you are not using oData
    transport: {
        read: {
            url: "http://localhost:8282/task-scheduler/retrieve",
            dataType: "json" //you are not using jsonp
        }
    },
    schema: {
        data: "results", //there is no "results" field in the server response
        total: "Total", //there is no "Total" field in the server response
        aggregates: "AggregateResults", //there are no AggregateResults
        errors: "Errors", //there are no "Errors"
        model: {
            fields: {
                id: { type: "number" },
                name: { type: "string" },
                description: { type: "string" },
                schedule: { //dataSource's schema does not support complex data structures
                    id: { type: "number" },
                    startDateTime: { type: "number" },
                    endDateTime: { type: "number" },
                    interval: { type: "string" },
                    event: { type: "string" },
                    status: { type: "string" }
                }
            }
        }
    },
    pageSize: 20,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
},

Please try with the following (much simpler) configuration:
$("#tasklist").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "http://localhost:8282/task-scheduler/retrieve",
                dataType: "json"
            }
        },
        schema: {
            model: {
                fields: {
                    id: { type: "number" },
                    name: { type: "string" },
                    description: { type: "string" }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 200,
    sortable: true,
    scrollable: true,
    pageable: true,
    resizable: true,
    selectable: "row",
    columns: [
        {
            field: "id",
            title: "ID",
            width: 50
        },
        {
            field: "name",
            title: "Name",
            width: 120
        },
        {
            field: "description",
            title: "Description",
            width: 200
        }
    ]
});

For more information I suggest you to check this screencast as it explains how to catch the most common mistakes and how to resolve them.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Luis
Top achievements
Rank 1
answered on 11 Jun 2013, 11:31 AM
To Alexander and the Telerik Team,

I have been trying to get a resolution to the Kendo Grid not displaying our server data in the grid.  If I cannot get a resolution by today, I will be forced by my company to drop all evaluation efforts with the Kendo UI Web application and seek out another solution for HTML5 client application.  Again, I need to know what parameters are needed for the "jsonp" callback request to our server.  We are using Restful java-ws service with Jersey libs and wrapping the callback with use of JSONWithPadding response.  From observation so far of your callback it appears that the following is needed in the callback in order for the grid to display data:

jQuery191023312488477329052_1370920121978({
"d" : {
"results": [
{
"__metadata": {
"uri": "http://demos.kendoui.com/service/Northwind.svc/Employees(1)", "type": "SampleModel.Employee"
}, "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy", "Title": "Sales Representative", ...
...
}
], "__count": "9"
}
})

I need to know what parameters are feed to the server request (i.e., jsonp) to get the required results from the server for display.

Thank you,
Luis

0
Luis
Top achievements
Rank 1
answered on 11 Jun 2013, 08:41 PM
Hi Alexander,

Thank you for updating me with the latest changes to my KendoGrid code. The changes you indicated were spot on as the data is now showing up on the Grid display!  Also, the Chrome debugger helped out as well as I'm glad you sent me the link to the video.

Cheers,
Luis
0
Matt
Top achievements
Rank 1
answered on 04 Jun 2015, 05:42 PM

I'm having pretty much the same issue.

Here's the model of the object I'm using:

public class DispatchBlock
    {
        /// <summary>
        ///
        /// </summary>
        public DispatchBlock()
        {
        }
 
        public int BlockId { get; set; }
        public string Name { get; set; }
        public int CurrentRouteId { get; set; }
        public string CurrentRouteName { get; set; }
        public int VehicleId { get; set; }
        public string VehicleName { get; set; }
        public int EmployeeId { get; set; }
        public string EmployeeName { get; set; }
    }

 Here's the controller method I'm using to get data(for now I'm just hard coding junk data until I get the UI to work):

[HttpPost]
        public JsonResult GetDispatchBlocksForScheduleId([DataSourceRequest] DataSourceRequest request)
        {
            //if (ScheduleId.HasValue)
            //{
            List<DispatchBlock> blocks = new List<DispatchBlock>();
            blocks.Add(new DispatchBlock()
            {
                BlockId = -1,
                Name = "block name",
                CurrentRouteId = -1,
                CurrentRouteName = "route name",
                VehicleId = -1,
                VehicleName = "vehicle name",
                EmployeeId = -1,
                EmployeeName = "employee name"
            });
            blocks.Add(new DispatchBlock()
            {
                BlockId = -2,
                Name = "Negative 2",
                CurrentRouteId = -1,
                CurrentRouteName = "route name",
                VehicleId = -1,
                VehicleName = "vehicle name",
                EmployeeId = -1,
                EmployeeName = "employee name"
            });
            blocks.Add(new DispatchBlock()
            {
                BlockId = -3,
                Name = "Negative 3",
                CurrentRouteId = -1,
                CurrentRouteName = "route name",
                VehicleId = -1,
                VehicleName = "vehicle name",
                EmployeeId = -1,
                EmployeeName = "Becky Swain"
            });
            //}
            IEnumerable<DispatchBlock> blocks2 = blocks;
            DataSourceResult result = blocks2.ToDataSourceResult(request);
            return Json(result);
        }
And here's the js I'm running to load the grid:

$("#BlocksGrid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        type: "POST",
                        url: "@Url.Action("GetDispatchBlocksForScheduleId", "Dispatch")",
                        contentType: "application/json; charset=utf-8",
                        dataType:"json"
                    }
                },
                requestStart: function() {
                    alert('start');
                },
                requestEnd: function() {
                    alert('end');
                },
                change: function() {
                    alert('change');
                },
                schema: {
                    data: "result",
                    total: "Total",
                    aggregates: "AggregateResults",
                    errors: "Errors",
                    data: function(result) {
                        return result.result || results
                    },
                    total: function(data) {
                        data = data.result || data;
                        return data.length;
                    },
                    model: {
                        fields: {
                            BlockId: { type: "number" },
                            Name: { type: "string" },
                            CurrentRouteId: { type: "number" },
                            CurrentRouteName: { type: "string" },
                            VehicleId: { type: "number" },
                            VehicleName: { type: "string" },
                            EmployeeId: { type: "number" },
                            EmployeeName: { type: "string" }
                        }
                    }
                }
            },
            height: 400,
            filterable: true,
            sortable: true,
            resizable: true,
            pageable: false,
            selectable: true,
            schema: {
                model: {
                    id: "BlockId"
                }
            },
            columns: [
                {
                    field: "BlockId",
                    hidden:true
                },
                {
                    field: "Name",
                    title: "Block",
                    filterable: false, width: 100
                },
                {
                    field: "CurrentRouteName",
                    title: "Current Route", width: 152
                },
                {
                    field: "VehicleName",
                    title: "Vehicle", width: 110
                }, {
                    field: "EmployeeName",
                    title: "Driver", width: 95
                }
            ], change: function (arg) {
                alert('row selected');
            }
        });

I'm planning to make the controller method take a parameter eventually, but I can't even get this to work yet.

I first tried basing the js on the demo you mentioned earlier, but then it wouldn't even contact the controller.  I'm running it in debug, and I've got a break point in the controller method.  Doing it this way it contacts the controller, but then the grid never populates.  It just continually shows the loading animated gif over it like it's still waiting on the controller, despite the fact that the requestEnd function was fired and the alert was triggered.

 

0
Matt
Top achievements
Rank 1
answered on 04 Jun 2015, 09:53 PM

After more research I tried changing the events on the data source.

,
            change: function(e) {
                alert('change');
                var view = this.view();
                alert(view[0]);
                //alert(this.View());
            },
            error: function(e){
                alert('error '+e.errors);
            }
Neither event is giving me anything.

0
Alexander Valchev
Telerik team
answered on 08 Jun 2015, 07:49 AM
Hi Matt,

Could you please provide a sample of the server response returned from the server? I want to check if its format corresponds to the schema configuration.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matt
Top achievements
Rank 1
answered on 08 Jun 2015, 03:03 PM

I was never able to figure out how to get the response.  Setting up the grid's datasource that way required me to put a DataSourceRequest in the method parameters and put my resposne as a DataSourceResult.  Doing that makes it so if I try doing a regular AJAX call then it won't work because my parameters don't match.

I'm currently doing a work around where I get the data I need with a regular AJAX call, then on success I put the result into a datasource to give to the grid, but I'd like to be able to do it the proper way.

0
Alexander Valchev
Telerik team
answered on 10 Jun 2015, 08:40 AM
Hello Matt,

Probably some of these sample projects will be in help.
In case you are able to retrieve the data via regular Ajax request please post the request configuration and sample of the server response. I will examine the structure of the JSON data and help you configure the dataSource.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Luis
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Luis
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Share this question
or