I would like to see some extra intelligence in the various Telerik drop-down controls, so that they avoid opening the drop-downs beyond the edges of the browser canvas. Ideally, the behavior would be similar to the way drop-down boxes avoid crossing the edges of the screen in native windows applications.
In my case, I have RadToolBarSplitButton controls in multiple locations on the page, including close to the bottom of the page, and close to the right-hand edge of the page. I am using the default ExpandDirection of Down. This is a problem for the controls near the bottom of the page, because some of the drop-down items are rendered below the bottom edge of the browser window. I am using EnableDefaultButton = false, and the text for some of the items is longer than the text on the RadToolBarSplitButton. This is a problem for the controls near the right-hand edge of the page, because some of the drop-down is rendered beyond the right-hand edge of the browser window. In both cases, the browser scroll bars extend to provide access to the rendered content beyond the previous edges of the canvas, but as soon as you click in the scroll bar to see the rest of the drop-down, the drop-down loses focus and collapses.
I am currently using the following javascript as a work-around, making use of the RadToolBar OnClientDropDownOpening and OnClientDropDownOpened events.
The expand and collapse animations still think the drop-down is expanding down rather than up, so I have disabled the animations. If you attempt to use the undocumented set_expandDirection client method to adjust the animation, you will notice that there is an infinite recursion bug in this method in RadToolBarScripts.js.
That's obviously meant to be get_expandDirection() in the if statement.
I am using RadControls for ASP.NET AJAX Q1 2010, with an assembly version of 2010.1.309.35.
In my case, I have RadToolBarSplitButton controls in multiple locations on the page, including close to the bottom of the page, and close to the right-hand edge of the page. I am using the default ExpandDirection of Down. This is a problem for the controls near the bottom of the page, because some of the drop-down items are rendered below the bottom edge of the browser window. I am using EnableDefaultButton = false, and the text for some of the items is longer than the text on the RadToolBarSplitButton. This is a problem for the controls near the right-hand edge of the page, because some of the drop-down is rendered beyond the right-hand edge of the browser window. In both cases, the browser scroll bars extend to provide access to the rendered content beyond the previous edges of the canvas, but as soon as you click in the scroll bar to see the rest of the drop-down, the drop-down loses focus and collapses.
I am currently using the following javascript as a work-around, making use of the RadToolBar OnClientDropDownOpening and OnClientDropDownOpened events.
var canvasWidth, canvasHeight; |
function OnClientDropDownOpening(sender, args) { |
// We need to obtain the canvas width and height before the drop-down causes the canvas to expand. |
canvasWidth = document.documentElement.scrollWidth; |
canvasHeight = document.documentElement.scrollHeight; |
} |
function OnClientDropDownOpened(sender, args) { |
var button = args.get_item(); |
var buttonElem = button.get_element(); |
var dropDownContainer = button.get_dropDownElement().offsetParent; |
var offsetRight = dropDownContainer.offsetLeft + dropDownContainer.offsetWidth; |
if (canvasWidth < offsetRight) |
dropDownContainer.style.left = (dropDownContainer.offsetLeft - offsetRight + canvasWidth) + "px"; |
if (canvasHeight < dropDownContainer.offsetTop + dropDownContainer.offsetHeight) |
dropDownContainer.style.top = (dropDownContainer.offsetTop - dropDownContainer.offsetHeight - buttonElem.offsetHeight) + "px"; |
} |
The expand and collapse animations still think the drop-down is expanding down rather than up, so I have disabled the animations. If you attempt to use the undocumented set_expandDirection client method to adjust the animation, you will notice that there is an infinite recursion bug in this method in RadToolBarScripts.js.
set_expandDirection:function(){if(this.set_expandDirection()==value){return; |
I am using RadControls for ASP.NET AJAX Q1 2010, with an assembly version of 2010.1.309.35.