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

The auto-complete drop down is not visible even though the data is returned by my service

12 Answers 1199 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Dinesh
Top achievements
Rank 1
Dinesh asked on 05 Jan 2013, 12:23 PM
Hi Folks,
I have been on with this problem since morning.

I am trying to use the Kendo UI Auto-complete.

Given below are the scripts that I include
<script type="text/javascript" src="~/Scripts/kendoui/kendo.all.min.js"></script><link href="content/kendoui/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendoui/kendo.default.min.css" rel="stylesheet" />

Given below is the HTML code picked up from the demo and slightly modified.

<div id="example" class="k-content">
            <div id="vendors">
                <input id="searchQuery"/>
            </div>
            <script>
                $(document).ready(function () {
                    $("#searchQuery").kendoAutoComplete({
                        minLength: 3,
                        dataTextField: "Name",
                        dataSource: {
                            minLength: 3,
                            type: "json",
                            transport: {
                                read: {
                                    url: "http://localhost:2168/Search.svc/SearchVendorsByName",
                                    dataType: "json",
                                    type: "GET",
                                    contentType: "application/json",
                                },
                                parameterMap: function (options) {
                                    return "searchQuery=" + $('#searchQuery').val();
                                },
                            }
                        }
                    });
                });
            </script>
            <style scoped>
                #vendors {
                    width: 369px;
                    height: 71px;
                    padding: 211px 0 0 141px;
                    margin: 30px auto;
               }
                .k-autocomplete {
                    width: 240px;
                    vertical-align: middle;
                }
            </style>
        </div>


Given below is the format of the data that is returned.

[{"ID":1,"Name":"Vendor Name"},{"ID":2,"Name":"Vendor Name"},{"ID":3,"Name":"Vendor Name"},{"ID":4,"Name":"Vendor Name"},{"ID":5,"Name":"Vendor Name"},{"ID":6,"Name":"Vendor Name"},{"ID":7,"Name":"Vendor Name"},{"ID":8,"Name":"Vendor Name"},{"ID":9,"Name":"Vendor Name"},{"ID":10,"Name":"Vendor Name"}]


The remote service is getting properly called and I also get the data (I viewed it using Fiddler).

However,
Even though the matching data is received the auto-complete dropdown just does not show anything. What am I missing?

Please help me on this. I am pretty sure I am missing something extremely simple.

Thanks in advance.

12 Answers, 1 is accepted

Sort by
0
Charles
Top achievements
Rank 1
answered on 06 Jan 2013, 02:12 PM
I'm having the same issue (with version 2012.3.1114).  I'm noticing that the dropdown is contained in a div of class "k-animation-container" that has a css top setting of -10000px and no width or height set.  If I manually set those css settings in the IE developer console to 600px, 300px and 300px respectively the dropdown appears and populates as expected.

My AutoComplete initialization looks like:
      $("#curResource_ManagerResourceId").kendoAutoComplete({<br>
          dataTextField: "Value",
          placeholder: "Select a person",
          dataSource: {
              type: "odata",
              transport: {
                  read: {
                      url: "/Resource/ResourceComboBoxServiceKendo",
                      dataType: "json",
                      type: "POST"
                  }
              }
          }
      });


The Controller method looks like:
        [HttpPost]
        public JsonResult ResourceComboBoxServiceKendo() {
            var returnResources = new List<KeyValuePair<string, string>>();
            try {
                // this returns a Dictionary<int, string>
                var theResources = Resource.getPulldownList(false, "");
                foreach (var item in theResources) returnResources.Add(new KeyValuePair<string, string>(item.Key.ToString(), item.Value.ToString()));
            }
            catch (Exception e) {
                Common.logException("System error retrieving resource list.", e);
            }
            return Json(new { d = new {__count = returnResources.Count, results = returnResources } });
        }
0
Dinesh
Top achievements
Rank 1
answered on 06 Jan 2013, 04:23 PM
Hi Charles,
Thanks for the comment. I think I am using a different version of the KendoUI than you. In the CSS files that I have referred the k-animation-container does not have the settings that you have mentioned.

Let's hope the Kendo UI folks respond to this sooner than later.

Regards,
Dinesh
0
Charles
Top achievements
Rank 1
answered on 06 Jan 2013, 04:29 PM
Hi Dinesh,
You are correct, these settings do not appear to be made by the css file, rather I think that this animation container is configured with these settings when it is initialized.  I suspect that the javascript code is suppoed to reposition this container when the dropdown for the autocomplete pops up, but for some reason this isn't happening.
Cheers,
Charles
0
Georgi Krustev
Telerik team
answered on 08 Jan 2013, 01:22 PM
Hello guys,

 
I will ask you to build a simple jsBin/jsFiddle demo, which replicates the issue. Thus I will be able to investigate the case locally and advice you further.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dinesh
Top achievements
Rank 1
answered on 09 Jan 2013, 11:24 AM
Hi,
Please find below the link for the jsBin.

