Client Template Keyboard Support

[Rob]

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.

[Kalina]

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

[Peter Filipov]

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

[Rob]

Thx!

Works like a charm.