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

Autocomplete not rendering items

8 Answers 305 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Neeraj
Top achievements
Rank 1
Veteran
Neeraj asked on 01 Aug 2017, 04:57 AM
 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"}]

8 Answers, 1 is accepted

Sort by
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 02 Aug 2017, 03:08 AM
 I have also used in that also it is the same problem. I am getting response but items/options  load
0
Veselin Tsvetanov
Telerik team
answered on 02 Aug 2017, 10:54 AM
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
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 02 Aug 2017, 11:45 AM
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))
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 02 Aug 2017, 11:52 AM
I also want server filtering enabled
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 03 Aug 2017, 08:16 AM

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" />
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 03 Aug 2017, 11:01 AM
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 ?
  
0
Neeraj
Top achievements
Rank 1
Veteran
answered on 03 Aug 2017, 11:07 AM
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.
0
Veselin Tsvetanov
Telerik team
answered on 04 Aug 2017, 10:01 AM
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
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
AutoComplete
Asked by
Neeraj
Top achievements
Rank 1
Veteran
Answers by
Neeraj
Top achievements
Rank 1
Veteran
Veselin Tsvetanov
Telerik team
Share this question
or