-
1. Re: dataTable filter: focus lost when event=keyup
giberius May 15, 2011 7:33 AM (in response to giberius)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
giberius May 15, 2011 9:33 AM (in response to giberius)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 May 15, 2011 11:37 AM (in response to giberius)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 < "
/>
<
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
giberius May 16, 2011 12:46 PM (in response to ilya_shaikovsky)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 Oct 19, 2011 10:55 AM (in response to giberius)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
madhukarhere Nov 22, 2011 6:06 AM (in response to balamir)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 Jan 9, 2012 5:32 PM (in response to giberius)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 Jan 10, 2012 12:59 AM (in response to quanlin)@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 Jan 10, 2012 1:11 AM (in response to giberius)@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 Jan 10, 2012 3:09 PM (in response to undermanager)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~