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

[Dinesh]

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.

[Charles]

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 } });

        }

[Dinesh]

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

[Charles]

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

[Georgi Krustev]

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

[Dinesh]

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

[Glen]

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
                        }
                    });
                });

[Dinesh]

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

[Georgi Krustev]

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

[Dinesh]

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

[Georgi Krustev]

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

[Dinesh]

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

[Georgi Krustev]

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