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!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here