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.
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.