[Solved] Cannot read property 'contains' of undefined

[Keivan Beigi]

I'm using a dropdown menu in a partialview using render action. but when click on the down arrorw or give the control focus I get  Cannot read property 'contains' of undefined
here are code sections that I have. Also I'm a beginner in MVC/Telerik so I would appreciate any feedback on other things that I might be doing wrong.


_layout.cshtml

@(Html.Telerik().ScriptRegistrar().Scripts(
    c => c.AddGroup("CDN", group => group
                .Add("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js")
                .Add("http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"))
                .AddGroup("3rdParty", group => group
                .Add("jquery.form.js")
                .Add("jquery.jgrowl.js")
                .Add("jquery-tgc-countdown-1.0.js")
                .Add("MicrosoftMvcValidation.js"))

                .AddGroup("NzbDrone", group => group
                                    .Add("Notification.js")
                                    .Add("gridLoad.js")
                                    .Add("episodeSearch.js"))

                                    ))

Main View

@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{Html.RenderAction("AddRootDir");}


@(Html.Telerik().ScriptRegistrar().Scripts(c => c.AddGroup("TestGroup", group => group
       .Add("telerik.common.js")
       .Add("telerik.combobox.js")
       .Add("telerik.list.js")
       .Add("telerik.autocomplete.js")
          )))

Partial View

@model NzbDrone.Web.Models.RootDirModel
@{
    Layout = null;
}
<div class="rootDirSection" id="@ViewData["guid"]" style="padding: 7px; padding-left: 3px;">
    <fieldset style="padding: 5px; height: 40px;">
        @{Html.Telerik().ComboBox()
                  .Name(ViewData["guid"].ToString())
                  .BindTo(Model.SelectList)
                  .DataBinding(binding => binding.Ajax().Select("_autoCompletePath", "Directory").Delay(200).Cache(false))
                  .Filterable(f => f.FilterMode(AutoCompleteFilterMode.StartsWith))
                  .HighlightFirstMatch(true)
                  .HtmlAttributes(new { style = "width: 300px;" })
                  .Render();}
        <a href="#RemoveRootDir" class="deleteRow" onclick="deleteRootDir('@ViewData["guid"]'); return false;">
            <img src="../../Content/Images/X.png" alt="Delete" width="20px" height="20px"/></a>
        <button onclick="saveRootDir('@ViewData["guid"]')">
            Save</button>
        @Html.HiddenFor(x=>x.Id, ViewData["guid"].ToString())
    </fieldset>
</div>

[Georgi Krustev]

Hello Keivan,

 
It is hard to determine where could be the issue. I will ask you to send us a simple test project which reproduces the depicted issue.

Greetings,
Georgi Krustev
the Telerik team

[Keivan Beigi]

I have attached the project that reproduces the issue,
I'm guessing it has something to do with my script registrations, please feel free to add any note/comment on what is the best way to do proper script registrations,

thanks,

[Georgi Krustev]

Hello Keivan Beigi,

 
After further investigation of the attached project I noticed that you set same id to the ComboBox and to the DIV which wraps it. You cannot have two items with same id on one page.

In order to fix the problem, you will need to set different ids.

Kind regards,
Georgi Krustev
the Telerik team