Autocomplete not rendering items

[Neeraj]

 I am using MVVM .I am getting in but items are not getting rendered in .

Here is part: 

@model Rezcue.ViewModel.CustomerRequest.AirRequestMVVM

  

 

    <div id="AirRequestFormContainer" data-Template="AirRequestTemplate" data-bind="source: AirItem">

 

 

    </div>

 

 

<script type="text/javascript">

    var AirRequestViewModel = null;

 

    $(document).ready(function() {

        debugger;

        AirRequestViewModel = kendo.observable({

            AirItem: {

                AirVMList: @Html.Raw(Json.Encode(Model)),

                FlightStopsSource: new kendo.data.DataSource({

                    transport: {

                        read: {

                            url: rootUrl("GetData/GetCountry"),

                            dataType: "jsonp"

                        }

                    },

                    serverFiltering: true,

                }),

                OnOpenOriginAutoComplete: function(e) {

                     

                    debugger;

                    var target = $(e.sender.element).data("kendoAutoComplete");

                    target.list.width(280);

                },

                AddSegment: function(e) {

                    debugger;

                     

                },

                resizeFlightStop: function(e) {

                    debugger;

                    //var target = $(e.sender.element).data("kendoDropDownList");

                    //target.list.width(280);

                },

                ResetAirItem: function(e) {

                    debugger;

                     

                },

                ToggleCollapseSegment: function(e) {

                    debugger;

                     

                },

                SaveAirSegment: function(e) {

                    debugger;

                     

                }

            }

             

        });

 

         

         

        LoadTemplateNew("Content/Templates/AirRequestViewModel.tmpl.htm");

 

         

         

    });

 

    function loadAirRequestBinder() {

        kendo.ui.progress($("body"), true);

        kendo.bind($("#AirRequestFormContainer"), AirRequestViewModel.AirItem);

        loadKendoWindow("#AirRequest", "Create Air Request");

        kendo.ui.progress($("body"), false);

    }

 

    $(document).bind("TEMPLATE_LOADED", function (e, path) {

        kendo.ui.progress($("body"), true);

        debugger;

 

 

        loadAirRequestBinder();

        kendo.ui.progress($("body"), false);

    });

 

 

</script>

 

 

TEMPLATE CODE:

<script id="AirRequestTemplate" type="text/x-kendo-template" class="KendoExtTemplate">


        <div data-bind="source: AirVMList" data-Template="airitemtemplate" ></div>

</script>

<script id="airitemtemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <div data-bind="source: SegmentInfo"  data-Template="SegmentTemplate" > </div>
</script>


<script id="SegmentTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

    <div>
        <label style="width:37px;">From </label>:
        <input data-role="autocomplete"
               data-placeholder="Search"
               data-value-primitive="true"
               data-text-field="Code"
               data-bind="value: Origin,
                              source: FlightStopsSource"
               style="width: 100%;" />
    </div>

</script>

 

 

 

 

JSON RESPONSE :



[{"Code":"BOM","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=19.088611,72.868056\" target=\"_blank\"\u003eBOM\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Mumbai,\u0026nbsp;India \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eMumbai\u003c/span\u003e\u003c/span\u003e","City_code":"BOM","City_Name":"Mumbai","Country_code":"IND","Country_name":"India"},{"Code":"BMH","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=-6.366667,144.633333\" target=\"_blank\"\u003eBMH\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Bomai,\u0026nbsp;Papua New Guinea \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eBomai\u003c/span\u003e\u003c/span\u003e","City_code":"BMH","City_Name":"Bomai","Country_code":"PNG","Country_name":"Papua New Guinea"},{"Code":"BOA","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=-5.866667,13.066667\" target=\"_blank\"\u003eBOA\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Boma,\u0026nbsp;Congo, the Democratic Republic of the \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eBoma\u003c/span\u003e\u003c/span\u003e","City_code":"BOA","City_Name":"Boma","Country_code":"COD","Country_name":"Congo, the Democratic Republic of the"},{"Code":"LAZ","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=-13.266667,-43.416667\" target=\"_blank\"\u003eLAZ\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Bom Jesus da Lapa,\u0026nbsp;Brazil \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eBom Jesus da Lapa\u003c/span\u003e\u003c/span\u003e","City_code":"LAZ","City_Name":"Bom Jesus da Lapa","Country_code":"BRA","Country_name":"Brazil"},{"Code":"GMM","Name":"\u003ci class=\"fa fa-plane\" style=\"color:#2885D1;\"\u003e\u0026nbsp;\u003c/i\u003e\u003cspan style=\"font-size:.9em\"\u003e\u003cspan style=\"font-family:courier new,courier,monospace;\"\u003e[\u003cspan style=\"color:#2885D1;\" \u003e\u003ca href=\"http://maps.google.com/maps?q=-1.933333,15.866667\" target=\"_blank\"\u003eGMM\u003c/a\u003e\u003c/span\u003e]\u003c/span\u003e\u0026nbsp;Gamboma,\u0026nbsp;Congo \u003cbr /\u003e \u003cspan style=\"font-style:italic;color:#808080\"\u003eGamboma\u003c/span\u003e\u003c/span\u003e","City_code":"GMM","City_Name":"Gamboma","Country_code":"COG","Country_name":"Congo"}]

