Slide a Multiline TextBox Open and Closed

3 posts, 1 answers
  1. Ken Cox
    Ken Cox avatar
    100 posts
    Member since:
    Oct 2002

    Posted 06 Apr 2010 Link to this post

    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. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 06 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ken Cox
    Ken Cox avatar
    100 posts
    Member since:
    Oct 2002

    Posted 06 Apr 2010 Link to this post

    Hi Simon,

    Thanks, that worked.

    Ken
Back to Top