close kendoTabStrip when clicked on removeButton

5 posts, 1 answers
  1. Pawan
    Pawan avatar
    9 posts
    Member since:
    Aug 2012

    Posted 12 Aug 2012 Link to this post

    HI ,

    I 'm using  "kendoTabStrip" .  

     I'm trying  to achieve   When i  click on DeleteImage , the tab should be closed (removed) . But Im unable to get same . 
     Please suggest me where I'm going  wrong . Following are codes I'm using :

     Thanks,
     Pawan

    <div id="dtabstrip">
            <ul>
                <li class="k-state-active">First Tab
                    <img src="images/DeleteIcon.gif" style="padding-left: 10px; z-index: 1111" onclick='DeleteTabs(this);' />
                </li>
                <li>Second Tab</li>
            </ul>
            <div>
                1111111sdffds</div>
            <div>
                2222ssadasfas</div>
        </div
     
     var dtabStrip = $("#dtabstrip").kendoTabStrip({
                animation: {
                    open: {
                        effects: "fadeIn"
                    },
                    close: {
                        duration: 200,
                        effects: "fadeOut"
                    }
                }
     
            });
     
      function DeleteTabs(ImgObj) {
                var aa = $(ImgObj).closest("li").text() ;
                dtabStrip.remove($(obj).closest("li"));
            }
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 13 Aug 2012 Link to this post

    Hi Pawan,

    I made 2 changes to your code to get it to work.  The first is when the kendoTabStrip is initialized, I added .data("kendoTabStrip") to the end of it to get a reference to the kendoTabStrip object.  The second is when calling remove, I get the index of the li element.

    Here is the code:
    var dtabStrip = $("#dtabstrip").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            },
            close: {
                duration: 200,
                effects: "fadeOut"
            }
        }
      
    }).data("kendoTabStrip");
      
    function DeleteTabs(ImgObj) {
        var aa = $(ImgObj).closest("li").text() ; 
        dtabStrip.remove($(ImgObj).closest("li").index());
    }

    Attached is the example code.

    Regards,

    John DeVight
  3. Kendo UI is VS 2017 Ready
  4. Pawan
    Pawan avatar
    9 posts
    Member since:
    Aug 2012

    Posted 13 Aug 2012 Link to this post

    Hi John,

    Many Thanks... it worked like miracle  :)  


    Regrads,
    Pawan  
  5. Pawan
    Pawan avatar
    9 posts
    Member since:
    Aug 2012

    Posted 13 Aug 2012 Link to this post

    Hi John,

    Many Thanks... it worked like miracle  :)  


    Regards,
    Pawan  
  6. Answer
    John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 13 Aug 2012 Link to this post

    Your welcome Pawan.

    When you get a chance, could you mark my response as the answer?

    Many thanks,

    John DeVight
Back to Top
Kendo UI is VS 2017 Ready