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?

Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top