Geek Answers Handbook

PrimeFaces DataTable - enable / disable components based on row selection

I am using DataTable PrimeFaces to display records (randomly generated in a sandbox application). I use the checkbox option. The main DataTable works fine, including the Delete and Cancel buttons (which functionality is available only in the confirmation dialog). I am trying to add functionality to a DataTable so that when a checkbox is selected, the other controls on the page are enabled or disabled based on the selection.

In other words, if no line is selected (check boxes are unchecked) some buttons and / or menu items are disabled or not displayed. Selecting one or more rows using a checkbox should enable or display controls. I tried using the built-in JavaScript event handlers, but I cannot do this work.

Now my page displays the columns of DataTable 5: checkbox selection column, first name, last name, age. I did something like this work in another sandbox using simple Boolean flags and updating a boolean with an onclick event. Unfortunately, it looks like there was nothing like this in this DataTable, or if I don't know how to implement it.

My index page:

<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <body>

        <ui:composition template="./newTemplate.xhtml">


            <ui:define name="content">
            <h:form>

                <p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10"
                     selection="#{tableBean.selectedNames}">

                <f:facet name="header">
                    Customer List
                </f:facet>


                <p:column selectionMode="multiple" />

                <p:column headerText="Cust ID">
                    <h:outputText value="#{data.id}" />
                </p:column>

                <p:column headerText="First Name">
                    <h:outputText value="#{data.firstName}" />
                </p:column>

                <p:column headerText="Last Name">
                    <h:outputText value="#{data.lastName}" />
                </p:column>

                <p:column headerText="Age">
                    <h:outputText value="#{data.age}" />
                </p:column>

                <f:facet name="footer">                        
                    <p:commandButton update="deleteList" value="Delete" oncomplete="deleteDlg.show()" />
                </f:facet>

            </p:dataTable>

            <p:dialog header="Delete Selected Records" modal="true" widgetVar="deleteDlg"
                      >

                <h:outputText value="You are about to permanently delete records." /><br /><br />
                <h:outputText value="Are you sure you want to continue?" /><br /><br/>

                <h:commandButton value="CANCEL" action="#{tableBean.cancelDelete()}" /> <h:commandButton value="Delete" action="#{tableBean.deleteNames()}" />
            </p:dialog>

        </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>

The code for my part is a bean, which may matter:

    public void deleteNames()
    {
        for(Data person : selectedNames)
        {
            data.remove(person);
        }   
    }

    public void cancelDelete()
    {
        for(Data name : selectedNames)
            selectedNames = null;
    }

    public void onRowSelect(SelectEvent event)
    {
        if(selectedNames == null || selectedNames.length < 1)
            setDisable(true);
        else
            setDisable(false);
    }

public boolean isDisable() {
        if(selectedNames == null || selectedNames.length < 1)
            disable = true;
        else
            disable = false;
        return disable;
    }

    public void setDisable(boolean disable) {
        this.disable = disable;
    }
+5
3

, , .

  • datatable.js primefacess
  • datatable.js selectRowWithRadio, RowWithRadio, .   
      
        PrimeFaces.widget.DataTable.prototype.selectRowWithCheckbox = function(element) {
        ...
        ...
        //save state
        this.writeSelections();

        // added to add instant row selection 
        this.fireRowSelectEvent(rowId);
        // end
    }
  • javascript
    <p:datatable widgetVar="wv1" id='mydatatable' ....>
...
<p:datatable/>
<script type="text/javascript">
    if(!wv1_main.cfg.onRowSelectUpdate){
        wv1.cfg.onRowSelectUpdate="";
    }else{
        wv1.cfg.onRowSelectUpdate+=" ";
    }
    wv1.cfg.onRowSelectUpdate+="UPDATE_IDS";
</script>
    "UPDATE_IDS" , , "panel1 panel2";
    'wv1' widgetVar
  • js jsf, / ajax.
    <h:header/>
...
<script type="text/javascript" src="#{CONTEXT_PATH}/resources/js/datatable.js"/>
<h:header/>

+1

, JSF 2/Primefaces , Primefaces 3.0 .

PrimeFaces: http://forum.primefaces.org/viewtopic.php?f=3&t=1373&sid=bbfcd6a343edf586f927cd7ecd7d01b9&start=10#p48388

javascript <p:datatable>, :

1. primefaces-extension JAR webapp ( Maven ). 0.6.3, ,

2.Add pe namespace xhtml:

<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions">

      ...

</html>

3.Add <pe:javascript> <p:datatable> ( , ClientBehaviorHolder), :

<html>
    ...
    <p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10" selection="#{tableBean.selectedNames}">
        <pe:javascript event="rowSelect" execute="onRowSelectedHandler();"/>
        ...
    </p:dataTable>
    ...
</html>

, , ...

+1

You can catch ajaxevents that fire when a row is selected.

In your case

<p:dataTable rowSelectListener="#{tableBean.onRowSelect}" 
    var="data" value="#{tableBean.data}" paginator="true" rows="10"
    selection="#{tableBean.selectedNames}">

    <p:ajax event="rowSelectCheckbox" listener="#{tableBean.handleEvent}" 
        update="buttonThatNeedsToBeRendered"/>

    <p:column selectionMode="multiple" />

    ...

</p:dataTable>

Other useful events that trigger depending on the selection mode dataTableare:

  • rowSelect and rowUnselect
  • rowSelectCheckbox and rowUnselectCheckbox
  • rowSelectRadio
  • toggleSelect
0
source

More articles:


All Articles