Geek Answers Handbook

Kendo UI - How to add and select a new tab (in a TabStrip control) using javascript

I created a function that opens a new tab in my TabTrip control for the Kendo interface:

function AddTab(targetUrl, title) { $("#tabstrip").data("kendoTabStrip").append({ text: title, contentUrl: targetUrl }); }

This will add the tab to the end, but will not select it. How can I select it to become an active tab !? Do I need to set the identifier when creating the tab, and then call the select (..) function, or can I do this on one line?

I need to automatically generate a load of links, each of which will contain a different header and targetUrl.

+6
source share
4 answers

try it

 <div id="tabstrip"> <ul> <li class="k-state-active">First Tab</li> <li>Second Tab</li> </ul> <div> First text </div> <div> Second text </div> </div> <input type="button" value="Add Tab" onclick="AddTab('google', 'http://google.com')" /> <script> function AddTab(targetUrl, title) { var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); tabStrip.append({ text: title, contentUrl: targetUrl, content: "Your content" }); tabStrip.select((tabStrip.tabGroup.children("li").length - 1)); } </script>

Link link

+7
source

try this .// from documentation Kendo Ui tab

 var tabStrip = $("#tabStrip").data("kendoTabStrip"); tabStrip.insertAfter( { text: "New Tab" }, tabstrip.tabGroup.children("li:last") );

for his choice

 $(document).ready(function(){ var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); tabstrip.select(yourIndexoftheTab); });
+3
source

you can add and remove dynamic tab with kendoui .. hope this code helps someone

 <html> <head> <title> testing remote data </title> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head> <input type='text' id='tabname' name='tabname'> <input type="button" value="Add Tab" onclick="AddTab()" /> <div id="tabstrip"> </div> <script> $(document).ready(function () { $("#tabstrip").kendoTabStrip( { animation: { open: { effects: "fadeIn" } }, select: function(element){selecttab(element)} }); }); function selecttab(element) { var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip"); var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"), itemIdx = item.index(); $("#tabstrip").data("kendoTabStrip").select(itemIdx); } function AddTab(targetUrl) { var title = jQuery("#tabname").val(); var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); tabStrip.append({ text: title, content: "<div class='showtabcontent dhtmlgoodies_aTab' style='height: auto; display: block;' id='tabViewsubtabname'><div style='float:right;'><input type='button' value='X' onClick='closeTab($(this).closest(\"li\"));'></div><br><label class='evtgrouplables'>Description</label><br><textarea name='dynamic_other_content[]' id='dynamic_other_content' class='textareaeditor'></textarea><input type='hidden' name='dynamic_other_title[]' value=''/></div>" }); tabStrip.select((tabStrip.tabGroup.children("li").length - 1)); } function closeTab(vari){ var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip"); tabStrip.remove(tabStrip.select()); tabStrip.select((tabStrip.tabGroup.children("li").length - 1)); } </script>
+2
source

Code for adding and selecting a new tab:

  var tabs = $('#tabs').data('kendoTabStrip'); var tabNum = tabs.items().length; var closeButton = "<span unselectable='on' class='k-icon k-delete'>delete</span>"; tabs.append( { encoded: false, //allow HTML text: team.name + ' ' + closeButton, contentUrl: 'teamschedule.html' }); // make new tab the active tab tabs.select(tabNum); var tab = $(tabs.items()[tabNum]); //attach delete handler to the delete icon tab.on('click','.k-delete', tab, $scope.removeTab);

Here is the code to delete the tab and select the previous one (if the remote tab was selected):

 $scope.removeTab = function(e) { var tabs = $('#tabs').data('kendoTabStrip'); if (e.data.hasClass('k-state-active')) { //select previous tab if the active tab is removed tabs.select(e.data.prev()); } tabs.remove(e.data); }

I use angular, therefore using $ scope.

0
source

More articles:


All Articles