Make editable rows in Datatable - jsf

I have list of rows displayed on the screen. These rows are iterated using the JSF datatable component. Now my requirement is to edit any particular row which user clicked.
Is there any way to make the fields editable while user clicking the row. Then user will fill the details and save it.
Any suggestions would be appreciated.

Creating editable data tables is very easy with jsf. Here is a good tutorial on this. But "making it editable when user clicks on it" is not supported out of the box. And this is where JSF shines, you just need to find for a JSF component (open source or commercial) compatible with your JSF (1.x or 2.x) version and start using it.
My first suggestion for you is to check and see if PrimeFaces provides this kind of component. Here is the component you are looking for.

Related

Primefaces fetch dropdown values on show

I have a strange situation where one needs to dynamically populate dropdown values. The best idea I have come up with is creating a button, which triggers ajax request that fetches new dropdown values and on complete updates the dropdown and displays it.
I was wondering if there is any other more elegant way of handling situations like this. I am using the latest primefaces version 11.0.0.
I suggest to use the p:autoComplete component with the dropdown attribute set to true instead. It allows you to get the values when the button is clicked or when a query is typed. You don't need to take care of updating the component yourself. The only thing you need to do is have a completeMethod in your bean or have a completeEndpoint (REST endpoint).
With PrimeFaces 12 you can even (re)use a LazyDataModel as a suggestions provider.

jsf add and remove the items from onel ist box to another list box

I am new to JSF and I wanted to create a small add and remove functionality to list box from another list box.
For example I have one list box and contains values A,B,C and when I select the value from list one and click add it should
be added to the right side of the list and should be removed from the right side list box and added bakc to the left side of the list box. How do create the layout for that? Any sample code is available for that? I am using JSF primefaces. please find the attached screen shot.
The "PickList" Primefaces feature is designed to fit exactly this requirement.
Take a look: Primefaces - PickList - Showcase
You can also use this one, builtin primefaces listboxes- http://www.primefaces.org/showcase/ui/data/pickList.xhtml

jsf popupwindow with a datatable

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.

Help needed to create a Search page using JSF, EJB, JPA & Primefaces with Pagination

I am trying to make a search page using JSF, EJB, JPA & Primefaces with Pagination from an Oracle database table.
The page has two regions (1) region for entering search parameters
(2) region with a datatable showing the search result. This datatable supports pagination.
I have used standard code generated using Netbeans IDE, but dont know how to pass the parameters while clicking the search button and show the results based on the search in the datatable.
Please help me with sample code.
Thanks in advance.
For the input, just use a normal form like as you've created in a hello world tutorial. For presentation and pagination of the results, use PrimeFaces LazyDataModel. See also their showcase example.

JSF How to dynamic add new row to datatable

I am currently doing an online test system, I want allow admin to create a test and add in few question. I was thinking using datatable add in coloumn with textarea? how can i add new row? or is there any other suggestion to implement add new more questions.
Since you mentioned "admin", I think you probably mean you want to allow only users with certain rights to be able to add new question.
There are indeed more than one way to do it. It really depends on your requirements.
One example is you can add a [New Question...] h:commandButton in your page for users to navigate to another page for data entry. You may want to check whether the current user has the rights to navigate to the data entry page in the backing bean.
Then in the data entry page you have all your h:inputText, h:inputTextArea etc for users to enter their data/question. In this data entry page you can use a [Save] h:commandButton to submit the entered values, and then insert the submitted data in your backing bean.
If you preferred to use the add new row to datatable approach, BalusC has a very good write up in his blogspot http://balusc.blogspot.com/2006/06/using-datatables.html

Resources