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

DropDownList first item remains selected after user chooses second item

1 Answer 31 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 10 Dec 2013, 02:57 PM
I have a project where I am using a Kendo DropDownList in the MVVM paradigm.  The dropdownlist sources its data from a JavaScript array in the viewmodel and its value is bound to a property in the same viewmodel. 

The problem is the dropdownlist always remains on the first item.  I can choose "inactive" (the second item) and it updates viewModel.data.IsActive to "true" but the first "Active" item remains selected in the dropdown.  

If you change the initial viewModel.data.IsActive to false, then upon load the second "Inactive" item is selected in the dropdown.  But once I change it to "Active", it's stuck there, I can't get back to "Inactive"

What is wrong with this code?  Am I missing something simple?

Thanks,
Rod Early

The viewmodel:
    var viewModel = {};
    viewModel.data = {};
    viewModel.data.IsActive = true;
    viewModel.lookupData = {};
    viewModel.lookupData.status = [{
        value: true,
        text: "Active"
    }, {
        value: false,
        text: "Inactive"
    }];

The html:
<div class="container">
        <div style="margin: 10px 0 20px 20px">
          <span style="display:inline">Selected data</span>
           <span data-bind="text: data.IsActive">none provided</span>
    </div>
    <select id="theDropdown" data-role="dropdownlist" data-bind="source: lookupData.status, value: data.IsActive" data-text-field="text" data-value-field="value" />
</div>

And the binding:
    kendo.bind($(".container"), kendo.observable(viewModel));

This is all implemented in a  jsFiddle


1 Answer, 1 is accepted

Sort by
0
Accepted
Richard
Top achievements
Rank 1
answered on 10 Dec 2013, 04:29 PM
We figured out the issue. The Kendo drpopdown is converting the boolean values into strings. So if I change the dropdown from Active/true to Inactive/false, it's changing data.IsActive to "false" (a string) rather than false (boolean).

The resolution is to make the values to be strings.  So the viewmodel is:
    var viewModel = {};
    viewModel.data = {};
    viewModel.data.IsActive = "false";

    viewModel.lookupData = {};
    viewModel.lookupData.status = [{
        value: "true",
        text: "Active"
    }, {
        value: "false",
        text: "Inactive"
    }];
Tags
DropDownList
Asked by
Richard
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Share this question
or