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.
Editable DataTable
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
You can add checkbox inside a p:column for this.
That was the first thing I tried:
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.
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 work as expected on a <h:dataTable>
Regards,
Diego.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Hi, what do you mean by you can't change it, can't you click checkbox.
Can you provide the full datatable code?
Can you provide the full datatable code?
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.
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.
Here is roles.xml
There are a main form and two dialogs, to add or edit a role row.
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>
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.
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.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
I remember fixing a related problem, which version are you using?
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
We have some checkboxes in a selection enabled datatables as well, I'll double check.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 56 guests