This is a migrated thread and some comments may be shown as answers.

Catching OnKeyPress Event from editable field in RadGrid Edit Mode

6 Answers 468 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kim
Top achievements
Rank 1
Kim asked on 19 Mar 2014, 03:42 PM
Hi,
I've submitted a support ticket for this (twice), but never heard back from Telerik.  So I thought I'd turn to the forums.

I'm using an older version of Telerik (2010.2.826.40).  Our company is in the process of updating to a newer version but will not be ready by the time I need to release.

I'm using RadGrid and following several articles I've found online, I have successfully managed to put a page into Edit Mode (I'm using InPlace).  I am able to validate input and display error messages.Basically everything is working, or was until I tried to conquer capturing the OnKeyPress event from an editable field.  Specifically I want to catch the Tab Key Event (Tabbing from edit field to edit field is working fine).I want to catch the tab key in the last field of the last row so I can programmatically go to the next page.

When in edit mode, the last field is a dropdownlist.  I've set up the OnKeyPress event to be caught on the client side, but the client side is never catching the event.  Is it because I'm in edit mode?
 I set this on the server side when initializing the grid:  RadGridControl.ClientSettings.ClientEvents.OnKeyPress = "Grid_OnKeyPress";
 
I have the following function on the client side:
         function Grid_OnKeyPress(sender, args)
         {
             alert("Key Code: " + args.get_keyCode());
             debugger;
             // looking for tab key 
             if (args.keyCode == 9) 
             {
                 debugger;
             }
             return;
         } 

In the past I've successfully caught the onkeypress event from GridFilteringItem, but I was not in edit mode.  Would anyone able to provide me with an example of catching the onkeypress event in edit mode?  I've tried setting the attribute (Attributes.Add) various ways and am still not capturing the keypress event.
         1) Row level:  In ItemDataBound set GridDataItem Attributes.Add
         2) Item Grid Cell:  In ItemCreated & ItemDataBound GridDataItem[unique name].Attributes.Add
         3) The editable dropdownlist:  GridEditableItem.FindControl(dropdownlist) 
         4) The entire grid: .ClientSettings.ClientEvents.OnKeyPress = "Grid_OnKeyPress"

When using Attributes.Add on the server side I used code like this:

  gdi.Attributes.Add("onkeypress",
                           "fireCatchTabKeyCommand('" + discountSearchResultsGrid.RadGridControl.ClientID.ToString(CultureInfo.CurrentCulture) + "', '" + discountSearchResultsGrid.RadGridControl.CurrentPageIndex + "', '" + discountSearchResultsGrid.RadGridControl.MasterTableView.PagingManager.IsLastPage + "', this, event)");


Thanks.

6 Answers, 1 is accepted

Sort by
0
Kim
Top achievements
Rank 1
answered on 21 Mar 2014, 02:07 PM
Just wanted to add that I am able to get the arrow key & page down keypress events.  I just cannot get the Tab Key event.

I've even set the following:
RadGridControl.ClientSettings.AllowKeyboardNavigation = true;
RadGridControl.ClientSettings.KeyboardNavigationSettings.EnableKeyboardShortcuts = true
0
Konstantin Dikov
Telerik team
answered on 24 Mar 2014, 12:31 PM
Hello Kim,

There are some keys that will not fire the OnKeyPress event of RadGrid (one of which is the Tab key). For handling those special keys the onkeydown event should be handled instead.

Following is a simple example for handling the onkeydown client-side event of the RadGrid element:
<telerik:RadCodeBlock runat="server">
    <script type="text/javascript">
        function gridKeyDown(event) {
         
        }
    </script>
</telerik:RadCodeBlock>
 
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="rgMain_NeedDataSource" onkeydown="gridKeyDown(event);">
    <MasterTableView>
        <Columns>
            <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true" KeyboardNavigationSettings-EnableKeyboardShortcuts="true">
    </ClientSettings>
</telerik:RadGrid>

On a side-note, could you please provide some details on the support tickets that you have submitted. I have looked in our system and I am not able to find any recent tickets opened by you. The last tickets are from 2012.

I am looking forward to your reply.


Regards,
Konstantin Dikov
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Kim
Top achievements
Rank 1
answered on 24 Mar 2014, 04:21 PM
Hi Konstantin,

Thanks for the reply.  I will give it a try, but I don't think it is going to work.  Friday I added an update.  I can catch the page down/up and arrow keys find.   I cannot catch a Tab key press.  For some reason it is not being sent to the client side.   Have you tried your code to see if the Tab Key event comes through?


The week before I submitted the question to the forum, I submitted a support request on this topic twice.  Both times I press the Submit button and was returned to the page to submit a new request.  I never received a support ticket number.  Also never received any message on the screen that my submit was successful or failed.  So I made the bad assumption that they were successfully submitted.

Thanks.

Kim
0
Kim
Top achievements
Rank 1
answered on 24 Mar 2014, 04:27 PM
Hi,

Just tried your suggestion (again, I had tried this before) just to confirm.

I CAN get arrows and page keys.

I CANNOT get the TAB KEY.  It is not being caught by the OnKeyPress like the other keys are.

Thanks.

Kim
0
Accepted
Konstantin Dikov
Telerik team
answered on 24 Mar 2014, 06:39 PM
Hello Kim,

As I have confirmed in my previous post, the client-side OnKeyPress event of the grid will not be fired when the Tab key is pressed.  The same applies for some other special keys.

As you could notice in the code snippet in the previous post, an event handler for the "onkeydown" is assigned and not for the OnKeyPress. The first (onkeydown) is assigned to the wrapping div element that holds the entire grid and is not a RadGrid event. The second one (OnKeyPress) is an event fired from the client-side API of the grid.

For your requirement and in order to catch the Tab key press, the "onkeydown" event should handled. Please refer to the previously provided sample (which I have tested on my end and which fires the onkeydown event correctly when the Tab key is pressed).

I am looking forward to your reply.


Regards,
Konstantin Dikov
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Kim
Top achievements
Rank 1
answered on 24 Mar 2014, 09:10 PM
Hi Konstantin,

Yes,  you're correct, I didn't realize you were using onkeydown vs. onkeypress.

It worked!

Thank you!

Tags
Grid
Asked by
Kim
Top achievements
Rank 1
Answers by
Kim
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or