Javascript - 在Kendo面板栏中动态添加标签，而不是标签

Question

好的，首先我在加密文件中读取DataSource，然后将其转换为XML字符串。

数据在我的网格中正确显示，但动态添加到面板栏的面板似乎没有像fiddle中那样显示。

它们被添加到：

<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>

像这样：

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

跨度和链接的原因是可以在我的复选框上使用样式，可以在此fiddle中找到。

起初我使用了一个硬编码的DataSource，它工作得很好，但当我切换到使用请求获取数据时，除了面板栏外，所有数据都应该显示。

这就是它的样子：

只打开第一个标签。我创建了这样的面板栏：

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

修改

我现在已经确定只有在数据被检索和转换后才会创建面板栏和网格，但问题仍然存在。

  

知道为什么会这样吗？

Answer 1

当KendoUI添加tab时，它不仅仅是添加HTML标记。这就是为什么你有按需添加标签的方法。

不要手动添加HTML，而是尝试使用：

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

    }

]);

点击here在JSFiddle中查看。

Answer 2

<强>答案：

似乎当我问一个问题时，它有助于我找到答案。刚发现它。

我在添加额外面板之前创建了面板栏，所以我只是移动了：

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

到我的方法结束。添加了所有内容，然后我创建了面板栏。