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

Grid binding to JSON data resulted by ASP.NET Web API

1 Answer 687 Views

Grid

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

Maulik Patel asked on 20 Sep 2012, 05:36 AM

Hi,

We are trying to bind the JSON data to grid using "Read" transport datasource. but somehow the grid does not show any record. The JSON data is valid and returned by ASP.NET Web API. If the JSON data is copied to ".JSON" file and provided to datasource, it works.

One of the strange part noticed, when the result is binding internally (guess), the grid throws an error. The error is "ParserError". Below is the code snippet. Please let me know any work around.

If the dataSource type is changed to "JSON", the error message is "No Transport".

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Test Page</title>

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

<script src="Scripts/kendo.all.min.js" type="text/javascript"></script>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<script src="js/json2.js"></script>

</head>

<body>

<div id="example" class="k-content">

<div id="grid"></div>

<input id="btnView" type="button" value="view" onclick="JavaScript: rebind();" />

<script>

function rebind() {

var gridDS = $("#grid").data("kendoGrid").dataSource;

gridDS.read();

}

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

type: "odata",

transport: {

read:"http://XYZ/JSON/Data",

contentType: "application/json; charset=utf-8",

type: "GET",

dataType: "json"

},

success: function (e) {

alert("Error: " + e.error);

},

schema: {

data: "Result"

},

error: function (e) {

debugger;

alert("Error: " + e.errorThrown);

},

change: function (e) {

alert("Change");

},

requestStart: function (e) {

//alert("Request Start");

},

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true

},

height: 250,

filterable: true,

sortable: true,

pageable: true

});

</script>

</div>

</body>

</html>

Regards,
Maulik

1 Answer, 1 is accepted

answered on 26 Sep 2012, 09:28 PM

@Maulik. I am getting my JSON data from a c# WebMethod. It appears you are missing a couple of other configs especially in the datasource. JSON data objects are returned wrapped in a data object called "d". You have to declare this in the schema of the datasource otherwise it will not know how to bind it to the grid. All modern browsers return JSON wrapped this way and with that key word "d". Hope this helps.

var ctkGridData = new kendo.data.DataSource({

transport: {

read: {

url: "../Webmethods/CctkGrid.aspx/GetRoster",

contentType: "application/json; charset=utf-8",

type: "POST"

}

},

schema: {

data: "d",

total: function (response) { // For grid item count botttom right of grid

return $(response.d).length;

}

},

pageSize: 10

}); //----> End Data store <----//

$("#ctk-grid").kendoGrid({

dataSource: ctkGridData,

height: 400,

groupable: true,

sortable: true,

filterable: true,

columnMenu: true,

reorderable: false,

resizable: true,

pageable: {

refresh: true,

pageSizes: [10, 25, 50, 100]

},

columns: [

{ field: "Name", title: "Name", width: "175px", template: "<a href='mailto:${ Email4Career }' title='${ Email4Career }'>${ Name }</a>" },

{ field: "Rank", title: "Rank", width: "60px" },

{ field: "CAR_FLD_AFSC", title: "AFSC", width: "70px" },

{ field: "Gender", title: "Sex", width: "45px" },

{ field: "DTY_STAT_TX", title: "Duty Status" },

{ field: "PersonnelStatus", title: "Personnel", filterable: false, template: '#= statusImg(PersonnelStatus)#' },

{ field: "MedicalStatus", title: "Medical", filterable: false, template: '#= statusImg(MedicalStatus)#' },

{ field: "TrainingStatus", title: "Training", filterable: false, template: '#= statusImg(TrainingStatus)#' },

{ field: "PercentComplete", title: "Overall", template: "${ PercentComplete }%" },

{ command: { text: "Training", click: showTrainingWin }, title: " "}]

}); //----> End grid <----//