Force Rebind of dropdownlist within MVVM model

2 posts, 0 answers
  1. Keith
    Keith avatar
    33 posts
    Member since:
    Jan 2013

    Posted 11 Jul 2013 Link to this post

    Hi,

    I have a series of UI controls bound to a model using MVVM.  One of the controls is a dropdownlist which has it's data loaded from a remote datasource.   I also have a button besides the dropdown which launches a popuo window. The window allows a new item to be added to the database. 

    After this new item is added I would like to force my DDL to rebind to the remote datasource and refresh it's data.

    My layout is:

    <div id="myDiv>
    <div class="k-edit-label">
    <label for="DESCRIPTION">Description</label>
    </div>
    <div data-container-for="DESCRIPTION" class="k-edit-field">
    <input type="text" class="k-input k-textbox" name="DESCRIPTION" data-bind="value: DESCRIPTION">
    </div>

    <div class="k-edit-label">
    <label for="GROUP_ID">Group</label>
    </div>
    <div data-container-for="GROUP_ID" required class="k-edit-field">
    <select name="GROUP_ID"
    id="GROUP_ID"
    data-role="dropdownlist"
    data-text-field="GROUP_NAME"
    data-value-field="GROUP_ID"
    data-source=loadGroup()
    data-bind="value: GROUP_ID"
    ></select> 

    <a id="newGroup" class="k-button" >New</a>
    </div> 

    LoadGroup() will call a web service and will return a list of records which are populated in the dropdownlist.
    I make an ajax call to get the model data then bind it to the model like:
    datasetMetaModel = kendo.observable({
    datasetMeta: datasetModel
    });

    kendo.bind($("myDiv"), datasetMetaModel);

    After the popup window is shown, the new record added and saved to the DB I do the following to try to rebind the dropdownlist

    kendo.init($("#GROUP_ID"));
     var dropDownList = $('#GROUP_ID').data('kendoDropDownList');
     dropDownList.dataSource.read();
    dropDownList.refresh();

    The remote webservice is definitely being hit again and is returning the new data however the dropdown list is never updated.  I'm pretty sure I'm just missing a simple step but can't figure out what it is.
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Jul 2013 Link to this post

    Hello Keith,

    ComboBox should be rebound even without calling the refresh method. Just dataSource.read should fetch new data and re-paint the DropDownList with the new items.

    In order to assist you further we will need a demo project to inspect.

    Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top