Add items to the panel

3 posts, 1 answers
  1. Luis Miguel
    Luis Miguel avatar
    2 posts
    Member since:
    Sep 2011

    Posted 13 Sep 2011 Link to this post

    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>
    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 !
  2. Answer
    Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 15 Sep 2011 Link to this post

    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>");

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

    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Luis Miguel
    Luis Miguel avatar
    2 posts
    Member since:
    Sep 2011

    Posted 15 Sep 2011 Link to this post

    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++){
    "<li id='test_"+i+"'class='t-item t-state-disabled'><span class='t-link t-header'>"+panelesForros[i]+"</span></li>",

    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

Back to Top