Autocomplete not rendering items

9 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 31 Jul Link to this post

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

    Here is html 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"}]

  2. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 01 Aug Link to this post

     I have also used dropdownList, in that also it is the same problem. I am getting json response but items/options doesnt load
  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 02 Aug Link to this post

    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.
  4. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 02 Aug in reply to Veselin Tsvetanov Link to this post

    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 AirVMList is preloaded with model as below code.

    AirVMList: @Html.Raw(Json.Encode(Model))
  5. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 02 Aug in reply to Neeraj Link to this post

    I also want server filtering enabled
  6. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 03 Aug Link to this post

    I found code in this link adding data-source but it still doesnt render data item . when we filter it give response with no error but items doesnt 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" />
  7. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 03 Aug Link to this post

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

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

    and in template:

    <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 ?
      
  8. Neeraj
    Neeraj avatar
    48 posts
    Member since:
    May 2015

    Posted 03 Aug Link to this post

    Hi @Veselin, Your response time is too much high . 

           for @Veselin and others who will read this :

    If jsonp is specified, $.ajax() will automatically append a query string parameter of (by default) callback=? to the URL. The jsonp and jsonpCallback 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.
  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 04 Aug Link to this post

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