TabStrip loading partial view having multiple levels of partial views

[Mathieu]

Hello,

I am facing an issue with the TabStrip (Q2 2015). Here is the declaration:

01.@(Html.Kendo().TabStrip()
02. .Name("documents")
03. .Scrollable(false)
04. .Items(tabstrip =>
05. {
06.tabstrip.Add().Text("Documents")
07. .Selected(true)
08. .LoadContentFrom("LoadDocumentsTabView", "Documents");
09.
10.                                    tabstrip.Add().Text("Marketing Material")
11. .LoadContentFrom("LoadMarketingMaterialTabView", "Documents", new { area = "Documents");
12.
13.tabstrip.Add().Text("Contracts Agreements")
14. .LoadContentFrom("LoadContractsAgreementsTabView", "Documents");
15. })
16. )

Let's focus on the first tab, which is "Documents". This is the method called on the controller:

1.public PartialViewResult LoadDocumentsTabView()
2.{
3.    return PartialView("~/Areas/Documents/Views/Tabs/_Documents.cshtml");
4.}

 This partial view is composed of some partial views, and some of these partial views are also calling some partial views. So I have multiple levels of partial views.

 The problem with this is that the TabString doesn't show anything. When I set breakpoints in my controllers, everything is called as expected.

 Am I missing a configuration somewhere?

 

Thanks for any help.

[Mathieu]

Ok I had a typo error in the view name, this is why the tab was blank... Problem solved!

[Mike]

thank you for posting this here.

the documentation are full of lack on this specific topic.

[Ivan Danchev]

Hello Alain,

The number of partial views you load in a tab can vary depending on the specific scenario. Thus we do not cover this in the documentation since it does not require the TabStrip to be configured differently compared to scenarios in which you load a single page/view. We have a demo, which shows how the tab's LoadContentFrom method can be used. Mathieu simply uses a different overload of the method and specifies the Action and Controller:

.LoadContentFrom("LoadDocumentsTabView", "Documents");

instead of passing a string to it as in the demo.

Regards,
Ivan Danchev
Telerik by Progress

[Mike]

Hi Ivan,

 

thanks for your reply on this.

i got it to work with the Partial Views as Content for a Tabstrip element.

now i have for each partial view which is for displaying, its own editartial view.

i've seen that there is a way to load these Partial views with Jquery scripting (seen on stackoverflow).

but i dont want to use script, as it may be possible to do it some other easier way.

 

 @(Html.Kendo().TabStrip()
    .Name("partnerIndivTabStrip")
    .Animation(animation =>
    {
        animation.Open(config =>
        {
            config.Fade(FadeDirection.In);
            config.Duration(AnimationDuration.Fast);
        });
    })
    .SelectedIndex(0)
    .HtmlAttributes(new { style="height:100%"})
    .Items(items =>
    {
        items.Add().Text("Particular")
        .Selected(true)
            .Content(@<text>@Html.Partial("Particular")</text>);
        items.Add().Text("Address(es) & Instructions")
            .Content(@<text>@Html.Partial("Address")</text>);
        items.Add().Text("Personal Information")
            .Content(@<text>@Html.Partial("Personal")</text>);
        items.Add().Text("Additional Information")
            .Content(@<text>@Html.Partial("Additional")</text>);
        items.Add().Text("Contact Management")
            .Content(@<text>@Html.Partial("Contact")</text>);
        items.Add().Text("Attached")
            .Content(@<text>@Html.Partial("Attached")</text>);
    })
)

the partial edit views only contain editfor defintions and should only be shwon in the Tab Content.

so the only thing which shold be provided is a switch / change of the Partial view, to the specific edit view.

 

hope you can give me some advice on this scenario.

Thank you & best regards

[Mike]

i forgot to attach the screenshot

[Mike]

seems like attachments causing errors on replying...

 

 

[Ivan Danchev]

Hi Alain,

Here's an example showing how you can change the partial view passed as content to the tab:

<input type="button" value="change content" onclick="changeContent()" />
<script>
    function changeContent() {
        var partialView = '';
        @{
            <text>
            partialView = '@Html.Partial("Partial1")';
            </text>
         }

        var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

        var item = tabStrip.contentElement(0);
        $(item).html(partialView);
    }
</script>

So in the example on "change content" button click the content of the TabStrip's first tab (index 0) is changed and the partial view with name "Partial1" will be loaded when that tab is selected.

Regards,
Ivan Danchev
Telerik by Progress

[Tajjulla]

Hi I am trying to some thing similar for multiple tabs as below.

I am struck at a point where I will be passing the name of my partial view from server side. And need to include it in the view as below

@(Html.Kendo().TabStrip()
                    .Name("tabstrip")
                    .TabPosition(TabStripTabPosition.Left)
                    .Animation(animation =>
                        animation.Open(effect =>
                            effect.Fade(FadeDirection.In)))
                    .HtmlAttributes(new { style = "height: 100%; border:none;" })
                    .Items(tabstrip =>
                    {
                    if (Model.Details != null)
                    {
                        foreach (var dItem in Model.Details)
                        {
                            tabstrip.Add().Text(dItem.Name)
                            .SpriteCssClasses(dtem.Classes)
                            .Selected(dItem.Selected)
                            .Content(*** Partial view should come here - How can I do this? - dItem.PartialViewName ***);
                        }
                    }

Can any one help Please?

[Ivan Danchev]

Hello,

If the PartialViewName field holds the name of the partial view, "Partial1" for example you can use the following syntax to pass it to the Content method:

.Content(@<text>@Html.Partial(dItem.PartialViewName)</text>)

Regards,
Ivan Danchev
Progress Telerik

[Kiran]

Hi Ivan,

In TabStrip control can I load different partial views in different tabs, which are have the same control IDs and Names along with JavaScript code

 

[Ivan Danchev]

Hello Kiran,

I replied to the support ticket with the same subject you submitted. If you have additional questions on the matter I suggest we continue our discussion in that thread in order to avoid duplication. To sum up my reply here: widgets nested in the partial views loaded in the TabStrip's tabs must have unique names (ids). JS code related to those widgets such as widgets event handlers must be placed before the particular widget declaration.

Regards,
Ivan Danchev
Progress Telerik