Why is my Kendo AutoComplete widget not binding to a JSON object?

Question

I have the following code in an MVC controller:

public JsonResult ARequest()
{
    Dictionary<string, object> AnObject = new Dictionary<string,object>();
    AnObject["foo"] = new object[] {"item 1", "item 2", "item 3"};
    return Json(AnObject, JsonRequestBehavior.AllowGet);
}

And it works as expected; when I call it from a browser, I get the following JSON object:

{"foo":["item 1","item 2","item 3"]}

I have another file, this time with a Kendo UI Autocomplete Widget. Here is the code:

<input id="products" style="width: 250px" />

/*...*/

$("#products").kendoAutoComplete({
   filter: "contains",
   minLength: 3,
   dataTextField: foo,
   dataSource: {
      type: "odata",
      pageSize: 10,
      transport: {
         read: {
            url: "education-portal/ARequest"
         }
      }
   }
});

As per the official examples here and here.

The problem is, when I load the page I don't get anything. The AutoComplete is blank and it stays blank. No results show up when I type anything in the box. Any idea what went wrong? I can't see it for the life of me.

OnaBai · Accepted Answer · 2014-03-08T00:24:41.173

6

There are several problems:

You should not define dataTextField since your array of value are not objects but strings.
You should say where in the received data is actually the array of items.
Is the type odata or JSON?

It should be something like:

$("#products").kendoAutoComplete({
    filter: "contains",
    minLength: 3,
    dataSource: {
        type: "json",
        pageSize: 10,
        transport: {
            read: {
                url: "education-portal/ARequest"
            },
            schema : {
                data: "foo"
            }
        }
    }
});

Example here : http://jsfiddle.net/OnaBai/rSjpS/

edited Mar 08 '14 at 00:24

answered Mar 08 '14 at 00:16

OnaBai

40,767
6
96
125

Can you give me an example of when I might define dataTextField? – Lincoln Bergeson Mar 10 '14 at 19:25
Of course, let assume that your JSON looks like `{"foo":[ { "id": 1, "bar": "item 1"} , { "id": 2, "bar": "item 2"},{ "id": 3, "bar": "item 3"}]}` here you should define `dataTextField: "bar"`. You have an array of objects (instead of strings as in your JSON) and the text elements are set in "bar" in this example you might also set `dataValueField : "id"` then the stored value would be 1, 2,... instead of `item1`, `item2`... – OnaBai Mar 11 '14 at 00:10
Thanks a lot, this is most helpful. – Lincoln Bergeson Mar 11 '14 at 21:07

score 2 · Answer 2 · answered Mar 08 '14 at 21:43

Since you are wrapping the collection inside a field called foo, you should specify this via the dataSource.schema.data options.

e.g.

 dataSource: {
      schema: {
          data: "foo"
      }
 }

You do not have to specify any datavaluefield or datatextfield

Why is my Kendo AutoComplete widget not binding to a JSON object?

2 Answers2