I'm trying to display two Kendo UI grids on two separate tabs of a Kendo tabstrip. It displays only the grid that is inside the tab with selected option being true. Here is my code:
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(items =>
{
items.Add().Text("Tickets")
.Selected(true)
.Content(
@<text>@(Html.Kendo().Grid((IEnumerable<Bugger.Models.Ticket>)ViewBag.Tickets)
.Name("grid2")
.Columns(columns =>
{
columns.Bound(tickets => tickets.TicketID);
columns.Bound(tickets => tickets.Description);
})
.Pageable()
.Sortable()
)
</text>
);
items.Add().Text("Technicians")
.Content(@<text>@(Html.Kendo().Grid((IEnumerable<Bugger.Models.Technician>) ViewBag.Technicians)
.Name("grid1")
.Columns(columns =>
{
columns.Bound(technician => technician.UserID);
columns.Bound(technician => technician.FirstName);
})
.Pageable()
.Sortable()
)</text>);
}))
I got my solution working. For future reference, I'm posting here.
The problem was that although I included "kendo.all.min.js" into my layout file, "kendo.aspnetmvc.min.js" was not included, an in order for this to work properly, I had to include this second javascript file too.
I added it to my _Layout.cshtml file.