Cascade Dropwdownlist

[PELAYO]

Hi, I've got 2 dropdownlist dd1 and dd2. I need this functionality:

 

1. First, both dd are enabled, each of them load all its items
2. If user select value in dd1, we need to load in cascade dd2 with the corresponding values

Is this possible with the cascade functionality of the telerik dropdownlist?

 

Best regards.

[Anton Mironov]

Hello Pelayo,

Thank you for the details provided.

In order to achieve the required behavior, I would recommend trying the following approach:

1. Use two independent DropDownLists (DDLs).
2. By default bind both DDLs to the collection of all available items.
3. Try the "Change" Event handler of the parent DDL.
4. In the Event handler filter the dataSource of the child DDL, or send an Ajax request to make the required filtering in the Controller.

Here is an example of the Change Event handler of the parent DDL:

    function onParentChange(e) {
        var parentValue = e.sender.value();

        $.ajax({
            type: "POST",
            url: "Home/GetChildValues",
            data: JSON.stringify({
                parentValue: parentValue
            }),
            cache: false,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                var childDataSource = result.list;
                var combobox = $("#childCombo").data("kendoComboBox");
                combobox.setDataSource(childDataSource);
            }
        })
    }

And the Action Method in the Controller:

        public ActionResult GetChildValues(string parentValue)
        {
            if (parentValue == "FirstParent")
            {
                List<string> childValues = new List<string>() { "child1", "child11", "child111" };
                return Json(new
                {
                    list = childValues
                }, JsonRequestBehavior.AllowGet);
            }
            else if (parentValue == "SecondParent")
            {
                List<string> childValues = new List<string>() { "child2", "child22", "child222" };
                return Json(new
                {
                    list = childValues
                }, JsonRequestBehavior.AllowGet);
            }
            else
            {
                List<string> childValues = new List<string>() { "child1", "child11", "child111", "child2", "child22", "child222"};
                return Json(new
                {
                    list = childValues
                }, JsonRequestBehavior.AllowGet);
            }
        }

Attached is a sample project that I prepared for the case. It includes the approach above. 

Make the needed tests locally and let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

[PELAYO]

Perfect! Thanks!

[PELAYO]

One more thing, I completed the jquery function with:

combobox.value(null);



so when the ddl1 changes the value, the ddl2 resets (if it had any previous value)



success: function (result) {
var childDataSource = result;
var combobox = $("#childCombo").data("kendoComboBox");
combobox.value(null);
combobox.setDataSource(childDataSource);
}