Cascading DropDownLists with empty datasource

4 posts, 0 answers
  1. sven
    sven avatar
    5 posts
    Member since:
    Jan 2009

    Posted 13 Sep 2012 Link to this post

    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>
     
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 18 Sep 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Neil
    Neil avatar
    14 posts
    Member since:
    Jul 2012

    Posted 19 Sep 2012 Link to this post

    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.
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 20 Sep 2012 Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready