CODEWITHSUNDEEP
jsonkendo-grid
John Swaringen
John Swaringen

Reputation: 751

Kendo UI Grid JSON DataSource not loading data

For some reason I seem to be unable to get any more than the following in the Kendo UI Grid:

grid-image

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.

Upvotes: 4

Views: 20928

Answers (6)

D.B. Fred
D.B. Fred

Reputation: 560

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...

Upvotes: 1

Graham Laight
Graham Laight

Reputation: 4850

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).

Upvotes: 0

womd
womd

Reputation: 3453

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}
]

Upvotes: 4

Nick Baluk
Nick Baluk

Reputation: 2275

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".

Upvotes: 1

Jaimin
Jaimin

Reputation: 8020

Try this,

  $(document).ready(function () {
var remoteDataSource = new kendo.data.DataSource(
    {
        transport:
        {
            read: {
                type: "POST",
                dataType: "json",
                url: "/home/getopportunities/"
            }
        },
        pageSize: 4
    });
});

Upvotes: 1

Dhananjay Kumar
Dhananjay Kumar

Reputation: 51

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
    })

Upvotes: 1

Related Questions