kendo mvvm dropdown in remote template

[Neeraj]

Hello,
I have of Each object has fields like passport, frequentFlyer number etc. I want to bind it with KendoUI MVVM I am using Inline Template (Template Stored at not in page of Both passport and frequentFlyer has difference DataSource and UI is DropdownList. 



@model List<Rezcue.ViewModel.APISViewModel>

        
<div id="APISItemContainer" data-template="APISTemplate" data-bind="source: apis">
    
    

</div>

<script id="APISTemplate" type="text/x-kendo-template">
   
    <div data-template="APISsegmentTemplate" data-bind="source: segment"></div>
    
    <div id="viewModelDiv" data-template="viewModelDivTemplate" data-bind="source: ViewModelData">



    </div>

   
    </script>

<script id="APISsegmentTemplate" type="text/x-kendo-template">
    Segment:
    <label data-bind="text: SegmentDetailsToDisplayPricing"></label>
    

</script>

<script id="viewModelDivTemplate" type="text/x-kendo-template">
    
    <div id="PaxDiv" data-template="PaxDivTemplate" data-bind="source: PaxInfo">
      


    </div>


</script>

<script id="PaxDivTemplate" type="text/x-kendo-template">
   <label data-bind="text: PersonName"></label>
    <select class="ffselect" data-role="dropdownlist"
            data-auto-bind="false"
            data-text-field="Description"
            data-value-field="Code"
            data-bind="source: frequentFlyer,value: FrequentFlyernumber"></select>

    <select class="ppDSselect" data-role="dropdownlist"
            data-auto-bind="false"
            data-text-field="Description"
            data-value-field="Code"
            data-bind="source: ppDS,value: PassportNumber"></select>

</script>

<script type="text/javascript">
   
    var apisViewModel = null;
    var frequentflyer = null;
    var ppDS = null;
        $(document).ready(function() {

             frequentflyer = kendo.observable({
                frequentFlyer: new kendo.data.DataSource({
                    transport: {
                        read: {
                            data: { TravellerId: 5 },
                            url: rootUrl("GetData/GetFrequentFlyerData"),
                            dataType: "json"
                        }
                    },
                }),
            });

             passp= kendo.observable({
             ppDS : new kendo.data.DataSource({
                transport: {
                    read: {
                        type: 'GET',
                        data: { TravellerId: 5 },
                        url: rootUrl("GetData/GetPassportData"),
                        dataType: "json"
                    }
                }
            })
           });

            apisViewModel = kendo.observable({
                apis: [
                    {
                        segment: @Html.Raw(Json.Encode(Model.Select(x => x.Segment))),
                        ViewModelData: @Html.Raw(Json.Encode(Model))
                        
                    }]
            });

            kendo.bind($("#APISItemContainer"), apisViewModel);
            //kendo.bind($("#s"), frequentflyer.frequentFlyer);
            //kendo.bind($("#as"), passp.ppDS);

            kendo.bind($(".ffselect"), frequentflyer.frequentFlyer);
            kendo.bind($(".ppDSselect"), passp.ppDS);


        });

      

</script>

[Dimitar]

Hello Neeraj,

Thank you for the code sample provided.

We are currently investigating the case, but I am afraid that we will need a bit more time to furthertrpubleshoot the issue that you are facing. We will get back to you as soon as possible.

Regards,
Dimitar
Progress Telerik

[Dimitar]

Hello Neeraj,

I am attaching an MVC project, where the same scenario is demonstrated (Kendo MVVM with nested templates).

With it, the bindings work as expected when wrapped in a single container element. Having two or more first-level elements is going to result in an unexpected behavior. This limitation is documented in the following documentation example:

• Source binding to root elements

With the above mentioned modifications you will be able to bind both the DropDownLists and the Segment templates (demonstrated in the attached project).

Regards,
Dimitar
Progress Telerik