3.2.0

Behavior when editing, adding records - not friendly like MS Access or Excel?

I got the free Firefox trial, and I tried the add/delete demo. I notice when you add a row it doesn't immediately go into an "edit" mode that lets you edit fields. Is that something I can change in code?

Also, say I do add a new record, I edit the first field. I can't easily get to the next field in the row to put data in it. Most users expect to be able to tab to the next field and immediately begin typing. I can't do this. Can this be changed in code?

What I'm actually looking for is an editable grid control that acts like MS Access. Or Excel. Most people are comfortable and familiar with that. They should be easily able to add records without a lot of fuss.
Ron
February 23,
You will have to write code to handle the Tab key. Just trap for the key at the table level then programmatically finish editing the current cell, move the focus to the next cell and enter edit mode. Sorry that I don't have a code sample for you, I have not needed to do this yet so I don't have the details worked out. As for the grid not going into edit mode when you add a row, for me that would not be the desired behavior. I use addRow to add many rows of data at a time, like when doing paging or bringing in data from a different source. And putting the grid into edit mode at that time would not b a good thing.
Jim Hunter (www.FriendsOfAW.com)
February 23,
assuming your grid object is obj and your gridId is myGrid, the following code is usable for implementing tabkey-functionality within the grid.
At the beginning/end of a row, the (shift-)tab key will continue with the previous/next row.

In my case, IE switched focus to another form-element on the page, so i had to use timeouts to switch the focus back to the grid. If you experience difficulties, increase the timeout value.

obj.onKeyTab = function(event){
  	var col=obj.getCurrentColumn();
    var CI=obj.getColumnIndices()
    
    col=(col*1);
    for(i=0;i<CI.length;i++){
    	if(col==CI[i]) {break;}
    }
    
    if(col!=CI[CI.length-1]){	
      	col=CI[i+1];
        setTimeout("myGrid.focus();obj.setSelectedColumns(["+col+"]);obj.setCurrentColumn("+col+");",100);    
    } else {
    	  if(obj.getCurrentRow()<(obj.getRowCount()-1)){
    	    col=CI[0];
    	    setTimeout("myGrid.focus();obj.setCurrentRow("+(obj.getCurrentRow()+1)+");obj.setCurrentColumn("+col+");obj.setSelectedColumns(["+col+"]);obj.setSelectedRows(["+(obj.getCurrentRow()+1)+"]);",100);
    	  } else {
//Code to execute after tab in last cell
    	  	obj.setSelectedColumns([0]); //Remove selection from grid
    	  	setTimeout("parent.document.forms[0].btnAddLine.focus();",100); //In this case, focussing a button in another frame...
//End code to execute after tab in last cell
    	  	}
    	  	
    }
 }
  
  obj.onKeyShiftTab = function(event){
  	var col=obj.getCurrentColumn();
    var CI=obj.getColumnIndices();
    
    col=(col*1);
    for(i=1;i<CI.length;i++){
    	if(col==CI[i]) {break;}
    }
    if (i==CI.length) {
      var row=obj.getCurrentRow();
      if(row>0){
      	setTimeout("myGrid.focus();obj.setCurrentRow("+(obj.getCurrentRow()-1)+");obj.setSelectedRows(["+(obj.getCurrentRow()-1)+"]);",100);
      	col=CI[i-1];	    
        setTimeout("myGrid.focus();obj.setSelectedColumns(["+col+"]);obj.setCurrentColumn("+col+");",100);        
      	
      } else {
//Code to execute after the first cell was shift-tabbed	
obj.setSelectedColumns([0]); // remove selection from grid
//End-code to execute after the first cell was shift-tabbed
      	}
    }	else {
    col=CI[i-1];	    
    setTimeout("myGrid.focus();obj.setSelectedColumns(["+col+"]);obj.setCurrentColumn("+col+");",100);        
    }
 }
September 20,
Forgot my name...

If anyone has a solution for the timeouts... I would like to know...
Wim Zoet
September 20,

This topic is archived.

See also:


Back to support forum