"Close Tab" image on dynamically added client side tabs

2 posts, 0 answers
  1. Kevin
    Kevin avatar
    8 posts
    Member since:
    Feb 2012

    Posted 09 Feb 2012 Link to this post

    Hello,

    I have the following code for a tab strip and related necessary controls.  All my navigational hyperlinks are javascript function calls to the "AddTab" function shown below. The server side code to add the tab and user control is also below.  

    Given the code and functionality below, how can I add a "Close Tab" icon on each tab to allow the user to close the tab?  I have found many examples on this site but none of them are similar to my usage, and when I attempt to merge the logic, it fails.  100% of the tabs are generated dynamically from the client. There aren't any tabs pre-loaded when the site is loaded.  

    If there's anything I left out or you need information, let me know!

    Thanks!
    Kevin



    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
                </telerik:RadAjaxLoadingPanel>
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                            <UpdatedControls><telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />
                                <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="LoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                            <UpdatedControls><telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />
                                <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="LoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>


    function AddTab(controlToAdd)
        {
            var tabstrip = $find("<%= RadTabStrip1.ClientID %>");
            var tab = new Telerik.Web.UI.RadTab();
            tab.set_text(controlToAdd);
            tabstrip.trackChanges();
            tabstrip.get_tabs().add(tab);
            tabstrip.commitChanges();
            tab.click();
        }

    protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
            {
                string tabID;
     
                tabID = e.PageView.ID.IndexOf('-') < 0 ? e.PageView.ID : e.PageView.ID.Substring(0, e.PageView.ID.IndexOf('-'));
                tabID = tabID.Replace("_", " ");
     
                Control userControl = Page.LoadControl(Utilities.CachedData.GetUserControlPath(tabID));
                 
                userControl.ID = e.PageView.ID + "_userControl";
     
                e.PageView.Controls.Add(userControl);
            }
     
            private void AddPageView(RadTab tab)
            {
                Random random = new Random();
                int randomNumber = random.Next(0, 1000000);
     
                RadPageView pageView = new RadPageView();
                pageView.ID = tab.Text.Replace(" ", "_") + "-" + randomNumber.ToString();
                RadMultiPage1.PageViews.Add(pageView);
                tab.PageViewID = pageView.ID;
            }
     
            protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
            {
                AddPageView(e.Tab);
                e.Tab.PageView.Selected = true;
            }
  2. Kevin
    Kevin avatar
    8 posts
    Member since:
    Feb 2012

    Posted 09 Feb 2012 Link to this post

    I have found a solution. I'm not sure if it is "the" solution, but it works.

            protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
            {
     
                Image img = e.Tab.FindControl("img") as Image;
                string js = "deleteTab('" + e.Tab.Text + "')";
                img.Attributes.Add("onclick", js);
    }

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top