This is a migrated thread and some comments may be shown as answers.

Trouble Loading a Partial View onto a tab

6 Answers 399 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
J
Top achievements
Rank 1
J asked on 18 Nov 2018, 06:35 PM

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?

6 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 21 Nov 2018, 01:09 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dan
Top achievements
Rank 1
Veteran
answered on 21 May 2020, 08:19 PM

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

0
Neli
Telerik team
answered on 26 May 2020, 11:04 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Dan
Top achievements
Rank 1
Veteran
answered on 26 May 2020, 08:08 PM

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

0
Neli
Telerik team
answered on 29 May 2020, 01:49 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Dan
Top achievements
Rank 1
Veteran
answered on 29 May 2020, 02:57 PM

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

Tags
TabStrip
Asked by
J
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Dan
Top achievements
Rank 1
Veteran
Neli
Telerik team
Share this question
or