Databases
StackOverflow2013
Postsdbo
POadd a button to close on a tabstrip dynamically - kendo ui
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POadd a button to close on a tabstrip dynamically - kendo ui
    text
    copied!<p>Hi i need your help please, I need a close button on a tabstrip but dynamically.... i have problem with my button, first select the tab an then close...... this is my code,.. i use kendo ui. All this is dynamically, </p> <pre><code>&lt;div class="configuration k-widget k-header"&gt; &lt;span class="configHead"&gt;API Functions&lt;/span&gt; &lt;ul class="options"&gt; &lt;li&gt; &lt;input type="text" value="0" id="tabIndex" class="k-textbox"/&gt; &lt;button class="selectTab k-button"&gt;Select&lt;/button&gt; &lt;/li&gt; &lt;li&gt; &lt;button class="removeItem k-button"&gt;Remove Selected&lt;/button&gt; &lt;/li&gt; &lt;li&gt; &lt;input type="text" value="" id="appendText" class="k-textbox"/&gt; &lt;button class="appendItem k-button"&gt;Append&lt;/button&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div&gt; &lt;img src="../../Content/kendo/2013.1.514/images/icono_cerrar.gif" alt="cerrar_todo" id="close" onclick="cerrar(this)" align="right" style= 'valign:top; cursor: pointer;'/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="width: 1236px;"&gt; @(Html.Kendo().TabStrip() .Name("tabstrip") .Items(tabstrip =&gt; { tabstrip.Add().Text("Bsoft") .Content(@&lt;text&gt; &lt;center&gt; &lt;img src="../../Content/kendo/2013.1.514/images/bsoftLarge.jpg" alt="bsoft" /&gt; &lt;/center&gt; &lt;/text&gt;); }) .SelectedIndex(0) ) &lt;/div&gt; &lt;script&gt; $(document).ready(function () { var tabStrip = $("#tabstrip").data("kendoTabStrip"); var getItem = function (target) { var itemIndex = target[0].value; return tabStrip.tabGroup.children("li").eq(itemIndex); }, select = function (e) { if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) tabStrip.select(getItem($("#tabIndex"))); }, append = function (e) { if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) tabStrip.append( { text:$("#appendText").val(), // text: " &lt;a href='#' data-bind='click: clear'&gt; &lt;span class='k-icon k-i-close'&gt;&lt;/span&gt;", //imageUrl: "/Content/kendo/2013.1.514/images/icono_cerrar.png" // content: "&lt;img src='/Content/kendo/2013.1.514/images/Penguins.jpg' alt=contenido /&gt;&lt;br&gt; Es una prueba del contenido" }); }; $("#tabstrip").on("click", " .k-tabstrip-items .k-item img", function (ImgObj) { debugger var tab = tabStrip.select(), otherTab = tab.next(); otherTab = otherTab.length ? otherTab : tab.prev(); tabStrip.remove(tab); tabStrip.select(otherTab); }); $(".toggleTab").click(function (e) { var tab = tabStrip.select(); tabStrip.enable(tab, tab.hasClass("k-state-disabled")); }); $(".removeItem").click(function (e) { var tab = tabStrip.select(), otherTab = tab.next(); otherTab = otherTab.length ? otherTab : tab.prev(); tabStrip.remove(tab); tabStrip.select(otherTab); }); $(".selectTab").click(select); $("#tabIndex").keypress(select); $(".appendItem").click(append); //text input $("#appendText").keypress(append); // button }); function cerrar(ImgObj) { debugger var aux=1; var tabStrip = $("#tabstrip").data("kendoTabStrip"); var tabcount = tabStrip.contentAnimators.length; while (aux &gt;= 1 &amp;&amp; aux &lt; tabcount) { var aa = $(ImgObj).closest("li").text(); tabStrip.remove($(ImgObj).closest("li").index()); aux = aux + 1; } } &lt;/script&gt; &lt;style scoped&gt; .configuration .k-textbox { width: 40px; } .k-image { float:right; margin-left:7px; } &lt;/style&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload