Javascript - Dynamically added tabs not seen as tabs in Kendo panelbar

Question

Ok, first off I read in an encrypted file as my DataSource, which is then converted to an XML String.

The data displays properly in my grids, except that the panels which are dynamically added to the panelbar does not seem to act as such as seen in this fiddle.

They are added to:

<ul id='panelbar'>
    <li id='patDet' class='k-state-active'>
        <span class='k-link k-state-selected'><input type='checkbox' id='cPatientDetails' /><label for='cPatientDetails'><a href='#'  id='cbSelect'></a>Patient Detail</label></span>
        <div id='patTab'></div>
    </li>
</ul>

like so:

$("<li id = '"+ liID +"' class='k-item k-state-default' role='menuitem' aria-expanded='false' aria-hidden='true'><span class='k-link k-header'><input type='checkbox' id='c" + x + "' class='cbSelect' /><label for='c" + x + "'><a href='#'   id='cbSelect''></a>" + liTitle + "</label></span></li>").appendTo("#panelbar");
$("<div id = 'gridGenerate" + x + "' width='400px;' aria-hidden='true'></div>").appendTo("#" + liID);

The reason for the span and link is so that styling can be used on my checkbox which can be found in this fiddle.

At first I used a hard coded DataSource, which worked perfectly, but when I switched over to fetching the data using a request, where all the data displays as it should, except for the panelbar.

This is what it looks like: enter image description here

when only the first tab should be open. I created the panelbar like so:

$("#panelbar").kendoPanelBar(
{
    expandMode: "single"
});

EDIT

I've made it now that the panelbar and grids are only created once the data is retreived and converted, but the issue remains.

Any idea why this is happening?

score 3 · Accepted Answer · edited Jan 29 '14 at 22:53

3

When KendoUI adds a tab, it does much more than just adding HTML tags. That's why you have methods for adding tabs on demand.

Instead of adding the HTML by hand try using:

var panelbar = $("#panelbar").data("kendoPanelBar");
panelbar.append([
    {
        text: "<label for='c" + x + "'>" +
                "<a href='#'   id='cbSelect''></a>" +
                "" + liTitle + "" +
                "</label>",
        encoded: false,
        content: "<div>text</div>"

    }

]);

Click here to see it in JSFiddle.

edited Jan 29 '14 at 22:53

animuson

53,861
28
137
147

answered Apr 19 '13 at 06:55

OnaBai

40,767
6
96
125

Check added running example – OnaBai Apr 19 '13 at 06:58
This works, except that the grid in this fiddle: (http://jsfiddle.net/97gqZ/39/), which is the grid in my first tab, does not display the content. – Phillip Apr 19 '13 at 07:08
In my Fiddle I didn't include the grid for simplicity. [Here](http://jsfiddle.net/OnaBai/fmxvM/1/) you have with the grid from your fiddle. What is what you are not seeing? – OnaBai Apr 19 '13 at 07:37
Sorry. The way my accordio is created is that I create the first panel which I posted the fiddle in previous comment, in my html. The example you gave, works for generating the other tabs, but makes the first grid display nothing. If this makes sense – Phillip Apr 19 '13 at 07:38
Did you see check the fiddle from my last comment (http://jsfiddle.net/OnaBai/fmxvM/1/). Are you not seeing the grid? I do! – OnaBai Apr 19 '13 at 07:56
Thanks. Sorry, only now noticed the link on `Here`. – Phillip Apr 19 '13 at 08:54

score 0 · Answer 2 · answered Apr 19 '13 at 06:51

Answer:

It seems like when I ask a question, it helps me to find the answer. Just found it.

I created the panelbar before adding the extra panels, so I just moved the:

$("#panelbar").kendoPanelBar(
{
    expandMode: "single"
});

to the end of my method. The all the content is added, then I create the panelbar.

Javascript - Dynamically added tabs not seen as tabs in Kendo panelbar

2 Answers2