http://jsbin.com/epadol/1/edit

I have referenced the Kendo files from CDN and I have created the data locally with the same output which my service returns but no luck. Please look into the same.

Thank You
Dinesh Jain
0
Glen
Top achievements
Rank 1
answered on 10 Jan 2013, 08:16 PM
I believe it's a syntax error. Try an additional } after data: data

$(document).ready(function () {
                    $("#searchQuery").kendoAutoComplete({
                        minLength: 3,
                        dataTextField: "Name",
                        dataSource: {
                            data: data
                        }
                    });
                });

0
Dinesh
Top achievements
Rank 1
answered on 11 Jan 2013, 04:59 AM
Hi,
Apologies for the syntax error. The syntax error was created while creating the jsBin content. However, when rectified it worked fine.

The Issue however persists when going for a ajax service instead of a local data.

I checked with fiddler and the data is precisely returned in the same format as local data.

The only change I made was as below.

// Local data
dataSource: {
                            data: data
                        }


// Ajax Service data

dataSource: {
                            minLength: 3,
                            type: "json",
                            transport: {
                                read: {
                                    url: "http://localhost:2168/Search.svc/SearchVendorsByName",
                                    dataType: "json",
                                    type: "GET",
                                    contentType: "application/json",
                                },
                                parameterMap: function (options) {
                                    return "searchQuery=" + $('#searchQuery').val();
                                },
                            }
                        }


Not sure how i can replicate the same in jsBin.

Thank You
Dinesh
0
Georgi Krustev
Telerik team
answered on 11 Jan 2013, 09:25 AM
Hello Dinesh,

 
Verify whether there are any JavaScript errors. I will suggest you wire the error event of the dataSource and check whether the handler is called.

Kind regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dinesh
Top achievements
Rank 1
answered on 11 Jan 2013, 10:22 AM
Hi Georgi,
Thanks for the quick reply.

I wired the error event as suggested and the code execution never reached there. I checked both via an alert and javascript debugger from Chrome.

dataSource: {
                            minLength: 3,
                            type: "json",
                            transport: {
                                read: {
                                    url: "http://localhost:2168/Search.svc/SearchVendorsByName",
                                    dataType: "json",
                                    type: "GET",
                                    contentType: "application/json",
                                },
                                parameterMap: function (options) {
                                    return "searchQuery=" + $('#searchQuery').val();
                                }
                            },
                            error: function (e) {
                                alert(e);
                            }
                        }

Thanks
Dinesh Jain
0
Georgi Krustev
Telerik team
answered on 14 Jan 2013, 09:42 AM
Hello Dinesh,

 
You will need to wire also the change event handler. If the error is not raised, then the change should. Check in the change event handler the result of the view() method. If there is data, then the problem should somewhere else ( widget for instance ). Please note that the DataSource does not have minLength property.

Kind regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dinesh
Top achievements
Rank 1
answered on 15 Jan 2013, 05:09 AM
Hi Georgi,
Thanks for the feedeback. I did as you directed.

So the "change" event was captured and here is the update.

When I look at the "view()" method it returns just "[]". However, if I look at the "_data" property of "e", I see data embedded deep within as per the example. (I used Chrome JS Console to look at it)

Command : e.valueOf().sender.dataSource.view()
Value: []


Command:e.valueOf().sender.dataSource
Value when expanded :
 
V.extend.init
_aggregate: undefined
_data: V.extend.init[10]
0: V.extend.init
Description: "0 seperated by Jan 4 2013 5:20PM"
OtherData: null
_events: Object
Name: "Vendor Name"
parent: function (){return r}
uid: "e8922ffa-05b9-48d1-9692-63cbfb0a62a5"
value: 1
__proto__: Class.extend.i
1: V.extend.init
2: V.extend.init

So, It seems that the data is returned and captured but some how the "view()" method is not able to extract it. What Next?

Thank You
Dinesh Jain
0
Georgi Krustev
Telerik team
answered on 16 Jan 2013, 09:40 AM
Hello Dinesh,

 
When the DataSource filters the data and the result is an empty array, then no one of the items does not satisfy the filter condition. Please verify that there are some items which has Name property, which value startsWith the text typed into the widget.

Kind regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
AutoComplete
Asked by
Dinesh
Top achievements
Rank 1
Answers by
Charles
Top achievements
Rank 1
Dinesh
Top achievements
Rank 1
Georgi Krustev
Telerik team
Glen
Top achievements
Rank 1
Share this question
or