绑定时可以在 Kendo UI Tabstrip 选项卡文本中添加 html 标记吗

Question

尝试在我的选项卡中添加一个类似于 Chrome 浏览器选项卡中的 "x" 的 "x"，以便能够单击以删除该选项卡。只是仔细检查，但似乎您无法在 BindTo 方法中使用 MVC 包装器将 html 标记添加到您的选项卡（不是内容，而是选项卡本身），如下所示：

@(Html.Kendo().TabStrip()
.Name("OrderDetailsTabs")
.HtmlAttributes(new { @class="orderDtlTabs"})
.BindTo(Model, (tab, tabModel) =>
    {
        tab.Text = "<a class='k-link'><span>Part: " + tabModel.WOHdr.OrderDetailId + 
                    "<button onclick='return deleteWorkOrder(" + tabModel.WOHdr.Id +")' class='delete k-button' title='Delete Work Order'></button>" +
                    "</span></a>"; // tab text

我知道我可以在选项卡加载后做一些 DOM 操作，但只是看看我是否在绑定时遗漏了一些东西。

Answer 1

好吧，我最终做了 post 绑定 DOMnastics 以在选项卡加载后更新 html：

function addDeleteIconToTabs() {    
    var $tabItems = $('ul.k-tabstrip-items > li.k-item');
    $tabItems.each(function (index, tabLI) {
        var strTabId = $(tabLI).attr('aria-controls');
        var $tabContainerDiv = $('#' + strTabId);
        var intWorkOrderId = $tabContainerDiv.find('input.wohid').val();
        var strButtonHtml = "<button onclick='return deleteWorkOrder(this," + intWorkOrderId + ")' class='delete k-button' title='Delete Work Order'></button>";
        $(tabLI).append(strButtonHtml);
    });
}

绑定时可以在 Kendo UI Tabstrip 选项卡文本中添加 html 标记吗

Can you add html markup in Kendo UI Tabstrip tab text during binding

kendo-ui

kendo-asp.net-mvc