Is static text other than headerTemplate possible?

3 posts, 0 answers
  1. Aaron
    Aaron avatar
    2 posts
    Member since:
    Nov 2014

    Posted 05 Dec 2014 Link to this post

    In addition to the headerTemplate static element at the top of the page, I'm trying to create a footerTemplate with a static button on it for my application (the use case being: if the user can't find the item in the drop down they can click an "Add" button and create the entry themselves.)  but I'm new to Kendo UI and I don't see anything in the API currently that would mimic this.  

    I've tried putting in another headerTemplate and adding some CSS to position it at the bottom, but the CSS doesn't seem to have the desired effect (position: relative, bottom: 0).

    Any ideas?  Thanks in advance.
  2. Dimo
    Dimo avatar
    8404 posts

    Posted 09 Dec 2014 Link to this post

    Hi Aaron,

    The example below shows how to position something at the bottom of the AutoComplete dropdown. Please keep in mind that the dropdown is not designed to accommodate nested textboxes and the demonstrated implementation is hackish in a couple of ways. In order to avoid side effects (e.g. unexpected closing of the dropdown), I recommend you to abandon this approach and consider using something simpler, for example - use a ComboBox and if the user enters a custom value, provide the option to add it to the widget dataSource via custom button, which will appear outside the widget.

    <!DOCTYPE html>
        <meta charset="utf-8" />
        <title>Kendo UI Snippet</title>
        <script src=""></script>
            font: 13px sans-serif;
            padding-bottom: 3em;
            position: absolute;
            bottom: 0;
    <p>Focus the AutoComplete and type "a":</p>
    <input id="autocomplete" />
      dataSource: [
        { id: 1, name: "Apples" },
        { id: 2, name: "Oranges" },
        { id: 3, name: "a333" },
        { id: 4, name: "a444" },
        { id: 5, name: "a555" }
      dataTextField: "name",
      dataValueField: "id",
      headerTemplate: '<div><h2>Fruits</h2></div><div class="list-bottom"><button type="button" class="k-button">Add</button><input class="k-textbox" style="display:none;width:94%" /></div>'

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Aaron
    Aaron avatar
    2 posts
    Member since:
    Nov 2014

    Posted 09 Dec 2014 in reply to Dimo Link to this post

    Ya, this is kinda what I was describing.  What I'm trying to accomplish is a dropdown similar to Facebook's where it auto-suggests relevant matching data until it can't , and then gives a "search" selection in the drop down - I want the same thing only instead of "search" it will be "add".  I'm not looking for an input in the dropdown, I was more just looking for the "search" option facebook gives you to always appear as the last item.
Back to Top