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

Select (Listbox or Dropdown) not Updating with View Model

1 Answer 226 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 01 Feb 2013, 02:19 PM
When I update one of the items in my observable array the change does not appear to be reflected in my dropdown box or listbox.

Here's a jsbin sample of the problem: http://jsbin.com/isiguz/1/edit

If you edit an item's name the change is not reflected in the <select>

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 05 Feb 2013, 01:01 PM
Hello Jeff,

Thank you for getting in touch with us.

The options of the <select> element are not supposed to change on "itemchange" of the observable array. The DropDownList widget and items list are updated because they have a template which is being re-rendered.

As a workaround I suggest you to hook up to the change event of the change event of the observable array and on "itemchange" to update the <select> options manually. As an example:
//updating the text of the option when name changes:
viewModel.fruits.bind("change", function (e) {
  var select = $(".select-list"),
      items = e.items,
      i, length;
   
  if(e.action === "itemchange" && e.field === "name") {
    for(i = 0, length = items.length; i < length; i++) {
      select
      .children("option[value=" + items[i].value + "]")
      .text(items[i].name);
    }
  }
})

For your convenience I prepared a small demo page: http://jsbin.com/ejijeq/5/edit

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Jeff
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or