Create Tab Stip Items not "inline" ?

4 posts, 0 answers
  1. Nicholas
    Nicholas avatar
    7 posts
    Member since:
    Jun 2012

    Posted 25 Jan Link to this post

    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

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1118 posts

    Posted 26 Jan Link to this post

    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.
  3. Nicholas
    Nicholas avatar
    7 posts
    Member since:
    Jun 2012

    Posted 26 Jan in reply to Ivan Danchev Link to this post

    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

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1118 posts

    Posted 27 Jan Link to this post

    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.
Back to Top