Tuesday, 7 August 2012

RadCombobox sticking on page issue solved

Recently, I was working with Telerik Ajax Rad controls on a sharepoint site and I faced an issue that on a long page with scroll bar when we open the combobox and scroll the page using mouse scroll wheel, the dropdown list sticks on the position and move out of its position.
It looks something like -
image
After trying all CSS and other tricks I came to solve it by using onScroll event of DOM. Below simple code can work for you if your scroll bar is on mail window of browser.
    <script type="text/javascript"> 
        $(document).ready(function () {
            $(window).scroll(function () {
                var comboBox = $find("RadComboBox1");
                comboBox.hideDropDown();
            });
        });
    </script>

But I ran into another issue as above code wasn’t working in my case, then soon I realized that scroll bar wasn’t on window but It was on the content Div in sharepoint site.

so I change the event of scroll from window to the div -

<script type="text/javascript>
$(document).ready(function () {
    $("#div-content").scroll(function () {
        var comboBox = $find("RadComboBox1");
        comboBox.hideDropDown();
    });
});
</script>

and it works like charm. Smile So I came to share if it could help you getting out of the trouble.

3 comments:

  1. Hi Amit,

    i Have one issue.
    I have designed a page with Radcombobox and RadGrid and calling this page in another page as a popup with the help of Iframe. when i click on Radcomboxbox it is opening on Top.Iam facing position issues in Iframe with Radcontrols..can u please help to solve this issue..

    Thanx
    Lakshmi

    ReplyDelete
  2. Is radcombo working correctly in the page which you're opening in IFrame when opening it seperately not in IFrame ?

    ReplyDelete
  3. i have a same issue but I am used above code ..its not working for me.

    ReplyDelete