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
Related
For Kendo UI, it would give a confirmation window before you delete a record.
Is there a way to add it to the update button? and the add record?
Here is an example, it seems hook all the callback already.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px", editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
function customBoolEditor(container, options) {
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}
</script>
</div>
</body>
</html>
You can do that by using click event of jquery .So , whenever edit button or create new button is clicked then click handler will get called and then you can use confirm(..) box to get response from user .If user select cancel then we can use cancelChanges() to avoid any changes else do required operation.
Demo Code :
$(document).ready(function() {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number",
validation: {
min: 0,
required: true
}
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "120px"
},
{
field: "UnitsInStock",
title: "Units In Stock",
width: "120px"
},
{
field: "Discontinued",
width: "120px",
editor: customBoolEditor
},
{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}
],
editable: "inline"
});
});
function customBoolEditor(container, options) {
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}
//onclick of edit and new recors
$(document).on('click', '.k-grid-edit,.k-grid-add', function() {
var r = confirm("Are you sure ?"); //show alert
//if user select cancel
if (r == false) {
//cancel changes
$('#grid').data('kendoGrid').dataSource.cancelChanges();
console.log("Cancel!");
}
})
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
</div>
I want to insert two buttons into the columns of the datagrid using Kendo UI.
Each element of the list contain two buttons example: EDIT and DELETE
I assume you using kendo ui and trying to have edit and delete button in each row this is how you can accomplish it by specifying a column like this .
{ command: ["edit", "destroy"], title: " ", width: "250px" }]
Please see the code snippet below taken from telerik sample . Here is the live dojo sample. The example below uses a popup editing. In case you are using inline editing look into this inline Editing Sample
output of code :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
</script>
</div>
</body>
</html>
I am trying to bind list which i am populating after receiving response from API. I can see the objects into the list but i still didn't understand why kendo grid is not binding datasource. i have code as below.
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel)
.then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
i am getting result into vm.accountGridData after receiving response from API call and i am trying to bind that to datasource of kendo grid as below.
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
Do i need to do anything else to get the data ?
You need to create a directive like this:
app.directive('myDirective', function () {
return {
restrict: 'EA',
scope: {},
template: [].join(''),
controllerAs: 'vm',
controller: function () {
var vm = this;
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel).then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
},
link: function () {
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
}
};
});
And in your html:
<div my-directive></div>
<div id="grid"></div>
You dont need data property in your datasource if you don't implement custom read function for it.
Datasource property should be an array or kendo-datasource object.
Try this:
$("#grid").kendoGrid({
dataSource: vm.accountGridData,
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
And checkout grid documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
Finally i found the way after fighting. it's in simple one step.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.mobile.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid k-scope-field="grid" options="mainGridOptions"></kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope, $http){
$scope.data = new kendo.data.ObservableArray([]);
$http({
method: 'GET',
type:"json",
url: '//jsonplaceholder.typicode.com/posts'
}).then(function successCallback(response) {
$scope.grid.dataSource.data(response.data);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
pageSize: 5
},
sortable: true,
pageable: true,
filterable: {
mode: "row"
},
resizable: true,
columns: [{
field: "userId",
title: "userId",
width: "120px"
},{
field: "id",
title: "ID",
width: "120px"
},{
field: "title",
width: "120px"
},{
field: "body",
width: "120px"
}]
};
})
</script>
</body>
</html>
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"
}
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()"
}
}
}