This is a migrated thread and some comments may be shown as answers.

close kendoTabStrip when clicked on removeButton

4 Answers 231 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Pawan
Top achievements
Rank 1
Pawan asked on 12 Aug 2012, 06:49 PM
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"));
        }

4 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 13 Aug 2012, 03:10 PM
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
0
Pawan
Top achievements
Rank 1
answered on 13 Aug 2012, 03:41 PM
Hi John,

Many Thanks... it worked like miracle  :)  


Regrads,
Pawan  
0
Pawan
Top achievements
Rank 1
answered on 13 Aug 2012, 03:41 PM
Hi John,

Many Thanks... it worked like miracle  :)  


Regards,
Pawan  
0
Accepted
John DeVight
Top achievements
Rank 1
answered on 13 Aug 2012, 03:54 PM
Your welcome Pawan.

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

Many thanks,

John DeVight
Tags
TabStrip
Asked by
Pawan
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Pawan
Top achievements
Rank 1
Share this question
or