TabStrip loading partial view having multiple levels of partial views

8 posts, 0 answers
  1. Mathieu
    Mathieu avatar
    2 posts
    Member since:
    Apr 2015

    Posted 26 Jun 2015 Link to this post

    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.

  2. Mathieu
    Mathieu avatar
    2 posts
    Member since:
    Apr 2015

    Posted 26 Jun 2015 in reply to Mathieu Link to this post

    Ok I had a typo error in the view name, this is why the tab was blank... Problem solved!
  3. Alain
    Alain avatar
    15 posts
    Member since:
    Feb 2017

    Posted 03 May Link to this post

    thank you for posting this here.

    the documentation are full of lack on this specific topic.

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1094 posts

    Posted 05 May Link to this post

    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.
  5. Alain
    Alain avatar
    15 posts
    Member since:
    Feb 2017

    Posted 19 May Link to this post

    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

  6. Alain
    Alain avatar
    15 posts
    Member since:
    Feb 2017

    Posted 19 May in reply to Alain Link to this post

    i forgot to attach the screenshot
  7. Alain
    Alain avatar
    15 posts
    Member since:
    Feb 2017

    Posted 19 May in reply to Alain Link to this post

    seems like attachments causing errors on replying...

     

     

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1094 posts

    Posted 3 days and 13 hours ago Link to this post

    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.
Back to Top