Create Tab Stip Items not "inline" ?

[Nicholas]

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

[Ivan Danchev]

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

[Nicholas]

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

[Ivan Danchev]

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