DropDownList first item remains selected after user chooses second item

2 posts, 2 answers
  1. Answer
    Richard
    Richard avatar
    5 posts
    Member since:
    Dec 2013

    Posted 10 Dec 2013 Link to this post

    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


  2. Answer
    Richard
    Richard avatar
    5 posts
    Member since:
    Dec 2013

    Posted 10 Dec 2013 Link to this post

    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"
        }];
  3. Kendo UI is VS 2017 Ready
Back to Top