RadTextBox onKeyPress + AJAX problems

9 posts, 1 answers
  1. Zdenek Plachy
    Zdenek Plachy avatar
    29 posts
    Member since:
    May 2007

    Posted 05 Oct 2012 Link to this post

    Some of newer Telerik ASP.NET AJAX upgrade caused change in RadTextBox behavior. Ajax request called from onKeyPress (eg. after press Enter) sends to server empty string (textbox's .Text property is empty). It worked before but suddenly (adter some components upgrade I think) stopped. This issue can be demonstrated in your own demo :)
    http://demos.telerik.com/aspnet-ajax/webmail/
    You must press twice Enter in "Search Inbox" RadTextBox to launch search. First press calls ajax function, but server will get empty search string. Second Enter press sends last value.

    What changed? And how can I fix this problem?

    Thank you!
    Zdenek

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 10 Oct 2012 Link to this post

    Hi Zdenek,

    Find attached a small runnable example which shows the correct behaviour of such a scenario. test it on your end and let me know what the difference in your case is.

    All the best,
    Maria Ilieva
    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. Dan Avni
    Dan Avni avatar
    17 posts
    Member since:
    Apr 2005

    Posted 11 Nov 2012 Link to this post

    i am seeing the exact same problem on both IE 10 and FireFox on my page and also on the webmail demo as Zdenek said
    this worked perfectly before and probably with the Q3 2012 has broken. now when I click the first enter the ajax call is made with an empty value and the 2nd enter sends the value to the client.

    even client side code like sender.get_value returns an empty string on the KeyPress event handler
  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 13 Nov 2012 Link to this post

    Hello Dan,

    It works correct in Q3 2012 I just test it, do you have any client side custom code? Do you have AutoPostBack="true" for the input or you are trying to do postback manually?

    During the KeyPress the new value is not updated yet. The new value updates on calling set_value, on blurring the input, and on pressing enter key (but after the actual key press, just before the submit).

    If you need to get the currently typed value by the user during KeyPress you can use get_textBoxValue() function instead of the get_value();

    Greetings,
    Vasil
    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.
  6. Dan Avni
    Dan Avni avatar
    17 posts
    Member since:
    Apr 2005

    Posted 13 Nov 2012 Link to this post

    Hi Vasil

    never mind my code, this does not work on your webmail demo
    http://demos.telerik.com/aspnet-ajax/webmail/

    you can download a sample video showing the problem from
    http://www.sendspace.com/file/tz38ci (your web site did not allow me to upload the rar file)
    in the video you can see your web mail sample, I write a text in the textbox and press enter
    the ajax wait circle appears
    the grid is refreshed but still shows items not in the search
    I press enter again
    the ajax wait circle appears
    the grid is refreshed again but now it shows the items filtered




  7. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 16 Nov 2012 Link to this post

    Hi Dan,

    There is problem in the demo it is quite old and it was not updated according to the changes made in RadInput. You should do the following changes to make it work:

    onKeyPress handler:
    function onKeyPress(sender, args) {
        if (args.get_keyCode() == 13) {
            args.get_domEvent().stopPropagation();
            args.get_domEvent().preventDefault();
            performSearch(sender);
            return;
        }
    }
    Should be:
    function onKeyPress(sender, args)
    {
        if (args.get_keyCode() == 13)
        {
            performSearch(sender.get_textBoxValue());
        }
    }

    Line 100:
    performSearch(searchTextBox);
    Should be:
    performSearch(searchTextBox.get_value());

    performSearch:
    function performSearch(searchTextBox) {
        if (searchTextBox.get_value()) {
            searchButton.set_imageUrl("images/clear.gif");
            searchButton.set_value("clear");
        }
     
        ajaxManager.ajaxRequest(searchTextBox.get_value());
    }
    Should be:
    function performSearch(searchText) {
        if (searchText)
        {
            searchButton.set_imageUrl("images/clear.gif");
            searchButton.set_value("clear");
        }
     
        ajaxManager.ajaxRequest(searchText);
    }

    We will update the demo so in future it will work correct.

    Kind regards,
    Vasil
    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.
  8. Zdenek Plachy
    Zdenek Plachy avatar
    29 posts
    Member since:
    May 2007

    Posted 20 Nov 2012 Link to this post

    Thank you for your reply. I think you have little error in your code. Should be:

    function onKeyPress(sender, args) {
        if (args.get_keyCode() == 13) {
            performSearch(sender.get_textBoxValue());
        }
    }
     
    // here we are getting value not reference to textbox again
    function performSearch(value) {
        ajaxManager.ajaxRequest(value);
    }

    Last question: how to cancel bubbling of Enter key? If you have RadGrid on page with Edit or Delete Image buttons in GridButtonColumn, they will be "pressed". Methods args.get_domEvent().stopPropagation();  and args.get_domEvent().preventDefault(); don't work. Should we use get_wrapperElement instead?
  9. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 20 Nov 2012 Link to this post

    Hi Zdenek,

    Here is example how to cancel the event:

    function onKeyPress(sender, args) {
        if (args.get_keyCode() == 13) {
           $telerik.cancelRawEvent(args.get_domEvent()); //cancel the event and its bubbling
           sender.set_value(sender.get_textBoxValue()); //set the value, that will be no automatically set because of the canceling
           performSearch(sender.get_textBoxValue());
        }
    }


    Greetings,
    Vasil
    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.
  10. Zdenek Plachy
    Zdenek Plachy avatar
    29 posts
    Member since:
    May 2007

    Posted 20 Nov 2012 Link to this post

    Thank you! It works perfectly.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017