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
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
11 Answers, 1 is accepted
0
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.
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.
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 03 Aug 2009, 02:06 PM
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 :)
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 :)
0
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:
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.
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.
0
Allen
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
answered on 18 May 2011, 09:35 PM
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.
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.
0
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
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.
0
Allen
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
answered on 24 May 2011, 11:02 AM
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.
0
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
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.
0
Allen
Top achievements
Rank 2
Iron
Veteran
Rank 2
Iron
Veteran
answered on 26 May 2011, 11:40 AM
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
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
0
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
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.
0
Anandi
Top achievements
Rank 1
Rank 1
answered on 19 Jun 2013, 07:40 PM
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
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
0
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
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.