Get Kendo PanelBar index

Question

I have an onSelect function for my Kendo Panelbar

I want to be able to get the index of the selected panel.

The example in the Kendo documentation gets the name of the panel:

$(e.item).find("> .k-link").text())

I simply want to return 0 (for top panel), 1, 2, 3 etc.

Thanks,

Answer 1

add an id onto each panels header, the clickable part. Then you could use something like this.

$('.k-header').on('click', function(){
  var index = $(this).attr('id');
  var name = $(this).text();
  $('#output').html("name: "+name+"<br>"+"index: "+index);
});

span {
 border:2px solid cyan;
 border-radius:3px;
 display:block;
 padding:10px;
 width:300px;
 margin-bottom:10px;
 cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="0" class="k-link k-header k-state-selected">
The Dark Knight
</span>
<span id="1" class="k-link k-header k-state-selected">
The Wicker Man
</span>
<span id="2" class="k-link k-header k-state-selected">
 The Man of Steel 
</span>

<div id="output"></div>

Answer 2

I realize this is an old post but here's an answer anyway:

e.item is a list item, so all you need is $( e.item ).index()