Clear button on DropDownTree doesn't reset MVVM-bound value

[Bill]

When using the MVVM value binding with the DropDownTree, pressing the X button to clear the selection does not clear the bound field in the viewmodel.  If the DropDownTree is configured with valuePrimitive=true, then the VM bound field is completely unchanged  If the DropDownTree is configured with valuePrimitive=false, then the VM bound field is set to the string value of the prior selection's ID.

So my present workaround is to use valuePrimitive=false and if the VM bound field ends up being a string instead of an object, then treat it as null instead.  This adds a bunch of extra and ugly code to my app - is there any way to get the widget to simply set the bound VM field to null when the user clicks the X?

[tyter]

If the user clicks the X, is there a way to have it just set the bound VM field to null?

cookie clicker

[Martin]

Hi, could you please let me know how may I observe the issue in this demo? 

[Bill]

I modified the demo here: https://dojo.telerik.com/olEgoKah/2 with these changes

• removed the checkboxes
• added a button to show the current value of selectedProduct
• set up an on-change function on the viewModel to show the current value of selectedProduct any time it changes

Right now the demo is set up with data-value-primitive="true". 

When you choose an item from the dropdown, you'll see change events from both the widget and the viewmodel with the correct ID.  When you click the X to clear the widget, you will only see a change event from the widget, and the value will be wrong - it will have the ID of the formerly-selected item.

Then edit the demo to change it to data-value-primitive="false".

When you choose an item from the dropdown, you'll see change events from both the widget and the viewmodel with the correct entire object.  When you click the X to clear the widget, you will see change events from both the widget and the viewmodel with the ID of the formerly-selected item, which is wrong for two reasons: 1. since primitive=false, the value should always be an object and never an ID, 2) since the selection is cleared, it should not reference the prior selection.

[Martin]

Hi, Bill,

Thank you for the clarification. After a discussion with a developer colleague, the X button shouldn't be present when the DropDownTree is not configured with checkboxes. I have logged a bug in our Feedback Portal where you can track its status.

Let me now if you have any further questions.

[Bill]

Regardless of having checkboxes or not, the X button in necessary to clear the selection.  Without it, the only way for the user to go back to the nothing-chosen state would be for me to insert a dummy "nothing chosen" item in my dataset, which is a workaround and has a few problems too.

[Martin]

As I mentioned in previous post, similar to the DropDownList, the DropDownTree is not supposed to have the X button in single selection mode. If you need to reset the value of the component, you can pass an empty array to the value method. Here is a small example for reference.