close icon to a tab

[beeta one]

hii,
how to add  close icon to  a tab to delete the tab?

[Princy]

Hi,

Try the following code snippet to achieve your scenario.

ASPX:

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop"
    SelectedIndex="0">
    <TabTemplate>
        <div class="textWrapper">
            <%# DataBinder.Eval(Container, "Text") %>
        </div>
        <span class="ie6shim"></span>
        <img src="../Images/button_edit_grey.gif" alt="delete" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" />
    </TabTemplate>
    <Tabs>
        <telerik:RadTab Text="Products">
        </telerik:RadTab>
        <telerik:RadTab Text="Services">
        </telerik:RadTab>
        <telerik:RadTab Text="Corporate">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

JS:

<script type="text/javascript">
    function deleteTab(tabText) {
        var tabStrip = $find("<%= RadTabStrip1.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);
        if (tabToSelect)
            tabToSelect.set_selected(true);
    }
</script>

Please take a look into this demo for more information.

Regards,
Princy.