Können Sie HTML-Markup in Kendo UI Registerkarte Registerkarte Text während des Bindens hinzufügen

Question

Versuchen, ein "x" in meinen Tabs ähnlich dem "x" in den Tabs des Chrome-Browsers hinzuzufügen, klicken Sie auf, um die Registerkarte zu entfernen. Nur die doppelte Kontrolle, aber es scheint, dass Sie nicht HTML-Markup, um Ihre Tabs (nicht der Inhalt, sondern die Reiter selbst) unter Verwendung des MVC-Wrapper in der BindTo Methode, wie so hinzufügen:

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

Ich weiß, ich kann mache einige DOM-Manipulationen, nachdem die Registerkarten geladen sind, aber schaue nur, ob mir etwas fehlt, um es zur Bindungszeit zu machen.

Answer 1

Nun, landete ich tun Post Bindung DOMnastics bis zu den HTML-Code in den Registerkarten zu aktualisieren, nachdem sie laden:

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); 
    }); 
}