Filtering doesn't apply for cascading dropdown.

[Mangesh]

Hi,

I have been looking for some sort of help regarding filtering for cascading dropdown, below is my code:

var StatedataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    type: "POST",
                    url: "GetDocumentType.asmx/GetStateList",
                    contentType: 'application/json; charset=utf-8',
                    datatype: "json",
                    json: false
                },
                parameterMap: function (options) {
                    return JSON.stringify(options);
                }
            },
            serverFiltering: true,
            schema: {
                data: "d",                
                total: function (result) {
                    result = result.d || result;
                    return result.length;
                }
            }
        });


        $("#states").kendoDropDownList({
            autoBind: false,
            dataTextField: "StateName",
            dataValueField: "StateID",
            dataSource: StatedataSource
        });

        $("#countries").kendoDropDownList({
            dataTextField: "CountryName",
            dataValueField: "CountryID",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: {
                        type: "POST",
                        url: "GetDocumentType.asmx/GetCountryList",
                        contentType: 'application/json; charset=utf-8',
                        datatype: "json"
                    },
                    parameterMap: function (options) {
                        return JSON.stringify(options);
                    }
                },
                schema: {
                    data: "d",
                    total: function (result) {
                        result = result.d || result;
                        return result.length;
                    }
                }
            },
            change: function () {
                StatedataSource.filter({
                    field: "CID",
                    operator: "eq",
                    value: parseInt(this.value())
                });
            }
        });


I want to know that how server filtering exactly works? Although I specified filter , all the data from the web service returns and shown in the dropdown. Did I miss something?

Thanks,
Mangesh

[Nathan]

I am having a similar issue. Help me understand here, I have countries and states. For the States combobox, it loads a list of every state in the database  using JSON, where each object contains the following properties "name" "value" and "country." the example code for cascading comboboxes implies that that country, or parent, combobox contain a filter for the datasource of the state combobox, thereby allowing the state combobox to filter all the applicable states for the given country. This is how I understand it, am I wrong? because I can't get it to work. I am successfully loading all states into the state combobox, so my best guess is that I need to modify the filter in the country combobox. I've played around with the different operators in the filter, such as "eq" or "contains" but no success as of yet. Here is the code below:

var stateDataSource = new kendo.data.DataSource({
                pageSize: 10,
                dataType: "json",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "#(gPublication.getPublicationPath())#/modules/Core/functions/getStateList.csp?countryCode=country.val()",
                        
                    }
                }
            });
                        
            var country = $("#country").kendoComboBox({
                placeholder: "Enter country...",
                dataTextField: "CountryName",
                dataValueField: "CountryValue",
                dataSource: #(CountryList)#,
                change: function() {
                    var value = this.value();
                                        
                    if (value) {
                        
                        stateDataSource.filter({
                            field: "CountryValue",
                            operator: "contains",
                            value: value
                        });
                        
                        alert("filter to country value: " + value);
                        
                        state.enable();
                    } else {
                        state.enable(false);
                    }

                    state.value("");
                }
            });
            
            var state = $("#state").kendoComboBox({
                autoBind: false,
                placeholder: "Enter state...",
                dataTextField: "StateName",
                dataValueField: "StateValue",
                dataSource: stateDataSource
            }).data("kendoComboBox");