This is a migrated thread and some comments may be shown as answers.

Clearing a MVVM bound Kendo ComboBox value doesn't update the viewModel

1 Answer 671 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Duane asked on 09 Apr 2012, 10:30 AM

I've setup a combobox with a viewmodel / kendo MVVM binding, however when using the clear method as mentioned in the API, the viewmodel is not updating.

Example source code below, to reproduce just click the clear button, the combobox will show "None", i.e. placeholder value, but the bindings don't update the viewModel's selectedId value.

Also, if the initial viewModel's selectedId is set as null, when picking a different value in the combobox, the selectedId will show '
[object Object]' instead of the set dataValueField value on the combobox. Is there a way to have the combobox correctly handle a transition from null > the selected item's id?

Source:

<body>

<div id="example" class="k-content">

<pre>

{

selectedId: <span data-bind="text: selectedId"></span>,

textbox: <span data-bind="text: textboxValue"></span>

}

</pre>

<input id="products" data-bind="value: selectedId"/>

<input id="textbox" data-bind="value: textboxValue"/>

<button id="clear" class="k-button">Clear</button>

</div>

<script>

$(document).ready(function() {

var viewModel = kendo.observable({

//selectedId: null,

selectedId: 2,

textboxValue: "lorem ipsum"

});

kendo.bind($("#example"), viewModel);

var data = [

{text: "12 Angry Men", value:"1"},

{text: "Il buono, il brutto, il cattivo.", value:"2"},

{text: "Inception", value:"3"},

{text: "One Flew Over the Cuckoo's Nest", value:"4"},

{text: "Pulp Fiction", value:"5"},

{text: "Schindler's List", value:"6"},

{text: "The Dark Knight", value:"7"},

{text: "The Godfather", value:"8"},

{text: "The Godfather: Part II", value:"9"},

{text: "The Shawshank Redemption", value:"10"},

{text: "The Shawshank Redemption 2", value:"11"}

];

$("#products").kendoComboBox({

dataTextField: "text",

dataValueField: "value",

placeholder: "None",

dataSource: data

})

.closest(".k-widget")

.attr("id", "products_wrapper");

$("#clear").click(function() {

$("#products").data("kendoComboBox").value(null);

});

</script>

</body>

Clearing a MVVM bound Kendo ComboBox value doesn't update the viewModel

1 Answer, 1 is accepted