This is a migrated thread and some comments may be shown as answers.

Is static text other than headerTemplate possible?

2 Answers 163 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Aaron
Top achievements
Rank 1
Aaron asked on 05 Dec 2014, 05:50 PM
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 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 09 Dec 2014, 11:01 AM
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.

http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-change

http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#fields-dataSource

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-add

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-insert


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>
 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     
    <style>
     
    html
    {
        font: 13px sans-serif;
    }
     
    .k-list-container.k-reset.my-list
    {
        padding-bottom: 3em;
    }
     
    .list-bottom
    {
        position: absolute;
        bottom: 0;
    }
     
    </style>
</head>
<body>
<p>Focus the AutoComplete and type "a":</p>
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  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>'
});
//debugger;
$("#autocomplete").data("kendoAutoComplete").list.addClass("my-list");
$(".my-list").find(".k-button").click(function(e){
    $(this).hide();
    $(this).next(".k-textbox").mousedown(function(j){
        j.stopPropagation();
    }).show().focus();
});
 
</script>
</body>
</html>


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Aaron
Top achievements
Rank 1
answered on 09 Dec 2014, 05:34 PM
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.
Tags
AutoComplete
Asked by
Aaron
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Aaron
Top achievements
Rank 1
Share this question
or