OData v4 Web Api Binding - Grid Filters not working

[Marco]

We’ve tried to use the Grid’s ODataV4 Web Api Binding of “KendoUI for JQuery” and we’ve encountered some problems.
We’ve tried to replicate the business logic of the example in your GitHub repository (here the URL: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/odata-v4-web-api-binding ).
Debugging your solution we’ve discovered that the filter of field “Category” is broken.
We have found a partial fix to this issue, changing the line 84 of main.html from

{ field: "Category", template: "#: Category ? Category.CategoryName : '' #", editor: categoryEditor },

to

{ field: "Category.CategoryName", editor: categoryEditor },

Unfortunately, this has been useful for the filter, but broke create and update.
We’ve not been able to find a solution and we need that functionality.
Could you send us a suggestion or update your example?

[Angel Petrov]

Hi Marco,

I have already provided an answer in the official support ticket you have opened. In order to help other community members resolve this issue I am pasting my responce here as well:

The experienced behavior is due to the use of a complex object. In such case one may need to integrate slight changes to the logic in order to make things work. For the particular case the filter parameter passed to the OData Web API can be changed. Here is an exemplary implementation that should fix the scenario. The important parts are highlighted.

JavaScript:

$("#products").kendoGrid({
            dataSource: {
                type: "odata-v4",
                transport: {
                    read: {
                        url: "/odata/Products",
                        data: {
                            $expand: "Category"
                        }
                    },
                    update: {
                        url: function (data) {
                            return "/odata/Products(" + data.ProductID + ")";
                        }
                    },
                    create: {
                        url: "/odata/Products?$expand=Category"
                    },
                    parameterMap: function (data, type) {
                        var options = kendo.data.transports["odata-v4"].parameterMap(data, type);
                        if (type === "read") {
                            if (options.$filter && options.$filter.indexOf("Category/CategoryName") < 0) {
                                options.$filter = options.$filter.replace("Category", "Category/CategoryName");
                            }
                        }
                        return options;
                    }
                },
                sort: {
                    field: "ProductID",
                    dir: "desc"
                },
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            UnitPrice: { type: "number" },
                            SupplierID: { type: "number" },
                            UnitsInStock: { type: "number" },
                            UnitsOnOrder: { type: "number" },
                            ProductID: { type: "number", editable: false },
                            SupplierID: { type: "number", defaultValue: 1 },
                            Discontinued: { type: "boolean" },
                            CategoryID: { type: "number" },
                            Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages" } }
                        }
                    }
                },
                requestEnd: function(e) {
                    if (e.type == "create") {
                        // Make a read request to expand Category. By default the OData controller doesn't expand on create.
                        this.read();
                    }
                },
                pageSize: 10,
                serverFiltering: true,
                serverPaging: true,
                serverSorting: true
            },
            height: 650,
            toolbar: ["create"],
            groupable: true,
            sortable: true,
            filterable: {
                mode: "row"
            },
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            save: function(e) {
                // Sync Product.CategoryID with Product.Category.CategoryID to avoid referential integrity constraint errors.
                e.model.set("CategoryID", e.model.Category.CategoryID);
            },
            columns: [
                { field: "ProductID" },
                { field: "ProductName", width: 300 },
                {
                    field: "Category", template: "#: Category ? Category.CategoryName : '' #",
                    editor: categoryEditor,
                    filterable: {
                        cell: {
                            dataTextField: "Category.CategoryName"
                        }
                    }
                },
                "UnitPrice", "UnitsOnOrder", "Discontinued", { command: "edit" }
            ],
            editable: "inline"
        });

Regards,
Angel Petrov
Progress Telerik