Navigating in rich:dataTable with arrow keys(up/down/left/ri

[asertoglu]

Hi everyone,

I am using rich:dataTable for inserting&updating multiple rows into database. My users want to navigating between dataTable rows with arrow keys(up/down/left/right) and return key. How can i do this ?

Thanks everyone.

[ilya_shaikovsky]

extendedDataTable has such features.

[asertoglu]

Which extendedDataTable features should i set to navigate on the table ?

Thanks.

[ilya_shaikovsky]

check this demo http://livedemo.exadel.com/richfaces-demo/richfaces/extendedDataTable.jsf. the features is turned by default.

[asertoglu]

thank you ilya_shaikovsky,

My dataTable rows has 3 columns in which has h:inputText component. After User writes the value in h:inputText, with arrow keys or return key wants to go to the next row's h:inputText. But i couldn't succeed this action in rich:extendedDataTable.

Thanks a lot.

[fdegrigny]

Did you find a solution, because I have to implement a similar scenario (navigation with arrows keys between editable inputs into table's cells) ?

[asertoglu]

Yes, I have solved this problem using javascript :

<h:inputText value="#{record.doluluk1}" maxlength="3" size="3"
     required="false" styleClass="tonaj" onkeydown="setFocus(this);" onchange="setSiloChanged(this);">
     <hx:convertNumber />
</h:inputText>

function setFocus(element) {
                                //left:37, right:39, up:38, down:40
                                if ((window.event.keyCode == "13") || (window.event.keyCode == "40")) { // Enter or Down Key...
                                    var ename = element.name;
                                    var ename_array=ename.split(":");
                                    ename_array[2] = ename_array[2] * 1 + 1;
                                    ename = ename_array[0]+":"+ename_array[1]+":"+ename_array[2]+":"+ename_array[3]
                                    var next_element = document.getElementById(ename);
                                    if (next_element != null) {
                                        next_element.focus();
                                    }
                                } else if (window.event.keyCode == "38") { // Up Key...
                                    var ename = element.name;
                                    var ename_array=ename.split(":");
                                    ename_array[2] = ename_array[2] * 1 - 1;
                                    ename = ename_array[0]+":"+ename_array[1]+":"+ename_array[2]+":"+ename_array[3]
                                    var next_element = document.getElementById(ename);
                                    if (next_element != null) {
                                        next_element.focus();
                                    }
                                } else if (window.event.keyCode == "37") { // Left Key...
                                    var ename = element.name;
                                    var ename_array=ename.split(":");
                                    if (ename_array[3] == "doluluk2") {
                                        ename_array[3] = "doluluk1"
                                    }
                                    else if (ename_array[3] == "doluluk3") {
                                        ename_array[3] = "doluluk2"
                                    }
                                    ename = ename_array[0]+":"+ename_array[1]+":"+ename_array[2]+":"+ename_array[3]
                                    var next_element = document.getElementById(ename);
                                    if (next_element != null) {
                                        next_element.focus();
                                    }
                                } else if (window.event.keyCode == "39") { // Right Key...
                                    var ename = element.name;
                                    var ename_array=ename.split(":");
                                    if (ename_array[3] == "doluluk1") {
                                        ename_array[3] = "doluluk2"
                                    }
                                    else if (ename_array[3] == "doluluk2") {
                                        ename_array[3] = "doluluk3"
                                    }
                                    ename = ename_array[0]+":"+ename_array[1]+":"+ename_array[2]+":"+ename_array[3]
                                    var next_element = document.getElementById(ename);
                                    if (next_element != null) {
                                        next_element.focus();
                                    }
                                }  
                            }