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

Slide a Multiline TextBox Open and Closed

2 Answers 66 Views

PanelBar

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

kencox asked on 06 Apr 2010, 05:48 AM

Hi folks,

I have a large multi-line radtextbox that I want to hide when not in use. I can show and hide it with javascript but I don't like the jarring effect. I'm trying to use the PanelBar to get a smooth show/hide effect. Can anyone show me why the code below doesn't work - or a technique that does?

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
        
            <%@ 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">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">  
        
                        <script type="text/javascript">  
        
                            function showItem(panelbar, args) {  
        
                                var itm = args.get_item()  
        
                                itm.expand();  
        
                            }  
        
                            function hideItem(panelbar, args) {  
        
                                var itm = args.get_item()  
        
                                itm.collapse();  
        
                            }  
        
                        </script> 
        
                    </telerik:RadScriptBlock> 
        
                    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" renderingcompatibility="3.5" 
        
                        ExpandMode="SingleExpandedItem" CollapseAnimation-Duration="1000" CollapseAnimation-Type="InElastic" 
        
                        OnClientMouseOut="hideItem" OnClientMouseOver="showItem">  
        
                        <Items> 
        
                            <telerik:RadPanelItem runat="server" Expanded="false" Text="Root RadPanelItem1">  
        
                                <ItemTemplate> 
        
                                    <div> 
        
                                        <telerik:RadTextBox ID="txtExtendedDescription" runat="server" MaxLength="5000" Height="100%" 
        
                                            Rows="10" TextMode="MultiLine" Width="75%" /></div>  
        
                                </ItemTemplate> 
        
                            </telerik:RadPanelItem> 
        
                        </Items> 
        
                    </telerik:RadPanelBar> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Thanks,

Ken

2 Answers, 1 is accepted

Accepted

answered on 06 Apr 2010, 02:10 PM

Hello Ken Cox,

Since RadPanelBar does not animate an Item that has Template you need to put the RadTextBox inside a child of the root Item to make it work, i.e.

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" renderingcompatibility="3.5"

ExpandMode="SingleExpandedItem" CollapseAnimation-Duration="1000" CollapseAnimation-Type="InElastic"

OnClientMouseOut="hideItem" OnClientMouseOver="showItem">

<Items>

<telerik:RadPanelItem runat="server" Expanded="false" Text="Root RadPanelItem1">

<Items>

<telerik:RadPanelItem runat="server">

<ItemTemplate>

<div>

<telerik:RadTextBox ID="txtExtendedDescription" runat="server" MaxLength="5000" Height="100%"

Rows="10" TextMode="MultiLine" Width="75%" /></div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

I hope this helps.

Kind regards,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Slide a Multiline TextBox Open and Closed

2 Answers, 1 is accepted