Dynamically create a TabStrip?

6 posts, 0 answers
  1. Thomas
    Thomas avatar
    3 posts
    Member since:
    Feb 2012

    Posted 07 Feb 2012 Link to this post

    Hi,

    I can't find how to create a TabStrip dynamically with Kendo UI Mobile. I don't care if I have to create <li> with jQuery and then call kendoMobileTabStrip() :) But even that don't work, I'm not sur this function exists in fact.

    Any advice?
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 08 Feb 2012 Link to this post

    Hi,

    Dynamic creation of the mobile tabstrip widget is not supported out of the box. However, the approach you describe should work in theory. One thing to notice - the tabstrip does not have any UL/LI elements.

    <div data-role="tabstrip">
      <a href="#index">Home</a>
      <a href="#featured">Featured</a>
    </div>
      
    Here is a sample markup you should aim to generate.

    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Mattijs
    Mattijs avatar
    1 posts
    Member since:
    Apr 2012

    Posted 04 Apr 2012 Link to this post

    Hi, could you post some sample code to do this i can't get the changed innerhtml to render into a tabstrip.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 Apr 2012 Link to this post

    Hi Mattijs,

    Please check this jsFiddle example - basically all you need to do is to append the tabstrip html and call kendoMobileTabStrip() with a jQuery selected element.

    Greetings,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Shawn
    Shawn avatar
    43 posts
    Member since:
    Dec 2011

    Posted 09 Jul 2014 in reply to Alexander Valchev Link to this post

    This has been very helpful, but I am having a problem with the sample provided and have modified the code a little to demonstrate my issue.

    1. I put in some code to remove the previous tab strip so they don't stack up on one another.

    2. I use it a little different in that I do not link to a href, but trap the data-select events and have modified the code.

    The problem is that the data-select event is not firing after I add this dynamically.  Other than that this works great.

    So I need some help in understanding why this data-select is not calling the function specified.

    Here is jsfiddle link

    http://jsfiddle.net/8J7VU/


  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Jul 2014 Link to this post

    Hello Shawn,

    The event is not firing because you are trying to use mixed initialization which is not supported. You should initialize and configure the widget either via data attributes or via JavaScript.

    In the first case you should set all options and the data-role and call kendo.init. For example:
    var html = '<div id="myTabStrip" data-role="tabstrip" data-select="tabSelect"><a data-icon="action">Profile</a><a data-icon="rewind">Sales</a><a data-icon="favorites">Rating</a></div>';
     
    function makeTabStrip() { 
        $("#myTabStrip").remove();
        $("#footer").append(html);
        kendo.init($("#myTabStrip"), kendo.mobile.ui);
    }

    In the second case you should omit the data attributes and call .kendoMobileTabStrip by passing the respective configuration options. For example:
    var html = '<div id="myTabStrip"><a data-icon="action">Profile</a><a data-icon="rewind">Sales</a><a data-icon="favorites">Rating</a></div>';
     
    function makeTabStrip() { 
        $("#myTabStrip").remove();
        $("#footer").append(html);
        $("#myTabStrip").kendoMobileTabStrip({
            select: tabSelect
        });
    }

    Please use the approach that is more convenient for you but to do mix both of them.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready