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

DropdownList cascade doesn't works

3 Answers 134 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Stefania
Top achievements
Rank 2
Stefania asked on 03 Apr 2014, 02:03 PM
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

3 Answers, 1 is accepted

Sort by
0
Holger
Top achievements
Rank 1
answered on 04 Apr 2014, 06:49 AM
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

0
Stefania
Top achievements
Rank 2
answered on 04 Apr 2014, 07:00 AM
Thanks Holger,
now the error is fixed but the second combo is still empty
0
Accepted
Holger
Top achievements
Rank 1
answered on 04 Apr 2014, 07:46 AM
 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
Tags
DropDownList
Asked by
Stefania
Top achievements
Rank 2
Answers by
Holger
Top achievements
Rank 1
Stefania
Top achievements
Rank 2
Share this question
or