Kendo MVVM binding 2 source in same remote template

2 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    135 posts
    Member since:
    May 2015

    Posted 14 Jul 2017 Link to this post

     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>

     

  2. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 18 Jul 2017 Link to this post

    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.
Back to Top