cascading dropdownlist

[Henk Jelt]

Hi all

I am digging deeper and deeper into the world of Kendo, encountering new challenges behind each corner ... :-)

I am now trying to implement two cascading dropdown lists similar to the demo.

However I cannot replicate the behavior of the demo, and I am looking to encounter this challenge.

The demo contains three dropdownlists, of which initially two are disabled.
When I select an option in the first, the second will be enabled and I can see some options connected to the selected option.
The datasources are independent webservices which are queried on the moment of rendering the page or later (this is not clear to me).
I assume the second dropdownlist is populated on rendering, and filtered upon enabling it.

I have tried to implement two cascading dropdowns, of which both are enabled from the start.
Both are populated from the startm and there is no filtering at all.

This is my code:

<% 
    Using Html.BeginForm()%>
 
    <div id="legent">
    </div>
     <div id="numbers" disabled="disabled" >
    </div>
    <input type="submit" value="choose" name="r1"/>
 
 
<%end using %>
    <script>
        $(document).ready(function () {
            $("#legent").kendoDropDownList({
                optionLabel: "Legent...",
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: {
                    transport:
                    {
                        read:
                        {
                            type: "GET",
                            contentType: "application/json; charset=utf-8",
                            url: "http://jason.platform4telecom.com/JsonProfiling/enableme/test%5Eoneoverview%5Ecom/abc/xyz",
                            jsonpCallbackString: "mycallback",
                            dataType: "jsonp"
                        }
                    },
                }
            });
 
            var numbers = $("#numbers").kendoDropDownList({
                autoBind: false,
                cascadeFrom: "legent",
                optionLabel: "Select product...",
                dataTextField: "Identifier",
                dataValueField: "Custnr",
                dataSource: {
                    transport: {
                            read:
                            {
                                type: "GET",
                                contentType: "application/json; charset=utf-8",
                                url: "http://jason.platform4telecom.com/JsonProfiling/FindNumbers/test%5Eoneoverview%5Ecom/abc/xyz",
                                jsonpCallbackString: "mycallback",
                                dataType: "jsonp"
                            }
                    }
                }
            }).data("kendoDropDownList");
 
        });
    </script>

I follow exactly the sample on the site; nevertheless it is not working.

I have following questions:

- where is the filtering taking place?
- how is the value selected in the first dropdownlist passed to the second dropdownlist?
- why is the second dropdownlist not disabled (as in the sample)?

The scripts I am using, are:

    <script src="/Content/kendo_scripts/console.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css" rel="stylesheet" />

Looking forward to your help!

Henk Jelt

[Georgi Krustev]

Hi Henk,

 
I will suggest you check this help topic, which covers the cascading functionality (even that it is for ComboBox it is applicable to the DropDownList too). I will also suggest you try the latest official release of Kendo UI.

Kind regards,
Georgi Krustev
the Telerik team

[Henk Jelt]

UPDATE

I found the solution in this JSFiddle example:
http://jsfiddle.net/krustev/9qZnp/ 

The url implies that Georgi, the guy who helped me out, is the origin of this example.
@Georgi: this sample contains everything I need. I was able to transpose it to my solution, and it works.
Why did you not reference this?
It would have saved me a lot of work!

Nevertheless: your code helped me out, so lots of thanks.
Please refer to this solution in all forum discussions, because it is an example which contains everything!

KR

Henk Jelt

END UPDATE


Hi Georgi

the sample of the ComboBox is clear to me, as well as how the filtering works.
Nevertheless I cannot get it to work.
Basically the first dropdown loads a couple of clients, and the second should show products sold to the selected client.
I load both datasources completely at "document ready", and want to filter according to the selection.

My first challenge is the disabling of the second dropdownlist.
It will have to do with the recognition of the cascadeFrom item, because (unless I disable the input field) the second ddl is not disabled.
The result is that it is populated with all products of all customers, and that is not what I want.
There is a Jsfiddle example which is referenced somewhere in the Kendo forum, and which explains it as well (http://jsfiddle.net/krustev/J8Kqb/ ) but also here the seconde ddl is not disabled.

My code now is:

    
    <input id="legent"/>
     <input id="numbers"/>
    <input type="submit" value="kies" name="r1"/>
 
<script type="text/javascript">
    $(document).ready(function () {
        $("#legent").kendoDropDownList({
                optionLabel: "Legent...",
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: {
                    transport:
                    {
                        read:
                        {
                            type: "GET",
                            contentType: "application/json; charset=utf-8",
                            url: "http://jason.platform4telecom.com/JsonProfiling/AuthorizeUser/test%5Eoneoverview%5Ecom/henkjelt/f1et5sbe1",
                            jsonpCallbackString: "mycallback",
                            dataType: "jsonp"
                        }
                    },
                },
                change: function() {
                numbersDataSource .filter({
                    field: "Id",
                    operator: "eq",
                    value: parseInt(this.value())
                    });
                }
        });
 
        var numbersDataSource = new kendo.data.DataSource({
            //serverFiltering: true,
            transport: {
                    read:
                    {
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        url: "http://jason.platform4telecom.com/Jsonprofiling/FindNumbers/test%5Eoneoverview%5Ecom/abc/xyz",
                        jsonpCallbackString: "mycallback",
                        dataType: "jsonp"
                    }
            }
        });
 
        var numbers = $("#numbers").kendoDropDownList({
                autoBind: false,
                cascadeFrom: "legent",
                optionLabel: "Select product...",
                dataTextField: "Identifier",
                dataValueField: "Custnr",
                dataSource : numbersDataSource
        }).data("kendoDropDownList");
    });
</script>

It is basically not much different from my earlier code.

If all is correct, it should work as described in the example:
Checks if the "cascadeFrom" property is set. If not then the cascading is not enabled.
Tries to find the parent combobox object. If the result is null, then the functionality is omitted.
The child combobox will listen to any changes of the parent's value.
If the parent does not have a value, then the child will be disabled.
Apparently it is not correct, since the last step is not set.
I feel that "numbers" cannot find "legent", but why not?

Can you help me a step further?

Thx

Henk Jelt