I've been struggling trying to get a simple web service/test page working using the Kendo UI grid. My web service is returning a string of JSON data:
[{"ord_number":"116347 ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"},{"ord_number":"116348 ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"}]
More accurately, here is what gets returned from the web service call (this is an ASP.NET web service. Nothing fancy)
<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">[{"ord_number":"116347 ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"},{"ord_number":"116348 ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"}]</string>
Here is the contents of the ASP.NET page that I was hoping would populate the data:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="KendoUI.aspx.cs" Inherits="KendoUI" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></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>
<form id="form1" runat="server">
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
url: "http://localhost/GridTest/Services/WebService.asmx/GetLegsJSON",
dataType: "json"
}
},
schema: {
model: {
id: "ord_number",
fields: {
ord_number: { type: "string"},
ord_company: { type: "string" },
origin_cmp_id: { type: "string" },
origin_cmp_name: { type: "string" },
dest_cmp_id: { type: "string" },
dest_cmp_name: { type: "string" },
orderby_cmp_id: { type: "string" },
orderby_cmp_name: { type: "string" },
orderby_cty_nmstct: { type: "string" },
billto_cmp_id: { type: "string" },
billto_cmp_name: { type: "string" },
billto_cty_nmstct: { type: "string" },
ord_status_name: { type: "string" }
}
}
},
pageSize: 10,
type: "json"
});
$("#grid").kendoGrid({
autobind: false,
dataSource: dataSource,
pageable: true,
columns: [
{ title: "Order #", field: "ord_number" },
{ title: "Company", field: "ord_company" },
{ title: "Origin ID", field: "origin_cmp_id" },
{ title: "Origin CN", field: "origin_cmp_name" },
{ title: "Dest ID", field: "dest_cmp_id" },
{ title: "Dest CN", field: "dest_cmp_name" },
{ title: "Order By ID", field: "orderby_cmp_id" },
{ title: "Order By CN", field: "orderby_cmp_name" },
{ title: "Order By C/S", field: "orderby_cty_nmstct" },
{ title: "BillTo ID", field: "billto_cmp_id" },
{ title: "BillTo CN", field: "billto_cmp_name" },
{ title: "BillTo C/S", field: "billto_cty_nmstct" },
{ title: "Status", field: "ord_status_name" }
]
});
});
</script>
</div>
</form>
</body>
</html>
But nothing populates but the headers in the table with "No items to display" in the footer.
For the life of me, I can't see what I am doing wrong.
Your web service doesn't return JSON. It returns XML. You should return JSON instead of XML. I recommend checking the following blog post: http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/
Also here is a sample web site which shows how to bind the Kendo Grid to an ASMX service: https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-web-service-crud
The fact that you get XML when browsing to WebService.asmx is nothing to worry about. That is the default configuration unless you've tampered with your web.config (or machine.config). Try using $.ajax() to consume that service and confirm that the result there is JSON as that is how the DataSource will do it. The issue has to do when a POST vs GET and when you use the autogenerated page provided by the .asmx, the service is accessed differently and with different headers than it is with $.ajax()
Also, stop using JavaScriptSerializer for your results. Create a class that represents your data model and set your webMethod to return as that Class then in the method, construct an object using that class and return that object. The WebService will automagically parse and return the JSON based on your ScriptMethod hints. A great article explaining this WAY too common mistake is http://encosia.com/asp-net-web-services-mistake-manual-json-serialization/
Try to add contentType property
read: {
...
contentType: "application/json; charset=utf-8"
}
Related
I have a project that use wcf rest angularJS.
I have already create JSON on
localhost:51458/ServiceRequest.svc/GetAllRequest/
The output looked like this
[{"ASSIGNED_TO":"manager","BODY":"asdasd","CATEGORY":"APP","FILE_NAME":"gambar.jpg","ID":18,"REQUESTER":"user","STATUS":"On Progress","SUBCATEGORY":"BUG FIXING","SUBJECT":"asd","TICKET_NUMBER":"APP_20161014_111_18"},{"ASSIGNED_TO":"manager","BODY":"abc","CATEGORY":"IT","FILE_NAME":"App_Form.docx","ID":19,"REQUESTER":"Trainee 02","STATUS":"Assign","SUBCATEGORY":"REQUEST NEW USER","SUBJECT":"test insert lewat browser","TICKET_NUMBER":"IT_20161017_121_19"},{"ASSIGNED_TO":"tes","BODY":"tes","CATEGORY":"tes","FILE_NAME":"tes","ID":20,"REQUESTER":"tes","STATUS":"Assign","SUBCATEGORY":"tes","SUBJECT":"tes","TICKET_NUMBER":"1231"},{"ASSIGNED_TO":"tes","BODY":"tes","CATEGORY":"tes","FILE_NAME":"asd","ID":22,"REQUESTER":"tes","STATUS":"Assign","SUBCATEGORY":"tes","SUBJECT":"tes","TICKET_NUMBER":"123213"},{"ASSIGNED_TO":"dsfbsd","BODY":"sbfd","CATEGORY":"dvsd","FILE_NAME":"sdfbsdf","ID":38,"REQUESTER":"sdfv","STATUS":"Assign","SUBCATEGORY":"dvdv","SUBJECT":"dvdsv","TICKET_NUMBER":"huih"},{"ASSIGNED_TO":"assignto","BODY":"body","CATEGORY":"category","FILE_NAME":"fileName","ID":40,"REQUESTER":"request","STATUS":"Assign","SUBCATEGORY":"subCategory","SUBJECT":"subject","TICKET_NUMBER":"ABC_1234_98"},{"ASSIGNED_TO":"assignto","BODY":"undefined","CATEGORY":"undefined","FILE_NAME":"fileName","ID":45,"REQUESTER":"request","STATUS":"Assign","SUBCATEGORY":"undefined","SUBJECT":"undefined","TICKET_NUMBER":"[object Object]"}]
I want to bind it to Data Grid on DevExtreme. you can see the code on approval.js
$scope.dataGridOptions = {
dataSource: {
store: {
type: "odata",
url: "http://localhost:51458/ServiceRequest.svc/GetAllRequest"
},
select: [
"ID",
"REQUESTER",
"CATEGORY",
"BODY",
"FILE_NAME",
"ASSIGNED_TO"
],
},
columns: [
{
caption: "ID",
dataField: "ID",
}, {
dataField: "REQUESTER",
width: 250
}, {
caption: "Kategori",
dataField: "CATEGORY",
}, {
caption: "Body",
dataField: "BODY",
}, {
caption: "File Name",
dataField: "FILE_NAME",
}, {
caption: "Assigned To",
dataField: "ASSIGNED_TO",
}
]
}
in the html
<div>
<div id="gridContainer" dx-data-grid="dataGridOptions"></div>
</div>
I'm always getting No Data on the Data Grid. Why it cant get data from localhost? can it use JSON? or the data should be ODATA? because when i try to bind the example data from
https://js.devexpress.com/Demos/DevAV/odata/Products
it can work bind odata example
Thanks in advance
You should try it.
$.getJSON("localhost:51458/ServiceRequest.svc/GetAllRequest/", function (data) {
$("#gridContainer").dxDataGrid({
dataSource: data,
// your code....
}).dxDataGrid("instance");
Trying to make work Kendo UI with ASP.NET MVC.
I can use ready-to-work toolkit, but it will tie front-end to back-end; that's inappropriate, so I'm doing all manually.
I've bound datasource
dataSource: {
batch: true,
transport: {
read: {
url: "http://192.168.0.34/FRINGE/api/tasks",
dataType: "json"
},
modified schema
schema: {
model: {
id: "TaskID",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
description: { from: "Description" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
},
parse: function (responce) { /*debugger;*/ }
},
and wrote a simple controller
[HttpGet]
public ActionResult Tasks(int? id)
{
//«data» type is List<Tasks>
if (id.HasValue)
return Json(data.SingleOrDefault(x => x.TaskID == id.Value), JsonRequestBehavior.AllowGet);
else
return Json(data, JsonRequestBehavior.AllowGet);
}
Which produces data like
[{"TaskID":1,"Title":"Action","Start":"\/Date(1425009600000)\/","End":"\/Date(1425013200000)\/","Description":"Action time","OwnerId":1,"IsAllDay":false},{"TaskID":2,"Title":"Dinner","Start":"\/Date(1425034800000)\/","End":"\/Date(1425038400000)\/","Description":"Dinner time","OwnerId":1,"IsAllDay":false}]
But nothing works. Checked schema and data on Telerik Kendo UI Dojo, and all good there. I think, problem in controller declaration due to some params lack.
What I've missed?
You're defining a parse method in your schema which does nothing. You have to remove it or return data from it:
parse: function(response) {
return response;
}
I can't get my Kendo UI grid to populate with my JSON data.
I suspect that it has to do with 'the double' data part in front of my relevant json data.
I'm not sure how I can add a double data mark in my schema. Any help would be much appreciated.
JSON:
{"dsProduct":
{"ttProduct":
[{"ProductId":"Truck","ProductType":5,"Tradeable":true},{"ProductId":"Tractor","ProductType":5,"Tradeable":false}]
}
}
JavaScript/HTML code:
<!doctype html>
<html>
<head>
<title>Kendo Grid with json</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:8810/Kendo/rest/KendoRest",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
},
batch: true,
pageSize: 20,
schema: {
data:
"dsProduct",
model: {
id: "ProductId",
fields: {
ProductId: { type: "string" },
ProductType: { type: "number" },
Tradeable: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductId", title: "Product Name" },
{ field: "ProductType", title:"Product Type", width: "120px" },
{ field: "Tradeable", title:"Can product be traded?", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
</script>
</div>
</body>
</html>
Your definition for the shema.data isn't quite right. Looking at your json, there is a child object under the dsProduct that contains the array. Change your data to dsProduct.ttProduct and it should work.
schema: {
data:
"dsProduct.ttProduct",
model: {
See working sample http://jsbin.com/vevixa/1/edit?html,js,console,output
For some reason I seem to be unable to get any more than the following in the Kendo UI Grid:
HTML:
<div id="grid"></div>
<script>
var remoteDataSource = new kendo.data.DataSource(
{
transport:
{
read: {
type: "POST",
dataType: "json",
url: "/home/getopportunities/"
}
},
pageSize: 4
})
$("#grid").kendoGrid(
{
dataSource: remoteDataSource,
columns: [
{
title: "Title",
headerAttributes: {
style: "text-align:center"
},
attributes: {
"class": "table-cell"
},
width: 600,
filterable: true
},
{
title: "Activity Type",
headerAttributes: {
},
attributes: {
"class": "table-cell",
style: "text-align:center"
},
width: 100,
filterable: true
},
{
title: "Specialty",
filterable: true,
headerAttributes: {
style: "text-align:center"
},
attributes: {
"class": "table-cell",
style: "text-align:center"
}
},
{
title: "Total Credits",
format: "{0}",
headerAttributes: {
style: "text-align:center"
},
attributes: {
"class": "table-cell",
style: "text-align:center"
}
}
],
height: 430,
scrollable: true,
sortable: true,
pageable: true,
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
},
number: {
eq: "Is equal to",
neq: "Is not equal to",
gte: "Greater Than",
lte: "Less Than"
}
}
}
});
</script>
This is the JSON that is returned to it:
[
{"ActivityID":367,"Title":"Non Webinar Test For Calendar","ActivityType":"Other","TotalCredits":2,"Specialty":"[AB] [AE]"},
{"ActivityID":370,"Title":"Stage - Test SI Changes Part II","ActivityType":"Other","TotalCredits":2,"Specialty":"[NE]"},
{"ActivityID":374,"Title":"Webinar Test Event For Calendar","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[FE] [NE] "},
{"ActivityID":401,"Title":"Module #1 Webinar: Learn Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] ",},
{"ActivityID":403,"Title":"Module #3 Webinar: Learn Even More Stuff","ActivityType":"Webinar","TotalCredits":2,"Specialty":"[AB] [AE]",}
]
I feel like I'm really close but am missing the last piece. Any help would be GREATLY appreciated as I'm on a deadline.
common troubles are with missing schema attribute !
add it to grid's - datasource, and check if it is set when you make your json.
(when plain array is serialized/to_json, the data array needs a property indicating the shema)
here an example to make it clear:
js: sample grid initialisation / datasource:
$("#grid").kendoGrid({ dataSource: { transport: { read: "/getdata/fromthisurl" }, schema: { data: "data" } } });
when you make / output your json, see if shema information is in the encoded result:
php:
$somedata= get_my_data();
header("Content-type: application/json");
echo "{\"data\":" .json_encode($somedata). "}";
or:
$viewdata['data'] = get_my_data();
header("Content-type: application/json");
echo (json_encode($viewdata));
so the json that is sent to the grid would look like:
{data:
[
{item}
{item}
]
}
instead of just:
[
{item}
{item}
]
Code looks good. I wonder if you change data source creation as below . Change type from POST to GET and see if it works,
var remoteDataSource = new kendo.data.DataSource(
{
transport:
{
read: {
type: "GET",
dataType: "json",
url: "/home/getopportunities/"
}
},
pageSize: 4
})
Try this,
$(document).ready(function () {
var remoteDataSource = new kendo.data.DataSource(
{
transport:
{
read: {
type: "POST",
dataType: "json",
url: "/home/getopportunities/"
}
},
pageSize: 4
});
});
You can see what part of code raise an exception in some debug tool (I'd recommend you Chrome's DevTools (just press F12 key in Chrome).
I'm pretty sure the problem is misssing field attribute in your grid's columns array, so Kendo don't know what data from datasource to display in what column of grid.
columns: [
{
field: "Title", // attr name in json data
title: "Title", // Your custom title for column (it may be anything you want)
headerAttributes: {
style: "text-align:center"
},
attributes: {
"class": "table-cell"
},
width: 600,
filterable: true
},
Don't forget to change request type from "POST" to "GET".
What I found when inspecting the JSON coming back from the grid datasource json query was the field names were being JavaScripted -- what was ActivityID in C# became activityID on the wire...
This is unclean, and I discovered it by accident, but what worked for me was returning Json(Json(dataList)) from the controller instead of Json(dataList).
I cannot get this simple KendoUI Pie chart to work and I do not see anything wrong with the code.
I only have some basic JSON which I am trying to bind to. As you can see the source data contains already calculated percentages and also the actual values. I am only trying to bind the pie chart to the percentage columns. The reason for the percentageUnit and percentageValue is because I already have code in place to switch between the two. The actual value and unit fields will be used as tooltips. So it is important to have all that data in the source.
The chart does populate but looks totally messed up. Is it me or Kendo?
http://jsfiddle.net/jqIndy/38gH4/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
</head>
<body>
<div id="client-order-status"></div>
<script>
var dr = [{
Status: "CANCELLED",
Units:554615.000000000000,
Value:12194910.410000000000,
PercentageUnits:12.955700000000,
PercentageValue:25.479241000000
},{
Status: "INVOICED",
Units:3260369.000000000000,
Value:31610141.095120000000,
PercentageUnits:76.161596000000,
PercentageValue:66.044143000000
},{
Status: "OPEN",
Units: 465873.000000000000,
Value: 4057089.598000000000,
PercentageUnits: 10.882704000000,
PercentageValue: 8.476615000000
}];
var dsCOStatus = new kendo.data.DataSource({
data: dr,
schema: {
type: "json",
model: {
fields: {
Status: "Status",
PercentageUnits: "PercentageUnits",
PercentageValue: "PercentageValue",
Units: "Units",
Value: "Value"
}
}
},
});
$(function () {
$("#client-order-status").kendoChart({
dataSource: dsCOStatus,
title: {
text: "Client Order Status (past 12 months)"
},
legend: {
position: "bottom"
//labels: {
// template: "#= text # (#= value #%)"
//}
},
seriesDefaults: {
type: "pie"
//labels: {
// visible: true,
// format: "{0}%"
//}
},
series: [{
field: "Status",
categoryField: "Value"
}],
tooltip: {
visible: true
//format: "{0}"
}
}).show();
});
</script>
</body>
</html>
In XML I have the same problem:
var drXML = "<D><Report><Status>CANCELLED</Status><Units>554615.000000000000</Units><Value>12194910.410000000000</Value><PercentageUnits>12.955700000000</PercentageUnits><PercentageValue>25.479241000000</PercentageValue></Report><Report><Status>INVOICED</Status><Units>3260369.000000000000</Units><Value>31610141.095120000000</Value><PercentageUnits>76.161596000000</PercentageUnits><PercentageValue>66.044143000000</PercentageValue></Report><Report><Status>OPEN</Status><Units>465873.000000000000</Units><Value>4057089.598000000000</Value><PercentageUnits>10.882704000000</PercentageUnits><PercentageValue>8.476615000000</PercentageValue></Report></D>";
var dsCOStatus = new kendo.data.DataSource({
data: drXML,
schema: {
type: "xml",
data: "/D/Report",
model: {
fields: {
Status: "Status/text()",
PercentageUnits: "PercentageUnits/text()",
PercentageValue: "PercentageValue/text()",
Units: "Units/text()",
Value: "Value/text()"
}
}
}
I think that you need to swap your categoryField and field names:
series: [{
field: "Value",
categoryField: "Status"
}]
From the API reference:
categoryField: The data field containing the sector category name.
valueField: The data field containing the series value.
I found the answer. Because XML is being returned/parsed as text it seems that the KendoUI grid does not accept this as a valid value. After changing the value field it works fine.
See this URL:
http://www.kendoui.com/forums/ui/grid/sort-order-numeric-with-xml-binded-datasource.aspx
Thanks Gudman!
Answer below:
schema: {
type: "xml",
data: "/DsCOStatus/Report",
model: {
fields: {
Status: "Status/text()",
PercentageUnits: "PercentageUnits/text()",
PercentageValue: "PercentageValue/text()",
Units: "Units/text()",
Value: { field: "Value/text()", type:"number" }
//Value: "Value/text()"
}
}
}