Is it possible to render only the selected tab content from partial view? Something like:
index.cshtml
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
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
>
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
0
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
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)
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.
I can't see how can I use LoadContentFrom in my scenario.
Julian
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
>
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);
}
}
)
)
Julian
0
Hi Julian,
Sorry, you should use
inside ItemAction.
Regards,
Dimo
Telerik
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
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
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
Regards,
Dimo
Telerik
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
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
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
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
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!