Intersoft WebGrid Documentation
Walkthrough: Changing 'Enter' key behavior
See Also Send comments on this topic.

Glossary Item Box

This walkthrough will show how to utilizie OnEditKeyDown Client Side Events in order to trap the "EnterKey" and reconfiguring the "EnterKey" to perform other functions such as a tab moving to the next row at the same column in new row.

During this walkthrough, you will learn how to do the following:

 Prerequisites

In order to complete this walkthrough, you will need the following:

  • Access to the Microsoft Access NorthWind database.
  • Visual Studio 2005 Application.

 Step-By-Step Instructions

  1. Bind WebGrid to AccessDataSource.
  2. Invoke the Initialize Layout server side event to call the OnEditKeyDown clientside event.

    C# Copy ImageCopy Code 
    private void WebGrid1_InitializeLayout(object sender, ISNet.WebUI.WebGrid.LayoutEventArgs e)
{
   // Attach a client side event on 'OnEditKeyDown' event
   e.Layout.ClientSideEvents.OnEditKeyDown = "HandleEditKeyDown";
}

  3. Next, add following function to your clientside html page.

  4. JavaScript Copy ImageCopy Code 
    function HandleEditKeyDown(gridId)
{    
   var grid = wg_States[gridId];    
   var ac = grid.getActiveEditCell();    
   if (ac.rowElement.type == "NewRow")    
   {           
      if (event.keyCode == 13) // If Enter key is pressed                 
         event.keyCode = 9;  // change it to Tab    
   }    
   return true; // continue default processing.
}

See Also

©2012 Intersoft Solutions Corp. All Rights Reserved.