tabbing to next element

[edalakiran]

Hello everyone,

I have a subfile contains 10 column's, bottom of the subfile contains submit button. when user enter 10 rows when the user presses the tab button it needs to scroll to 11 column and show the focus.

[Megan]

Hello Teja,

To accomplish this, you could use the scrollToRow() API in the onkeydown event.

scrollToRow() - http://www.profoundlogic.com/docs/pages ... d=15728644

The way to implement this API can vary by what you are looking to do, but here's an example that does some simple scrolling to the next page and focusing the input element in the next row. The following code is added to the onkeydown event of the input field in the grid you want to tab down in.

Code: Select all

// get the key code (cross-browser)
event = event || window.event;
var code = event.which || event.keyCode;

// Grid shows 5 rows/page.  
var lastRow = row/5;    

// Get total number of records.
var count = getObj("Grid1").grid.getRecordCount();

// If code==9 (tab)...
if (code == 9) {

  // ...and if on the last row of this "page" or on the last record...
  if (Number.isInteger(lastRow) || (row == count)) {
  
    // ...prevent tab event...
    // It is necessary to prevent the tab event
    // to keepfrom tabbing out of the page.
    preventEvent(event);     
    
    // ...and if last record...
    if (row == count) {  
    
      // ...return to start of records...
      row = 0;
      
    }
    
    // ...move to next valid row...
    row = row+1;
    
    // ...scroll grid to top of next page...
    getObj("Grid1").grid.scrollToRow(row);
    
    // ...get id of element to focus...
    // I created a variable to hold the textbox name.
    var str = "TextBox3" + '.' + row;    
    
    // ...set timeout for scroll and grid to complete...
    // I moved the focus inside a timer so that the
    // scroll and grid update can finish.
    // You may need to change the time value to
    // work with your screen's update time.
    window.setTimeout(function() {       
    
      // ...and set focus to id of element to focus.
      // I use the str variable to get the element to focus.
      getObj(str).focus();               
   
    }, 50);                              
  }
}

Please remember that this is sample code and will not handle all possible situations such as a filtered or sorted grid.

We hope this helps! If you have any questions, please let us know and we'll be happy to help!

Thanks,

[edalakiran]

Hello Megan,

Thank you for your help, is there any other way to achieve without setTimeout?

Thanks,
Kiran.

[Scott Klement]

The setTimeout() is required.

The browser cannot run the events to scroll the grid while your 'onkeydown' event code is still running. So, running scrolltoRow puts the action of scrolling the row onto a queue that is executed when the keydown event completes. If you tried to set focus in the keydown event, it could potentially fail because the grid hasn't scrolled yet, and depending on the situation, the row may not have been rendered yet.

Using setTimeout() puts your focus() call on the queue as well, so that it's not run until after the row has had time to render.