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

13 posts, 0 answers
  1. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Dec 2012

    Posted 05 Jan 2013 Link to this post

    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.
  2. Charles
    Charles avatar
    2 posts
    Member since:
    Jul 2012

    Posted 06 Jan 2013 Link to this post

    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 } });
            }
  3. Kendo UI is VS 2017 Ready
  4. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Dec 2012

    Posted 06 Jan 2013 Link to this post

    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
  5. Charles
    Charles avatar
    2 posts
    Member since:
    Jul 2012

    Posted 06 Jan 2013 Link to this post

    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
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 08 Jan 2013 Link to this post

    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!
  7. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Dec 2012

    Posted 09 Jan 2013 Link to this post

    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
  8. Glen
    Glen avatar
    1 posts
    Member since:
    Nov 2012

    Posted 10 Jan 2013 Link to this post

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

  9. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Dec 2012

    Posted 10 Jan 2013 Link to this post

    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
  10. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 11 Jan 2013 Link to this post

    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!
  11. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Dec 2012

    Posted 11 Jan 2013 Link to this post

    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
  12. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 14 Jan 2013 Link to this post

    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!
  13. Dinesh
    Dinesh avatar
    6 posts
    Member since:
    Dec 2012

    Posted 14 Jan 2013 Link to this post

    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
  14. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 16 Jan 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready