This is a migrated thread and some comments may be shown as answers.

Kendo MVVM binding 2 source in same remote template

1 Answer 68 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Neeraj
Top achievements
Rank 1
Veteran
Neeraj asked on 14 Jul 2017, 05:59 AM

 I am using Kendo MVVM. This ApisTemplate is called Remotely and It opens up. Problem is in "PaxPreferenceTemplate" template. There 2 source binding. Only 1st works i.e know 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>

 

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 18 Jul 2017, 06:04 AM
Hello Neeraj,

I am attaching an MVC solution, where a similar scenario to the one described is demonstrated (Kendo UI MVVM with nested templates).

Can you verify that the bindings in the example work as expected on your end? Also, there is a known limitation that forces you to use a single root element in the template. Having two first-level DOM elements is going to result in an unexpected behavior. You can find more information in the following documentation article.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
MVVM
Asked by
Neeraj
Top achievements
Rank 1
Veteran
Answers by
Dimitar
Telerik team
Share this question
or