filter kendo ui grid with filed type object

Question

I have this grid

$("#address-grid").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "operations/get_sales_reps_addresses.php?salesRepsId=" + salesRepsId,
                type: "GET"
            },
            update: {
                url: "operations/edit_address.php?salesRepsId=" + salesRepsId,
                type: "POST",
                complete: function (e) {
                    $("#address-grid").data("kendoGrid").dataSource.read();
                }
            },
            destroy: {
                url: "operations/delete_address.php",
                type: "POST",
                complete: function (e) {
                    $("address-grid").data("kendoGrid").dataSource.read();
                }
            },
            create: {
                url: "operations/add_address.php?salesRepsId=" + salesRepsId,
                type: "POST",
                complete: function (e) {
                    $("#address-grid").data("kendoGrid").dataSource.read();
                }
            },
        },
        schema: {
            data: "data",
            total: "data.length", //total amount of records
            model: {
                id: "SalesRepId",
                fields: {
                    AddressType: {
                        defaultValue: {
                            AddressTypeid: 1,
                            AddressTypeName: "Work"
                        }
                    },
                    Country: {
                        defaultValue: {
                            CountryId: 38,
                            CountryName: "Canada"
                        }
                    },
                    State: {
                        defaultValue: {
                            StateId: 4223,
                            StateName: "British Colombia"
                        }
                    },
                    City: {
                        defaultValue: {
                            CityId: 59450,
                            CityName: "Vancouver"
                        }
                    },
                    PostalCode: {
                        type: "string"
                    },
                    AddressText: {
                        type: "string"
                    },
                    IsMainAddress: {
                        type: "boolean"
                    },
                    AddressId: {
                        type: "integer"
                    }
                }
            }

        },
        pageSize: 3,
    },
    ignoreCase: true,
    height: 250,
    filterable: true,
    sortable: true,
    pageable: true,
    reorderable: false,
    groupable: false,
    batch: true,
    navigatable: true,
    toolbar: ["create", "save", "cancel"],
    editable: true,
    columns: [{
        field: "AddressType",
        title: "Type",
        editor: AddressTypeDropDownEditor,
        template: "#=AddressType.AddressTypeName#",
    }, {
        field: "Country",
        title: "Country",
        editor: CountryDropDownEditor,
        template: "#=Country.CountryName#",
    }, {
        field: "State",
        title: "State",
        editor: StateDropDownEditor,
        template: "#=State.StateName#",
    }, {
        field: "City",
        title: "City",
        editor: CityTypeDropDownEditor,
        template: "#=City.CityName#",
    }, {
        field: "PostalCode",
        title: "Postal Code",
    }, {
        field: "AddressText",
        title: "Address",
    }, {
        field: "IsMainAddress",
        title: "Main?",
        width: 65,
        template: function (e) {
            if (e.IsMainAddress == true) {
                return '<img align="center" src ="images/check-icon.png" />';
            } else {
                return '';
            }
        }
        // hidden: true

    }, {
        command: "destroy",
        title: "&nbsp;",
        width: 90
    },

    ]
});

The problem is when I try to filter by Country or State or City I got an error

TypeError: "".toLowerCase is not a function

I tried to change the type of Country to string, I use comobox, so the values were undefined. I also tried to change the type to Object, the values displayed correctly but I couldn't filter. I got the same error( toLowerCase)

How can I fix this ??

My grid is very similar this example

and here is the jsFiddle . I've just added the filter. and I still get previous error

I want to filter on the Category, any help ??

Answer 1

This is how you filter a dataSource Kendo dataSource , filter

So get the dataSource of your grid,

var gridDatasource = $("#address-grid").data('kendoGrid').dataSource;

and filter it like this example.

gridDatasource.filter({ ... });

If you provide a working jsFiddle, you may get a more specific answer.

Specific answer:

You added the filter, so for Category it didn't work because as I said, it is an observable, not a filed you can filter as a string.

So you must specify better your filter for this column, like this:

field: "Category",
title: "Category",
width: "160px",
editor: categoryDropDownEditor,
template: "#=Category.CategoryName#",
filterable: {
    extra: false,
    field:"Category.CategoryName",
    operators: {
        string: {
            startswith: "Starts with",
            eq: "Is equal to",
            neq: "Is not equal to"
        }
    }
}

see this jsFiddle -- > http://jsfiddle.net/blackjim/Sbb5Z/463/