I have data table is filled dynamically with records.I add ajax request on that data table on rowEdit event.
I want on the method that handle rowEdit event in the back bean to check on some criteria and if it true don't edit this row
i am using PF 3.1
thanks
<p:dataTable id="itemDT" var="item" value="#{itemView.items}" selectionMode="multiple"
selection="#{itemView.selectedItems}"
rowKey="#{item.Id}">
<p:ajax event="rowEdit"
listener="#{itemView.onRowEdit}" />
<p:column headerText="Input three">
<h:outputText value="#{item.inpt3}" />
</p:column>
<p:column headerText="Input four">
<h:outputText value="#{item.inpt4}" />
</p:column>
</p:dataTable>
and the back bean
#ManagedBean(name="itemView")
#ViewScoped
public class ItemView{
private ItemModel selectedItems[];
// getters and setters for selectedItems
private List<ItemModel> items;
// getters and setters for items
public void add(){
// add item to i.e database
}
public void insertRecord(){
// add itemModels to items list
}
public void onRowEdit(RowEditEvent event) {
//check if criteria then cancel editing
}
}
Related
I need to combine Drag and Drop and Reorder on a DataTable row. I know that there are ways to do this on different columns (like one column for the reorder, the other one for Drag and Drop), but I need to do it on one Element.
I tried different ways, but nothing worked. The Problem is, that once the reordering is triggered, I can't drop it in the area. It always returns to the end of the table.
Getting the mouse position wouldn't work, because i need to make it responsive and usable for mobile devices.
HTML:
<p:fieldset id="availableCarsField" legend="Available Cars">
<p:dataTable id="availableCars"
var="car"
widgetVar="widgetVarAvailableCars"
draggableRows="true"
value="#{dndCarsView.cars}">
<p:column id="dragColumn"style="width:20px;">
<h:outputText id="test" value="#{car.id}"/>
<p:draggable helper="clone" revert="true"/>
</p:column>
</p:dataTable>
</p:fieldset>
<!-- ........................... DROP ...........................-->
<p:fieldset id="selectedCars" legend="Selected Cars">
<p:outputPanel id="dropArea">
<h:outputText value="!!!Drop here!!!"
rendered="#{empty dndCarsView.droppedCars}"
style="font-size:24px;"/>
<p:dataTable id="selectedCarsTable"
var="car"
value="#{dndCarsView.droppedCars}"
rendered="#{not empty dndCarsView.droppedCars}">
<p:column headerText="Id">
<h:outputText value="#{car.id}"/>
</p:column>
</p:dataTable>
</p:outputPanel>
</p:fieldset>
<p:droppable for="selectedCars"
tolerance="touch"
activeStyleClass="ui-state-highlight"
onDrop="handleDrop"
datasource="availableCars">
<p:ajax listener="#{dndCarsView.onCarDrop}"
process="#form"
update="dropArea availableCars"/>
</p:droppable>
JS:
function handleDrop(event, ui) {
var droppedCar = ui.draggable;
droppedCar.fadeOut('fast');
}
Bean (in case it's required):
public class DNDCarsView implements Serializable {
private List<Car> cars;
private List<Car> droppedCars;
#PostConstruct
public void init() {
cars = createCars(9);
droppedCars = new ArrayList<>();
}
public List<Car> createCars(int size) {
List<Car> list = new ArrayList<>();
for (int i = 0; i < size; i++) {
list.add(new Car("" + i, "Brand" + i, i * 2000, "Color" + i));
}
return list;
}
public void onCarDrop(DragDropEvent ddEvent) {
Object car = ddEvent.getData();
droppedCars.add((Car) car);
cars.remove(car);
}
public void onReorder(ReorderEvent event) {
Car car = cars.get(event.getFromIndex());
cars.add(event.getToIndex(), car);
cars.remove(event.getFromIndex());
}
//Getter & Setter
}
Is there anyway to combine these two and get this running?
Thanks in advance
Edit:
I want to reorder the rows inside the DataTable and also be able to drop the dragged row into the fieldset.
Primefaces 6.2.12
JSF 2.2
Edit 2:
After month of trying I haven't found a good solution for my problem. Just thought, that I might share this here, if someone else deals with this problem.
I seems like there is no way to realize Drag&Drop in combination with columnreorder on one element (in my case p:column). The problem is, that always the reorderevent is triggered when dragged. When dropped into the droparea, the dragId of the dragged element is null (because we started with the reorder-event but ended with the event for drag and drop)
Due to the fact that I wasn't allowed to change anything which wasn't my class I didn't manage to fix this. I ended up to separate the actions onto two elementes. So I made a drag handle where the user can drag the element into the droparea and realized the reorder on the column.
If I was blind and someone knows an answer to this feel free to write. Maybe it might help someone. At least it would be interesting whether there is a way to do so
I'm looking to trigger a notification bar on checkbox click using <p:ajax>. The notification bar would have the save option to save data in the database. The update atribute within <p:ajax> doesn't seem to work. It's been quite a research, but couldn't derive at a solution. Am I missing something here ? I'm using JSF 2.1+Primefaces 3.5. Any help would be much appreciated.
xhtml page
<p:column headerText="#{msgs.ref}" styleClass="menuHeader textAlignLeft">
<p:notificationBar widgetVar="customSaveBar" position="top" styleClass="saveBar warningBar textAlignCenter" style="height: 25px;padding-top: 0; padding-bottom: 0;" effect="none" rendered="true">
<h:outputText value="There are pending changes on the page." styleClass="warningText"/>
<h:outputText value=" "/>
<p:commandLink action="#{abcDashboardBean.abcDTOValues}"
onclick="skipPageRedirectWarning = true;showPleaseWait();"
styleClass="warningText" id="saveFromBar"
onsuccess="customSaveBar.hide()"
oncomplete="placeRemoveIcon();"
update="#form"
process="#form"
value="#{msgs.save}"/>
</p:notificationBar>
<p:selectBooleanCheckbox styleClass="margin_left_10" value="#{abcDto.refBl}"
rendered="#{!authorizationBean.userADMIN or !authorizationBean.userPM or !authorizationBean.userINDM}">
<p:ajax event="click" partialSubmit="true" update="customSaveBar"></p:ajax>
</p:selectBooleanCheckbox>
</p:column>
abcDashboardBean.java
public Map<Object, Boolean> getAbcDTOValues(){
Map<Object, Boolean> map = new LinkedHashMap<Object, Boolean>();
//fill the map with the items defaulted to unchecked
for (AbcDTO abcDTO: abcList){
map.put(abcDTO.getPpcCode(), Boolean.FALSE);
}
Abc abc1 = dataAccessEjbService.find(Abc.class, abc.getId());
saveAbcRefChanges(map, abc1);
return map;
}
public void saveAbcRefChanges(Map<Object, Boolean> map, Abc abc) {
for (Map.Entry<Object, Boolean> entry : map.entrySet()) {
if (entry.getValue().equals(true) && abc != null) {
abc.setReferenceBl(true);
} else {
abc.setReferenceBl(false);
}
}
dataAccessEjbService.update(abc);
}
AbcDTO.java
private boolean refBl;
// getters + setters
I need to do a user permissions grid hopefully using a primefaces datatable. For each row: Column one is a class name, Column two is a checkbox for permission for one of two subclasses. Column three is a checkbox for permission for the other subclass. The headers of columns two and three must have the subclass title plus a checkbox, the toggles all the other checkboxes in that subclass. I think I can use two or three datatables side by side inside a scrollpanel but I'm having issues lining up the column text to the left of the checkbox (it wants to go on top).
Another thing I tried was to just have a selectbooleancheckbox for each row for each subclass and then have a listener for the column header checkbox that iterates through each item in the list and set the value accordingly. The issue I have here is that when I update the datatable, then all the checkboxes get stuck in the 'checked' state.
This is what my grid:
----------------------------------------|
| Class | [] subclass 1 | [] subclass 2 |
| Cls A | [] | [] |
| Cls B | [] | [] |
| Cls n | [] | [] |
There are 'n' possible rows to this table.
Does anyone have examples of what I want to do that they can point me to?
Thanks,
To start of, make sure you have some kind of model where you can bind the checkboxes to. For example:
public class MyObject {
private String name;
private boolean bool1;
private boolean bool2;
// Add getters and setters
public MyObject(String name, boolean bool1, boolean bool2) {
this.name = name;
this.bool1 = bool1;
this.bool2 = bool2;
}
}
Then, in your bean add a list of booleans to store the state of the checkboxes in the header:
private List<MyObject> myObjects = new ArrayList<>();
private List<Boolean> headerChecks = new ArrayList<>();
// Add getter and setter
#PostConstruct
private void init() {
myObjects.add(new MyObject("Object 1", false, true));
myObjects.add(new MyObject("Object 2", false, false));
myObjects.add(new MyObject("Object 3", true, true));
headerChecks.add(false);
headerChecks.add(false);
}
Now, in the checkbox column header have a checkbox with a listener. In the listener set the state of all checkboxes of that column. Then update only the checkboxes in the column. To do so I've used a selector selecting elements with a specific class: #(.bool1).
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox id="bool1" value="#{myBean.headerChecks[0]}">
<p:ajax listener="#{myBean.headerClickListener}"
update="#(.bool1)"/>
</p:selectBooleanCheckbox>
<p:outputLabel for="bool1" value="Bool 1"/>
</f:facet>
<p:selectBooleanCheckbox value="#{item.bool1}" styleClass="bool1"/>
</p:column>
In listener the state of the corresponding row checkboxes is set:
public void headerClickListener(AjaxBehaviorEvent event) {
for (MyObject myObject : myObjects) {
if (event.getComponent().getId().equals("bool1")) {
myObject.setBool1(headerChecks.get(0));
}
if (event.getComponent().getId().equals("bool2")) {
myObject.setBool2(headerChecks.get(1));
}
}
}
The full table:
<p:dataTable id="dataTable" value="#{myBean.myObjects}" var="item">
<p:column headerText="Name">
<h:outputText value="#{item.name}"/>
</p:column>
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox id="bool1" value="#{myBean.headerChecks[0]}">
<p:ajax listener="#{myBean.headerClickListener}"
update="#(.bool1)"/>
</p:selectBooleanCheckbox>
<p:outputLabel for="bool1" value="Bool 1"/>
</f:facet>
<p:selectBooleanCheckbox value="#{item.bool1}" styleClass="bool1"/>
</p:column>
<p:column>
<f:facet name="header">
<p:selectBooleanCheckbox id="bool2" value="#{myBean.headerChecks[1]}">
<p:ajax listener="#{myBean.headerClickListener}"
update="#(.bool2)"/>
</p:selectBooleanCheckbox>
<p:outputLabel for="bool2" value="Bool 2"/>
</f:facet>
<p:selectBooleanCheckbox value="#{item.bool2}" styleClass="bool2"/>
</p:column>
</p:dataTable>
Please note that this is all quite WET. You might want to DRY stuff up a bit.
Result:
I need to do a double click on a p:inputText inside a p:dataTable so that it will bring me to another page and launch the details. Is it possible to call backing bean method from Primefaces p:inputText ondblclick?
p:inputText is a normal input in the end, you can use jQuery to register ondblclick on it, then you can call a p:remoteCommand to reach your bean.
I assume you would have multiple inpuText since you have a dataTable.
xhtml
<p:dataTable var="car" value="#{bean.cars}">
<p:column headerText="Model">
<p:inputText value="#{car.model}" styleClass="dbClickInput" />
</p:column>
</p:dataTable>
<p:remoteCommand name="callDetailsCommand"
actionListener="#{bean.callDetails()}" />
<script>
$(document).ready(function() {
$('.dbClickInput').dblclick(
function() {
callDetailsCommand([{name: 'carModelValue', value: $(this).val()}]);
}
);
});
</script>
Bean
public void callDetails() {
FacesContext context = FacesContext.getCurrentInstance();
Map map = context.getExternalContext().getRequestParameterMap();
String carModelValue = (String) map.get("carModelValue");
}
Hope this helps.
I have issue when trying to make command link from inside p:galleria component
The problem is despite the fact at run time the link value value="Show present #{present.name} #{present.presentId}" contains the correct value of the id as example value="Show present Foo 1" , when pressing the command link it sends the wrong id of the second object every time
<h:form>
<p:galleria value="#{presentBean.allPresentList}" var="present" panelWidth="500" panelHeight="313" showCaption="true">
<f:facet name="content">
<h:commandLink value="Show present #{present.name} #{present.presentId}" action="pretty:present" actionListener="#{presentBean.setPresentObj}">
<f:attribute name="present" value="#{present.presentId}"/>
</h:commandLink>
</f:facet>
</p:galleria>
</h:form>
#ManagedBean(name="presentBean")
#SessionScoped
public class PresentBean implements Serializable{
ArrayList<Present> allUserPresentList = new ArrayList<Present>();
#PostConstruct
private void usersPresent(){
PresentDao presentDao = new PresentDaoImpl();
allPresentList = (ArrayList<Present>) presentDao.findAllPresents();
}
public ArrayList<Present> getAllUserPresentList() {
return allUserPresentList;
}
public void setAllUserPresentList(ArrayList<Present> allUserPresentList) {
this.allUserPresentList = allUserPresentList;
}
private String presentId ;
public String getPresentId() {
return presentId;
}
public void setPresentId(String presentId) {
this.presentId = presentId;
}
public void setPresentObj(ActionEvent ev){
Object presentOb = ev.getComponent().getAttributes().get("present");
if(presentOb != null){
this.presentId = (String) presentOb;
}else{
presentId = null ;
}
}
}
You need to use a setPropertyActionListener instead of <f:attribute name="present" value="#{present.presentId}"/> as the f:attribute tag is only evaluated when the component is created (only once) not when the component generates html based on the iterated rows.
So you'll need to instead use:
<f:setPropertyActionListener target="#{presentBean.presentId}" value="#{present.presentId}" />
That will set the value of the presentId in your managed bean, so in your action method you can just access the presentId itself already without having to work it out.
Alternatively if you're using a later version of JSF (using Servlet 3.0 or above), then you could create a method in the managed bean which takes the presentId or even the present object as a parameter
e.g. in your managed bean:
public void myAction(Present p){
//do whatever you want with the Present object
}
and in your .xhtml:
<h:commandLink value="Show present #{present.name} #{present.presentId}" actionListener="#{presentBean.myAction(present)}">
</h:commandLink>