ClientEvents OnKeyPress + Backspace/Delete

[Mike]

I'm doing a proof of concept with the RadTextbox and a client-side event that will display characters while I am typing.

The end result would be automatic filtering of a RadGrid based on the input of this textbox (filtering while typing, similar to Google results).  I saw your demo using the RadComboBox, but I would like to improve upon that without having using a combobox for my results, as my result set could be in the thousands.

The proof of concept is simple, type in the textbox (input) and the label (output) is automatically updated.  It works great when typing letters, but hitting backspace, delete, or holding down a key does not work.  To be honest, after much research, I'm not sure if this is possible with javascript or jquery.  Looking at the available client-side events from here, I don't see any events that would fit my scenario. 

I did figure out I have to append the character that was being pressed to the text already inside the textbox.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
    <script type="text/javascript">
        function filterGrid(sender, eventArgs) {
            var inputControl = $find("<%=txtInput.ClientID%>");
            var outputControl = $get("<%=lblOutput.ClientID %>");

            var inputText = inputControl.get_value();
            var keyPressed = eventArgs.get_keyCharacter();

            outputControl.innerHTML = inputText + keyPressed;
        }
    </script>
</telerik:RadScriptBlock>

Input:
<telerik:RadTextBox runat="server" ID="txtInput" ClientEvents-OnKeyPress="filterGrid" />

<br />
Output:
<asp:Label runat="server" ID="lblOutput" />

Any help is greatly appreciated!  Thanks so much.

[Dimo]

Hi Mike,

Delete, backspace and other special keys do not fire the KeyPress event in IE. What you can do is use the control's Focus event and start executing a function (checking the RadTextBox value) with setInterval(), e.g. each second. Clear the interval in the RadTextBox' Blur event handler.

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

All the best,
Dimo
the Telerik team

[Mike]

Thank you for the advice Dimo, you have definitely pointed me in the right direction.  I started down a completely different path, but some quick research into setInterval and clearInterval is definitely faster and easier.

Thanks again, you guys are the best!