JSON to Kendo Grid - kendo-ui

Question

I want to feed some json data to my Kendo Grid. I'm taking the html route.
Here's what I have:
Given the following:
<div id="#grid"></div>
JSON:
"{\"Columns\":{\"Column\":[{\"#Name\":\"key1\",\"#DataType\":\"Boolean\",\"#text\":\"True\"},{\"#Name\":\"key2\",\"#DataType\":\"String\",\"#text\":\"Hello
World\"},{\"#Name\":\"key3\",\"#DataType\":\"Integer\",\"#text\":\"999\"}]}}"
xml version of the JSON:
<Columns>
<Column Name=""key1"" DataType=""Boolean"">True</Column>
<Column Name=""key2"" DataType=""String"">Hello World</Column>
<Column Name=""key3"" DataType=""Integer"">999</Column>
</Columns>
My failed JavaScript attempt:
$("#grid").kendoGrid({
sortable: true,
groupable: true,
scrollable: true,
height: "300px",
pageable: {
pageSizes: 9
},
columns:
[
{ field: "Name" },
],
dataSource:
{
transport:
{
read:
{
url: "/controller/action?param=" + myParam,
dataType: "jsonp"
}
}
},
schema:
{
data: "Column"
}
});

Answer 1

As you are expecting json data so you must use dataType:"json" instead of dataType:"jsonp"
now to read data in appropriate format you may use read function as below
transport: {
read: function(options) {
$.ajax( {
url: "/controller/action?param=" + myParam,
dataType: "json",
success: function(result) {
options.success(result.Columns.Column);
}
});
},
i hope this will help you

Answer 2

Abbas's answer is perfect; except, 'result' should be parsed as json:
var jResult = $.parseJSON(result);
Here's my test data:
public string ValidationResult()
{
var doc = new XmlDocument();
var xml = #"
<dataset>
<table>
<fname>a1</fname>
<age>aa1</age>
</table>
<table>
<fname>a2</fname>
<age>aa2</age>
</table>
<table>
<fname>a3</fname>
<age>aa3</age>
</table>
</dataset>";
;
doc.LoadXml(xml);
return JsonConvert.SerializeXmlNode(doc);
}
As per Abbas's answer here's the full version of binding the grid to the above xml->json resultset:
$("#grid").kendoGrid({
sortable: true,
groupable: true,
scrollable: true,
height: "600px",
pageable: {
pageSizes: 9
},
columns:
[
{ field: 'fname' },
{ field: 'age' }
],
dataSource:
{
transport:
{
read: function (options)
{
$.ajax(
{
url: "/Controller/Action?param=" + paramVal,
dataType: "json",
success: function (result)
{
var jResult = $.parseJSON(result);
options.success(jResult.dataset.table);
}
});
}
}
},
});