Hallo,
i'm trying to load a tabstrip header from database. I mean, the change Paris, New York etc with data from database. I have read this demo https://docs.telerik.com/aspnet-mvc/helpers/tabstrip/overview#model-binding
with the chapter "Model Binding". This is the source code
@model IEnumerable<rcMDM.Data.MN_DEF_REITER>
@(Html.Kendo().TabStrip()
.Name("reiterStrip")
.BindTo(Model,(item,label)=>
{ item.Text = label.RTR_LABEL; }) )
I have seen that the admins from this forum are from Bulgaria or they understand bulgarian, so below i want to explain my problem on bulgarian too :)
Здравейте,
имам малък проблем с табчетата. Правя една апликация, която трябва да зарежда динамична информация. Една от желанията ми е да използвам табовете. Искам да зареждам само самите наименования на табовете. Съдържанието като грид успях да го свържа и се зарежда, но не успях да направя същото с табовете. Ще съм много благодарен за помощта :)
Best wishes,
When I add a simple @(Html.Kendo().TabStrip() strip inside a tab freom the main @(Html.Kendo().TabStrip() it does not work, I can add grids and other things.
Please advise how to add a @(Html.Kendo().TabStrip() inside another tab
Thanks
Cameron
Hi,
At the moment I am converting an application with Telerik MVC To Kendo UI.
a lot of stuff I already migrated, but this one it troubling me for a couple of days now.
The structure I have is as following.
- I have a tabsptrip and whithin the items I have grids.
- those grids contain a "DetailView" or as in the new situation "ClientDetailTemplateId"
- the clientTemplate inself contains a tabstrip as well.
and untill here everything is ok.
I can add a tabstrip Item with only HTML.
but as soon as I add an other grid to the tabstrip of the lowest item I get a Javascript Error: "Error: Invalid template:'"
and I don't know why, I tried a lot of different ways of adding the grid.
is there someone who can help me? I'm using version "2017.3.1026" of Kendo UI.
thank you
I have a Grid with a command button that open a Dialog. This dialog has a Tabstrip with each tab loading content from a controller that returns a view. The tabstrip is built using the ASP.Net MVC Html wrapper.
<
p
>@(Html.Kendo().Dialog()<
br
> .Name("viewDetailsDialog")<
br
> .Title("Details")<
br
> .Content(<
br
> Html.Kendo().TabStrip()<
br
> .Name("viewDetailsTabstrip")<
br
> .Items(tabstrip => {<
br
> tabstrip.Add().Text("Tab 1")<
br
> .HtmlAttributes(new { @class= "tab_bar" })<
br
> .Selected(true)<
br
> .LoadContentFrom("Tab1Content", "MyController");<
br
><
br
> tabstrip.Add().Text("Tab 2")<
br
> .HtmlAttributes(new { @class = "tab_bar" })<
br
> .Selected(false)<
br
> .LoadContentFrom("Tab2Content", "");<
br
><
br
> )<
br
> .ToHtmlString()<
br
> )<
br
> .Closable(true)<
br
> .Width(900)<
br
> .Height(600)<
br
> .Modal(true)<
br
> .Visible(false)</
p
><
p
></
p
><
p
></
p
>
The dialog is opened via a JS function that's called by the Grid's Custom Command button. The details that need to be displayed in each tab in the dialog is unique to the row.
How do I modify the LoadContentFrom URL and pass query string parameters that are picked by the Tab1Content method on MyController?
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.
}
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.
My use case calls for forms that may be duplicated across multiple TabStrip tabs as editors for different entities of the same type.
So tab 1 calls for Entity1 editor, tab 2 calls for Entity1 editor also.
This introduces possibility of duplicate IDs on the same page.
At the moment I have a super clunky prefix system utilizing ViewData.TemplateInfo.HtmlFieldPrefix. This is hardly intuitive nor easy to use.
One idea i had about managing this issue is to "unload" tabs as they get placed in the background. Essentially bundling up the html/data and storing it until the tab is selected again, where it'll unbundle and load into the tab.
I got as far as grabbing the contents of the tab via jQuery's .html() function, but reinserting the html doesn't do anything script-wise, i.e. no widgets are widgetizing.
Running into that, I'm not sure if there's any way to proceed with this idea.
Another idea I had is dumping the contents of a tab into an iframe. I haven't implemented anything like this yet, nor do I know if its a good idea.
Anyone else having to deal with this type of issue?
Any suggestions/comments on the ideas above?
What are your solutions?
I'm trying to pass the model from my parent view through to the partial views that are being loaded in the tabstrip. At this point, what seems to be passed is a List<string> containing the type of the model rather than the model itself, which is a List<string> containing the words "Hello" and "Goodbye". Here's some sample code that demonstrates the issue.
The controller:
public
ActionResult TabStrip()
{
ViewBag.Message =
"TabStrip Test"
;
List<
string
> details =
new
List<
string
>();
details.Add(
"Hello"
);
details.Add(
"Goodbye"
);
return
View(details);
}
public
ActionResult TabA(List<
string
> details)
{
return
PartialView(details);
}
public
ActionResult TabB(List<
string
> details)
{
return
PartialView(details);
}
The main View:
@model List<
string
>
@{
ViewBag.Title = "TabStrip";
}
<
h2
>TabStrip</
h2
>
@Model[0], @Model[1]
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Tab A")
.Selected(true)
.LoadContentFrom("TabA", "Home", new { details = Model });
tabstrip.Add().Text("Tab B")
.Selected(true)
.LoadContentFrom("TabB", "Home", new { details = Model });
}))
The Partial Views:
Tab A:
@model List<
string
>
<
p
>Welcome to TabA!</
p
>
@Model[0]
Tab B:
@model List<
string
>
<
p
>Welcome to TabB!</
p
>
@Model[1] -- causes error
The result upon first loading the page is attached. The first item in the list shows up in the partial view as "System.Collections.Generic.List`1[System.String]" rather than "Hello." Upon clicking Tab B, an exception is thrown because there is no second item in the list.
So clearly the model is not being passed correctly to the partial views. Any ideas on this?
Thanks!
Laurie
@{
ViewBag.Title = "My Index";
}
<
div
id
=
"portal"
class
=
"k-content"
>
<
div
class
=
"wrapper"
>
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Information")
.Selected(true)
.LoadContentFrom("Information", "MyController");
tabstrip.Add().Text("Schedule")
.LoadContentFrom("Calendar", "MyController");
tabstrip.Add().Text("Plan")
.LoadContentFrom("Plan", "MyController");
tabstrip.Add().Text("Pending")
.LoadContentFrom("Pending", "MyController");
})
)
</
div
>
</
div
>
@section Scripts{
}
public ActionResult Information()
{
//get model data....
model = blaw blaw
return View("Information", model);
}
@(Html.Kendo().ComboBox()
.Name("languagesDdf")
.Placeholder("Select Language...")
.DataTextField("LanguageValue")
.DataValueField("LanguageId")
.Suggest(true)
.AutoBind(false)
.HtmlAttributes(new { style = "width: 100%" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetLanguages", "Language");
}).ServerFiltering(true);
})
.Events(e =>
{
e.Select("onSelectLanguage");
})
)
Hi there, i am running into an issue, i have a nested TabStrip. On the CONTROL CENTER Tab, if i select a page, the page is added to the NESTED PAGES TabStrip. The problem is that when i click on the previous tabs, the data from the newly added tab shows up in the existing tab(N PAGE 1 - N PAGE 3)
How do i fix this problem ?.
Thanks
I'm using latest build of Kendo UI MVC (2017.3.913) and I have a complex form which contains TabStrip.
Each Tab within the TabStrip contains PanelBar with multiple expandable\collapsible panels that allow me to view and edit data. When I expand a Panel the vertical scroll-barallows me to scroll down to view details etc.. Everything works fine so far.
On the form I also dynamically add a Kendo Window (dialog) and do various things like - Select Address,Select Person etc.. Dynamically creating it is a must - I destroy it after every time i use it. For demonstration the javascript function below creates the Window what I require to show the problem:
//This dynamically creates a Window (but donst show it yet)
function
testCreateWindowDynamically()
{
$(document.body).append(
"<div id='myContainerDiv' class='dlgContainer'></div>"
);
$(
"#myContainerDiv"
).append(
"<div id='myDialogWindow' class='dlgDialog'></div>"
);
var
dialog =
$(
"#myDialogWindow"
).kendoWindow({
title:
""
,
modal:
true
,
actions: [
"Close"
,
"Minimize"
,
"Maximize"
],
visible:
false
});
$(
"#myDialogWindow"
).data(
"kendoWindow"
).maximize();
}
When I run this the vertical scroll bar on the tab strip disappears and I cant scroll down to view content not displayed on screen. Why is the vertical scroll bar disappearing?