Telerik Forums
UI for ASP.NET MVC Forum
9 answers
664 views

     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, 

 

Ianko
Telerik team
 answered on 24 Jul 2018
3 answers
880 views

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

Ivan Danchev
Telerik team
 answered on 18 Jul 2018
2 answers
65 views

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

Bart
Top achievements
Rank 1
 answered on 18 Jan 2018
5 answers
880 views

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?

Dimitar
Telerik team
 answered on 13 Dec 2017
11 answers
3.0K+ views

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.

Ivan Danchev
Telerik team
 answered on 12 Dec 2017
4 answers
267 views

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?

Kiran
Top achievements
Rank 1
Veteran
Iron
 answered on 09 Dec 2017
5 answers
2.3K+ views

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

 

 

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);
}
Kiran
Top achievements
Rank 1
Veteran
Iron
 answered on 09 Dec 2017
5 answers
506 views
I have a TabStrip in the Index view for a controller:

@{
    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{
 
}



And the initial level of 'Action' result is a view from the controller:

For example, for the Plan action, the controller definition for that is:

public ActionResult Information()
 {
   //get model data....
   model = blaw blaw
  return View("Information", model);
}

I return a View because then I can define a Layout file to load required javascript files. Somehow the tab has NO knowledge of the scripts loaded via the containing razor view of the TabStrip!

My 'Information' view looks like a normal view with a specific minimal layout file to load scripts

However, even with this manner of getting scripts to load, only the data-load scripts run. For example, the event scripts to handle the selected Kendo ComboBox item do not fire.

The combo box is in a partial view loaded by the view (loaded in the tab): In the example below, the language combo box loads languages, but the Select event does not fire.

@(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");
           })
 
 
           )


So why can't the tabs see scripts loaded by the parent razor view/layout files?

Do I need to do something different with the tabstrip definition?


Kiran
Top achievements
Rank 1
Veteran
Iron
 answered on 09 Dec 2017
2 answers
91 views

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

Chinonso
Top achievements
Rank 1
 answered on 07 Nov 2017
2 answers
284 views

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?

 

Veselin Tsvetanov
Telerik team
 answered on 01 Nov 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?