Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

How to render only the selected tab content?

9 Answers 1281 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 21 Jan 2014, 10:10 PM
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

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 23 Jan 2014, 01:42 PM
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!
0
Simon
Top achievements
Rank 1
answered on 23 Jan 2014, 08:32 PM
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

0
Dimo
Telerik team
answered on 24 Jan 2014, 09:12 AM
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!
0
Simon
Top achievements
Rank 1
answered on 27 Jan 2014, 07:01 PM
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


0
Accepted
Dimo
Telerik team
answered on 28 Jan 2014, 10:06 AM
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!
0
Simon
Top achievements
Rank 1
answered on 28 Jan 2014, 04:08 PM
Greaaat! That worked.
And your last hint with ControllerName & ActionName is also much appreciated.
Thanks for all your time!
Julian
0
John
Top achievements
Rank 2
answered on 09 Feb 2015, 04:01 PM
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
0
Erika
Top achievements
Rank 1
answered on 10 Aug 2015, 01:41 PM

Could you Please get me an Example for this Implementation?

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

0
Dimo
Telerik team
answered on 12 Aug 2015, 08:10 AM
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!
 
Tags
TabStrip
Asked by
Simon
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Simon
Top achievements
Rank 1
John
Top achievements
Rank 2
Erika
Top achievements
Rank 1
Share this question
or