Editable DataTable

UI Components for JSF
maipucino
Posts: 112
Joined: 19 Apr 2010, 22:04

19 Apr 2010, 22:07

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.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

20 Apr 2010, 18:56

You can add checkbox inside a p:column for this.

maipucino
Posts: 112
Joined: 19 Apr 2010, 22:04

20 Apr 2010, 20:31

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.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

24 Apr 2010, 01:11

Hi, what do you mean by you can't change it, can't you click checkbox.

Can you provide the full datatable code?

maipucino
Posts: 112
Joined: 19 Apr 2010, 22:04

27 Apr 2010, 19:36

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.

maipucino
Posts: 112
Joined: 19 Apr 2010, 22:04

28 Apr 2010, 05:47

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.

maipucino
Posts: 112
Joined: 19 Apr 2010, 22:04

05 May 2010, 19:42

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.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

07 May 2010, 09:36

I remember fixing a related problem, which version are you using?

maipucino
Posts: 112
Joined: 19 Apr 2010, 22:04

07 May 2010, 13:20

It is 2.0.2-SNAPSHOT. If you need I do some tests, just let me know.

Regards,
Diego.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

09 May 2010, 09:57

We have some checkboxes in a selection enabled datatables as well, I'll double check.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 19 guests