OnKeypress client event not firing in Firefox, Chrome

8 posts, 0 answers
  1. John
    John avatar
    5 posts
    Member since:
    Nov 2010

    Posted 03 Feb 2012 Link to this post

    I have a couple of RadListBox controls on a page configured to use the Listbox\ Transfer functionality as outlined in this Demo.

    I have bound an "onkeypress" event to both listboxes in the code behind. Thus

    lstFirstListBox.Attributes.Add("onkeypress", "filterListBox('" + lstFirstListBox.ClientID + "', event);");
    lstSecondListBox.Attributes.Add("onkeypress", "filterListBox('" + lstSecondListBox.ClientID + "', event);");

    similar to this Forum Thread and the attached example.

    The problem I have encountered is that the 'onkeypress" event does not fire in Firefox. It fires in IE without any problems.

    However, it will fire in Firefox after I transfer an item from one listbox to the other. In this case it does not metter which listbox has focus the event is fired on 'FirstListBox" every time. That is, I transfer an item from First to Second and then perform a key press, it fires on First. I tranfer an item from Second to First and then perform a keypress, it fires on First.

    For testing I have limited the "filterListBox" function to pop up an alert with the first parameter which, apart from in IE, is always the FirstListBox clientID.

    I also tried binding the event using jQuery and got the exact same behaviour.

    The event does seem to fire at all in Chrome or Safari no matter what combination of clicks or trickery I attempt.

    Any ideas would be greatly appreciated.
  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 03 Feb 2012 Link to this post

    Hi John,

    The keypress event isn't the right choice for this purpose. It only fires when an actual character is being inserted in, for instance, a text input. Please take a look at this article explaining the differences between the keyboard events, and how they should be used.
     
    Greetings,
    Bozhidar
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    5 posts
    Member since:
    Nov 2010

    Posted 07 Feb 2012 Link to this post

    Thanks Bozhidar,
    The article was very informative and I did learn something from it about these events.

    However the problem persists and the behaviour is exactly the same as in the original post
    whether I use the the keypress, keydown or keyup events. I cannot use the textinput event
    on the listbox obviously as it doesn't accept input.

    The weird thing is that the event does fire in Firefox but only after transferring an item
    and then only on the First ListBox.

    Any Ideas or suggestions greatly appreciated.
    Thanks again,
    John
  5. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 07 Feb 2012 Link to this post

    Hello John,

    Have you set the TabIndex property of the ListBox? If the property isn't set, the ListBox cannot receive focus, and therefore cannot catch the key events. Try setting the property (for instance TabIndex="1")
     
    Greetings,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. John
    John avatar
    5 posts
    Member since:
    Nov 2010

    Posted 07 Feb 2012 Link to this post

    Thanks Bozhidar,
    Thanks for your continued help. I tried setting Tabindex but the behaviour is still the same.

    Regards,
    John
  7. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 08 Feb 2012 Link to this post

    Hi John,

    Please see the attached page. Click with the mouse inside the ListBox, or tab to it with the Tab key, so that it has focus. Then press any key, and you will see an alert.
     
    Regards,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  8. John
    John avatar
    5 posts
    Member since:
    Nov 2010

    Posted 08 Feb 2012 Link to this post

    Hi Bozhidar,
    Thanks for that, works as expected. It seems though that the problem occurs when you have
    2 listboxes on the page configured to use the listbox transfer functionality as described in the demo referenced
    in the original post.

    Thanks again for your assistance with this, much appreciated.

    Regards,
    John
  9. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 09 Feb 2012 Link to this post

    Hello John,

    I've put a second ListBox on the page and configured both of them so that they have the transfer functionality, and still everything works as expected. Please modify the page so that the listboxes look like this:
    <telerik:RadListBox TabIndex="1" ID="RadListBox1" runat="server" AllowTransfer="true" TransferToID="RadListBox2">
        <Items>
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
        </Items>
    </telerik:RadListBox>
    <telerik:RadListBox TabIndex="1" ID="RadListBox2" runat="server">
        <Items>
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
            <telerik:RadListBoxItem Text="item" />
        </Items>
    </telerik:RadListBox>

    On my end this works perfectly. If your case is different, please post the code for it, as well as a specific explanation of the behavior you observe.
     
    Regards,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017