How can I put Kendo controls in a Partial View?

Question

I'm putting a Kendo Tabstrip in one of the areas in my C# MVC project.

<div id="tabstrip">
<ul>
    <li class="k-state-active">
        Teachers
    </li>
    <li>
        Students
    </li>
</ul>
<div id="teachers">
    @{ Html.RenderPartial("Teachers"); }
</div>
<div id="students">
    @{ Html.RenderPartial("Students"); }
</div>
</div>

As you can see, there are just two tabs and I'm putting their contents in partial views.

The problem is, I want to put more Kendo controls in those partial views. I want both tabs to have a Kendo Grid, AutoComplete widgets, and so on. So, I put the following code in Teachers.cshtml:

<input id="products" style="width: 250px" />

<script>
    $(document).ready(function () {
        var data = { "foo": ["item 1", "test 2", "item 3"] };
        $("#products").kendoAutoComplete({
            filter: "contains",
            minLength: 2,
            dataSource: {
                data: data,
                schema: {
                    data: "foo"
                }
            }
        });
    });
</script>

This is just a standard AutoComplete widget. It works fine when I just put it in one of the tabs, but if I try to put that same code in both tabs, it doesn't work. The input field on the first tab becomes as wide as the screen, and no suggestions show up when I type stuff in on the second tab.

I don't really know how else to do this. How do I put Kendo controls in a Tabstrip using Partial Views?

Answer 1

The problem is, both widgets have the same ID. I changed the ID in the second tab and it works fine.