Search code examples
kendo-uitelerikkendo-gridkendo-asp.net-mvctelerik-grid

How do I display Kendo grids inside separate Kendo tabs of a tabstrip?


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>);
        }))

Solution

  • 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.