Item Template in CodeBehind in UI for ASP.NET AJAX TabStrip

Paul

35 posts

Member since:
Jul 2008

Posted 17 Jun 2009 Link to this post

Hi,

I have been scratching my head trying to create an item template in the code behind for the tab strip. I am trying to create a tab with text and close icon (linking to a javascript function) just like the itemtemplate example on the asp demo site.

Is it possable to do this in the codebehind?

Thanks

Princy

17421 posts

Member since:
Mar 2007

Posted 18 Jun 2009 Link to this post

Hello Paul,

Here is the code that I tried for creating Tab (with text and close icon) dynamically. Give a try with this.

CS:

    
            protected void Page_Load(object sender, EventArgs e)  
        
            {  
        
                RadTab tab1 = new RadTab("Tab1"); // Create new tab  
        
                RadTab tab2 = new RadTab("Tab2"); // Create new tab  
        
                RadTabStrip1.Tabs.Add(tab1);  
        
                RadTabStrip1.Tabs.Add(tab2);  
        
            }  
        
            protected void RadTabStrip1_TabCreated(object sender, RadTabStripEventArgs e)  
        
            {  
        
                HtmlImage img1 = new HtmlImage();  
        
                img1.Src = "~/Images/AddRecord.gif";  
        
                Label lbl = new Label();  
        
                lbl.Text = e.Tab.Text;        
        
                img1.Attributes.Add("onclick", "deleteTab('"+e.Tab.Text+"');"); // Add onclick attribute  
        
                e.Tab.Controls.Add(lbl);  
        
                e.Tab.Controls.Add(img1);  
        
            }

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>

ASPX:

    
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" OnTabCreated="RadTabStrip1_TabCreated">  
        
            </telerik:RadTabStrip> 
        
            <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" Height="240px" Width="396px" CssClass="multiPage">  
        
                . . .  
        
            </telerik:RadMultiPage>

Thanks,
Princy.

Paul

35 posts

Member since:
Jul 2008

Posted 18 Jun 2009 Link to this post

Thanks Princy

I had tried to use onprerender to do somthing simlar but it didnt work. I will give this a go

Thanks