Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Radtooltip within Formview

6 Answers 130 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
fatma
Top achievements
Rank 1
fatma asked on 17 Dec 2008, 09:02 PM
Hi,

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

Sort by
0
Svetlina Anati
Telerik team
answered on 19 Dec 2008, 03:45 PM
FormViewRadToolTip.zip
Hi Fatma,

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.
0
fatma
Top achievements
Rank 1
answered on 19 Dec 2008, 04:35 PM
Hi Svetlina,

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>
            &nbsp;
            &nbsp;<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>&nbsp;
                </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>


0
Accepted
Svetlina Anati
Telerik team
answered on 22 Dec 2008, 12:49 PM
Hi fatma,

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> 
            &nbsp;  
            &nbsp;<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>&nbsp;  
                </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.
0
fatma
Top achievements
Rank 1
answered on 29 Dec 2008, 07:31 PM
Hi Svetlina,

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

0
fatma
Top achievements
Rank 1
answered on 02 Jan 2009, 03:08 PM
Hi Svetlina,

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>

 

 

&nbsp;

 

 

&nbsp;&nbsp;&nbsp;<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>&nbsp;

 

 

<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">

 

 

&nbsp;</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>

 

 

&nbsp;&nbsp;

 

 

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

 

0
Svetlina Anati
Telerik team
answered on 02 Jan 2009, 03:50 PM
Hello Fatma,

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.
Tags
ToolTip
Asked by
fatma
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
fatma
Top achievements
Rank 1
Share this question
or