2

My Kendo autocomplete control retrieves a Json list successfully. Unfortunately, it calls the MVC controller method twice and creates two suggestion lists. The duplicate list is displayed directly behind the first. When a value is selected from the first suggestion list, the list disappears, but the duplicate list remains visible. I am using a wrapper for the autocomplete control as shown below. I've confirmed that the control is not being referenced in any of the page scripts. The control is located in a partial view that is added to a cshtml view one time (@{ Html.RenderPartial("_AddLineItem"); }).

@(Html.Kendo().AutoComplete()
     .Name("CategorySearch")
     .DataTextField("CategoryName")
     .Filter("contains")
     .DataSource(source =>
     {
         source.Read(read =>
         {
             read.Action("PopulateCategories", "Default");
         })
         .ServerFiltering(false);
    })
)

Generated HTML shows the suggestion list twice, but the associated input control only exists once. The following tags are in the generated HTML twice (these are tags for the suggestion list and they also contain li tags and closing div tags, removed from the pasted HTML below): 

<div class="k-animation-container" style="left: 431.13px; top: 405.69px; width: 511px; height: 206px; overflow: hidden; padding-right: 2px; padding-bottom: 4px; padding-left: 2px; margin-left: -2px; display: none; position: absolute; z-index: 10002;">

Does anyone have an idea of what is happening here?

user3541513
  • 21
  • 2
  • It's calling the controller? I thought `ServerFiltering(false)` would not allow that to happen. What JQuery version are you using, I've run into similar issues if it wasn't the correct suggested JQuery version – CSharper Apr 16 '14 at 14:41
  • We're using 1.7.1 (a little behind, but something else on the site requires that version). I believe that ServerFiltering set to false just prevents a call to the server for new filtered results. I'll try a newer version of jquery to see it has an effect. Thanks for the idea! – user3541513 Apr 16 '14 at 15:14
  • Changing the JQuery version didn't solve the issue, but it did make me think about what is happening here. The control is located within a JQuery UI dialog. It turns out that they cause content to be rendered when the dialog is created in a browser. This means that a Kendo autocomplete control located in a JQuery UI dialog is rendered when the page is loaded and then rendered again when the dialog is created. Thus two suggestion lists appear in the HTML. I removed the JQuery dialog and moved the Kendo autocomplete control to a Kendo modal window and the problem is solved. – user3541513 Apr 17 '14 at 12:42

1 Answers1

0

Per the comment that I added, the answer is to avoid putting a Kendo autocomplete control inside a JQuery UI dialog control. The dialog forces the autocomplete control to be rendered twice in the browser. I've confirmed this in both Internet Explorer and Firefox. It is reasonable to assume that the same behavior will occur in other browsers as well.

user3541513
  • 21
  • 2
  • Yep that would do it. I knew there was something behind the scenes going on that wasn't part of your post. I thought maybe you defined the dataSource twice or something. – CSharper Apr 17 '14 at 12:53