Changing tab text on client

[mzn developer]

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?

[Paul]

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.

[mzn developer]

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!

[John]

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.

[Paul]

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.

[Martin Roussel]

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 :)

[Chris]

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