I have a formview edit template with a RadTexBox. I would like when user click on the TextBox, Radtooltip displays with a bigger text box for user to write a narrative, and click insert to insert nerrative to the textbox.
I have following sample code that works fine without formview. When I tried to implement the same idea in the formveiw edit template it doesn't work. I think I am having referencing problem. Here is the code that works without formview.
Thanks,
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%
@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<title>Untitled Page</title>
</
head>
<
body>
<
script type="text/javascript">
function clientShow(sender, eventArgs)
{
var textbox2 = (document.getElementById("TextBox2"));
textbox2.focus();
var textbox1 = (document.getElementById("TextBox1")).value;
(document.getElementById(
"TextBox2")).value = textbox1;
}
function PopTB()
{
var textbox2 = (document.getElementById("TextBox2")).value;
(document.getElementById(
"TextBox1")).value = textbox2;
// var tooltip1 = $find("RadToolTip1");
var tooltip1 = getElementById("RadToolTip1");
tooltip1.hide();
}
</
script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:TextBox ID="TextBox1" Text="This is my text" runat="server" Height="75px" TextMode="MultiLine" Width="372px" ></asp:TextBox>
<telerik:RadToolTip ID="RadToolTip1" runat="server" Height="300px"
RelativeTo="Element" ShowEvent="OnClick" Skin="Forest" Width="557px" Animation="Resize" ManualClose="True" TargetControlID="TextBox1" OnClientShow="clientShow" >
<asp:TextBox ID="TextBox2" runat="server" Height="265px" TextMode="MultiLine" Width="550px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Insert" OnClientClick="PopTB(); return false;" /></telerik:RadToolTip>
</div>
</form>
</
body>
</
html>
6 Answers, 1 is accepted
I am not quite sure about your exact setup - you said that you have a RadTextBox and in your code I see only standard TextBoxes. In case you are using a RadTextBox, please, note that in order to tooltipify it you should extract its ClientID as explained here.
In your particular case you also have a FormView which is an INaming Container and this also changes the ID - note that this is not related to RadControls but to general ASP.NET knowledge. This being said, you should set the TargetControlID to something like FormView1_TextBox3_text and also set the isClientID property to true. You can use the IEDevToolBar or Firebug tools to check the ClientID. For your convenience I also attached a sample demo to the thread.
Regards,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Thank you for your response, but it wasn't what I was looking for.
Here is the scenario.
User click the text box or radtextbox (call this one textbox1)
RadToolTip opens with the larger textbox that displays the content of textbox1 with the cursor at the end of the text. (call this one textbox2)
User edit in textbox2 and push insert button,
Textbox1 get text from textbox2.
I finally make this works exactly the way I wanted. I tried to put this in the user control, it doesn't work. It doesn't transfrer text between textboxes.
here is the code that works in aspx page, but not in ascx page.
Thanks,
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function clientShow(sender, eventArgs)
{
var textbox2 = (document.getElementById("TextBox2"));
textbox2.focus();
var textbox1 = (document.getElementById('<%=FormView1.FindControl("TextBox1").ClientID %>')).value;
(document.getElementById("TextBox2")).value = textbox1;
}
function PopTB()
{
var textbox2 = (document.getElementById("TextBox2")).value;
(document.getElementById('<%=FormView1.FindControl("TextBox1").ClientID %>')).value = textbox2;
// var tooltip1 = $find("RadToolTip1");
var tooltip1 = $find("<%=RadToolTip1.ClientID%>");
tooltip1.hide();
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<br />
<br />
<br />
<asp:FormView ID="FormView1" runat="server" DefaultMode="Insert">
<InsertItemTemplate>
<asp:TextBox ID="TextBox1" Text="This is my text" runat="server" Height="75px" TextMode="MultiLine" Width="372px" ></asp:TextBox>
</InsertItemTemplate>
</asp:FormView>
<telerik:RadToolTip ID="RadToolTip1" runat="server" Height="300px"
RelativeTo="Element" ShowEvent="OnClick" Skin="Web20" Width="557px" Animation="Resize" ManualClose="True" TargetControlID="TextBox1" OnClientShow="clientShow" >
<asp:TextBox ID="TextBox2" runat="server" Height="265px" TextMode="MultiLine" Width="550px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Insert" OnClientClick="PopTB(); return false;" /></telerik:RadToolTip>
</div>
</form>
</body>
</html>
I examined and tested the very same code you provided both on a page and wrapped in a user control and I was able to reproduce the problem. However, the problem has nothing to do with the RadToolTip control, neither with the FormView control - it is related to the fact that the user control is an INaming Container - note that it changes the IDs of its containing controls - that is why you got javascript errors when trying to referenece the TextBox2.
Please, modify your code in the following manner:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<script type="text/javascript"> |
function clientShow(sender, eventArgs) |
{ |
var textbox2 = (document.getElementById("<%=TextBox2.ClientID %>")); |
textbox2.focus(); |
var textbox1 = (document.getElementById('<%=FormView1.FindControl("TextBox1").ClientID %>')).value; |
(document.getElementById("<%=TextBox2.ClientID %>")).value = textbox1; |
} |
function PopTB() |
{ |
var textbox2 = (document.getElementById("<%=TextBox2.ClientID %>")).value; |
(document.getElementById('<%=FormView1.FindControl("TextBox1").ClientID %>')).value = textbox2; |
// var tooltip1 = $find("RadToolTip1"); |
var tooltip1 = $find("<%=RadToolTip1.ClientID%>"); |
tooltip1.hide(); |
} |
</script> |
<asp:ScriptManager ID="ScriptManager1" runat="server" /> |
<div> |
|
<br /> |
<br /> |
<br /> |
<asp:FormView ID="FormView1" runat="server" DefaultMode="Insert"> |
<InsertItemTemplate> |
<asp:TextBox ID="TextBox1" Text="This is my text" runat="server" Height="75px" TextMode="MultiLine" Width="372px" ></asp:TextBox> |
</InsertItemTemplate> |
</asp:FormView> |
<telerik:RadToolTip ID="RadToolTip1" runat="server" Height="300px" |
RelativeTo="Element" ShowEvent="OnClick" Skin="Web20" Width="557px" Animation="Resize" ManualClose="True" TargetControlID="TextBox1" OnClientShow="clientShow" > |
<asp:TextBox ID="TextBox2" runat="server" Height="265px" TextMode="MultiLine" Width="550px"></asp:TextBox> |
<asp:Button ID="Button1" runat="server" Text="Insert" OnClientClick="PopTB(); return false;" /></telerik:RadToolTip> |
</div> |
Greetings,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Thank you so much for all your help. It works the way I wanted.

RadToolTip and Formview works fine until I put them in the RadAjaxPanel. Once I save formview, then click on the textbox, the RadToolTip doesn't work. I have to refresh the page. I was wondering if you could help me on this.
Thank you so much.
here is the code
<%
@ Control Language="C#" AutoEventWireup="true" CodeFile="test.ascx.cs" Inherits="test" %>
<%
@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<
script type="text/javascript">
function clientShow(sender, eventArgs)
{
var textbox2 = (document.getElementById("<%=TextBox2.ClientID %>"));
textbox2.focus();
var textbox1 = (document.getElementById('<%=FormView1.FindControl("TextBox1").ClientID %>')).value;
(document.getElementById(
"<%=TextBox2.ClientID %>")).value = textbox1;
}
function clientShow1(sender, eventArgs)
{
var textbox20 = (document.getElementById("<%=TextBox4.ClientID %>"));
textbox20.focus();
var textbox10 = (document.getElementById('<%=FormView1.FindControl("TextBox3").ClientID %>')).value;
(document.getElementById(
"<%=TextBox4.ClientID %>")).value = textbox10;
}
function PopTB()
{
var textbox2 = (document.getElementById("<%=TextBox2.ClientID %>")).value;
(document.getElementById(
'<%=FormView1.FindControl("TextBox1").ClientID %>')).value = textbox2;
// var tooltip1 = $find("RadToolTip1");
var tooltip1 = $find("<%=RadToolTip1.ClientID%>");
tooltip1.hide();
}
function PopTB1()
{
var textbox3 = (document.getElementById("<%=TextBox4.ClientID %>")).value;
(document.getElementById(
'<%=FormView1.FindControl("TextBox3").ClientID %>')).value = textbox3;
var tooltip2 = $find("<%=RadToolTip2.ClientID%>");
tooltip2.hide();
}
</
script>
</
telerik:RadCodeBlock>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:FormView ID="FormView1" runat="server" DefaultMode="Edit" DataSourceID="SqlDataSource1" OnPageIndexChanging="FormView1_PageIndexChanging">
<InsertItemTemplate>
<asp:TextBox ID="TextBox1" Text="This is my text" runat="server" Height="75px" TextMode="MultiLine" Width="372px" ></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox3" runat="server" Height="75px" Text="This is my second text"
TextMode="MultiLine" Width="372px"></asp:TextBox><br />
<asp:Button ID="Button3" runat="server" CommandName="Insert" Text="insert" />
<asp:Button ID="Button4" runat="server" CommandName="Cancel" Text="Cancel" /><br />
</InsertItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Height="75px" Text='<%# Bind("CODE") %>'
TextMode="MultiLine" Width="372px"></asp:TextBox><asp:TextBox ID="TextBox3" runat="server"
Height="75px" Text='<%# Bind("MESSAGE") %>' TextMode="MultiLine" Width="372px"></asp:TextBox><asp:Button
ID="Button3" runat="server" CommandName="Update" Text="insert" /><asp:Button ID="Button4"
runat="server" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
</asp:FormView> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px"
Width="300px">
</telerik:RadAjaxPanel>
<br />
<br />
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ATR2_DELETEConnectionString %>"
DeleteCommand="DELETE FROM [ErrorCumulative] WHERE [Record_Id] = @Record_Id"
InsertCommand="INSERT INTO [ErrorCumulative] ([CODE], [MESSAGE]) VALUES (@CODE, @MESSAGE)"
SelectCommand="SELECT [Record_Id], [CODE], [MESSAGE] FROM [ErrorCumulative]"
UpdateCommand="UPDATE [ErrorCumulative] SET [CODE] = @CODE, [MESSAGE] = @MESSAGE WHERE [Record_Id] = @Record_Id">
<DeleteParameters>
<asp:Parameter Name="Record_Id" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="CODE" Type="String" />
<asp:Parameter Name="MESSAGE" Type="String" />
<asp:Parameter DefaultValue="1" Name="Record_Id" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="CODE" Type="String" />
<asp:Parameter Name="MESSAGE" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<telerik:RadToolTip ID="RadToolTip1" runat="server" Animation="Resize" Height="300px"
ManualClose="True" OnClientShow="clientShow" RelativeTo="Element" ShowEvent="OnClick"
Skin="Web20" TargetControlID="TextBox1" Width="557px">
<asp:TextBox ID="TextBox2" runat="server" Height="265px" TextMode="MultiLine" Width="550px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClientClick="PopTB(); return false;" Text="Insert" /></telerik:RadToolTip>
<br />
<br />
<telerik:RadToolTip ID="RadToolTip2" runat="server" Animation="Resize" Height="300px"
ManualClose="True" OnClientShow="clientShow1" RelativeTo="Element" ShowEvent="OnClick"
Skin="Web20" TargetControlID="TextBox3" Width="557px">
<asp:TextBox ID="TextBox4" runat="server" Height="265px" TextMode="MultiLine" Width="550px"></asp:TextBox>
<asp:Button ID="Button2" runat="server" OnClientClick="PopTB1(); return false;" Text="Insert" /></telerik:RadToolTip>
<br />
<br />
<br />
<br />
</div>
I am afraid I could not understand the problem - in the provided code the RadAjaxPanel does not have any contents. I assume that you might not update the tooltip when the target control is updated, please make sure that the tooltip also gets updated when needed.
In case this does not help, please open a new support ticket and send me a sample, fully runnable demo along with detailed reproduction instructions in order to make me able to help.
Kind regards,
Svetlina
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.