10 Replies Latest reply on Jan 10, 2012 3:09 PM by Quanlin Chen

    dataTable filter: focus lost when event=keyup

    Tom Giberius Newbie

      I am using RichFaces 4.

       

      When I use a filter in a dataTable then the focus got lost in the inputText field I use for the filter.

      I use the event="keyup" and on this event the dataTable is rendered again, it then shows the rows filtered on the first character entered.

      With the mouse I can go back to the filter field and enter a second character and filtering is done on the characters typed so far.

       

      I think that the rerendering on the keyup event makes that the focus goes away. "Of course" this should not happen. I do not want the use the onblur, I want to restrict the  list by typing in the inputText field.

       

      Bug? Workaround?

        • 1. Re: dataTable filter: focus lost when event=keyup
          Tom Giberius Newbie

          I have solved the issue for a part. The solution:

           

          1) I added an attribute oncomplete="setFocus(event)"

          2) Some Java Script

                  <script type="text/javascript">

                      function setFocus(e) {

                          var veld = document.getElementById("landenTabel:filterCode")

                          veld.focus();

                      }

                   </script>

          3) The id of the field is landenTabel:FilterCode, this is what I have looked up with Firebug. Of course I gave the names to the id's myself.

           

          Now the only thing left is that this is hard coded, I need to find out how event relates to the field so that the Java Script works for every filterfield.

           

          A little improvement:

           

          oncomplete="document.getElementById('landenTabel:filterCode').focus()"

           

          Now I can put this kind of code with every filter I define, but it is rather a long text, only setFocus(event) would more comfortable.

           

           

          I still think this is a "bug" in RichFaces while it should not be needed to add scripts like this.

          • 2. dataTable filter: focus lost when event=keyup
            Tom Giberius Newbie

            Does somebody knows what I can do with the parameter event in setFocuc(event)?

             

            Can I find the field on which the ajax event has been sumitted?

            • 3. dataTable filter: focus lost when event=keyup
              Ilya Shaikovsky Master

              I think that the rerendering on the keyup event makes that the focus goes away. "Of course" this should not happen. I do not want the use the onblur, I want to restrict the  list by typing in the inputText field.

               

              Bug? Workaround?

               

              while defining event = keyup and render="tableID" you should expect all the table (with headers) re-rendered. a4j:ajax could not know that it's some kind of filtering request.

               

              But good news.. in RF 4 there is an easy way to correct that by using table's @body meta-component:

                  <h:form id="form">

                      <rich:messages />

                      <rich:dataTable value="#{carsBean.allInventoryItems}" var="car"

                          id="table" rows="30">

                          <f:facet name="noData">

                              Nothing found

                          </f:facet>

                          <rich:column filter="#{carsFilteringBean.mileageFilterImpl}">

                              <f:facet name="header">

                                  <h:panelGroup>

                                      <h:outputText value="Mileage &lt; " />

                                      <h:inputText value="#{carsFilteringBean.mileageFilter}">

                                          <f:convertNumber groupingUsed="true" />

                                          <f:validateLongRange maximum="500000" />

                                          <a4j:ajax event="keyup" render="table@body" execute="@this" />

                                      </h:inputText>

                                  </h:panelGroup>

                              </f:facet>

                              <h:outputText value="#{car.mileage}" />

                          </rich:column>

              using that code (note table@body render definition) only body of the table without header should be updated so you will not loose focus.

              • 4. Re: dataTable filter: focus lost when event=keyup
                Tom Giberius Newbie

                Thanks for the respons.

                 

                I think render="table@body"will indeed solve the problem, while rerender the whole table will cause losing the focus. I will try it and let you (so others) know.

                 

                I have test and the option table@body works (take note that table is what you will enter as the id for the dataTable). I have looked into the docmentation but I have not found this option yet. If it is not in the documentation I suggest this useful option will be added.

                • 5. Re: dataTable filter: focus lost when event=keyup
                  Balamir KODAK Newbie

                  if i use render="table@body" everything ok but, this time datatable rows can not be selected.

                   

                  RichFaces 4

                  rich:extendedDataTable

                  selectionMode="multiple"

                   

                  Thanks.

                  • 6. Re: dataTable filter: focus lost when event=keyup
                    mani v Newbie

                    if we use table@body datascroller is not rendered. if we use "table@body datascrollerid" alos its not working properly.

                    • 7. Re: dataTable filter: focus lost when event=keyup
                      Quanlin Chen Newbie

                      Same problem as "mani v" stated, after using the table@body, the datascroller is not rendered although the actual data row is there, just no way to see it from the page, is there any work around?

                      • 8. Re: dataTable filter: focus lost when event=keyup
                        undermanager Newbie

                        @Mani & @Quanlin - I have what sounds like a similar scenario:  a data table (not an extended data table) with filters on all the columns, and a data scroller at the foot of the table.

                         

                        I can get the data scroller to stay synchronized with the filtered state of the table by using @Ilya's approach above for this line:

                         

                          <a4j:ajax event="keyup" render="table@body" execute="@this" />

                         

                        But, I add the onbeforedomupdate value:

                         

                          <a4j:ajax event="keyup" render="table@body" execute="@this" onbeforedomupdate="refreshDS();" />

                         

                        My data scroller's ID is "ds" and the JavaScript in the refreshDS function is included in my page, after the data table, as follows:

                         

                          <a4j:jsFunction name="refreshDS" render="ds" />

                         

                        There is a slight pause before the data scroller catches up with the state of the table,  but it works for me.

                         

                        Does this match your scenario?  I think I found this solution somewhere in the showcase, if I recall.

                        • 9. Re: dataTable filter: focus lost when event=keyup
                          undermanager Newbie

                          @Tom - There is a set of meta-components including @body and others:

                           

                            render="tableId@column"

                            render="tableId@row"

                            render="tableId@body"

                            render="tableId@header"

                            render="tableId@footer"

                            render="cellId"

                           

                          You can also use constructs like these:

                           

                            render="tableId:rows(myBean.myRowsSet)"

                            render="tableId:rows(myBean.myRowsSet):cellId"

                           

                          There is also this EL-based construct:

                           

                            render="tableId:#{@rows(myBean.myRowsSet)}"

                           

                          In the above example, @rows takes a collection of row keys.

                           

                          DISCLAIMER - I have tried some of these successfully, but I never figured out how to refer to a cellId.  I found these documented in a presentation from Max Katz, if I recall.

                          • 10. Re: dataTable filter: focus lost when event=keyup
                            Quanlin Chen Newbie

                            Actually, I'm using an extended data table, so I'm not sure if that's still a problem of the basic data table with scrolloer at the bottom of the table, according to your post, not likely to be an issue. And I've also found a work around or just my thought to resolve this problem, when you trigger the key up event, call a js function to reset the focus to the end of the input, if you are not using the @body to partial refresh the table, then you need to copy and paste the content of the input back to the text field, then set the focus. Here is the code I found from stackflow I guess,

                             

                            function setCaretToEnd (e) {

                                var control = $((e.target ? e.target : e.srcElement).id);

                                if (control.createTextRange) {

                                    var range = control.createTextRange();

                                    range.collapse(false);

                                    range.select();

                                }

                                else if (control.setSelectionRange) {

                                    control.focus();

                                    var length = control.value.length;

                                    control.setSelectionRange(length, length);

                                }

                                control.selectionStart = control.selectionEnd = control.value.length;

                            }

                             

                            this will help to resolve the problem, but there could be better solutions, I just don't have time to take a look at the implementation of the extended data table tag for now, not sure about the cause of that yet, hopefully somebody could tell me what the problem is, if it's really a bug, I kinda still like using pure jquery and js functions to interact with elements, another wrapper of jquery is really a pain for me, maybe I'm not getting used to it yet :-)

                             

                            last, thank you for providing other useful information upon this topic, that will help me to fulfill my other tasks and to get my life easier~