How to render only the selected tab content?

10 posts, 1 answers
  1. Simon
    Simon avatar
    4 posts
    Member since:
    Apr 2012

    Posted 21 Jan 2014 Link to this post

    Is it possible to render only the selected tab content from partial view? Something like:
    index.cshtml
    <body>
        <div>
            @(Html.Kendo().TabStrip()
            .Name("Tabs")
            .Items(tabs =>
                {
                    tabs.Add().Text("Tab1");
                    tabs.Add().Text("Tab2");
                    tabs.Add().Text("Tab3");
                })
            .ItemAction(item =>
                {
                    string tabViewName = string.Format("Tabs/{0}", ViewBag.TabName);
                    if (item.Text.Equals(ViewBag.TabName, StringComparison.CurrentCultureIgnoreCase))
                    {
                        item.Selected = true;
                        item.Content = () =>
                            @Html.Partial(tabViewName).ToHtmlString();
                    }
                    else
                    {
                        item.Url(item.Text);
                    }
                }
            )
            )
        </div>
    </body>
    The code above renders an empty div for the content of the selected tab.
    However when using @Html.Partial(tabViewName).ToHtmlString(); in a different section of the view the partial content is correctly rendered.
    I do have a sample project if needed.
    Thanks,
    Julian
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 23 Jan 2014 Link to this post

    Hi Julian,

    You can use LoadContentFrom() for tabs that should not render their content initially.

    http://demos.kendoui.com/web/tabstrip/ajax.html

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Simon
    Simon avatar
    4 posts
    Member since:
    Apr 2012

    Posted 23 Jan 2014 Link to this post

    Hi Dimo,
    Thanks for your reply.

    I was thinking more of this scenario:
    I have one controller and one view that will render the tabstrip and 3 partial views that contains the tabs content. The tab name will be passed as parameter to the controller which will pass it further to the view and at the time the tab strip is initially rendered also decide what tab content is rendered (the selected one only)
    RouteConfig.cs:
    routes.MapRoute(
        name: "Tabs",
        url: "{tabName}",
        defaults: new { controller = "Home", action = "Index", tabName = "Tab1" }
    );
    HomeController.cs
    public class HomeController : Controller
    {
        //
        // GET: /Home/
     
        public ActionResult Index(string tabName)
        {
            ViewBag.TabName = tabName;
     
            return View();
        }
    }
    Index.cshtml:
    @{
        Layout = null;
    }
     
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
     
        <title>Index</title>
        <link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.common.min.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/kendo/2013.3.1119/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
         
        <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/2013.3.1119/jquery.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/2013.3.1119/kendo.all.min.js")"></script>
        <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/2013.3.1119/kendo.aspnetmvc.min.js")"></script>
    </head>
    <body>
        <div>
            @(Html.Kendo().TabStrip()
            .Name("Tabs")
            .Items(tabs =>
                {
                    tabs.Add().Text("Tab1");
                    tabs.Add().Text("Tab2");
                    tabs.Add().Text("Tab3");
                })
            .ItemAction(item =>
                {
                    string tabViewName = string.Format("Tabs/{0}", ViewBag.TabName);
                    if (item.Text.Equals(ViewBag.TabName, StringComparison.CurrentCultureIgnoreCase))
                    {
                        item.Selected = true;
                        item.Content = () =>
                            @Html.Partial(tabViewName).ToHtmlString();
                    }
                    else
                    {
                        item.Url(item.Text);
                    }
                }
            )
            )
        </div>
    </body>
    </html>
    Tabs/Tab1.cshtml:
    <
    h3>Content Tab1</h3>
    Tabs/Tab2.cshtml:
    <
    h3>Content Tab2</h3>
    Tabs/Tab3.cshtml:
    <
    h3>Content Tab3</h3>
    The problem I am facing is I cannot set the content of the desired tab in ItemsAction. 
    When I set the content of each tab on creation it will work but I will have all the tabs rendered (2 will be hidden of course).
    To clarify the following code will work but I will have all 3 tabs' content rendered.
    @(Html.Kendo().TabStrip()
    .Name("Tabs")
    .Items(tabs =>
        {
            tabs.Add().Text("Tab1").Content(Html.Partial("Tabs/Tab1").ToHtmlString());
            tabs.Add().Text("Tab2").Content(Html.Partial("Tabs/Tab2").ToHtmlString());
            tabs.Add().Text("Tab3").Content(Html.Partial("Tabs/Tab3").ToHtmlString());
        })
    .ItemAction(item =>
        {
            string tabViewName = string.Format("Tabs/{0}", ViewBag.TabName);
            if (item.Text.Equals(ViewBag.TabName, StringComparison.CurrentCultureIgnoreCase))
            {
                item.Selected = true;
           }
            else
            {
                item.Url(item.Text);
            }
        }
    )
    )
    I can't see how can I use LoadContentFrom in my scenario.
    Julian

  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 24 Jan 2014 Link to this post

    Hi Julian,

    Sorry, you should use

    item.ContentUrl = "...";

    inside ItemAction.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Simon
    Simon avatar
    4 posts
    Member since:
    Apr 2012

    Posted 27 Jan 2014 in reply to Dimo Link to this post

    Hi Dimo,

    Thanks for replying; I tried your latest suggestion without success.

    However I still fail to see how ContentUrl (or LoadContentFrom for that matter) would help in the scenario I presented you with.
    I would like to render the selected tab content as a partial view at initialization time.
    Using ContentUrl requires having the tab content as a static html page or as a separate controller action which I don't want.
    If you have some sample working code would you mind sharing it?

    Anyway I finally kind of gave up the initial idea and instead I have all my tabs as views and depending on what tab is selected the controller will return the right view. The downsize is I had to repeat the tabstrip initialization on each tab view.

    Cheers,
    Julian


  7. Answer
    Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 28 Jan 2014 Link to this post

    Hi Julian,

    I think I understand now - you want to make full page reloads. The selected tab content will be rendered, while all other tabs will navigate. Is this correct? If yes, then use


    @(Html.Kendo().TabStrip()
            .Name("...")
            .Items(tabstrip =>
            {
                tabstrip.Add().Text("...");
                tabstrip.Add().Text("...");
                tabstrip.Add().Text("...");
            })
            .ItemAction(item =>
            {
                if (...)
                {
                    item.Selected = true;
                    item.Html = @Html.Partial("...").ToString();
                }
                else
                {
                    item.ControllerName = "...";
                    item.ActionName = "...";
                       
                    // or
     
                    item.Url = "...";
                }
            })
    )


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Simon
    Simon avatar
    4 posts
    Member since:
    Apr 2012

    Posted 28 Jan 2014 in reply to Dimo Link to this post

    Greaaat! That worked.
    And your last hint with ControllerName & ActionName is also much appreciated.
    Thanks for all your time!
    Julian
  9. John
    John avatar
    1 posts
    Member since:
    Jan 2015

    Posted 09 Feb 2015 in reply to Simon Link to this post

    Simon,

    I am fairly new to Kendo and MVC in general and was wondering how you were able to detect which tab was clicked so that you were able to set the ViewBag.TabName when a tab was clicked?

    I have this working except for the part where I can set that one piece of information.

    Thank you
  10. Erika
    Erika avatar
    1 posts
    Member since:
    Nov 2014

    Posted 10 Aug 2015 in reply to Dimo Link to this post

    Could you Please get me an Example for this Implementation?

    We are looking to load Multiple tabs in parallel than loading one by one

  11. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 12 Aug 2015 Link to this post

    Hi Erika,

    Normally, the TabStrip only loads the initially active tab, or the tab, which is clicked by the user. If you want to load other (all) tabs, then use the Javascript API.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#methods-reload

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready