Load partial view within partial view from kendo grid custom command

Question

I have a partial view that im displaying within jquery tabs on my mvc parent view.

<div id="tabs">
<ul>
    <li><a href="#CompanyDetails">Company Details</a></li>
    <li><a href="@Url.Action("AnnualReviews", "ManageCompanies", new { id = TempData["AnnReviewTabCompanyId"] })">Annual Reviews</a></li>
</ul>
<div id="CompanyDetails">

    @Html.Partial("CompanyProfilePartial")
</div>

CompanyProfilePartial loads when you initially visit the page, and selecting the AnnualReviews tab calls the AnnualReviews action which loads the AnnualReviewsPartial partial view. This view contains a kendo ui grid.

<tbody>
    @(Html.Kendo().Grid<OriginGreen.Models.AnnualReviewViewModel>()
    .Name("AnnualReviews")
    .Columns(columns =>
    {
        columns.Bound(p => p.PlanId).Title("Plan").Visible(true).Width(50);
        columns.Bound(p => p.Duration).Title("Duration").Width(50);
        columns.Bound(p => p.BaseYear).Title("Base Year").Width(50);
        columns.Bound(p => p.MinYear).Title("Min Year").Width(50);
        columns.Bound(p => p.MaxYear).Title("Max Year").Width(50);
        columns.Bound(p => p.AnnReviewYear).Title("Ann. Review Year").Width(50);
        columns.Bound(p => p.Status).Title("Status").Width(100);
        columns.Bound(p => p.AnnReviewDate).Title("AR Due Date").Width(100);

        columns.Template(x => { }).ClientTemplate("<a href='" + Url.Action("EditPlanAR", "ManageCompanies", new { planId = "#= PlanId #" }) + "'>Edit</a>").Width(30);
        columns.Template(x => { }).ClientTemplate("<a href='" + Url.Action("ViewARLog", "ManageCompanies", new { planId = "#= PlanId #" }) + "'>View Log</a>").Width(30);
        columns.Template(x => { }).ClientTemplate("<a href='" + Url.Action("AnnualReviewsByPlan", "ManageCompanies",  new { planId = "#= PlanId #" }) + "'>View ARs</a>").Width(30);
        columns.Template(x => { }).ClientTemplate("<a class='k-button k-button-icontext k-grid-EditArticle' href='" + Url.Action("Edit", new { id = "#= PlanId #" }) + "'>View AR's</a>").Width(30);
        columns.Command(command => command.Custom("AnnualReviewsByPlan").Click("showAnnReviewByPlan").HtmlAttributes(new { planId = "#= PlanId #" }));

    })
    .Events(e => e.DataBound("onRowBound"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .DataSource(dataSource => dataSource
                            .Ajax()
                            .ServerOperation(false)
                            .PageSize(10)
                            .Batch(true)
                            .Model(model =>
                            {
                                model.Id(p => p.PlanId);
                            })
                            .Read(read => read.Action("DisplayAnnReviewPlans", "ManageCompanies", new { companyId = ViewContext.RouteData.Values["id"]}).Type(HttpVerbs.Get))
                        )

    )
</tbody>

Javascript function recieving the row's record id -

function showAnnReviewByPlan(e)
{
    //alert("Hello World1");
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    var id = dataItem.id;
    alert(id);

    //alert("div hidden, lets show it");
    $('#AnnReviewsByPlan').show();
}

I'd like to show the sub-partial view here, based on the id value it should show a sub grid with more records.

The AnnualReviewsByPlan custom command is calling a javascript function and passing the id for the record of the row (this side of it is working). What Im looking to do in this function is load another partial view within this partial, which will display another grid (maybe kendo grid, will decide upon this later). Is this possible and if so how might I go about it? Open to any better solutions on what to do here. Cheers.

Answer 1

Once your view is rendered the only way to load a partial view is via an Ajax call which returns the partial view to your JQuery/Javascript and then updates the DOM accordingly.

Server:

[HttpGet]
public ActionResult YourAction(string id)
{
  //ToDo custom logic here
  return PartialView("YourView");
}

Javascript:

function showAnnReviewByPlan(e)
{
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    var id = dataItem.id;

    $.ajax({
      type: "GET"
      url: '/YourController/YourAction',
      data : { id: id },
      success: function (data, textStatus, jqXHR) {
          $('#AnnReviewsByPlan').html(data);
     }
    });
}

Update

[Note]
If your Kendo UI widget defined with server-side wrappers depends on javascript functions placed within the PartialView you might want to consider the Deferring Initialization section of the documentation.
That's crucial as long as you include the partial view in the parent window (not in a iframe) because Kendo UI widgets are translated into $(function(){}) which are immediately executed and any of their dependent functions must be already defined.