I am trying to bind a form to a dropdown list using Kendo's MVVM. For example I have a dropdownlist that is hydrated with objects from the server. In the form, I have multiple input fields that should be bound to the current selected item of the dropdown.
I.E. If I have selected Breakfast in the dropdown list, then my form should reflect the changes. If I select Lunch from the dropdown list then the form should select those values.
My Code is Below:
<form id="frmDailyEntry">
<div>
<label for="ServingPeriods">Serving Periods :</label>
<select id="servingPeriods" data-text-field="ServingPeriod"
data-value-field="AdmServingPeriodId"
data-value-primitive="true"
data-autobind="true"
data-role="dropdownlist"
data-bind="source: DailyEntries, value: SelectedItem"></select>
</div>
<!-- FULL PAY -->
<div>
<label for="fullPay">Full Pay :</label>
<input type="text" name="fullPay" id="fullPay" data-bind="value: SelectedItem.FullPayDebit" />
<input type="text" name="fullPayTotal" id="fullPayTotal" disabled>
</div>
<!-- PREPAID -->
<div>
<label for="prepaidfullPay">Prepaid Full Pay :</label>
<input type="text" name="prepaidfullPay" id="prepaidfullPay" data-bind="value: PrepaidFullPay" />
</div>
</form>