Reload Cascading DropdownList Problems

3 posts, 0 answers
  1. hung
    hung avatar
    1 posts
    Member since:
    Jul 2012

    Posted 28 Oct 2012 Link to this post

    hi, I'm working around KendoUI Wrappers for ASP.NET MVC 4 .

    Now, I'm having some problems with my Cascading DropdownList when I reload Parent data.

    for example:
    1. I have a dropdown list like this: Level 1 > Level 2 (Level 2 cascades from Level 1).
    If i reload data from Level 1.
    => Level 2 will reload data from server too.
    but:  if (Level 2 Old Values == Level 2 New Values) => Level 2 doesn't reset to default value anymore.

    2. The second issue that:  When i have a Dropdown List with more than 3 levels.
    Ex : Level 1 > Level 2 > Level 3 > Level 4>Level n.

    I reload data from Level 1 
    => It resets Level 2 , Level 3 to default Values .
    => but it can't reset Level 4 and level n...

    So, how can i resolve these problems :-s ...
    and This is my code:
    <div class="table-row">
        <div class="table-col-left">
            @(Html.Kendo().DropDownList()
                .Name("rims-addr-level1")
                .OptionLabel("-- Chọn ÐVHC Cấp 1 --")
                .DataTextField("TenDonViHanhChinh")
                .DataValueField("IdDonViHanhChinh")
                .BindTo(ViewBag.DVHCLevel1)
                .Value(obj_DefaultData.IdDVHCLevel1)
            )
        </div><!--END div.table-col-left -->
        <div class="table-col-right">
            <script type="text/javascript">
                 
                function RimsAddrLevel1Item() {
                    return {
                        IdDVHC: $("#rims-addr-level1").val()
                    };
                }
            </script>
            @(Html.Kendo().DropDownList()
                .Name("rims-addr-level1-item")
                .OptionLabel("Select ...")
                .DataTextField("TenTinhThanh1")
                .DataValueField("IdTinhThanh")
                .DataSource(source => {
                source.Read(read =>
                {
                    read.Action("FindAllTinhThanhByIdDVHC", "Base").Data("RimsAddrLevel1Item").Type(HttpVerbs.Post);
                })
                .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("rims-addr-level1")
                .Value(obj_DefaultData.IdL01TinhThanh)
            )
        </div><!--END div.table-col-right -->
    </div>
    <!--END div.table-row TinhThanh---------------------------------- -->
    <div class="table-row">
        <div class="table-col-left">
            <script type="text/javascript">
                function RimsAddrLevel2() {
                    return {
                        IdDVHC: $("#rims-addr-level1").val()
                    };
                }
            </script>
            @(Html.Kendo().DropDownList()
                .Name("rims-addr-level2")
                .OptionLabel("-- Chọn ÐVHC Cấp 2 --")
                .DataTextField("TenDonViHanhChinh")
                .DataValueField("IdDonViHanhChinh")
                .DataSource(source => {
                source.Read(read =>
                {
                    read.Action("FindAllChildDVHCByIdDvhc", "Base").Data("RimsAddrLevel2").Type(HttpVerbs.Post);
                })
                .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("rims-addr-level1-item")
                .Value(obj_DefaultData.IdDVHCLevel2)
            )
        </div>
        <!--END div.table-col-left -->
        <div class="table-col-right">
            <script type="text/javascript">
                function RimsAddrLevel2Item() {
                    return {
                        IdDVHC: $("#rims-addr-level2").val(),
                        IdTinhThanh: $("#rims-addr-level1-item").val()
                    };
                }
            </script>
            @(Html.Kendo().DropDownList()
                .Name("rims-addr-level2-item")
                .OptionLabel("Select ...")
                .DataTextField("TenQuanHuyen1")
                .DataValueField("IdQuanHuyen")
                .DataSource(source => {
                    source.Read(read =>
                    {
                        read.Action("FindAllQuanByIDTinhThanh", "Base").Data("RimsAddrLevel2Item").Type(HttpVerbs.Post);
                    })
                .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("rims-addr-level2")
                .Value(obj_DefaultData.IdL02QuanHuyen)
            )
        </div>
        <!--END div.table-col-right -->
    </div>
    <!--END div.table-row QuanHuyen---------------------------------- -->
    <div class="table-row">
        <div class="table-col-left">
            <script type="text/javascript">
                function RimsAddrLevel3() {
                    return {
                        IdDVHC: $("#rims-addr-level2").val()
                    };
                }
            </script>
            @(Html.Kendo().DropDownList()
                .Name("rims-addr-level3")
                .OptionLabel("-- Ch?n ÐVHC C?p 3 --")
                .DataTextField("TenDonViHanhChinh")
                .DataValueField("IdDonViHanhChinh")
                .DataSource(source => {
                    source.Read(read =>
                    {
                        read.Action("FindAllChildDVHCByIdDvhc", "Base").Data("RimsAddrLevel3").Type(HttpVerbs.Post);
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("rims-addr-level2-item")
                .Value(obj_DefaultData.IdDVHCLevel3)
            )
        </div>
        <!--END div.table-col-left -->
        <div class="table-col-right">
            <script type="text/javascript">
                function RimsAddrLevel3Item() {
                    return {
                        IdDVHC: $("#rims-addr-level3").val(),
                        IdQuan: $("#rims-addr-level2-item").val()
                    };
                }
            </script>
            @(Html.Kendo().DropDownList()
                .Name("rims-addr-level3-item")
                .OptionLabel("Select ...")
                .DataTextField("TenPhuongXa1")
                .DataValueField("IdPhuongXa")
                .DataSource(source => {
                    source.Read(read =>
                    {
                        read.Action("FindAllPhuongXaByIDQuan", "Base").Data("RimsAddrLevel3Item").Type(HttpVerbs.Post);
                    })
                .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("rims-addr-level3")
                .Value(obj_DefaultData.IdL03PhuongXa)
            )
        </div>
        <!--END div.table-col-right -->
    </div>
    <!--END div.table-row PhuongXa---------------------------------- -->
    <div class="table-row">
        <div class="table-col-left">
            <script type="text/javascript">
                function RimsAddrLevel4() {
                    return {
                        IdDVHC: $("#rims-addr-level3").val()
                    };
                }
            </script>
            @(Html.Kendo().DropDownList()
                .Name("rims-addr-level4")
                .OptionLabel("-- Ch?n ÐVHC C?p 4 --")
                .DataTextField("TenDonViHanhChinh")
                .DataValueField("IdDonViHanhChinh")
                .DataSource(source => {
                    source.Read(read =>
                    {
                        read.Action("FindAllChildDVHCByIdDvhc", "Base").Data("RimsAddrLevel4").Type(HttpVerbs.Post);
                    })
                    .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("rims-addr-level3-item")
                .Value(obj_DefaultData.IdDVHCLevel4)
            )
        </div>
        <!--END div.table-col-left -->
        <div class="table-col-right">
            <script type="text/javascript">
                function RimsAddrLevel4Item() {
                    return {
                        IdDVHC: $("#rims-addr-level4").val(),
                        IdPhuongXa: $("#rims-addr-level3-item").val()
                    };
                }
            </script>
            @(Html.Kendo().DropDownList()
                .Name("rims-addr-level4-item")
                .OptionLabel("Select ...")
                .DataTextField("TenDuongKhu1")
                .DataValueField("IdDuongKhu")
                .DataSource(source => {
                    source.Read(read =>
                    {
                        read.Action("FindAllDuongKhuByIdPhuongXa", "Base").Data("RimsAddrLevel4Item").Type(HttpVerbs.Post);
                    })
                .ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("rims-addr-level4")
                .Value(obj_DefaultData.IdL04DuongKhu)
            )
        </div>
        <!--END div.table-col-right -->
    </div>
    <!--END div.table-row DuongKhu---------------------------------- -->

  2. gary davis
    gary davis avatar
    7 posts
    Member since:
    Sep 2009

    Posted 08 Mar 2013 Link to this post

    bump. I have the same issue with lastest version. cascaded dropdown does not reset on page refresh. still shows old value after first dropdown is selected.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 13 Mar 2013 Link to this post

    Hello gary,

     
    I will suggest you check the latest internal build of Kendo UI, because there are many fixes for the cascading functionality after the Q3 2012 release. If the problem still persists I will ask you open a support ticket on the same subject and provide a simple test project which replicates the issue. Thus we will be able to observe the issue locally and advice you further.

    All the best,
    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