kendo mvvm dropdown in remote template

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

    Posted 11 Jun 2017 Link to this post

    Hello,
    I have list of Object . Each object has fields like passport, frequentFlyer number etc. I want to bind it with KendoUI MVVM Dropdown .I am using Inline Template (Template Stored at other page not in same page of View ) . 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. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 13 Jun 2017 Link to this post

    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.
  3. Dimitar
    Admin
    Dimitar avatar
    796 posts

    Posted 14 Jun 2017 Link to this post

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