Make your DataGrid perform like an Excel sheet

sharmarohi11111111

Rate me:

2.56/5 (12 votes)

5 Sep 2006

68.6K

Make your Datagrid perform like an Excel sheet by navigating through text boxes with the arrow keys.

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:

JavaScript

<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.

HTML

<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

Written By

sharmarohi11111111

Australia

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Make your DataGrid perform like an Excel sheet

Introduction

License

Comments and Discussions