close icon to a tab

2 posts, 0 answers
  1. beeta one
    beeta one avatar
    63 posts
    Member since:
    Aug 2012

    Posted 13 Dec 2012 Link to this post

    hii,
    how to add  close icon to  a tab to delete the tab?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Dec 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top