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 中找到该复选框。 .

起初，我使用了硬编码的数据源，它工作得很好，但是当我切换到使用请求获取数据时，除了面板栏之外，所有数据都按其应有的方式显示。

这就是它的样子:

当只应打开第一个选项卡时。我像这样创建了面板栏:

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

编辑

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

Any idea why this is happening?

Answer 1

当 KendoUI 添加选项卡时，它所做的不仅仅是添加 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 中查看它。