This example demonstrates how to programmatically remove tabs and their associated pageviews. The implementation utilizes the
TabTemplate property of RadTabStrip to create the "Delete" icon and and some JavaScript
to consume the "click" DOM event of the icon.
TabTemplate:
<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1" skin="Outlook">
<TabTemplate>
<%# DataBinder.Eval(Container, "Text") %>
<img style="margin-left: 10px" src="Images/delete.gif" alt="delete" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" />
</TabTemplate>
</telerik:RadTabStrip>
JavaScript:
<script type="text/javascript">
function deleteTab(tabText)
{
var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
var multiPage = $find("<%= RadMultiPage1.ClientID %>");
var tab = tabStrip.findTabByText(tabText);
var pageView = tab.get_pageView();
var tabToSelect = tab.get_nextTab();
if (!tabToSelect)
tabToSelect = tab.get_previousTab();
tabStrip.get_tabs().remove(tab);
multiPage.get_pageViews().remove(pageView);
if (tabToSelect)
tabToSelect.set_selected(true);
}
<script>