DropDownTree not clearing when setting value to empty array

[Scott]

I have 2 dopdowntree's with checkboxes on my page. They are basically cascading, depending on what they choose in #1 it will fill the 2nd one with specific options.

When the user clears all selections from the 1st one I want to clear out everything in the 2nd and reload its data with the default options.

All I'm doing in my code when they clear everything from #1 is this

 

var secondDDT = $("#ddt2").data("kendoDropDownTree");
secondDDT.dataSource.read();
secondDDT.value([]);

 

What happens is that it does indeed reload the data in #2, and if I open the dropdowntree, there is nothing checked in the control, so it has cleared the checked items. The issue is that the items are still showing up in the multiselect view of the control (see attached)

Additionally, the items that are still displaying in the multiselect view of the control are now 'frozen', you cannot manually delete them from the dropdowntree with the little 'x'. When you look at the html you can see how all the nodes have unselectable="on". Also you can see the select tag witht eh options in it. I tried clearing that manually in script but it made no different. What's going on here and how do I fix it?

 

<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
    <ul role="listbox" unselectable="on" data-template="tagTemplate" data-bind="source: tags" class="k-reset" id="3c0fe359-03e8-467f-b301-838dd5d7cd37_tagList" data-stop="true">
        <li class="k-button " unselectable="on" role="option">
            <span unselectable="on">DummyItem1</span>
            <span title="delete" aria-label="delete" class="k-select">
                <span class="k-icon k-i-close"></span>
            </span>
        </li>
        <li class="k-button " unselectable="on" role="option">
            <span unselectable="on">DummyItem3</span>
            <span title="delete" aria-label="delete" class="k-select">
                <span class="k-icon k-i-close"></span>
            </span>
        </li>
        <li class="k-button " unselectable="on" role="option">
            <span unselectable="on">DummyItem5</span>
            <span title="delete" aria-label="delete" class="k-select">
                <span class="k-icon k-i-close"></span>
            </span>
        </li>
   </ul>
    <span unselectable="on" class="k-input k-readonly" style="display: none;"></span>
    <span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span>
</div>
<select id="ddt2" multiple="multiple" name="ddt2" style="width: 100%; display: none;" data-role="dropdowntree">
    <option value="31" selected="">DummyItem1</option>
    <option value="29" selected="">DummyItem3</option>
    <option value="33" selected="">DummyItem5</option>
</select>

[Scott]

Also perhaps important to mention that these dropdowntrees are both loadondemand=true

[Aleksandar]

Hello Scott,

I tried to reproduce the reported behavior based on the provided details but to no avail. I configured a DropDownTree in the following manner:

@(Html.Kendo().DropDownTree()
    .Name("dropdowntree")
    .DataTextField("Name")
    .DataValueField("id")
    .Checkboxes(cbx=>cbx.CheckChildren(true))
    .LoadOnDemand(true)
    .DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Read_DropDownTreeData", "Home")
        )
    )
)

And calling the below function resets the value of the widget:

$("#btn").click(function(){
        var ddt = $("#dropdowntree").getKendoDropDownTree();
        ddt.dataSource.read()
        ddt.value([]);
     })

Would it be possible to modify the attached sample and send it back for further review?

Regards,
Aleksandar
Progress Telerik

[Scott]

Aleksandar, thank you very much for your help. I was able to strip away all my scripting and get it to work properly. What I think was happening is that the second dropdowntree was gettting multiple read requests on its datasource one after the other and it was causing the widget to fall into an invalid state. I think I introduced this problem by trying to bind the widgets to previous set values from the database, so I wanted to know what the solution was. 

To expand on your example I modified your data slightly, this is how mine looks (just 2 levels deep)

var result = new List<HierarchicalViewModel>()
           {
               new HierarchicalViewModel() { ID = 1, ParentID = null, HasChildren = true, Name = "Parent Item 1" },
               new HierarchicalViewModel() { ID = 2, ParentID = null, HasChildren = true, Name = "Parent Item 2" },
               new HierarchicalViewModel() { ID = 3, ParentID = null, HasChildren = true, Name = "Parent Item 3" },
               new HierarchicalViewModel() { ID = 4, ParentID = 1, HasChildren = false, Name = "Child Item 1" },
               new HierarchicalViewModel() { ID = 5, ParentID = 1, HasChildren = false, Name = "Child Item 2" },
               new HierarchicalViewModel() { ID = 6, ParentID = 2, HasChildren = false, Name = "Child Item 3" },
               new HierarchicalViewModel() { ID = 7, ParentID = 2, HasChildren = false, Name = "Child Item 4" },
               new HierarchicalViewModel() { ID = 8, ParentID = 3, HasChildren = false, Name = "Child Item 5" },
               new HierarchicalViewModel() { ID = 9, ParentID = 3, HasChildren = false, Name = "Child Item 6" }
           };

 

The business rule here is that 1)the user can only select child nodes, not top-level and 2)when the user selects a child node from the first dropdowntree (for example lets says they choose "Child Item 1" which has ParentID=1) then none of the children of that parent are available in the second dropdowntree (e.g. so 2nd dropdowntree would only show Parent Item 2 and Parent Item 3 as options to chose from). I've got this part all working correctly now thanks to your help.

 

But the issue I have is how do I populate these dropdowntrees from records saved in the database and have the widgets reflect that state properly? (I think it was this code of mine that was breaking the widget)

 

For example, in the database I expose 2 fields in my model with the ids for the first and second dropdowntree, so to continue with the data specified above:

 

FirstSelection = 4, 5 (i.e. Child Item 1, Child Item 2)

SecondSelection = 6, 7, 8 (i.e. Child Item 3, Child Item 4, Child Item 5)

 

How I do I populate my dropdowntrees correctly in this scenario? Thank you

[Aleksandar]

Hello Scott,

A possible approach could be to pass additional data to the remote endpoint for the second DropDownTree. You can pass the ids of the selected dataItems in the first DropDownTree or the ids of the parent nodes of the selected items:

.DataSource(dataSource => dataSource
        .Read(read => read
            .Action("Read_DropDownTreeData", "Home").Data("onAdditionalData")
        )
    )

function onAdditionalData() {
        var ddt = $("#dropdowntree").getKendoDropDownTree();
        var selected = ddt.value();
        var parentNodes = [];
        selected.forEach(function (id) {
            var dataItem = ddt.dataSource.get(id); //get selected node
            var parentNode = dataItem.parentNode(); // get parent node of selected node
            parentNodes.push(parentNode)
        });

        return {
            selected: parentNodes
        }
    }

On the server-side, you can exclude the above nodes from the data that would be returned to the second DropDownTree.

I hope you will find the above information helpful.

Regards,
Aleksandar
Progress Telerik