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

kendo mvvm dropdown in remote template

2 Answers 274 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Neeraj
Top achievements
Rank 1
Veteran
Neeraj asked on 12 Jun 2017, 04:20 AM
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>

2 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 13 Jun 2017, 03:45 PM
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
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
Dimitar
Telerik team
answered on 14 Jun 2017, 08:35 AM
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:


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
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