Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo ui odata request callback not supported

Tags:

odata

kendo-ui

I am working on a odata grid with Kendo UI. The problem is that the ajax request keeps containing a callback parameter. Which causes this error: Callback parameter is not supported. When I do the request manually without the callback, my odata service works perfect. Someone an idea 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 solved the problem:

 $("#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) #"
            },
        ]

    });
like image 781
Identity Avatar asked Feb 12 '23 22:02

Identity


1 Answers

I cover this issue and some others in a blog post that I wrote: Server-Side Filtering Using KendoUI With MVC4 WebAPI and OData.


If you are querying your own data, and don't need to do a cross-domain request, we can just not use jsonp. To do this, we just tell Kendo the dataType for the read operation is "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".
        }
    }
});
like image 184
CodingWithSpike Avatar answered Feb 23 '23 01:02

CodingWithSpike