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.

        • 1. Re: Navigating in rich:dataTable with arrow keys(up/down/lef
          Ilya Shaikovsky Master

          extendedDataTable has such features.

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