Make your DataGrid perform like an Excel sheet

Introduction

This code makes your DataGrid perform like an Excel sheet. You can use the up, down, left, and right keys inside the text boxes to move through the DataGrid.

Add this code to the head of your code in the HTML:

<script language="javascript"> function keyPressed(TB)
{
    var tblGrid = document.getElementById("DataGrid1");
    
    var rowcount = tblGrid.rows.length;
    var TBID = document.getElementById(TB);
                
     if (event.keyCode == 37 || event.keyCode == 38 || 
         event.keyCode == 39 || event.keyCode == 40){
       for (Index=1;Index<rowcount;Index++){

         for (childIndex=0;childIndex < 
              tblGrid.rows[Index].cells.length; childIndex++){
                    
           if (tblGrid.rows[Index].cells[childIndex].children[0] != null){
             if (tblGrid.rows[Index].cells[
                 childIndex].children[0].id == TBID.id){
                    
               if (event.keyCode == 40){
                 if (tblGrid.rows[Index + 1].cells[
                     childIndex].children[0] != null){
                   if (tblGrid.rows[Index + 1].cells[
                       childIndex].children[0].type == 'text'){
                            
                     //downvalue

                     tblGrid.rows[Index + 1].cells[
                             childIndex].children[0].focus(); 
                     return false;    
                   }
                 } 
               }
               if (event.keyCode == 38){
                 if (tblGrid.rows[Index - 1].cells[
                     childIndex].children[0] != null){
                   if (tblGrid.rows[Index - 1].cells[
                       childIndex].children[0].type == 'text'){
                     //upvalue

                     tblGrid.rows[Index - 1].cells[
                             childIndex].children[0].focus();
                     return false;
                   }
                 }
               }
                      
               if (event.keyCode == 37 && (childIndex != 0)){
                      
                 if ((tblGrid.rows[Index].cells[
                      childIndex-1].children[0]) != null) {
                        
                   if (tblGrid.rows[Index].cells[
                       childIndex-1].children[0].type == 'text'){
                     //left

                     if (tblGrid.rows[Index].cells[
                         childIndex-1].children[0].value != ''){
                       var cPos = 
                           getCaretPos(tblGrid.rows[Index].cells[
                                       childIndex-1].children[0],'left');
                       if (cPos){
                         tblGrid.rows[Index].cells[
                                 childIndex-1].children[0].focus(); 
                         return false;
                       }
                       else{
                         return false;
                       }    
                     }
                     tblGrid.rows[Index].cells[childIndex-1].children[0].focus(); 
                     return false;
                   }    
                 }
               }

               if (event.keyCode == 39){
                 if (tblGrid.rows[Index].cells[childIndex+1].children[0] != null){
                   if (tblGrid.rows[Index].cells[
                       childIndex+1].children[0].type == 'text'){
                     //right

                     if (tblGrid.rows[Index].cells[
                         childIndex+1].children[0].value != ''){
                       var cPosR = 
                           getCaretPos(tblGrid.rows[Index].cells[
                                       childIndex+1].children[0],'right');
                       if (cPosR){
                         tblGrid.rows[Index].cells[
                                 childIndex+1].children[0].focus();
                         return false;
                       }
                       else{
                         return false;
                       }
                     }
                     tblGrid.rows[Index].cells[childIndex+1].children[0].focus();
                     return false;
                   }
                 }
               }
             }
           }
         }
       }
     }
   }
          
   function getCaretPos(control,way){
     var movement;
     if (way == 'left'){
       movement = -1;
     }
     else{
       movement = 1;
     }
     if (control.createTextRange){
       control.caretPos = document.selection.createRange().duplicate();
       if (control.caretPos.move("character",movement) != ''){
         return false;
       }
     else {
       return true;
     }
   }
}
</script>

The up and down key events are standard; however, for the left and right keys, you must check where the current position of the caret/cursor is. If the next movement is to a blank string, then it jumps to the next cell and so on. Look at the code below and you will see the OnKeyUp event in the textbox which calls this code.

<form id="Form1" method="post" runat="server">
  <asp:DataGrid id="DataGrid1" 
       style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 184px"
       runat="server">
    <Columns>
      <asp:TemplateColumn>
        <ITEMTEMPLATE>
          <asp:TextBox onkeyup=keyPressed(this.id)  
                       Text='<%# DataBinder.Eval(Container, 
                             "DataItem.YoMammaID") %>' 
                       Runat=server ID=test>
          </asp:TextBox>
        </ITEMTEMPLATE>
                        
      </asp:TemplateColumn>
    </Columns>
    <Columns>
      <asp:TemplateColumn>
        <ITEMTEMPLATE>
          <asp:TextBox onkeyup=keyPressed(this.id) 
                       Text='<%# DataBinder.Eval(Container, 
                             "DataItem.YoMammaID") %>' 
                       Runat=server ID="Textbox3">
          </asp:TextBox>
        </ITEMTEMPLATE>
      </asp:TemplateColumn>
    </Columns>
  </asp:DataGrid>
</form>

Use this code wisely daniel-son........you must always look eye. Cheers!