DropdownList cascade doesn't works

[Mattia]

Hi,
I'm trying to get my dropdownlist cascade working but I can't figure it out what I missing..

This is my code
JS

$("#BlitzMapInfoWindow_company").kendoDropDownList({
            dataTextField: "Text",
            // serverFiltering: true,
            dataValueField: "Value",
            dataSource: {
                type: "json",
                transport: {
                    read:
                    {
                        url: "../load_geofencing.asmx/GetCompaniesStrings1",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    }
                },
                schema: {
                    data: function (response) { return response.d || {}; }
                },
                change: function () {
                    var countries= $("#BlitzMapInfoWindow_country").data("kendoDropDownList");

                    countries.dataSource.filter({
                        field: "ParentId",
                        value: this.value(),
                        operator: "eq"
                    });

                    countries.value(0);
                }

            }
        });//.data("kendoDropDownList");

        $("#BlitzMapInfoWindow_country").kendoDropDownList({
            cascadeFrom: "BlitzMapInfoWindow_company",
           // cascadeFromFields: "ParentId",
            autoBind: false,
            //serverFiltering: true,
            dataTextField: "Text",
            dataValueField: "Value",
            dataSource: {
                type: "json",
                transport: {
                    type: "json",
                    serverFiltering: true,
                    read:
                    {
                        url: "../load_geofencing.asmx/GetCountriesStringsBySoc",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    }
                },
                schema: {
                    data: function (response) { return response.d || {}; }
                }
            }
        });//.data("kendoDropDownList");

WebService

        [WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public List<ComboObject> GetCompaniesStrings1()
        {
            int UserId = Utility.FindUserId();
            UserCompaniesHelper UserCompaniesHelper = new UserCompaniesHelper();
            List<CompanyEntity> companies = UserCompaniesHelper.GetUserCompanies(UserId);
            List<ComboObject> result = new List<ComboObject>();
            companies.ForEach(p => result.Add(new ComboObject { Value = p.Code, Text = p.Description }));
            return result;
}


[WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public List<ComboObject> GetCountriesStringsBySoc()
        {
            Exception Exception = null;
            int UserId = Utility.FindUserId();
            CountryHelper CountryHelper = new CountryHelper();
            List<CountryEntity> countries = CountryHelper.GetCountries(UserId, ref Exception);
            List<ComboObject> result = new List<ComboObject>();
            countries.ForEach(p => result.Add(new ComboObject { Value = p.Id.Value.ToString(), Text = p.CodeAndDescription, ParentId = p.CompanyCode }));
            return result;
        }

The web service functions work perfecty and the result is:
1.

{"d":[{"__type":"ComboObject","Value":"AAA","Text":"ADMIN AAA","ParentId":null},{"__type":"ComboObject","Value":"BBB","Text":"ADMIN BBB","ParentId":null},{"__type":"ComboObject","Value":"CCC","Text":"ADMIN CCC","ParentId":null},{"__type":"ComboObject","Value":"DDD","Text":"ADMIN DDD","ParentId":null}]}

2.

{"d":[{"__type":"ComboObject","Value":"1","Text":"IT - ITALY","ParentId":"BBB"},{"__type":"ComboObject","Value":"2","Text":"US - UNITED STATES","ParentId":"BBB"},{"__type":"ComboObject","Value":"3","Text":"MX - MEXICO","ParentId":"BBB"},{"__type":"ComboObject","Value":"4","Text":"DO - DOMINICAN REPUBLIC","ParentId":"BBB"},{"__type":"ComboObject","Value":"5","Text":"BR - BRAZIL","ParentId":"BBB"},
{"__type":"ComboObject","Value":"6","Text":"CL - CHILE","ParentId":"BBB"},
{"__type":"ComboObject","Value":"7","Text":"US - UNITED STATES","ParentId":"AAA"},{"__type":"ComboObject","Value":"8","Text":"IT - ITALY","ParentId":"AAA"},{"__type":"ComboObject","Value":"9","Text":"CL - CHILE","ParentId":"CCC"},{"__type":"ComboObject","Value":"10","Text":"US - UNITED STATES","ParentId":"CCC"}]}

The combo company is compiled right but the second combo is empty and I have the following error

TypeError: this.value is not a function

[Holger]

In the change event handler yau are using this.value() where this is the datasource, because the event handler is executed in the context of the datasource. Change your code to countries.value() and try again.

Regards,
Holger

[Mattia]

Thanks Holger,
now the error is fixed but the second combo is still empty

[Holger]

 Hello Stefania,

There is another problem in the sample code: You will have to take the selected value from the company DropDownList, not the country DropDownList.

var companies = $("#BlitzMapInfoWindow_company").data("kendoDropDownList");
...
value: companies .value(),
...

But there is an more elegant solution by using the cascade feature of the DropDownList widget.
I created a plunk for you that shows this solution: http://plnkr.co/edit/6OWWeTXSQFtrzH4pzAHy?p=preview

Regards,
Holger