Cascade Dropwdownlist

2 Answers 63 Views
DropDownList
PELAYO
Top achievements
Rank 1
Iron
PELAYO asked on 20 Jul 2021, 12:18 PM

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.

2 Answers, 1 is accepted

Sort by
1
Accepted
Anton Mironov
Telerik team
answered on 23 Jul 2021, 08:45 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
PELAYO
Top achievements
Rank 1
Iron
answered on 23 Jul 2021, 11:50 AM
Perfect! Thanks!
PELAYO
Top achievements
Rank 1
Iron
commented on 26 Jul 2021, 09:44 AM

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);
}
Tags
DropDownList
Asked by
PELAYO
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
PELAYO
Top achievements
Rank 1
Iron
Share this question
or