This is a migrated thread and some comments may be shown as answers.

OData v4 Web Api Binding - Grid Filters not working

1 Answer 89 Views
This is a migrated thread and some comments may be shown as answers.
Marco
Top achievements
Rank 1
Marco asked on 22 Oct 2018, 01:23 PM
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?

1 Answer, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 23 Oct 2018, 01:15 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Marco
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Share this question
or