Kendo ui odata request callback not supported

Question

I am working on an odata grid with the Kendo user interface. The problem is that the ajax request contains a callback parameter. What causes this error: The callback parameter is not supported. When I make a request manually without a callback, my odata service works fine. Does anyone know how to fix this?

$("#grid").kendoGrid({
        dataSource: new kendo.data.DataSource({
            type:"odata",
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,

            transport: {
                contentType: "application/json; charset=utf-8",
                type: "GET",
                read: "/odata/FestivalSignUps?$inlinecount=allpages&$expand=PrefferedTasks/Task,AvailableDays,ApplicationUser",
                dataType: "json",
                parameterMap: function (options, type) {
                    var paramMap = kendo.data.transports.odata.parameterMap(options);
                    delete paramMap.$format; // <-- remove format parameter.

                    return paramMap;
                }
            },


            pageSize: 10,
            schema: {
                data: function (data) {
                    return data["value"];
                },
                total: function (data) {
                    return data["odata.count"];
                },

            }
        }),
        filterable:true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            { field: "ApplicationUser.Email", width: 90, title: "Email" },

            { field: "ApplicationUser.FirstName", width: 90, title: "Voornaam" },

            { field: "ApplicationUser.LastName", width: 90, title: "Achternaam" },
            { field: "PrefferedTasks", width: 90, title: "Taken",
                template: "#= formatTasks(data) #"},
            { field: "Beschikbaar", width: 90, title: "Taken" }
        ]

    });

Update This code resolved the issue:

 $("#grid").kendoGrid({
        dataSource: new kendo.data.DataSource({                

            type: 'odata',

            transport: {
                read: {
                    url: "/odata/FestivalSignUps?$expand=PrefferedTasks/Task,AvailableDays,ApplicationUser",
                    dataType: "json"
             },

            },



            schema: {
                data: function (data) {
                    return data["value"];
                },
                total: function (data) {
                    return data["odata.count"];
                },

            },
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        }),

        filterable:true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            { field: "ApplicationUser.Email", width: 90, title: "Email" },

            { field: "ApplicationUser.FirstName", width: 90, title: "Voornaam" },

            { field: "ApplicationUser.LastName", width: 90, title: "Achternaam" },
            { field: "PrefferedTasks", width: 90, title: "Taken",
                template: "#= formatTasks(data) #"},
            {
                field: "AvailableDays", width: 90, title: "Beschikbaar",
                template: "#= formatDays(data) #"
            },
        ]

    });

Answer 1

I will talk about this problem and some other blog posts that I wrote: Server-side filtering using KendoUI with MVC4 WebAPI and OData.

---

, jsonp. , Kendo, dataType - "json".

var dataSource = new kendo.data.DataSource({
    type: 'odata', // <-- Include OData style params on query string.
    transport: {
        read: {
            url: "/api/Albums",
            dataType: "json"; // <-- The default was "jsonp".
        }
    }
});