Applying a different template to each list item based on type

[Joe]

I am wanting to create a AutoComplete field that displays results of multiple types. For example, an AutoComplete search field that returns suggestions for both Users and Posts. The results come from a remote server which does the filtering.

Each of the types returned by the remote server have a unique way they should appear in the list. I would also like to group them, so the dropdown list might look like this:
--------------------------
Users
--------------------------
Jeff
John
Jacob
Jeremy
--------------------------
Posts
--------------------------
About Jeff
Dinner with Jacob

I have had no problems getting the results from the server and getting them bound to the dataSource, but what I would like is to be able to intercept the creation of the dropdown list so I can apply specific templates to the items depending on the data type. I would also need to know the best way to insert the group header and disabling it so it can't be selected.

And suggestions on how to do this? Perhaps I am trying to do something with this control that would be better done in another control?

[Dimiter Madjarov]

Hello Joe,


This functionality is not supported out of the box, but it could be achieved with an items template and some custom logic in the dataBound event.
E.g.

@(Html.Kendo().AutoComplete()
   .Name("products")
   .DataTextField("ProductName")
   .TemplateId("custom")
   .Events(e => e.DataBound("dataBound"))
   ...
)

In the template, you could use some property, which differs the items. In the current example, I am using the ProductType property.
E.g.

<script id="custom" type="text/x-kendo-template">
  #if(ProductType == 'Clothes') {#
   <div class='first'>#=ProductName#</div>
  #} else {#
   <div class='second'>#=ProductName#</div>
  # } #
</script>

<style>
    .first { color: red; }
    .second { color: blue; }
</style>

And then on dataBound, you could use the jQuery class selector, to find the items and prepend the headers.
E.g.

<script>
  function dataBound(e) {
    var list = this.list;
    $(list).find(".first").eq(0).closest("li").before("<li class='header'>Users</li>");
    $(list).find(".second").eq(0).closest("li").before("<li class='header'>Posts</li>");
    $(".header").on("click", function () {
        return false;
    });
  }
</script>

I hope this approach will work in the current scenario.

 

Greetings,
Dimiter Madjarov
the Telerik team

[Joe]

Hi Dimiter,

I figured out you could use code in templates about 30 minutes before I got your reply. Glad to know I was on the right track. Your sample implementation of dataBound showed me how to do everything else I needed. One question about dataBound: Is the event fired AFTER the AutoComplete's list has been updated with the contents of the dataSource? The documentation does not specify:
http://docs.kendoui.com/api/web/autocomplete#events-dataBound

When I read that documentation I was under the impression that this event was fired after the dataSource was updated, but before the AutoComplete's list was updated. Your sample code suggests otherwise.

Anyway, this is exactly the reason Kendo UI is the front runner for use in the project I am working on. The library is flexible enough that things that are not explicitly supported can be achieved one way or another. I have had trouble doing similar things with other libraries. Keep up the good work.

Joe

[Dimiter Madjarov]

Hi Joe,


The dataBound event is fired after the AutoComplete has received the data and the list is bounded to it. If you want to catch the event that is fired before the list is bounded, but after the data was received, you could use the requestEnd event of the dataSource.

 

Kind regards,
Dimiter Madjarov
the Telerik team

[Miguel]

Here's a dojo with an example of how to do this. 

http://dojo.telerik.com/@[e-mail]/aSUcu

It's basically the suggestion with a few minor changes. However, in order of the up/down keys to work I had to override _keyDown on the kendo prototype. Feels dirty, hope this can be supported out of the box since there's no easy way to do it without messing with the internals. 

[Dimiter Madjarov]

Hello Miguel,


Thanks for sharing this custom implementation.

Regards,
Dimiter Madjarov
Telerik

 

 

[Sylvain]

Hi,

I'm currently facing the same problem and unfortunately this solution doesn't work well.
The problem is that when the headers are inserted in the result, the index of the elements are shifted. So there is a mismatch between the index of the element in the result list and the real index of the item

This behavior can be observed in the dojo created by Miguel

Type "Mo" in the autocomplete and select "Moldova". The selected item is "Monaco" due to the index mismatch.

I haven't find a good workaround for now, and as Miguel, I hope this will be supported in a future release

[Dimiter Madjarov]

Hello Sylvain,


The approach provided in this theme is a custom workaround for an older Kendo UI version. Currently you could use the new headerTemplate option of the AutoComplete as in the following demo. Providing official support for optgroups is in our future plans.

Regards,
Dimiter Madjarov
Telerik