Можете ли вы добавить html-разметку в текст вкладки Kendo UI Tabstrip во время привязки

Question

Попытка добавить "x" на моих вкладках, аналогичную "x" на вкладках браузера Chrome, чтобы можно было нажать, чтобы удалить вкладку. Просто двойная проверка, но кажется, что вы не можете добавить html-разметку к вашим вкладкам (не к содержанию, а к самим вкладкам), используя обертки MVC в методе BindTo следующим образом:

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

Что ж, я закончил тем, что сделал 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);
    });
}