How to close Kendo UI Autocomplete programmatically - kendo-ui

Question

I am using the Kendo UI Autocomplete Box in a ASP.Net MVC Application.
(KENDO UI for ASP.NET MVC Q1 2016)
The part of the .cshtml code looks like this:
<div class="row">
<div class="col-md-10">
<div class="form-group">
#Html.Label(Strings.ManagerTimeEffortFormPartial_LabelLookupCustomer, new { #class = "k-label" })
#Html.TextBox("CustomerId", "", new { style = "display: none;" })
#(Html.Kendo().AutoComplete()
.Name("CustomerName")
.DataTextField("DisplayName")
.Filter(FilterType.Contains)
.MinLength(3)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SearchCustomers", "Customer")
.Data("onSearchManagerEffortCustomerName");
})
.ServerFiltering(true);
})
.HtmlAttributes(new { #class = "k-textbox-fullwidth" })
.Events(e =>
{
e.Select("onSelectManagerEffortCustomer");
})
)
</div>
</div>
</div>
The element needs to be prefilled with a value. I am doing this after the ui was loaded:
$(function () {
var customerValue = $("#Project_CustomerName").val();
var customerNameAutoComplete = $("#CustomerName").data("kendoAutoComplete");
$("#CustomerName").val(customerValue);
customerNameAutoComplete.search(customerValue);
customerNameAutoComplete.select(customerNameAutoComplete.ul.children().eq(0));
customerNameAutoComplete.close();
});
Calling the "Close" method should close the suggestions (from what I understood in the documentation) but it does not work (the suggestions are still open). If I scroll the window in the ui or click somewhere else it closes immediately, but setting focus programmatically to another element or triggering a click-event via code doesn't help. I could hide/change the DOM-elements one by one, but I don't think this is a good solution, there are too many attributes changing when the item is selected with a mouse click.
Everything else in the code works fine (binding source, selecting the element and so on - I did not post the JS-Code for these parts here). I also tried to play with the "suggest" method without any luck. Any idea or a hint in the right direction?
This is how the autocomplete looks like after calling the "Close" method (still open):
Screenshot of Autocomplete Box with open suggestions

Answer 1

Sorry for this... again I got caught by the asynchronous loading trap...
of course I need to wait for the data bound event until i should select the item...
<div class="row">
<div class="col-md-10">
<div class="form-group">
#Html.Label(Strings.ManagerTimeEffortFormPartial_LabelLookupCustomer, new { #class = "k-label" })
#Html.TextBox("CustomerId", "", new { style = "display: none;" })
#(Html.Kendo().AutoComplete()
.Name("CustomerName")
.DataTextField("DisplayName")
.Filter(FilterType.Contains)
.MinLength(3)
.Suggest(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SearchCustomers", "Customer")
.Data("onSearchManagerEffortCustomerName");
})
.ServerFiltering(true);
})
.HtmlAttributes(new { #class = "k-textbox-fullwidth" })
.Events(e =>
{
e.Select("onSelectManagerEffortCustomer");
e.DataBound("OnCustomerDataBound");
})
)
</div>
</div>
</div>
<script>
function OnCustomerDataBound() {
var customerNameAutoComplete = $("#CustomerName").data("kendoAutoComplete");
var select = customerNameAutoComplete.ul.children().eq(0);
customerNameAutoComplete.select(select);
customerNameAutoComplete.close();
}
$(function () {
var customerValue = $("#Project_CustomerName").val();
var customerId = $("#Project_CustomerId").val();
var consProjectId = $("#Project_ConsultingProjectId").val();
var customerNameAutoComplete = $("#CustomerName").data("kendoAutoComplete");
$("#CustomerName").val(customerValue);
$("#CustomerId").val(customerId);
customerNameAutoComplete.search(customerValue);
customerNameAutoComplete.trigger("change");
RefreshDropDownList("ManagerEffortCustomerProjects");
});
Now it works perfectly fine! Although it is kind of embarrassing, i will not delete this post. Maybe someone else will need some help to step off the hose...