Kendo MVVM binding 2 source in same remote template

[Neeraj]

   I am using Kendo MVVM. This ApisTemplate is called Remotely and It opens up. Problem is in "PaxPreferenceTemplate" template. There are 2 source binding. Only 1st works i.e Segment . i dont know why . Even if you use <label data-bind:"text: Segment.SegmentDetailsToDisplayPricing" ></label>  still result would be same.
    Please tell what would be correct way 

 

Note: ALL below code is in 1 file.

 

<script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

    <div>
        <div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div>

        <div style="text-align:center;">
            <button type="button" id="btnIssueTicket" onclick="SaveIssueTicket(this)" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;">
                <i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save
            </button>

            <button type="button" class="k-button " onclick="CloseApisWindow(this)" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button>
        </div>
    </div>
</script>


<script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

    <div data-bind="source: Segment" data-template="SegmentTemplate"></div>

    <div data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div>

</script>

<script id="SegmentTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <label data-bind="text: SegmentDetailsToDisplayPricing"></label>
</script>

<script id="PaxInfoTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <div>
        <label data-bind="text: Pax.PersonName"></label>
        <input data-role="dropdownlist"
               data-text-field="PassportNumber"
               data-value-field="PassportNumberID"
               data-bind="source: PossiblePassports" />

        <input data-role="dropdownlist"
               data-text-field="FrequentFlyernumber"
               data-value-field="FrequentFlyernumberID"
               data-bind="source: PossibleFrequentFlyers" />
    </div>



</script>

[Veselin Tsvetanov]

Hello Neeraj,

When using Kendo Templates with defined source binding a single root level element should be defined. Defining two first level DOM elements would result in improper HTML result. Therefore, I would suggest you to wrap the <div> with source Segment and the <div> with source PaxInfo in another <div> element:

<script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
  <div>
    <div data-bind="source: Segment"
         data-template="SegmentTemplate"></div>
    <div data-bind="source: PaxInfo"
         data-template="PaxInfoTemplate"></div>
 <div>
</script>

Here you could find a Dojo sample, implementing the above suggestion, while here you could find further information on source binding of root elements.

Regards,
Veselin Tsvetanov
Progress Telerik

[Neeraj]

Thanks it really helped. There is another The  "PaxInfoTemplate" generates multiple  The source passed to this  PaxInfo is of Array/List   Here is JSON stringified string  What want is if user on of one of the rest of DropdownList of that type should get set automatically.

Example: DropDown of Source  If user select then other Dropdown of should also set this selected value only if their value is not

[Veselin Tsvetanov]

Hi Neeraj,

As far as I can understand, you need to set the selected item in the one DropDownList when the user selects a value in other one. Also, this should be done only if the destination DropDownList has no value selected.

If this is the requirement, you could achieve it by implementing event and value binding for the DropDowns. Here you could find a modified version of the sample already sent, that demonstrate how the implement the above. 

Regards,
Veselin Tsvetanov
Progress Telerik