Client Template Keyboard Support

4 posts, 0 answers
  1. Rob
    Rob avatar
    5 posts
    Member since:
    Jun 2012

    Posted 20 Jun 2012 Link to this post

    When scrolling through an opened combo box with the keyboard, the high lighted row doesn't scroll into view.

    You can see this behaviour in your demo.

    Is there anyway to make the high lighted item scroll into view?

    Thx.
  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 25 Jun 2012 Link to this post

    Hi Rob,

    Indeed, there is an issue with highlighting items when RadComboBox data has been loaded via Load On Demand.
    We have already reproduced the issue and started investigating it, but we will need some more time to find out what causes it.
    Please excuse us for any inconvenience this may have caused you.

    Regards,
    Kalina
    the Telerik team
    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 their blog feed now.
  3. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 26 Jun 2012 Link to this post

    Hi Rob,

    We were able to fix the issue. You can download our internal build next week or apply the following javascript to your project. E.g:
    <form id="form1" runat="server">
        <div>
           <telerik:RadScriptManager runat="server" ID="RadScriptManager">
            </telerik:RadScriptManager>
            <telerik:RadComboBox runat="server" Height="150px">
                <Items>
                    <telerik:RadComboBoxItem Text="item1" />
                    <telerik:RadComboBoxItem Text="item2" />
                    <telerik:RadComboBoxItem Text="item3" />
                    <telerik:RadComboBoxItem Text="item4" />
                    <telerik:RadComboBoxItem Text="item5" />
                    <telerik:RadComboBoxItem Text="item6" />
                    <telerik:RadComboBoxItem Text="item7" />
                    <telerik:RadComboBoxItem Text="item8" />
                    <telerik:RadComboBoxItem Text="item9" />
                    <telerik:RadComboBoxItem Text="item10" />
                    <telerik:RadComboBoxItem Text="item11" />
                    <telerik:RadComboBoxItem Text="item12" />
                    <telerik:RadComboBoxItem Text="item13" />
                    <telerik:RadComboBoxItem Text="item14" />
                    <telerik:RadComboBoxItem Text="item15" />
                    <telerik:RadComboBoxItem Text="item16" />
                    <telerik:RadComboBoxItem Text="item17" />
                    <telerik:RadComboBoxItem Text="item18" />
                    <telerik:RadComboBoxItem Text="item19" />
                    <telerik:RadComboBoxItem Text="item20" />
                    <telerik:RadComboBoxItem Text="item21" />
                    <telerik:RadComboBoxItem Text="item21" />
                    <telerik:RadComboBoxItem Text="item23" />
                    <telerik:RadComboBoxItem Text="item24" />
                    <telerik:RadComboBoxItem Text="item25" />
                    <telerik:RadComboBoxItem Text="item26" />
                    <telerik:RadComboBoxItem Text="item27" />
                    <telerik:RadComboBoxItem Text="item28" />
                </Items>
            </telerik:RadComboBox>
        </div>
        </form>
        <script type="text/javascript">
            Telerik.Web.UI.RadComboBoxItem.prototype.scrollIntoView = function () {
                var combo = this.get_comboBox(),
                element = this.get_element();
     
                if (combo && combo.get_simpleRendering())
                    return;
     
                var itemOffset = element.offsetTop,
                itemHeight = element.offsetHeight,
                dropDownWrapper = combo.get_childListElementWrapper();
                dropDownOffset = dropDownWrapper.scrollTop;
                dropDownVisibleHeight = dropDownWrapper.offsetHeight;
     
                if (itemOffset + itemHeight > dropDownOffset + dropDownVisibleHeight) {
                    dropDownWrapper.scrollTop = itemOffset + itemHeight - dropDownVisibleHeight;
     
                    //If a horizontal scrollbar exists, add its height to the scrollTop.
                    if (dropDownWrapper.clientWidth < dropDownWrapper.scrollWidth) {
                        var horizontalScrollBarHeight =
                        $T.RadComboBox._getScrollBarWidth(); //The scrollbar's width is equal to its height.
     
                        dropDownWrapper.scrollTop += horizontalScrollBarHeight;
                    }
                }
                else if (itemOffset + itemHeight <= dropDownOffset) {
                    dropDownWrapper.scrollTop = itemOffset;
                }
            }
        </script>


    Regards,
    Peter Filipov
    the Telerik team
    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 their blog feed now.
  4. Rob
    Rob avatar
    5 posts
    Member since:
    Jun 2012

    Posted 26 Jun 2012 Link to this post

    Thx!

    Works like a charm.
Back to Top