
mzn developer
Top achievements
Rank 1
mzn developer
asked on 21 Aug 2008, 01:30 PM
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?
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?
6 Answers, 1 is accepted
0
Accepted
Hello mzn developer,
Please find below a sample code snippet that shows the needed approach.
Greetings,
Paul
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.
0

mzn developer
Top achievements
Rank 1
answered on 21 Aug 2008, 02:17 PM
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!
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!
0

John
Top achievements
Rank 1
answered on 21 Aug 2008, 04:13 PM
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.
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.
0
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.
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.
0

Martin Roussel
Top achievements
Rank 1
answered on 30 Nov 2012, 01:20 PM
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:
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:
Case closed :)
<
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 :)
0

Chris
Top achievements
Rank 1
answered on 10 Jan 2013, 09:23 PM
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
I had the same problem with the older RadControls version