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

Kendo MVVM binding 2 source in same remote template

3 Answers 85 Views
General Discussions
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:57 AM
   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>

3 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 17 Jul 2017, 01:18 PM
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
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.
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 19 Jul 2017, 04:11 AM
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
0
Veselin Tsvetanov
Telerik team
answered on 20 Jul 2017, 02:25 PM
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
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
General Discussions
Asked by
Neeraj
Top achievements
Rank 1
Veteran
Answers by
Veselin Tsvetanov
Telerik team
Neeraj
Top achievements
Rank 1
Veteran
Share this question
or