0

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?

2 Answers 2

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.

6
  • Check added running example
    – OnaBai
    Apr 19, 2013 at 6:58
  • This works, except that the grid in this fiddle: (jsfiddle.net/97gqZ/39), which is the grid in my first tab, does not display the content.
    – Phillip
    Apr 19, 2013 at 7:08
  • In my Fiddle I didn't include the grid for simplicity. Here you have with the grid from your fiddle. What is what you are not seeing?
    – OnaBai
    Apr 19, 2013 at 7: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, 2013 at 7:38
  • Did you see check the fiddle from my last comment (jsfiddle.net/OnaBai/fmxvM/1). Are you not seeing the grid? I do!
    – OnaBai
    Apr 19, 2013 at 7:56
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.