title: Javascript - Dynamically added tabs not seen as tabs in Kendo panelbar
body: <p>Ok, first off I read in an encrypted file as my <code>DataSource</code>, which is then converted to an XML String.</p>
  
  <p>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 <a href="http://jsfiddle.net/OnaBai/rQZNr/21/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p>They are added to:</p>
  
  <pre><code>&lt;ul id='panelbar'&gt;
      &lt;li id='patDet' class='k-state-active'&gt;
          &lt;span class='k-link k-state-selected'&gt;&lt;input type='checkbox' id='cPatientDetails' /&gt;&lt;label for='cPatientDetails'&gt;&lt;a href='#'  id='cbSelect'&gt;&lt;/a&gt;Patient Detail&lt;/label&gt;&lt;/span&gt;
          &lt;div id='patTab'&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>like so:</p>
  
  <pre><code>$("&lt;li id = '"+ liID +"' class='k-item k-state-default' role='menuitem' aria-expanded='false' aria-hidden='true'&gt;&lt;span class='k-link k-header'&gt;&lt;input type='checkbox' id='c" + x + "' class='cbSelect' /&gt;&lt;label for='c" + x + "'&gt;&lt;a href='#'   id='cbSelect''&gt;&lt;/a&gt;" + liTitle + "&lt;/label&gt;&lt;/span&gt;&lt;/li&gt;").appendTo("#panelbar");
  $("&lt;div id = 'gridGenerate" + x + "' width='400px;' aria-hidden='true'&gt;&lt;/div&gt;").appendTo("#" + liID);
  </code></pre>
  
  <p>The reason for the span and link is so that styling can be used on my checkbox which can be found in this <a href="http://jsfiddle.net/97gqZ/37/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p>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.</p>
  
  <p>This is what it looks like:<img src="https://i.stack.imgur.com/6W9MK.png" alt="enter image description here"></p>
  
  <p>when only the first tab should be open. I created the panelbar like so:</p>
  
  <pre><code>$("#panelbar").kendoPanelBar(
  {
      expandMode: "single"
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've made it now that the panelbar and grids are only created once the data is retreived and converted, but the issue remains.</p>
  
  <blockquote>
    <p>Any idea why this is happening?</p>
  </blockquote>