Using Kendo Grid in PartialView

Question

I have two <section> in the Index view of my MVC application and I want to render two partial views in these sections. There is no problem rendering a Kendo grid to one Index. However, in order to render data on Kendo Grid, could I use the two methods returning Json in the controller as shown below. Could you give me an example how to achieve this?

Controller:

public ActionResult Index()
{
    return View();
}

public ActionResult Issues_Read([DataSourceRequest]DataSourceRequest request)
{
    IQueryable<Issue> issues = db.Issues;
    DataSourceResult result = issues.ToDataSourceResult(request, c => new IssueViewModel 
    {
        ID = c.ID,
        ProjectID = c.ProjectID
    });

    return Json(result);
}

View:

@(Html.Kendo().Grid<IssueViewModel>()
  .Name("grid")
  .Columns(columns =>
  {
      columns.Bound(c => c.ProjectID);
      columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
  })
  .ColumnMenu()
  .Editable(editable => editable.Mode(GridEditMode.PopUp))
  .Pageable()
  .Navigatable()    
  .DataSource(dataSource => dataSource
      .Ajax()
      .Model(model => model.Id(p => p.ID))
      .Read(read => read.Action("Issues_Read", "Issue"))
      .Create(create => create.Action("Issues_Create", "Issue" ))
      .Update(update => update.Action("Issues_Update", "Issue"))
      .Destroy(destroy => destroy.Action("Issues_Destroy", "Issue"))
  )
)

Answer 1

In order to use the same partial view multiple times, grid ID should be unique so passing the ID in partial view data is one possible solution. In your case Partial view first call:

@Html.Partial("grid", new ViewDataDictionary { { "id", "grid1" }})

Partial view second call:

@Html.Partial("grid", new ViewDataDictionary { { "id", "grid2" }})

Partial view content:

@(Html.Kendo().Grid<IssueViewModel>()
  .Name(@ViewData["id"].ToString())
...