This is a migrated thread and some comments may be shown as answers.

Create Tab Stip Items not "inline" ?

3 Answers 35 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Nicholas
Top achievements
Rank 1
Nicholas asked on 25 Jan 2017, 04:30 PM

HI --

 

We have existing code creating a tab strip with a series of tabs like this

 

   @(Html.Kendo().TabStrip().Name("tabStrip_#=MeterID#")
                  .SelectedIndex(0)
                  .Events(events => events.Show("loadDetails(#:EnrollmentID#, #:MeterID#, #:IsCrossSell#)"))
                  .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
                  .Items(items =>
                  {
                      items.Add().Text("Documents").Content(
                          "<div id='divDocumentDownload_#=MeterID#'></div>" +
                          );

                      items.Add().Text("Other Fields").Content(
                          "<div id='divOtherFields_#=MeterID#'></div>"
                          );

                      items.Add().Text("Error Report").Content(
                          "<div id='divErrorReport_#=MeterID#' style='padding-top: 5px; padding-left: 5px; border:solid; border-width: 1px; margin-top: 10px; background-color: \\#F0F0F0;'>" +
                          "</div>"
                          );

                      items.Add().Text("Bill Images").Content(
                          "<div id='divBillLinks_#=MeterID#'></div>" +
                          );

                      items.Add().Text("Photo ID").Content(
                            "<div id='divPhotoIdWrapper_#=MeterID#'>" +
                            );

                  }).ToClientTemplate())

 

Is it possible to create the tabs ("items") separately and then add them in the code? Something like this

                  .Items(items =>
                  {item.Add(itemA).Add(itemB)}

 

The reason I'm asking is that the items themselves are fairly complicated (I have simplified the code above) and it would be much easier to modify and debug code if it wasn't one large chunk.

 

Thanks

 

Rich

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 26 Jan 2017, 07:21 AM
Hello Rich,

Apart from being included in the TabStrip's declaration tabs can be added dynamically with JavaScript through the widget's API. You can review the following demo, which shows how this can be done using the append, insertBefore or insertAfter methods.

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nicholas
Top achievements
Rank 1
answered on 26 Jan 2017, 05:04 PM

Hi --

I'm not looking to add the tab strips dynamically after the fact because there is data for each record I want included in the tab strip display. 

Is there a way to create the tab strip items prior to creating the tab strip? Again, not using Javascript after the fact?

 

Rich

0
Ivan Danchev
Telerik team
answered on 27 Jan 2017, 02:12 PM
Hello Rich,

Tabs cannot be declared/created outside the TabStrip and then added to it. If you want to add a tab you have to use the API as shown in the demo I linked in my previous reply.
Another option for making the TabStrip's declaration shorter and avoid including each tab's content is to use the LoadContentFrom() method as shown in this demo. The tabs content is placed in separate html files, thus their declaration contains only the path to the files.

Regards,
Ivan Danchev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TabStrip
Asked by
Nicholas
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Nicholas
Top achievements
Rank 1
Share this question
or