|
Article relates to
|
RadSplitter for ASP.NET AJAX,
RadComboBox for ASP.NET AJAX,
RadColorPicker for ASP.NET AJAX,
RadDatePicker for ASP.NET AJAX
|
|
Created by
|
Svetlina, Telerik
|
PROBLEM: When you have a control with popup behavior, such as RadComboBox, RadDatePicker, RadColorPicker, etc. in a RadPane, undesired effect occurs when you scroll.
SOLUTION:
The solution in similar scenarios is to close the popup element when you start scrolling the RadPane.
Let's assume that we have a RadComboBox placed in a RadPane control which has a vertical scrollbar. When the RadComboBox's dropdown is visible and you start scrolling, the dropdown does not move due to its absolute positioning.
To close the dropdown in such case you should hook up the scrolling event of the particular RadPane's content element. Then, when the scrolling event fires, check out whether the dropdown is visible and in case it is, hide it.
This can be done with the following function, which should be executed when the RadSplitter is loaded in order to attach the scrolling eventhandler correctly:
| function OnClientLoaded(sender, eventArgs) |
| { |
| var pane = sender.getPaneById("<%= RadPane1.ClientID %>"); |
| var contentElement = pane.getContentElement(); |
| contentElement.onscroll = function() |
| { |
| var combo = $find("<%= RadComboBox1.ClientID %>"); |
| var dropDown = combo.get_dropDownVisible(); |
| if(dropDown) |
| { |
| combo.hideDropDown(); |
| } |
| }; |
| } |
The logic stays the same when you have the same problem with other popup controls, only the client-side API slightly differs.
You can find a working demo which demonstrates the explained approach in the attached archive file.
Please
Sign In
to rate this article.