[Neeraj]

 I have also used in that also it is the same problem. I am getting response but items/options  load

[Veselin Tsvetanov]

Hi Neeraj,

Here you will find a simplified version of the described scenario. You will notice, that I have nested the FlightStopsSource DataSource to respect the templates hierarchy implemented. The path to this DataSource object is now AirRequestViewModel.AirItem.AirVMList.SegmentInfo.FlightStopsSource according to the configuration of the templates and their data-bound sources.

With the above change, the Autocomplete widget behaves as expected and the suggested items are populated in the drop-down properly.

Regards,
Veselin Tsvetanov
Progress Telerik

[Neeraj]

Hi Veselin,
                You mean to say the DataSource and widget to be appended should be on same hierarchy?

            Altering the position of FlightStopsSource DataSource inside SegmentInfo is not possible in my case. Since the  is preloaded with as below code.

AirVMList: @Html.Raw(Json.Encode(Model))

[Neeraj]

I also want server filtering enabled

[Neeraj]

I found in this link adding data-source but it still  render data  when we filter it give with no error but items render.

Below is the code :

<input type="text" class="flight-origin" data-role="autocomplete"
               data-min-length="2" data-filter="contains"
               data-text-field="Code"
               data-source="{transport: {read:{url:'#: rootUrl('GetData/GetCountry')#', dataType:'jsonp' }}, serverFiltering:true}"
               data-bind="value: ArriveDepartDetails.Origin" />

[Neeraj]

I found the answer . just removed dataType from DataSource and also this require to be on

FlightOriginSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: rootUrl("GetData/GetCountry")
                            // dataType: "jsonp"
                        }
                    },
                    serverFiltering: true
                }),

and in :

<input type="text" class="flight-origin" data-role="autocomplete"

              data-min-length="2" data-value-primitive="true"

              data-text-field="Code" data-template="OriginTemplate"

              data-bind="value: ArriveDepartDetails.Origin, source: FlightOriginSource,events:{open: OnOpenOriginAutoComplete}" />



Its facinating that below code also works.


 

FlightOriginSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: rootUrl("GetData/GetCountry"),
                            dataType: "json"
                        }
                    },
                    serverFiltering: true
                }),


 I DONT KNOW WHY USING 'JSONP' as dataType was not working!!!

 

In Documentation of DataSource it is written : 
  "jsonp" is required for cross-domain requests; use "json" for same-domain requests


BUT IN FUTURE IF I USE WEB API I WOULDNT BE SEATING AND CHANGING CODE FROM JSON TO JSONP ?
  

[Neeraj]

Hi @Veselin, Your response time is too much  

       for @Veselin and others who will read this :

If  is specified, $.ajax() will automatically append a query string parameter of (by default) callback=? to the URL. The  and  properties of the settings passed to $.ajax() can be used to specify, respectively, the name of the query string parameter and the name of the JSONP callback function. The server should return valid JavaScript that passes the JSON response into the callback function. $.ajax() will execute the returned JavaScript, calling the JSONP callback function, before passing the JSON object contained in the response to the $.ajax() success handler.

[Veselin Tsvetanov]

Hi,

Further information on the difference between JSON and JSONP requests and details on when JSONP could be used is available in the following StackOverflow thread.

Regards,
Veselin Tsvetanov
Progress Telerik