RadTextBox onKeyPress + AJAX problems

[Zdeněk]

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

[Maria Ilieva]

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

[Dan Avni]

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

[Vasil]

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

[Dan Avni]

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

[Vasil]

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

[Zdeněk]

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?

[Vasil]

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

[Zdeněk]

Thank you! It works perfectly.