Binding Form Values To DropDownList

[Vincent]

 

 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>

 

 

 

[Plamen]

Hi Vincent,

Here is a sample dojo page where the text from the selected item in the DropDownList is used in the input by using MVVM.

Regards,
Plamen
Telerik

 

 

[Vincent]

Thanks alot!

 

I only tweaked it a little to get the results needed. It can be seen here at the dojo http://dojo.telerik.com/oRoVi.

[Vincent]

Thanks!