I am using an extendedDataTable from Richfaces 4. I want to show a detail-page for the element in a row when the user clicks it. Therefore I have added something like
onrowclick="showDetails(#{item.id})"
to the table. This triggers a corresponding <a4j:jsFunction/> tag. This is working so far.
However, one of the columns has a commandLink in it (for switching to an edit-view of the details). The link works in webkit-based browsers (Chrome/Safari). But IE and firefox only execute the onclick on the row. The commandlink doesn't work there.
Is it somehow possible to only set an oncolumnclick or the columns, that do not contain the commandlink? I havn't found a way to add an onclick-handler to specific columns (I am using rich:column for the columns.)
Or is there a better/cleaner/nicer way to achive the "click somewhere in the row to show details, click the link in the last column to show the edit view"-behaviour I am after?
Try putting this in your commandButton
onclick="Event.stop(event||window.event)"
My current workaround HACK is to not use the onrowclick but add a styleClass="clickable" to all my columns except the one with the link. In the first column, I added the following:
<h:outputText value="#{item.id}" style="display: none;" styleClass="id"/>
Then after the table I use the following jQuery:
<rich:jQuery selector=".myTable td.clickable" query="live('click', function(event) {
showDetails($(this).parent().children().children('.id').text());
});"/>
I really don't like this solution, but it is working fine so far.
I am still open for better solutions though :)
Related
I have a p:dataTable. In this table, I have a checkbox in a column. This is the code:
<p:selectBooleanCheckbox
value="#{var.selected}"
itemLabel="#{var.description}"
/>
After I add a row and update the whole table, the selected checkboxes after the row inserted have the checks shifted up! But it's only a graphical problem! The checkboxes that now appears unchecked are yet checked, because I show other things in the row if the checkbox is selected. On the contrary, the checkbox that now appear checked do not show the additional components.
I checked the html, and the classes and attributes that make them checked disappears. But debugging the backend I see that the in the list connected to the table, after the add, all the items have the expected value.
This is a minimal reproducible example:
https://ufile.io/6a60kxpn
I don't know why, but I solved putting process="#this" to the actionButtons. If someone can explain me why, I'll accept the answer.
I'm currently working with a <p:dataTable> (from PrimeFaces 5.2) with many columns, and as I approach the width of the datatable's parent container, PrimeFaces starts hiding columns; unfortunately it seems to be the most important column (first on the left, a <p:datePicker>).
I've tried assigning that column a priority="1" and the other columns priority="3" as described on the ShowCase site, but the first column is still hidden.
In addition to just nesting the datatable within a <p:tabView> I've tried making the dataTable scrollable via scrollable="true" and assigning a width, or also try wrapping the datatable within a <p:scrollPanel> but the column was still being hidden in either case.
When I remove enough columns (from the right-most of the table), the hidden column will again reappear.
I'm interested in a solution that is not tied/hard-coded to a specific column, as I've run into this same issue on the 2nd column, or 3rd, depending on the resolution or browser width...I want to be sure that my users are seeing everything that was coded into the datatable, even if that means they have to scroll, rather than having a dynamic function suppress values unbeknownst to the user or myself.
Basically, I recommend to add tableStyle="width:auto" to a <p:datatable> so that you do not have to deal with the single columns width. Primefaces will handle it for you dynamically depending on the length of the column entry.
I have a dataTable on JSF that has the following column:
<ice:column style="width:25px;">
<ice:selectBooleanCheckbox value="#{historyBean.checked[mapEntry2.id]}" partialSubmit="true" id="playlist-select" style="width:25px;">
</ice:selectBooleanCheckbox>
</ice:column>
As you can see it's formed by checkboxes that are bound to an map where keys are ids and values are booleans.
It all works well pretty good. But sometimes the dataTable can have as many as a few thousand rows, and then, when a user checks or unchecks one of the checkboxes, the partialSubmit starts to get sluggish.
What I want, at the end of the day, is to perform an operation on the server on the data of each selected row. So far I'm using the partialSubmit and a map on the server to store the Ids of the selected data.
How can I make the check/uncheck operation be reflected faster on the server? Any clues?
Thank you.
When I add a row from "Create.jsf" page and I go to "List.jsf" to see the datatable I get the same result before adding the row.
I have two solutions :
1 - I must clean browser cache everytime I want to see the new row or add a button to update the datatable.
Or I change the Controller from SessionScope to RequestScope (it works but it's not a good idea because it takes a lot of time to load the list everytime).
any other solution please ?
Thank you :)
I'm trying to achieve the well known feature of being able to select a datatable's row by using a radio button.
I have followed this blog:
http://balusc.blogspot.com/2006/06/using-datatables.html#SelectRowByRadioButton
It works perfectly if there is one datatable on the form, but when I add another one (even if it's placed on other form), and try to select a row there, the radio button gets selected then instantly unselected. The data is correctly set on the backing bean though.
Any ideas about how to extend the results of the above blog on more than one datatable?
Thank you
That script will group all radio buttons with the same component ID in the same form. So to fix your particular problem, put the other data table in a different form or give the other <h:selectOneRadio> a different ID.