Keyboard support in RadComboBox with template

[Ruth Dahan]

Hi,

I am using RadComboBox with template as described in the demo:

http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx

As a dropdown list i have items with item template of checkbox and label:

<ItemTemplate>
       <div onclick="StopPropagation(event)">
            <asp:CheckBox runat="server" ID="chk1" Checked="false" onclick="onCheckBoxClick(this)" />
            <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1" Text='<%#Eval("DisplayName") %>'></asp:Label>
       </div>
</ItemTemplate>

Is there a way to support keyboard using item template in combobox? i.e. to select some checkboxes in the drop down list using the keyborad?

Thanks,

Ruth

[Simon]

Hi Ruth Dahan,

Yes, you can support this in the context of the example you refer to by handling the client-side KeyPressing event as shown below:

function onKeyPressing(sender, eventArgs) {
    var e = eventArgs.get_domEvent();
    var keyCode = e.keyCode || e.which;

    if (keyCode == 32 && sender.get_dropDownVisible()) {
        var item = sender.get_highlightedItem();

        if (item) {
            var checkBox = $get(sender.get_id() + "_i" + item.get_index() + "_chk1");

            if (checkBox) {
                checkBox.checked = !checkBox.checked;

                onCheckBoxClick(checkBox);
            }
        }
    }
}

Greetings,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ruth Dahan]

Thanks for you answer.
I used the function and it worked checking the item's checkbox on space bar pressing.
The problem is that after the checkbox is checked the dropdown seems to be "refreshed" as it blinks and all the checkbox marks are cleared.

Do you have any idea what might cause this problem?


Thanks in advanced,
Ruth

[Simon]

Hello Ruth Dahan,

The issue you are describing does not exist in this online demo (after implementing the KeyPressing event handler).

What can be different between the demo and your page?

Kind regards,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ruth Dahan]

Thanks for your help.
I opened support ticket (253026) with sample project.

i hope you will be able to help me.

Thanks,
Ruth

[Chris]

I know this is an old thread, but I was having the same problem.  I wanted to share the solution that a coworker and I came up with:

    <script language="javascript" type="text/javascript">
    </script>
    <script>
        function onKeyPressing(sender, eventArgs) {
          var e = eventArgs.get_domEvent();
          var keyCode = e.keyCode || e.which;

          if (keyCode == 13 && sender.get_dropDownVisible()) {
            var item = sender.get_highlightedItem();

            if (item.get_checked()) {
                item.set_checked(false);
                }
                else
                {
                item.set_checked(true);
                }

          }
        }
    </script>

To handle the event, you need to set the OnClientKeyPressing property of the RadComboBox.  This will allow you to select and deselect checkboxes by pressing the enter key.  The dropdown will close each time you press enter, so you must reopen the combobox with "Alt+ [down arrow]" and use the arrow keys to highlight a specific item and press enter to select or deselect items.

Hope this helps anyone else that runs into this issue.

[Nencho]

Hello Chris,

Thank you for sharing your findings with the community.

Regards,
Nencho
the Telerik team