Trouble Loading a Partial View onto a tab

[J]

Under MVC 5 this worked:

 

@(Html.Kendo().TabStrip()
   .Name("tabstrip")
   .SelectedIndex(0)
   .Items(tabstrip =>
       {

            tabstrip.Add().Text("Add Children")

               .Enabled(false)

               .Content(m => Html.Partial("_FamilyIntakeStep3", m))

               ;

})

})

 

But under ASP.Net Core, this no longer works.  Instead I am getting the class as a string.  I am pretty sure this is happening because the call is asynchronous, which means I should add in the await keyword.  But I have no idea how to do this in the kendo tabstrip.

 

Or perhaps there is a completely different solution that I should try?

[Marin Bratanov]

Hello,

There are two rather easy ways to do that:

• If you want the partial view rendered inline (i.e., to come down in the response together with the tab strip and the rest of its view), use the .Content() method and pass the partial view rendering in the @<text></text> block. Generally, I don't recommend this as it may cause encoding issues and errors if you have more complex content and/or widgets/components in the partial view, but for plain content it may be fine.

  .Items(tabstrip =>
  {
      tabstrip.Add().Text("partial inline")
          .Content(@<text>@await Html.PartialAsync("_testPartial")</text>);

• The better approach is to have the tab strip to do a GET for the partial view. To do that, create an action method that will return the desired partial view and use that in the .LoadContentFrom() method:

  .Items(tabstrip =>
  {
      tabstrip.Add().Text("partial async")
          .LoadContentFrom("getMyPartial", "TabStrip");

  and

  public partial class TabStripController : Controller
  {
      [HttpGet]
      public ActionResult getMyPartial()
      {
          return PartialView("~/Views/TabStrip/_testPartial.cshtml");
      }

I am attaching here the Ajax demo and its modified controller as a reference, to showcase both approaches. It also shows a couple of ways to render the partial view inline so theoretically they should all work in the <text> block since the framework will render the same content out of them in place of the declaration.

Regards,
Marin Bratanov
Progress Telerik

[Dan]

I saw this post and have a related question.  I have an application with a tab control with 2 tabstrips.  TabStrip 1 has a grid with "application" records, Tabstrip 2 will contain information for the "application selected' on tabstrip1.  Depending upon the "ApplicationType" of the selected application record, I want to show a different partial view on TabStrip2.  Would that be possible using the technique you referenced, e.g.  "LoadContentFrom("getApplicationPartialView","ApplicationController").  then the controller would determine which view to return?  This also assumes that i can pass in a parameter to the "LoadContentFrom", which I am hoping to set when the grid record is selected.

 

thanks

[Neli]

Hi Dan,

To achieve the desired behavior I would suggest you the following approach:

When a row in the Grid is selected, in the change event handler of the Grid you can retrieve the selected application type. The data of the selected row can be accessed using the dataItem method and the approach demonstrated here. Then you could get a reference of the TabStrip and set the contentUrl of the second tab depending on the selected application type. Next you could use the TabStrip reload method in order to specify the content of which tab to be reloaded.

Here is an example:

//sample path to the end point which loads the partial view of the second tab
var value = '/Home/Tab2?ApplicationType=' + appType
$(".k-tabstrip .k-item .k-link:contains('Second Tab')").data('contentUrl', value);

tabstrip.reload("li:eq(1)");

I hope the provided information will help you to resolve the issue.

Regards,
Neli
Progress Telerik

[Dan]

I am trying your suggestion, but must be missing something - the first time a grid row is selected, and I am able to reload the second tab strip with the correct data.  If I select another row, the content url seems to be updated correctly, but the tab doesn't reload with the new content url - controller action never gets fired after the first row selection.

 

var grid = $("#ProviderApplicationInfoGrid").data("kendoGrid");
var dataItem = grid.dataItem(grid.select());
if (dataItem != null) {
    applicationId = dataItem["ApplicationId"];
applicationType = dataItem["ApplicationType"];
var value = '/Application/getMyApplication?appId=' + applicationId + '&applicationType=' + applicationType;
//alert("value: " + value);  //this indicates the value has been updated correctly
var tabStrip = $("#tabstripApplication").getKendoTabStrip();
$(".k-tabstrip .k-item .k-link:contains('Application Details')").data('contentUrl', value);
tabStrip.reload("li:eq(1)");
tabStrip.items()[1].title = "appid=" + applicationId;  //this doesn't get updated the after the first row select
tabStrip.select(1);
}

[Neli]

Hello Dan,

I examined the provided snippet, but I was not able to find any mistake that could cause a problematic issue.

I have prepared a sample project based on the described scenario. In the project, there is a TabStrip, that you will find in Views ->Home-> Index.cshtml

@(Html.Kendo().TabStrip()
              .Name("tabstrip")
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Grid")
                      .Selected(true)
                      .LoadContentFrom("FirstPartial", "Home");

                  tabstrip.Add().Text("Engine")
                      .LoadContentFrom("SecondPartial", "Home");
              })
    )

In the first tab of the TabStrip, there is a Grid with checkboxes for selecting each row. The configuration of the Grid is in Views ->Home-> _FirstPartial.cshtml

In the change event handler of the Grid, the selected items are retrieved as described in my previous reply. Then data about the selected rows are sent to the second tab endpoint. The endpoint is successfully hit every time the selection of the rows in the Grid is changed. Currently, I am only displaying text (ShipName) about the selected rows. The real implementation depends on your specific scenario. Here you could find a link to a screencast where you could see the behavior on my end.

Could you please try to modify the project to be closer to your scenario and replicate the issue and send it back to us? This way we could troubleshoot locally and assist you further.

Regards,
Neli
Progress Telerik

[Dan]

Often times when i am trying to figure out something I look at forums as well as submitting a ticket not always realizing i might be asking the same thing in a slightly different fashion - I think i did that in this case - the ticket below references a response from one of your colleagues which has resolved the issue.  Your sample project uses a different approach though, which I like better since it uses the .net core kendo tabstrip instead of the jquery kendo tabstrip (I don't like to mix the two in the same project).  thanks.

 

Ticket ID: 1468526