Page 1 of 2
Editable DataTable
Posted: 19 Apr 2010, 22:07
by maipucino
Hi,
I am trying to implement a datatable with some editable columns, mostly checkboxes. I searched forum but couldn't find any related topic.
Any hint ?.
Regards,
Diego.
Re: Editable DataTable
Posted: 20 Apr 2010, 18:56
by cagatay.civici
You can add checkbox inside a p:column for this.
Re: Editable DataTable
Posted: 20 Apr 2010, 20:31
by maipucino
That was the first thing I tried:
Code: Select all
<p:column>
<f:facet name="header">
<h:outputText value="Create" />
</f:facet>
<h:selectBooleanCheckbox value="#{roleModule.createEnabled}"
valueChangeListener="#{roleView.toggleReadEnabled}" />
</p:column>
It renders ok, but I can't change it. I must be missing some config.
It work as expected on a <h:dataTable>
Regards,
Diego.
Re: Editable DataTable
Posted: 24 Apr 2010, 01:11
by cagatay.civici
Hi, what do you mean by you can't change it, can't you click checkbox.
Can you provide the full datatable code?
Re: Editable DataTable
Posted: 27 Apr 2010, 19:36
by maipucino
Sorry for the delay.
When I click over checkbox, it doesn't change neither there is any visual feedback on clickling. It does when in a plain <h:datatable>.
I can't post the code right now. I will do it later if I can access my GIT repository from here or tomorrow when arrive to office.
Re: Editable DataTable
Posted: 28 Apr 2010, 05:47
by maipucino
Here is roles.xml
Code: Select all
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui"
contentType="text/html">
<h:head>
<style type="text/css">
.label {
text-align: right;
width:30%;
padding:4px;
}
.value {
width:70%;
padding:4px;
}
.grid {
width:100%;
}
.error {
color: red;
}
.outputLabel {
font-weight: bold;
}
</style>
</h:head>
<h:body>
<h:form id="mainForm">
<center>
<table border="0">
<tr>
<td align="center" style=" font-weight: bold">
Roles
</td>
<td align="center" style=" font-weight: bold">
Available Modules
</td>
<td align="center" style=" font-weight: bold">
Modules by Role
</td>
</tr>
<tr>
<td colspan="1" align="center" valign="top">
<p:dataTable var="role" id="roleGrid"
value="#{roleView.roles}"
scrollable="true"
height="240px"
width="240px"
style="font-size: 12px; width: 100%"
selection="#{roleView.selectedRole}"
selectionMode="single"
emptyMessage="#{roleView.noResults}"
errorMessage="#{roleView.errorLoadingTable}"
loadingMessage="#{roleView.loadingTable}"
update="roleModuleGrid, :editForm:editDialog">
<p:column sortBy="#{role.roleId}" resizable="true">
<f:facet name="header">
<h:outputText value="Id#" />
</f:facet>
<h:outputText style=" right: 0px" value="#{role.roleId} " />
</p:column>
<p:column sortBy="#{role.roleName}" resizable="true">
<f:facet name="header">
<h:outputText value="Role Name" />
</f:facet>
<h:outputText value="#{role.roleName} " />
</p:column>
<p:column sortBy="#{role.roleEnabled}" resizable="true">
<f:facet name="header">
<h:outputText value="Enabled" />
</f:facet>
<h:outputText value="#{role.roleEnabled} " />
</p:column>
</p:dataTable>
</td>
<td align="center" valign="top" style=" padding-left: 20px">
<p:dataTable var="module" id="moduleGrid"
value="#{roleView.modules}"
scrollable="true"
rows="5"
height="240px"
width="240px"
style="font-size: 12px; width: 100%"
selection="#{roleView.selectedModule}"
selectionMode="single"
emptyMessage="#{roleView.noResults}"
errorMessage="#{roleView.errorLoadingTable}"
loadingMessage="#{roleView.loadingTable}" >
<p:column sortBy="#{module.moduleId}" resizable="true">
<f:facet name="header">
<h:outputText value="Id#" />
</f:facet>
<h:outputText value="#{module.moduleId} " />
</p:column>
<p:column sortBy="#{module.moduleName}" resizable="true">
<f:facet name="header">
<h:outputText value="Module Name" />
</f:facet>
<h:outputText value="#{module.moduleName} " />
</p:column>
<p:column sortBy="#{module.moduleEnabled}" resizable="true">
<f:facet name="header">
<h:outputText value="Enabled" />
</f:facet>
<h:outputText value="#{module.moduleEnabled} " />
</p:column>
</p:dataTable>
</td>
<td align="center" valign="top" style=" padding-left: 20px">
<p:dataTable var="roleModule"
id="roleModuleGrid"
value="#{roleView.roleModules}"
scrollable="true"
rows="5"
height="240px"
width="390px"
style="font-size: 12px; width: 100%"
selection="#{roleView.selectedRoleModule}"
selectionMode="single"
emptyMessage="#{roleView.noResults}"
errorMessage="#{roleView.errorLoadingTable}"
loadingMessage="#{roleView.loadingTable}" >
<p:column sortBy="#{roleModule.module.moduleName}" resizable="true">
<f:facet name="header">
<h:outputText value="Role - Modules" />
</f:facet>
<h:outputText value="#{roleModule.module.moduleName}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Create" />
</f:facet>
<h:selectBooleanCheckbox value="#{roleModule.createEnabled}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Read" />
</f:facet>
<h:selectBooleanCheckbox value="#{roleModule.readEnabled}" valueChangeListener="#{roleView.myValueChangeListener}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Update" />
</f:facet>
<h:selectBooleanCheckbox value="#{roleModule.updateEnabled}" valueChangeListener="#{roleView.updateValueChangeListener}">
<p:ajax event="change" actionListener="#{roleView.toggleCreateCheckbox}" update="roleModuleGrid"/>
</h:selectBooleanCheckbox>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Delete" />
</f:facet>
<h:selectBooleanCheckbox value="#{roleModule.deleteEnabled}" />
</p:column>
</p:dataTable>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td align="right">
<p:commandLink oncomplete="addNewRole.show()" title="Add">
<p:graphicImage value="/images/icons/edit_add.png" style="padding-right: 20px; padding-left: 20px;border:0;"/>
</p:commandLink>
</td>
<td>
<p:commandLink oncomplete="editRoleDlg.show()" title="Refresh">
<p:graphicImage value="/images/icons/quick_restart.png" style="padding-right: 20px; padding-left: 20px;border:0;"/>
</p:commandLink>
</td>
<td align="left">
<p:commandLink oncomplete="editRoleDlg.show()" title="Edit">
<p:graphicImage value="/images/icons/edit.png" style="padding-right: 20px; padding-left: 20px;border:0;"/>
</p:commandLink>
</td>
</tr>
</table>
</td>
<td align="center">
<p:commandLink title="Add Selected Module to Role" update="roleModuleGrid" actionListener="#{roleView.addRoleModule}">
<p:graphicImage value="/images/icons/1rightarrow.png" style=" padding-right: 20px; padding-left: 20px;border:0;"/>
</p:commandLink>
</td>
<td align="center">
<table>
<tr>
<td>
<p:commandLink title="Remove Selected Module from Role" update="roleModuleGrid" actionListener="#{roleView.removeRoleModule}">
<p:graphicImage value="/images/icons/1leftarrow.png" style="padding-right: 20px; padding-left: 20px;border:0;"/>
</p:commandLink>
</td>
<td>
<p:commandLink title="Enable / Disable Selected Role-Module" update="roleModuleGrid" actionListener="#{roleView.saveAllow}">
<p:graphicImage value="/images/icons/checkedbox.png" style=" padding-right: 20px; padding-left: 20px;border:0;"/>
</p:commandLink>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</h:form>
<h:form id="editForm">
<p:dialog id="editDialog" widgetVar="editRoleDlg" fixedCenter="true" modal="true"
draggable="false" header="Edit a Role" footer="Tinet " effect="FADE" effectDuration="0.3">
<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
<h:outputText value="* Id# : " />
<h:inputText value="#{roleView.selectedRole.roleId}" required="true" label="RoleId"/>
<h:outputText value="* Name : " />
<h:inputText value="#{roleView.selectedRole.roleName}" required="true" label="RoleName"/>
<h:outputText value="Enabled: " />
<h:selectBooleanCheckbox value="#{roleView.selectedRole.roleEnabled}" />
<h:panelGrid columns="1" ></h:panelGrid>
<h:panelGrid columns="2">
<p:commandLink oncomplete="editRoleDlg.hide()" title="Add" actionListener="#{roleView.updateRole}" update=":mainForm:roleGrid">
<p:graphicImage value="/images/icons/button_ok.png" style=" background-color: gray; padding-right: 20px; padding-left: 20px; border:0;"/>
</p:commandLink>
<p:commandLink oncomplete="editRoleDlg.hide()" title="Cancel">
<p:graphicImage value="/images/icons/button_cancel.png" style=" background-color: gray; padding-right: 20px; padding-left: 20px; border:0;"/>
</p:commandLink>
</h:panelGrid>
</h:panelGrid>
</p:dialog>
</h:form>
<h:form id="addForm">
<p:dialog id="addRole" widgetVar="addNewRole" fixedCenter="true" modal="true"
draggable="false" header="Add a Role" footer="Tinet" effect="FADE" effectDuration="0.3" >
<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
<h:outputText value="* Id# : " />
<h:inputText value="#{roleView.rolId}" required="true" label="RoleId"/>
<h:outputText value="* Name : " />
<h:inputText value="#{roleView.rolName}" required="true" label="RoleName"/>
<h:outputText value="Enabled: " />
<h:selectBooleanCheckbox value="#{roleView.rolAllow}" />
<h:panelGrid columns="1" ></h:panelGrid>
<h:panelGrid columns="2" >
<p:commandLink oncomplete="addNewRole.hide()" title="Add" actionListener="#{roleView.addRole}" update=":mainForm:roleGrid">
<p:graphicImage value="/images/icons/button_ok.png" style=" background-color: gray; padding-right: 20px; padding-left: 20px; border:0;"/>
</p:commandLink>
<p:commandLink oncomplete="addNewRole.hide()" title="Cancel">
<p:graphicImage value="/images/icons/button_cancel.png" style=" background-color: gray; padding-right: 20px; padding-left: 20px; border:0;"/>
</p:commandLink>
</h:panelGrid>
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>
</f:view>
There are a main form and two dialogs, to add or edit a role row.
Re: Editable DataTable
Posted: 05 May 2010, 19:42
by maipucino
I have found that:
If a <p:datatable ...> has selectionMode configured, like selectionMode="single", <h:selectBooleanCheckbox> in a column doesn't work as expected. The value is shown but can't be changed, checkbox doesn't respond when clicking on it.
Removing the config, making <p:datatable> not row selectable, makes <h:selectBooleanCheckbox> start working again.
Any hint ?. That makes sense ?.
Regards,
Diego.
Re: Editable DataTable
Posted: 07 May 2010, 09:36
by cagatay.civici
I remember fixing a related problem, which version are you using?
Re: Editable DataTable
Posted: 07 May 2010, 13:20
by maipucino
It is 2.0.2-SNAPSHOT. If you need I do some tests, just let me know.
Regards,
Diego.
Re: Editable DataTable
Posted: 09 May 2010, 09:57
by cagatay.civici
We have some checkboxes in a selection enabled datatables as well, I'll double check.