I am using Primefaces DataTable to display content in a grid. I want to reorder these rows using drag and drop(shuffle), I have tried jquery sortable, it works only ones, after that I need to refresh the browser.
Is there any way to implement that?
Thanks a lot
This feature is now available from PrimeFaces 5.0:
Usage is very simple by just enabling draggableRows option and also an optional rowReorder ajax behavior is provided getting a ReorderEvent with index information for flexibility.
Source : http://blog.primefaces.org/?p=3026
You can also have a look at the showcase here: http://www.primefaces.org/showcase/ui/data/datatable/reorder.xhtml
There is currently no way to have row-sorting with server side effects. You can achieve client side reordering using jQuery, but this is not stored on the server.
$('.ui-datatable tbody').sortable();
There is a discussion on the PrimeFaces forum.
There is also an issue about drag/drop capability in PrimeFaces' issue tracker. Note that the issue is closed as WontFix, so I guess you're out of luck.
Related
I am trying to generate a table dynamically using HtmlDataTable in JSF. When I am giving the number of rows and columns greater than 25 each, some of the cells are not getting populated only in IE and it's getting very slow. However, I can see the value when debugging the code using Firebug. It is working fine in Firefox and Chrome.
How is this caused and how can I solve it?
Internet Explorer is known to have an extremely poor table renderer. Especially when the columns and table nesting goes overzealous.
There's no other solution than making your table smaller by introducing lazy loading and pagination so that only 10~100 rows will be displayed at once. Add if necessary search filters. Additional benefit is that it's also much more user friendly. Google for example also doesn't show all the zillion website links in a monster table without filtering and pagination.
If you happen to use PrimeFaces, use <p:dataTable> with LazyDataModel.
See also:
Efficient JSF Pagination
Update as per the comments, there is not really other alternative if you can't change your server side code. Your best bet is probably to inform the enduser that s/he should be using a real browser instead.
E.g.
<script>
var ie = /*#cc_on!#*/false;
if (ie) {
window.location = 'some_page_which_recommends_different_browser.xhtml';
}
</script>
I'm interested is it possible to create tabs with Primefaces using this example?
The idea is to create dynamically loaded tabs and when I switch between pages to display "Loading" at the top right of the page. What are the usual ways is this case?
The example you reference in your question carries the answer to the question. Generally, you have two options
Primefaces ajaxStatus component is designed specifically for your use case and is also the same component used in the dynamic tab sample you linked (albeit the PF team neglected to reference/declare it in the sample markup for that example). It's the same component that is used to generate the "loading" pinwheel you see in that example
A more powerful/exotic option is the blockUi component that will achieve the same effect, albeit with a little more in terms of options and visual effect.
I have another Richfaces question which may seem rather weird. I am developing a web-based application, using Richfaces for a front-end, that allows users to create templates for certain documents. For example: the user is presented with a rich:editor component, which, perhaps, has certain text already typed in, but it also has an input for a date, or specific text. The date can be entered in rich:calendar, the text can be entered in rich:inplaceInput, but the main idea is to be able to place those components INSIDE the rich:editor. I was trying to find an example where it's used and couldn't. So, my question is: is it even possible? Can you place RichFaces components (and, maybe, Seam components) into rich:editor? If not, is there a something similar out there that allows the user to do this? Can Seam do that? The reason I'm asking about Seam is because it appears to have some template-friendly logic and can work along with JSF and Richfaces.
Thanks for your help
Essentially your asking if you can add HTML elements to a textarea tag, and have them work. Unfortunately, no you can't.
What I've done in the past for such things has been to either weave boilerplate text, with inplaceInput, and free form text areas, or to simply provide the needed fields above/beside/below the editor.
I have a form which one of it's fields is a code and description, also a button for opening a popup window that contains a list of all of the available codes.
when the user double clickes a row from that table i want to set these values to the code and description. - how can this be done?
Another question, I want to create this popup and table to be initialized dynamically - by that i mean that if i have a few forms in my application, when ever i have a field which has a description i want to be able to open this popup and to see the available list for that field. (every field can be from a diffrent table). is it possible to create something like that? if so, how?
Any help will be appritiated,
Thank's In Advance.
Yes, it is possible. Even more, many component libraries have ready to use popup/dialog components, such as RichFaces with <rich:popupPanel> and PrimeFaces with <p:dialog>.
If you do not want to use a component library for some reason, you would need to create a custom component for this which generates basically an absolutely positioned HTML <div> element with a CSS overlay which get shown/hidden by JS on a particular click/action. The HTML/CSS/JS part should be relatively simple if you are familiar with those languages. The JSF part is somewhat hard if you have never created a custom component before, but it should be possible with a composite component as well, so you could also just create one with pure XHTML. The updating/refreshing can just take place by the usual <f:ajax> means.
I have links and pictures related to these links on my page. I want to change the pictures everytime when onmouseover event occurred in the links. I want to do this in JSF.
A lot of Thanks to everyone.
You are looking specifically for JSF to do it, or you are open to other Javascript frameworks that provide a slick and easy solution on this? For example Jquery and Dojo etc may be easy to incorporate in your application and will give Rich UI effects.
On the other hand if you are looking at JSF specifically for these UI effects than probably I can try to think of some ways and let you know.
JSF isn't designed directly to do this; It's designed to give you the tools to do this yourself. In order to do this you would need to create a custom JSF component to do this and you would use Java script to do it.
You could possibly find a JSF framework that does this already (a4j, IceFaces, etc.) but this is such a simple and well documented JavaScript thing that just tossing a little Java script among your JSF is perfectly acceptable. However, if you don't want to reinvent the wheel, take a look at those other options.
Javascript solution:
Define onmouseover event on the commandLink tag calling some kind of javascript you may give link address from like onmouseover="doSomething('addressOfImage')" then in doSomething javascript method, first find the image, then set src attribute of a default image to given address.
JSF Solution:
You might want to use a4j for this.
Add a4j:support to link for onmouseover event then just rerender graphicImage component ofcourse you need to give value of graphicImage dynamically. There is an example of using a4j support below. You can add this a4j:support between your link tags for mouseonover event. Then manage everything on backing bean to handle which image to be displayed.
example
<h:graphicImage id="imageToBeRendered" value="#{myBean.imageAddress}"/>
Just google a4j if you have no idea.