This is a migrated thread and some comments may be shown as answers.

"Close Tab" image on dynamically added client side tabs

1 Answer 39 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 09 Feb 2012, 03:49 PM
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;
        }

1 Answer, 1 is accepted

Sort by
0
Kevin
Top achievements
Rank 1
answered on 09 Feb 2012, 08:48 PM
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);
}

Tags
TabStrip
Asked by
Kevin
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 1
Share this question
or