Add items to the panel

[Luis Miguel]

Hi:
I'm using the insertBefore method to insert new items to a panel bar group. After browse rendering you can see the following:

<li class="t-item t-state-default">

<span class="t-link t-header">item1</span>

</li>

My question is:
Is there a way that you can add and "id" and an onclick event to this new panels ?

Regards and congratulations this is a great job !

[Kamen Bundev]

Hi Luis Miguel,

Unfortunately this is only partially possible currently using the PanelBar API. We are thinking of adding an onItemRendered event which can provide you with the templated item before it is added to the DOM, so you can manipulate it beforehand. Until then, you can directly pass HTML to the append/insert methods with the item and additional attributes (there was a bug there, now fixed, which requires you to call an additional internal method to update the item after adding it to the DOM. In the next beta it will get updated before that):
panelBar.append("<li id="test">Test</li>");
panelBar._updateClasses();

For click events - you can use live events or delegates.

Greetings,
Kamen Bundev
the Telerik team

[Luis Miguel]

Thanks a lot Kamen !!!
Using your answer as a guide I manage to do what I needed.  Here is the way I solve it

1) The panel is defined in the jquery function $(document).ready(function());

panelbar= $("#panelbar").kendoPanelBar({

        expandMode: "single"

    });

2) Made an array for the text inside the items and an array for the id's

 var panelItems=new Array("item1","item2","item3");

var idPansFrrs=new Array("id1","id2","id3");

3) Using the insertBefore method:

for (var i=0; i<panelItems.length;i++){

  pb.insertBefore(
"<li id='test_"+i+"'class='t-item t-state-disabled'><span class='t-link t-header'>"+panelesForros[i]+"</span></li>",

   pb.element.children("li:last"));
}

And that was it. I'm quiet sure that using this I might add an onclick="javascript:function();" to each item using the same technique.

Thanks again !
Luis M. Valenzuela
México