Binding Form Values To DropDownList

4 posts, 0 answers
  1. Vincent
    Vincent avatar
    10 posts
    Member since:
    May 2015

    Posted 22 Jul 2015 Link to this post

     

     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>

     

     

     

  2. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 24 Jul 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Vincent
    Vincent avatar
    10 posts
    Member since:
    May 2015

    Posted 24 Jul 2015 in reply to Plamen Link to this post

    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.

  5. Vincent
    Vincent avatar
    10 posts
    Member since:
    May 2015

    Posted 30 Jul 2015 Link to this post

    Thanks!
Back to Top
Kendo UI is VS 2017 Ready