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

2 posts, 0 answers
  1. Maulik Patel
    Maulik Patel avatar
    36 posts
    Member since:
    Mar 2010

    Posted 20 Sep 2012 Link to this post


    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>
        <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>
        <div id="example" class="k-content">
                <div id="grid"></div>
                <input id="btnView" type="button" value="view" onclick="JavaScript: rebind();" />
                    function rebind() {
                        var gridDS = $("#grid").data("kendoGrid").dataSource;
                    $(document).ready(function () {
                            dataSource: {
                                type: "odata",
                                transport: {
                                        contentType: "application/json; charset=utf-8",
                                        type: "GET", 
                                        dataType: "json"
                                success: function (e) {
                                    alert("Error: " + e.error);
                                schema: {
                                    data: "Result"
                                error: function (e) {
                                    alert("Error: " + e.errorThrown);
                                change: function (e) {
                                requestStart: function (e) {
                                    //alert("Request Start");
                                pageSize: 10,
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            height: 250,
                            filterable: true,
                            sortable: true,
                            pageable: true

  2. Gerald
    Gerald avatar
    5 posts
    Member since:
    Jun 2012

    Posted 26 Sep 2012 Link to this post

    @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{
            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 <----//
                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 <----//

Back to Top