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

TabStrip loading partial view having multiple levels of partial views

11 Answers 1159 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Mathieu
Top achievements
Rank 1
Mathieu asked on 26 Jun 2015, 05:39 PM

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.

11 Answers, 1 is accepted

Sort by
0
Mathieu
Top achievements
Rank 1
answered on 26 Jun 2015, 10:09 PM
Ok I had a typo error in the view name, this is why the tab was blank... Problem solved!
0
Mike
Top achievements
Rank 1
answered on 03 May 2017, 02:47 PM

thank you for posting this here.

the documentation are full of lack on this specific topic.

0
Ivan Danchev
Telerik team
answered on 05 May 2017, 07:47 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Mike
Top achievements
Rank 1
answered on 19 May 2017, 02:33 PM

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

0
Mike
Top achievements
Rank 1
answered on 19 May 2017, 02:34 PM
i forgot to attach the screenshot
0
Mike
Top achievements
Rank 1
answered on 19 May 2017, 02:35 PM

seems like attachments causing errors on replying...

 

 

0
Ivan Danchev
Telerik team
answered on 23 May 2017, 08:36 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tajjulla
Top achievements
Rank 1
answered on 23 Jun 2017, 02:27 AM

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?

0
Ivan Danchev
Telerik team
answered on 26 Jun 2017, 12:14 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kiran
Top achievements
Rank 1
Veteran
answered on 09 Dec 2017, 02:38 AM

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

 

0
Ivan Danchev
Telerik team
answered on 12 Dec 2017, 02:21 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TabStrip
Asked by
Mathieu
Top achievements
Rank 1
Answers by
Mathieu
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Ivan Danchev
Telerik team
Tajjulla
Top achievements
Rank 1
Kiran
Top achievements
Rank 1
Veteran
Share this question
or