Kendo UI Grid JSON DataSource not loading data

Question

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

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.

Answer 1

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