Applying a different template to each list item based on type

8 posts, 2 answers
  1. Answer
    Joe
    Joe avatar
    4 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    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?
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 27 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Joe
    Joe avatar
    4 posts
    Member since:
    Mar 2013

    Posted 27 Mar 2013 Link to this post

    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
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 28 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Miguel
    Miguel avatar
    15 posts
    Member since:
    Jul 2014

    Posted 15 Nov 2014 in reply to Dimiter Madjarov Link to this post

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

    http://dojo.telerik.com/@telerik@miguelmadero.com/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. 
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 18 Nov 2014 Link to this post

    Hello Miguel,


    Thanks for sharing this custom implementation.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Sylvain
    Sylvain avatar
    1 posts
    Member since:
    Jan 2015

    Posted 17 Jan 2015 Link to this post

    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

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 20 Jan 2015 Link to this post

    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
     
    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