TabStrip with Add/Remove button

5 posts, 0 answers
  1. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 30 Jul 2013 Link to this post

    Hello,
    it's possible to have a TabStrip with items added dinamically? and also the possibility to remove panels?
    Thanks
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Jul 2013 Link to this post

    Hello Paolo,

    The TabStrip itself does not have add/remove buttons, but you can add custom ones on the page that use the widget's API.

    http://demos.kendoui.com/web/tabstrip/api.html

    http://docs.kendoui.com/getting-started/web/tabstrip/overview

    http://docs.kendoui.com/api/web/tabstrip

    Regards,
    Dimo
    Telerik
    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. Stefan
    Stefan avatar
    29 posts
    Member since:
    Nov 2015

    Posted 07 Dec 2015 in reply to Dimo Link to this post

    Hi Dimo,
     I am having an image in a span inside the li of the tabstrip, and i tried the following code to remove it
    onclick of the image function{
    var index = $(this).parent().index();
    var tabStrip = $('#tabstrip').getKendoTabStrip();
    tabStrip.remove(index);

    But when i do this, say, if there are 4 tabs and I've selected the 2nd tab and then clicked on the image to remove that particular tab, then, all the subsequent tabs and their contents are removed.(that is, here, in this case 2,3,and 4th tabs..) Moreover, when a new tab is appeneded, it doesnt load the contents too.

     

    Can you please tell me any workaround for this scenario?

     

    I also tried 

    var index = $(this).parent().index();
    $(this).parent().remove();
    $( ".k-content:eq("+index+")" ).remove();

     

    But in this case as in the previous case 2nd tab as well as 3rd tab contents were removed. (4th tab and its contents were ok)

    But, here also when i tried to append a new tab it didn't work.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Dec 2015 Link to this post

    Hi Stefan,

    Removing TabStrip items via DOM manipulation (the second option that you have tried) is likely to cause undesired side effects, as the widget will not be aware of the change.

    Using the first option should work, given that the provided index is correct. In your case it should be equal to 1. Can you please verify this?

    You can test the same scenario on our online demos:

    1) Open http://demos.telerik.com/kendo-ui/tabstrip/index
    2) Execute the following in the browser's JavaScript console:

    $("#tabstrip").data("kendoTabStrip").remove(1);

    The second tab will be removed and all remaining tabs will stay intact.

    In case the index is 1 and the TabStrip still does not work as expected, please check the following:

    - the web page HTML markup is valid
    https://validator.w3.org/
    - the TabStrip is initialized only once
    http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

    If you need further assistance, please provide a runnable example, so that I can see what is going on.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Stefan
    Stefan avatar
    29 posts
    Member since:
    Nov 2015

    Posted 13 Dec 2015 in reply to Dimo Link to this post

    Hi Dimo,

    Thanks, it worked.

Back to Top
Kendo UI is VS 2017 Ready