Inconsistent Select list binding values

2 posts, 0 answers
  1. Bob
    Bob avatar
    46 posts
    Member since:
    Apr 2012

    Posted 16 Sep 2013 Link to this post

    In two seperate views I have similar code.  The guts are the same yet the results of the binding framework differ.  Could you please elaborate on the following discrepancy?
    The first view is delcared as
    <div data-role="view"
         data-title="Form Unexpected but nice"
         data-init="ns.viewA.init"
         data-before-show="ns.viewA.beforeShow"
         data-show="ns.viewA.show"
         data-model="ns.viewA.viewModel">
     
         ...
         <select data-bind="source:options,value:selectedOption"
               data-text-field="display"
               data-value-field="id"></select>
         ...
    </div>
    The second as
    <div data-role="view"
         data-title="Form Expected"
         data-init="ns.viewB.init"
         data-before-show="ns.viewB.beforeShow"
         data-show="ns.viewB.show"
         data-model="ns.viewB.viewModel">
     
         ...
         <form>
            ...
            <select data-bind="source:options,value:selectedOption"
                  data-text-field="display"
                  data-value-field="id"></select>
            ...
         </form>
    </div>


    viewA is a read-only/navigational view for traversing a hierarchy and inspecting details of the current node.
    viewB is an edit view for the one such node in viewA.

    The discrepancy is that in viewA, when selectedOption changes, the value of selectedOption is the actual object, not the id of the object. 
    However, in viewB, value of selectedOption is properly set to the ID of the option selected from the drop down.

    I've tried changing the markup around each to see if i could get matching behaviors from the two, however, I've not been able to replicate
    identical behavior between the them.  Any ideas why this occurs?
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 18 Sep 2013 Link to this post

    Hello Bob,

    The behavior will be different if the model value is different when the viewModel is bound. By default the field will be updated with the selected object if the initial value is null or undefined. You can control this behavior by using the data-value-primitive attribute.

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