This is a migrated thread and some comments may be shown as answers.
Cascading DropDownLists with empty datasource
3 Answers 144 Views
This is a migrated thread and some comments may be shown as answers.
sven
Top achievements
Rank 1
sven asked on 13 Sep 2012, 03:37 PM
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>
 

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 18 Sep 2012, 10:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Neil
Top achievements
Rank 1
answered on 19 Sep 2012, 02:00 PM
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.
0
Georgi Krustev
Telerik team
answered on 20 Sep 2012, 08:40 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
sven
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Neil
Top achievements
Rank 1
Share this question
or