This is a migrated thread and some comments may be shown as answers.

RadTextBox Height Changing by ImageButton Click

2 Answers 155 Views

Input

This is a migrated thread and some comments may be shown as answers.

Lindsey Kelly asked on 20 Oct 2009, 03:07 PM

The functionality I am trying to obtain here is that when my ImageButton is clicked, I'd like my RadTextBox's height to be resized by a few more lines. I've attempted this using this Count function in javascript, however, when it gets called - the height is not changed, the RadTextBox is only moved 2000px to the bottom of the panel. I am wondering if there is an easier way to accomplish this?

    
            <style type="text/css">     
        
            #expandButton 
        
                { 
        
                    position: absolute; 
        
                    top: 20px; 
        
                    right: 5px; 
        
                } 
        
            </style> 
        
            <script type="text/javascript">  
        
                function clearText(field) {  
        
                    if (field.defaultValue == field.value) field.value = '';  
        
                    else if (field.value == '') fieldfieldfield.value = field.defaultValue;  
        
                }  
        
                function Count() {  
        
                    var text = document.getElementById('<%=txtUserNote.ClientID%>');  
        
                    text.style.height = "2000px";  
        
                }  
        
            </script>  
        
            <body bgcolor="#F4F4F4" runat="server" id="MainBody">  
        
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100%">  
        
                        <asp:Literal ID="notesHeader" runat="server">  
        
                        </asp:Literal>  
        
                        <telerik:RadTextBox ID="txtUserNote" runat="server" TextMode="MultiLine" Width="99%"  
        
                            Height="15px" Visible="False" Value="Click to Enter New Note" Font-Size="10px" OnFocus=  
        
                            "clearText(this)">  
        
                        </telerik:RadTextBox>  
        
                        <div id="expandButton">  
        
                        <asp:ImageButton runat="server" ID="expandTbButton" ImageUrl="images/expand.gif" OnClientClick="Count(); return false;"/>  
        
                        </div>  
        
                </telerik:RadAjaxPanel>  
        
            </body>

2 Answers, 1 is accepted

answered on 21 Oct 2009, 10:37 AM

Hello Lindsey,

Due to its specifics, RadTextBox consists of two textboxes - one is visible and one is invisible. The client object is attached to the invisible one, which carries the control's ID (again, this is on purpose). So you should be resizing the visible textbox, not the invisible one.

In addition, RadTextBox has several visual states on the client (enabled, hovered, focused, etc). Because of that, the control remembers its styles for each state, so even if you set some new height, the old one will be restored. That's why you need to modify the remembered styles. Here is an example:

<%@ Page Language="C#" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls for ASP.NET AJAX</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Button ID="Button1" runat="server" Text="Resize TextBox" OnClientClick="return resizeTB()" />

<br /><br />

<telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="MultiLine" Width="300px" Height="100px" />

<script type="text/javascript">

function resizeTB()

{

var tb = $find("<%= RadTextBox1.ClientID %>");

tb._originalTextBoxCssText = "width:300px;height:200px;";

tb.updateCssClass();

return false;

}

</script>

</form>

</body>

</html>

All the best,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.