[Solved] ServerFiltering, ServerSorting etc. not working in Visual Studio LightSwitch using Web API

[Divyang]

Following this(http://blogs.msdn.com/b/lightswitch/archive/2013/04/22/create-dashboard-reports-with-lightswitch-webapi-and-serverapplicationcontext.aspx) fantastic article I am able to bind a Kendo grid to  my data using Web API. However I am having difficulties enabling the server side paging, sorting, filtering etc. I have enabled the required options at client side but when I perform a filtering or sorting the fiddler shows no extra parameter are being sent. There are some examples using ASP/MVC wrappers but I have the license of plain HTML/JS version of Kendo UI not the ASP/MVC one.

Here is the get method of my controller:
 Public Function GetValues() As Object
Try
Dim query =
From c In dws.ApplicationData.ContactAddresses
Select c.Id, c.Address, c.Town, c.City, c.PostCode

Return query.Execute()
Catch ex As Exception
Throw ex
End Try
End Function

Here is the client side JS:

myapp.ContactAddressesBrowseKendo.grdOdata_render = function (element, contentItem) {
var gridContainer = $('<div id="grdOdata" />');
gridContainer.appendTo($(element));

var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: function (items) {
//make json request
$.ajax({
url: "../api/ContactAddresses",
dataType: "json",
success: function (result) {
items.success(result);
},
error: function (result) {
items.error(result);
}
});
},

parameterMap: function (options, type) {
var paramMap = kendo.data.transports.odata.parameterMap(options);
if (type == "read") {
return {
$top: data["value"].take,
$skip: data["value"].skip
}
}
return paramMap;
}
},
schema: {
model: {
fields: {
id: "Id",
Id: {
type: "number",
editable: false,
nullable: true
},
Address: { type: "string" },
Town: { type: "string" },
City: { type: "string" },
PostCode: { type: "string" }
}
},
//--------------------------------------------------------------
data: function (data) {
return data;
},
total: function (data) {
return data.length;
}

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

gridContainer.kendoGrid({
dataSource: dataSource,
height: 550,
groupable: true,
dataBound: function (o) {
//------------------------------
//Hide groupped columns
//------------------------------
var g = gridContainer.data("kendoGrid");
for (var i = 0; i < g.columns.length; i++) {
g.showColumn(i);
}
$("div.k-group-indicator").each(function (i, v) {
g.hideColumn($(v).data("field"));
});
g.hideColumn("Id");
//------------------------------
},
toolbar: ["create", "save", "cancel"],
editable: true,
scrollable: false,
pageable: true,
filterable: true,
sortable: true,
resizable: true,
selectable: true,
columns: [{
field: "Address",
title: "Address"
}, {
field: "Town",
title: "Town"
}, {
field: "City",
title: "City"
}, {
field: "PostCode",
title: "Post Code"
}, {
field: "Id",
title: "ID"
}]
});
};

[Daniel]

Hello,

From the code it seems that you are using a custom function for the read operation in which case the parameterMap function will not be called and you should send the parameters from the custom function e.g.

read: function (items) {
    var data = kendo.data.transports.odata.parameterMap($.extend({}, items.data), "read");

    $.ajax({
        url: "../api/ContactAddresses",
        dataType: "json",
        data: data,
        success: function (result) {
            items.success(result);
        },
        error: function (result) {
            items.error(result);
        }
    });
},

Also, from the server code it is not clear whether the controller is enabled to handle OData and if yes, which version. Could you clarify? I would also suggest to check the following sample projects which demonstrate using server operations with OData enabled ApiController:

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/odata-v4-web-api-binding
•  https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-webapi-odata-crud

Regards,
Daniel
Telerik

 

 

[Divyang]

Thanks Daniel,

That worked, so basically all I had to do is to remove the custom function in read operation. The good thing is after removing the function, I can straight away call the Odata services that LightSwitch produce without using the web api & everything works, I don't need to do any parameter mapping or anything else. Here is my updated datasource object:

    var dataSource = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: {
                url: "http://localhost:49831/ApplicationData.svc/ContactAddresses",
                dataType: "json",
            },
        },
        schema: {
            model: {
                fields: {
                    id: "Id",
                    Id: {
                        type: "number",
                        editable: false,
                        nullable: true
                    },
                    Address: { type: "string" },
                    Town: { type: "string" },
                    City: { type: "string" },
                    PostCode: { type: "string" }
                }
            },
            data: function (data) {
                return data["value"];
            },
            total: function (data) {
                return data["value"].length;
            }
        },
        pageSize: 3,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });