Changing tab text on client

7 posts, 1 answers
  1. mzn developer
    mzn developer avatar
    68 posts
    Member since:
    Jul 2005

    Posted 21 Aug 2008 Link to this post

    I'm trying to change the tab text in javascript.  I thought it would be a simple task but I haven't had any success with anything I've tried.

    The first thing I tried was tab.set_text("NewValue").  This set the text property in the tab client object but didn't update the text currently visible to users. 

    I then tried to get the DOM element for the tab text to update it directly using tab.get_textElement() but that comes back as null.

    Does anyone have any idea how to update the tab text so it's updated in the browser?
  2. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 21 Aug 2008 Link to this post

    Hello mzn developer,

    Please find below a sample code snippet that shows the needed approach.

    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <telerik:RadCodeBlock runat="server">  
            <script type="text/javascript">  
            function SetText()  
            {  
                var tabstrip = $find('<%= RadTabStrip1.ClientID %>');  
                var tab = tabstrip.findTabByText("Root RadTab2");  
                if(tab != null)  
                {  
                    tab.set_text("test");  
                }  
            }  
            </script> 
        </telerik:RadCodeBlock> 
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server">  
            <Tabs> 
                <telerik:RadTab runat="server" Text="Root RadTab1">  
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab2">  
                </telerik:RadTab> 
            </Tabs> 
        </telerik:RadTabStrip> 
        <input id="Button1" type="button" value="SetText" onclick="SetText()" /> 
    </form> 


    Greetings,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mzn developer
    mzn developer avatar
    68 posts
    Member since:
    Jul 2005

    Posted 21 Aug 2008 Link to this post

    Thanks for the quick response!

    The issue was something else but I found it.  I was applying a tab template to the tab so the set_text() obviously couldn't find the text on the tab. 

    I was using the tab template to add a close button on the tab but I recently found the example in the help about how to add a close image to the tab in the OnClientLoad function.  After changing the way I add the image to the tab then the set_text() function works as expected.

    Thanks!
  5. John
    John avatar
    3 posts
    Member since:
    Apr 2008

    Posted 21 Aug 2008 Link to this post

    Hi,

    I am also trying to manipulate tabs from Javascript so I copied the "sample code snippet" provided verbatim to review in my IDE.

    However, I get an IntelliSense message indicating "Unrecognized tag prefix or device filter 'telerik'".
    I assume that I require some sort of 'inludes' at the top of the apsx file but I have no idea what is required or how to identify what is needed.

    TIA,
    John.

  6. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 25 Aug 2008 Link to this post

    Hello John,

    It seems your are missing the reference to the assembly:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    or you are using RadTabSTrip for ASP.NET "classic" in your application.

    <%@ Register Assembly="RadTabStrip.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>

    Regards,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 30 Nov 2012 Link to this post

    Hi, I have the same problem than the original post: having problem to rename tabs. Im using a TabTemplate to customize my tabs (Close Image) and problem seem to go away if im not using templates at all. In fact, the tab name changes but the control is not refreshing after (with the new value). If I do a additional postback after the rename (button click for instance) then the new text appear. Here is the code:

    <telerik:RadButton ID="btnRenameTab" runat="server" Skin="WebBlue" Text="Rename Tab" meta:resourcekey="labRenameTab" OnClick="btnRenameTab_OnClick">
                                <Icon PrimaryIconCssClass="rbEdit" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
    </telerik:RadButton>
     
    <telerik:RadTabStrip  ID="RadTabStrip1" runat="server" Skin="WebBlue"  MultiPageID="RadMultiPage1" Orientation="HorizontalTop"
                        SelectedIndex="0" >
                             <TabTemplate>
                                <div class="TabWrapper">
                                    <div class="TabWrapperRight">
                                         <div class="TabWrapperRight">
                                           <div class="CloseIcon" onclick="deleteTab('<%# DataBinder.Eval(Container, "Value") %>')">
                                           </div>
                                        </div>
                                    </div>
                             
                                    <div class="TabWrapperRight">
                                        <%# DataBinder.Eval(Container, "Text") %>
                                    </div>
                                </div>
                            </TabTemplate>
                        </telerik:RadTabStrip>

    function promptCallBackFn(arg) {
                    var tabStrip = $find("<%=RadTabStrip1.ClientID %>");
                    var tab = tabStrip.get_selectedTab();
                    tab.set_text(arg);
                   
                    if (arg != null) {
                        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                        ajaxManager.ajaxRequest("RenameTab" + "|" + arg);
                    }
     
                }

    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
            {
                string strToDelete = "";
                string[] postBackData = e.Argument.Split('|');
                switch (postBackData[0])
                {
                   
                    case "RenameTab":
     
                        if (postBackData[1] != "null")
                        {
                            RadTabStrip1.SelectedTab.Text = postBackData[1];
                            RadTabStrip1.DataBind();
                            
                        }
                        break;
                }
            }
     
            protected void btnRenameTab_OnClick(object sender, EventArgs e)
            {
     
                if (RadTabStrip1.SelectedTab != null)
                {
                    RadWindowManager1.RadPrompt("Enter tab name", "promptCallBackFn", 330, 160, null, btnRenameTab.Text, RadTabStrip1.SelectedTab.Text);
                }
     
            }

    As you can see, im using a RadPrompt to enter the new tab name. Probably I just need to find out how to make a ajax request after clicking OK. I know there is a way mentioned in here where the documentation show how to make Close Image without templates but I would like to make it work with template.

    UPDATE: Nevermind, found the solution. Needed to add this AjaxManagerSetting:
    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1">
                                    </telerik:AjaxUpdatedControl>
                                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1">
                                    </telerik:AjaxUpdatedControl>
                                </UpdatedControls>
    </telerik:AjaxSetting>

    Case closed :)
  8. Chris
    Chris avatar
    6 posts
    Member since:
    Dec 2012

    Posted 10 Jan 2013 Link to this post

    I just downloaded the trial version of RadControls for AJAX...and have the same problem with the tab text not changing, although I'm changing the text on the server-side. the new text does not display until a different tab is selected (clicked on).  How can I force the RADTabStrip to refresh itself?

    I had the same problem with the older RadControls version

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