kendo.data.DataSource no longer working?

[Kyle]

Hello,
I am attempting to upgrade from Kendo v2012.2.71 to the latest internal build: v2012.3.1512 (I also tried the latest official release build).

In my existing code, I was previously defining a datasource and grid like the following:

var testDataSource = new kendo.data.DataSource(
    {
        transport: {
            read: {
                url: "/api/Grids/Events",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                data: function () {
                    return {
                        filterId: filterId
                    };
                }
            },
            parameterMap: function (options) {
                return JSON.stringify(options);
            }
        },
        schema: {
            model: {
                id: "organizationDeviceId",
                fields: {
                    organizationDeviceName: { type: "string" },
                    EventName: { type: "string" },
                    EventDetails: { type: "string" },
                    EventSeverity: { type: "string" },
                    EventDate: { type: "date" }
                } // End of fields
            }, // End of model
            data: "Entries",
            total: "TotalCount"
        },
        sort: {
            field: "EventDate",
            dir: "desc"
        },
        pageSize: 14,
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true
    }
);
var EventsDataGrid = $("#eventsGrid").kendoGridWithTitles({
    selectable: "row",
    dataSource: testDataSource,
    columnMenu: true,
    filterable: true,
    scrollable: true,
    sortable: true,
    resizable: true,
    height: 500,
    toolbar: kendo.template($("#filterToolbarTemplate").html()),
    columns: [ { title: Globalize.localize("Dashboards_Events_DeviceName"), field: "organizationDeviceName", template: "<a href='//OrganizationDevice?organizationDeviceId=#= organizationDeviceId #'>#= organizationDeviceName #</a>" },
                { title: Globalize.localize("Dashboards_Events_EventName"), field: "EventName" },
                { title: Globalize.localize("Dashboards_Events_EventDetails"), field: "EventDetails" },
                { title: Globalize.localize("Dashboards_Events_EventSeverity"), field: "EventSeverity" },
                { title: Globalize.localize("Dashboards_Events_Date"), field: 'EventDate', template: "<div>#= kendo.toString(EventDate, CloudSAAS.GeneralDateTimeFormat) #</div>" }
                ],
    pageable: { input: true, numeric: false },
}).data("kendoGrid");

Notice that a define testDataSource then use it as the value of the grids datasource. This however seems to lo longer work. Instead I get a blank grid.

If I instead change the code to the following it does work:

var EventsDataGrid = $("#eventsGrid").kendoGridWithTitles({
    selectable: "row",
    dataSource:         {
        transport: {
            read: {
                url: "/api/Grids/Events",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                data: function () {
                    return {
                        filterId: filterId
                    };
                }
            },
            parameterMap: function (options) {
                return JSON.stringify(options);
            }
        },
        schema: {
            model: {
                id: "organizationDeviceId",
                fields: {
                    organizationDeviceName: { type: "string" },
                    EventName: { type: "string" },
                    EventDetails: { type: "string" },
                    EventSeverity: { type: "string" },
                    EventDate: { type: "date" }
                } // End of fields
            }, // End of model
            data: "Entries",
            total: "TotalCount"
        },
        sort: {
            field: "EventDate",
            dir: "desc"
        },
        pageSize: 14,
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true
    },
    columnMenu: true,
    filterable: true,
    scrollable: true,
    sortable: true,
    resizable: true,
    height: 500,
    toolbar: kendo.template($("#filterToolbarTemplate").html()),
    columns: [ { title: Globalize.localize("Dashboards_Events_DeviceName"), field: "organizationDeviceName", template: "<a href='//OrganizationDevice?organizationDeviceId=#= organizationDeviceId #'>#= organizationDeviceName #</a>" },
                { title: Globalize.localize("Dashboards_Events_EventName"), field: "EventName" },
                { title: Globalize.localize("Dashboards_Events_EventDetails"), field: "EventDetails" },
                { title: Globalize.localize("Dashboards_Events_EventSeverity"), field: "EventSeverity" },
                { title: Globalize.localize("Dashboards_Events_Date"), field: 'EventDate', template: "<div>#= kendo.toString(EventDate, CloudSAAS.GeneralDateTimeFormat) #</div>" }
                ],
    pageable: { input: true, numeric: false },
}).data("kendoGrid");

The only difference being that the datasource is now created directly inline with the grid.

Why has this behavior changed? Can I no longer define a remote datasource separate from my grid? Note that if the datasource is not remote (locally defined array) then it does seem to work properly.

[Rosen]

Hi Kyle,

There is no change in the behavior. The Grid widget supports both DataSource instances or configuration. Here is a demo which illustrates this.

However, looking at the code you have pasted, it seems that you are using a custom widget. Therefore, you should verify that the cause for the issue is not the custom widget itself.

Greetings,
Rosen
the Telerik team