RadPane scroll bar, remain at bottom...

12 posts, 0 answers
  1. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 29 Jul 2009 Link to this post

    Hi there guys!,

    got a question / challenge for you...

    I'm building a side panel chat to one of our screens... the whole page is split up by a radSplitter, split into two vertically, the left hand panelhas the "side panel" chat controls etc... so in the left hand pane we have an Ajax Panel, with a RadPanelBar... Which has another RadSplitter / RadPane control inside it... which splits the chat panel into two.... (one bit at the top for displaying chat items, and one at the bottom for adding "chat comments")..

    so my question is... how i do get the RadPane's scrollbar ( which is displaying chat comments ) to remain at the bottom consistantly? (so the newest messages will always be at the bottom) i've found the answer on another post, but that was when the radsplitter isnt wrapped inside a RadPanelBar!

    Look forward to your solution / suggestions!

    Cheers
    Regards
    Kevin
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Aug 2009 Link to this post

    Hello kevin,

    I suggest to use the pane's setScrollPos method and to set it to the corresponding values of top and left based on the size of the pane itself - in this manner the scrollbar should always be on the bottom. You can do this on the particular event for your case, e.g when a button for sending the comment is clicked.

    Please, use this suggestions as a start point for your implementation and in case I have misunderstood you or you need further assistance, please open a support ticket and send me a sample, fully runnable demo along with detailed explanations of the actual and the desired result and I will do my best to help.
     

    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    83 posts
    Member since:
    Sep 2008

    Posted 03 Aug 2009 Link to this post

    Svetlina,

    You have not misunderstood me in my query, thats exactly what I need.. however i have problems accessing the RadPane on the client-sde as the RadSplitter / Pane are wrapped inside a RadPanelBar... and this seems to cause me some grief in getting the RadPane object... if you could point me in that direction i should be able to manage the rest myself!

    Thanks.
    Regards
    Kevin :)
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 Aug 2009 Link to this post

    Hello Kevin,

    In order to get the ClientID and find the element which is in teh panel bar you can use some server code as shown in the following example:

    http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/templates/defaultcs.aspx
     
    I prepared for you some sampel code which can be a start point for your implementation:

    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
            <script type="text/javascript">  
              
            function OnClientClick()  
            {  
              var pane = $find('<%=((RadPane)RadPanelBar1.Items[0].FindControl("LeftPane")).ClientID%>');  
              var scrollHeight = pane.getContentElement().scrollHeight;  
              pane.setScrollPos(0, scrollHeight - pane.get_height());  
            }  
              
            </script> 
     
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server">  
                <Items> 
                    <telerik:RadPanelItem Text="Item1">  
                        <ItemTemplate> 
                            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="700" Height="300">  
                                <telerik:RadPane ID="LeftPane" runat="server" Width="100">  
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                    Left pane<br> 
                                </telerik:RadPane> 
                                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" /> 
                                <telerik:RadPane ID="RightPane" runat="server" Width="200">  
                                    Right pane</telerik:RadPane> 
                            </telerik:RadSplitter> 
                        </ItemTemplate> 
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelBar> 
            <asp:Button ID="btn" runat="server" OnClientClick="OnClientClick(); return false;" 
                Text="Scroll to bottom" /> 
        </form> 
    </body> 

    For your convenience I also attached the test page I prepared for you - let us know how it goes.


    Sincerely yours,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Allen
    Allen avatar
    50 posts
    Member since:
    Mar 2011

    Posted 18 May 2011 Link to this post

    Is there a WPF version of this snippet?  I need to put a small full-width scroll area at the bottom of a window for messaging.   As a new message appears it should throw the old ones out of view (not necessarily away) and stay at the bottom.  

    Here's my current nasty one that never goes to the bottom:
    <StackPanel x:Name="SysMessagesTackPanel"  Margin="1,1,1,1" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="2" Grid.RowSpan="1" HorizontalAlignment="Stretch" Width="Auto" Height="60" MinHeight="60">
                    <ScrollViewer Name="SysMessageScrollViewer" Height="{Binding ElementName=SysMessagesTackPanel, Path=ActualHeight}" Width="{Binding ElementName=SysMessagesTackPanel, Path=ActualWidth}"
                                  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                        <TextBlock  Name="textBoxSysMessages"
                                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                                  ScrollViewer.CanContentScroll="True"
                                  Text="{Binding SysMessageText}"
                                  TextWrapping="Wrap" FontSize="9" Height="56" Width="Auto" />
                    </ScrollViewer>
                </StackPanel>
            


    I am trying to avoid any code-behind, by the way.
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 20 May 2011 Link to this post

    Hello Allen,

    I suggest you use ScrollToBottom() method of the ScrollViewer in order to achieve the needed approach. More information about the ScrollViewer can be found here.

    Kind regards,
    Yana
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Allen
    Allen avatar
    50 posts
    Member since:
    Mar 2011

    Posted 24 May 2011 Link to this post

    That method would have to be in code-behind, right?  I am trying to avoid any.  If there is no other way to stay at the bottom of the textblock content that is purely declarative, please let me know.  Thank you.
  9. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 26 May 2011 Link to this post

    Hello Allen,

    Yes, ScrollToBottom() method should be executed in code-behind. We're not aware of any way to set the scroll position to bottom declaratively.

    Kind regards,
    Yana
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. Allen
    Allen avatar
    50 posts
    Member since:
    Mar 2011

    Posted 26 May 2011 Link to this post

    Yes, so I discovered.  Also, the whole scrollviewer with enclosed textbox seems to be very unreliable.
    ScrollToEnd fires but never does anything.  

    Would you ever consider creating a RadConsoleViewer control that mimics a console application's line-by-line output - that is what I need to do (and what the originator of this thread pretty much needed to do).  The scrolling would be nice but not in my case as useful as seeing the last message generated by the application..I can imagine the following capabilities;

    Resizable viewport
    Scrolling
    Styling
    Attach to a command line program thread e.g. some legacy console app that is launched with exec....
     and capture its output
    Contents editiable
    Can be a control or full modal window,
    Works with background processes


  11. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 26 May 2011 Link to this post

    Hello Allen,

    Thank you for sending your suggestion. Currently we don't have plans to implement such a control but this request will be definitely considered for the future releases of RadControls.

    All the best,
    Yana
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  12. Anandi
    Anandi avatar
    15 posts
    Member since:
    Jun 2009

    Posted 19 Jun 2013 Link to this post

    Hi,
    We recently converted from 2008 telerik version to 2009.1 version. We have a rad splitter in our page, and the rad pane used to grow with the content of the data with the older telerik version. Ever since we moved to the later version, we are seeing scroll bar in the right pane (due to the large amount of data) and the pane seems to be fixed. If I use, Scrolling="None", I cannot reach to the data below. So, how can I resolve this and make the pane grow with the content of the page.

    Thanks a lot.
    -Anandi
  13. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 21 Jun 2013 Link to this post

    Hello Anandi,

    You can find detailed explanation on how to achieve the desired scenario on the following KB article: Initially Resize the RadSplitter according to its content

    Hope this helps.

    Kind regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017