kendo grid in kendo tabs using partial view

Question

For some reason i can get second tab (Product Details) to bind record in the grids although the GetAllProductList return records. Please advise, thank you

index.cshtml HOME/Index.cshtml

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(items =>
    {
        items.Add().Text("Search")
            .LoadContentFrom("Index", "ProductDetails")
            .Selected(true);



        items.Add().Text("Product Details")
       .LoadContentFrom("_ProductData", "ProductDetails")



    })
)

ProductDetails/Index.cshtml

@(Html.Kendo().Grid()

        .Name("BookGrid")
        .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:950px" })
        .Columns(columns =>
        {

            columns.Bound(p => p.BookId).Width(95);
            columns.Bound(p => p.Name).Width(120);


        })

        .ToolBar(toolbar => toolbar.Create())
        .Sortable()
            //.Pageable()
        .Pageable(paging => paging
            .Input(false)
            .Numeric(true)

            .PreviousNext(true)
            .PageSizes(new int[] { 5, 10, 25, 50 })
            .Refresh(false)

        )
        .Selectable()
        .Scrollable()
        .ColumnMenu(c => c.Columns(false))
        .DataSource(dataSource => dataSource

            .Ajax()//bind with Ajax instead server bind
            .PageSize(10)
            .ServerOperation(true)
                .Model(model =>
                {
                    model.Id(p => p.BookId);

                })
                                     .Sort(sort => sort
                                  .Add(x => x.Name).Descending())

                        .Read(read => read.Action("GetBookData", "ProductDetails").Type(HttpVerbs.Get))


            )



    )

ProductDetails/_ProductData.chtml (Partial page)

@(Html.Kendo().Grid<HH.PrductModel>()

        .Name("ProductGrid")
        .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:950px" })
        .Columns(columns =>
        {

            columns.Bound(p => p.ProductId).Width(95);
            columns.Bound(p => p.Name).Width(120);


        })

        .ToolBar(toolbar => toolbar.Create())
        .Sortable()
            //.Pageable()
        .Pageable(paging => paging
            .Input(false)
            .Numeric(true)

            .PreviousNext(true)
            .PageSizes(new int[] { 5, 10, 25, 50 })
            .Refresh(false)

        )
        .Selectable()
        .Scrollable()
        .ColumnMenu(c => c.Columns(false))
        .DataSource(dataSource => dataSource

            .Ajax()//bind with Ajax instead server bind
            .PageSize(10)
            .ServerOperation(true)
                .Model(model =>
                {
                    model.Id(p => p.ProductId);

                })
                                     .Sort(sort => sort
                                  .Add(x => x.Name).Descending())

                        .Read(read => read.Action("GetProductData", "ProductDetails").Type(HttpVerbs.Get))


            )



    )

**ProductDetailscontroller**

public ActionResult Index()

{ 
   return View();
} 

///Display for tab 1
public ActionResult GetBookData ([DataSourceRequest] DataSourceRequest request)
{
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
            return Json(GetAllBookList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}

 private static IEnumerable<BookModel> GetAllBookList()
        {
            using (var dc = new HHEntities())
            {
                var result = (from a in dc.Books

                              select new BookModel
                              {
                                  BookId= a.BookId,
                                  Name= a.Name



                              });
                return result.Distinct().ToList();
            }


        }


///Display for tab 2

public ActionResult GetProductData([DataSourceRequest] DataSourceRequest request)
{
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            return Json(GetAllProductList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

The following will return records but for some reason it would bind to grid in Product details tab

       /// <summary>

        /// </summary>
        /// <returns></returns>
        private static IEnumerable<ProductModel> GetAllProductList()
        {
            using (var dc = new HHEntities())
            {
                var result = (from a in dc.Products

                              select new ProductModel
                              {
                                  ProductId= a.ProductId,
                                  Name= a.Name,
                                  Description= a.Description,
                                  ExpiryDate= a.ExpiryDate


                              });
                return result.Distinct().ToList();
            }


        }

    public ActionResult __ProductData()
  { return PartialView();}

Answer 1

I suspect the problem is that both grids are rendered with the same HTML id attribute (which is set via the Name() method). You need to give your grids unique names. For example you can put some index in ViewData in the action methods which render the partial view that contains the grid. Then use that index in the partial view itself to make the grid name unique:

@(Html.Kendo().Grid<HH.PrductModel>()
      .Name("Product" + ViewData["index"])