tab index in Table (navigation order)

, ,
1

Hi,

Inside a view I have a table (AsyncTable). Each table cell has an input field inside it (input text or drop-down).

I can add/remove rows to this table.

I want to navigate inside this table using the Tab key. The order in which I want to navigate is from left to right and when I reach the end of the line to go to the next line:
t[0;0], t[0;1]…
t[1;0], t[1;1]…

All items that I wand to skip have tabIndex=-1.

Problems:
1 - I can not use binding expressions for the tabIndex property of the input fields (I get exception at runtime, in the browser). The expression is 100% correct, I can display it in a text output field.

2 - for the last added row to the table when I first hit the Tab key I do not navigate to the input control, but I just get a focus on it. Only the second Tab goes inside the text field.

Of course the problem is on IE8, Firefox looks fine.

Does anyone know how I can set the index input fields on the newly added row?

After I Save, I can also navigate in the last row.
br,
Vlad

2

I’m sorry, but as you mention i get the same working results on chrome and firefox. You’ll probably need to use an IE8 debugger to figure out tabbing workarounds for IE.

I can provide some assistance with the expression binding for the TabIndex.
Create your own function that returns a String (not an int) and bind the tabIndex to that function. Like this:

	public String getTabIndex() throws Exception {
		Object obj = resolveExpression("#{myData.index}");
		return String.valueOf(obj);
	}

Hope this helps.
–mark

3

Hi,

Do you know if there is there a client-side option to set the tabIndex?

Something like:

CAF.model('#{activePageBean.clientIds['fooInputText']}').setTabIndex('10');

br,
Vlad

4

tabindex is a property on html elements.

So you can do the following:


var inputText = CAF.model('#{activePageBean.clientIds['fooInputText']}');
var inputTextElem = inputText.element;
inputTextElem.tabIndex = 10;

//or a bit less verbose
$("#{activePageBean.clientIds['fooInputText']}").tabIndex = 10;

Regards,
–mark

5

Hi,

In the end I had to do it all in javaScript.

I could not do the job only with CAF API.

Code to parse all the needed fields in the table and set their tabIndex property:

var tableMyDataTable = CAF.model('#{activePageBean.clientIds['myDataTable']}');

if (tableMyDataTable != null){
    var rowTemplate = '#{activePageBean.clientIds['myFirstInputField']}';
    var endIndex = rowTemplate.indexOf("__row");
    var prefix = rowTemplate.substring(0, endIndex);
    
    var rowTemplateMyFirstInput =prefix + '__row__template:myFirstInputField'

    var rowTemplateMySecondInput = prefix + '__row__template:mySecondInput';
    var rowTemplateMyThirdInput = prefix + '__row__template:myThirdInput';
    var rowTemplateMyForthInput = prefix + '__row__template:myForthInput';        
    
    
     var rowCount =  tableMyDataTable.getRowCount();
     var numberOfControls = 4;

     for (i = 0; i < rowCount; i++) &#123;
          var row = tableMyDataTable.get(i);

         setTabIndex(rowTemplateMyFirstInput, row, 100 + i*numberOfControls);
         setTabIndex(rowTemplateMySecondInput, row, 101 +  i*numberOfControls);
         setTabIndex(rowTemplateMyThirdInput, row, 102 +  i*numberOfControls);		  
         setTabIndex(rowTemplateMyForthInput, row, 103 +  i*numberOfControls);            
     }
}

Function to set the tabIndex:

function setTabIndex(rowTemplateHtmlId, rowId, tabIndex)&#123;

     var controlHtmlId = rowTemplateHtmlId.replace("__template",rowId);
     
     var controlInputObject = document.getElementById(controlHtmlId);

     controlInputObject.tabIndex = "" +tabIndex;

}

You have to make sure that your rowIdBinding does not contain characters that must be escaped. If the rowID contains special characters then you will manually have to modify the “row” variable:

var row = tableMyDataTable.get(i);

br,
Vlad