6 Replies Latest reply on Jan 18, 2010 1:30 AM by Abdurrahman Sert

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

    Abdurrahman Sert Newbie

      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.

        • 2. Re: Navigating in rich:dataTable with arrow keys(up/down/lef
          Abdurrahman Sert Newbie

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

          Thanks.

          • 4. Re: Navigating in rich:dataTable with arrow keys(up/down/lef
            Abdurrahman Sert Newbie

            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.

            • 5. Re: Navigating in rich:dataTable with arrow keys(up/down/lef
              Frantz Degrigny Newbie
              Did you find a solution, because I have to implement a similar scenario (navigation with arrows keys between editable inputs into table's cells) ?
              • 6. Re: Navigating in rich:dataTable with arrow keys(up/down/lef
                Abdurrahman Sert Newbie

                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();
                                                    }
                                                }  
                                            }