OData v4 Web Api Binding - Grid Filters not working

2 posts, 0 answers
  1. Marco
    Marco avatar
    3 posts
    Member since:
    Oct 2017

    Posted 22 Oct 2018 Link to this post

    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?

  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1153 posts

    Posted 23 Oct 2018 Link to this post

    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.
Back to Top