Cascading DropDownLists with empty datasource

[sven]

I'm trying to use the cascading dropdownlist but I have a strange behaviour when the second dropdown datasource is an empty list (which happens sometimes in my project). The second dropdownlist is not clear and keeps the old data previously selected.

Example : 
First dropdown is loaded with some "categories"
I  select "Category1" in the first dropdown => second dropdown is loaded correctly with 2 "products"
I select one product "Product1" in my second dropdown => OK
I select "Category2" in the first dropdown which contains no products (the controller return an empty list) => "Product1" is still selected in the second dropdown!! The data is not cleared!


Here's my code :

<div class="row">

        <span class="editor-label">

            @Html.LabelFor(model => model.Categorie, true, true)

        </span><span class="editor-field">

            @(Html.Kendo().DropDownListFor(model => model.IdCategorie)

                    .Name("CategorieDropDown")

                    .DataTextField("Nom")

                    .DataValueField("IdCategorie")

                    .OptionLabel("Sélectionner une catégorie")

                    .DataSource(source =>

                    {

                        source.Read(read =>

                        {

                            read.Action("GetAllCategories", "Article");

                        }).ServerFiltering(true);

                    })

                    .HtmlAttributes(new { style = "width:250px" })

        )

        </span>

    </div>

    <div class="row">

        <span class="editor-label">

            @Html.LabelFor(model => model.SousCategorie, true, true)

        </span><span class="editor-field">

            @(Html.Kendo().DropDownListFor(model => model.IdSousCategorie)

          .Name("SousCategorieDropDown")

          .DataTextField("Nom")

          .DataValueField("IdCategorie")

          .DataSource(source =>

          {

              source.Read(read =>

              {

                  read.Action("GetAllSousCategories", "Article")

                      .Data("filterCategorie");

              })

              .ServerFiltering(true);

          })

          .OptionLabel("Sélectionner une sous catégorie")

          .Enable(false)

          .AutoBind(false)

          .CascadeFrom("CategorieDropDown")

          .HtmlAttributes(new { style = "width:250px" })

    )

    <script>

        function filterCategorie() {

            return {

                idCategorie: $("#CategorieDropDown").val()

            };

        }

    </script>

        </span>

    </div>

 

[Georgi Krustev]

Hello sven,

 
Currently the DropDownList cannot be cleared with value("") method (this method is called by the cascading implementation). We will further investigate the issue and will try to improve the behavior in the next internal build of Kendo UI available only for customars. For now you can wire the change event of the DataSource and clear the DropDownList manually:

<script>
        $(function() {
             var input = $("#SousCategorieDropDown");
             input.dataSource.bind("change", function() {
                    if (this.data()[0]) {
                            input.val("");
                            input.data("kendoDropDownList").text("");
                    }
             });
        });
        function filterCategorie() {
            return {
                idCategorie: $("#CategorieDropDown").val()
            };
        }
    </script>

You can also check this jsBin demo, which shows the implementation.

Greetings,
Georgi Krustev
the Telerik team

[Neil]

Hi Georgi,

I'm having a similar issue in my project so a change in the behaviour with the DropDownList would be very much welcomed. Ideally for child lists if their data source returns no items then they would behave in exactly the same way as they do at the moment if their parent DropDownList has no value (i.e. they get cleared and disabled).

Also with regard to the proposed work around I'm getting a JavaScript error when trying to use it with a @Html.Kendo.DropDownListFor wrapper in MVC. (see attached image).

I look forward to seeing a solution to this problem!

Thanks,

Neil.

[Georgi Krustev]

Hello Neil,

You are right about the error. Here is the correct code snippet:

<script>
        $(function() {
             var input = $("#SousCategorieDropDown"),
                    dropdownlist = input.data("kendoDropDownList");

             dropdownlist.dataSource.bind("change", function() {
                    if (this.data()[0]) {
                            input.val("");
                            dropdownlist.text("");
                    }
             });
        });
        function filterCategorie() {
            return {
                idCategorie: $("#CategorieDropDown").val()
            };
        }
    </script>

Kind regards,
Georgi Krustev
the Telerik team