Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Radek
755
web grid with buttons on each row
posted

Hi,

I have the following table:

<body>
  <f:view>
    <h:form id="assetOverviewForm"> 
        <h:outputText value="#{gui['assets.overview']}" styleClass="heading2"/>
         
      <ig:gridView
           dataSource="#{assetOverviewController.allAssets}"
           pageSize="10">
        <f:facet name="header">
          <h:outputText value="#{gui['assets.listHeading']}" />
        </f:facet>
        <ig:column sortBy="publicId">
            <f:facet name="header">
              <h:outputText value="#{gui['asset.id']}" />
          </f:facet>
          <h:outputText value="#{DATA_ROW.publicId}" />
        </ig:column>
          <ig:column>
            <h:commandLink action="#{assetDetailController.showAssetDetail}">
              <h:graphicImage value="images/buttonDetail.gif" style="border: 0px" />           
              <f:param name="id" value="#{DATA_ROW.id}"/>                               
            </h:commandLink>
         
            <h:commandButton image="images/icon_remove.gif" 
                action="#{assetOverviewController.deleteAsset}" value="#{gui['delete']}"
                onclick="if (!confirm('#{gui['asset.removeConfQuestion']}')) return false; else setIdForRemoving('#{DATA_ROW.id}');">                               
            </h:commandButton>                                                    
          </ig:column>
      </ig:gridView>
       
      <h:inputHidden id="assetRemoveId" value="-1"></h:inputHidden>
     
      <h:commandLink action="#{assetController.showAssetAdding}">           
          <h:outputText value="#{gui['asset.addNew']}" />                               
      </h:commandLink>                   
    </h:form>
  </f:view>
</body>

 

Functionality should be as follows: each row contains two commands for detail and for deletion. Confirmation dialog must be opened before deletion-operation.

When there is only button for deletion then everything works fine - user clicks, confirmation dialog is opened. But when I add commandLink then it doesn't work - no confirmation dialog is opened and form is submitted. Also table sorting doesn't work with two commands.

I found out that this is because JS error - "curForm is undefined". It seems that JSF engine createdwrong page ?!?

Please I would very appreciate any help.

Thank you in advance,

ANECT

  • 1579
    posted

    Hi,

    I tried to make a simple application implementing the functionality you described. The source code is posted bellow. Everything seemed to work fine, all events were fired, confirmation dialog appers and sorting is also OK. Although it did not matter in my example you can try to divide the link and the button in two separate columns. Please, take a look at my example bellow and if there is is still any issue that disburbs you, don't bother to ask.

    In JSF:

    <body>

    <f:view>

    <h:form id="assetOverviewForm">

    <h:outputText value="Message" binding="#{twoCommands.msg}"></h:outputText>

    <ig:gridView dataSource="#{twoCommands.empList}" pageSize="10"

    binding="#{twoCommands.grid}">

    <f:facet name="header">

    <h:outputText value="Employee List"></h:outputText>

    </f:facet>

    <ig:column sortBy="firstName">

    <f:facet name="header">

    <h:outputText value="First Name"></h:outputText>

    </f:facet>

    <h:outputText value="#{DATA_ROW.firstName}"></h:outputText>

    </ig:column>

    <ig:column>

    <h:commandLink value="Detail" action="#{twoCommands.showDetails}">

    <f:param name="fname" value="#{DATA_ROW.firstName}"></f:param>

    </h:commandLink>

    </ig:column>

    <ig:column>

    <h:commandButton value="Delete"

    actionListener="#{twoCommands.onPressDelete}"

    onclick="if(!confirm('Are you sure you want to remove #{DATA_ROW.firstName} from the list?')) return false"></h:commandButton>

    </ig:column>

    </ig:gridView>

    </h:form>

    </f:view>

    </body>

    In JAVA:

    public class TwoCommandsBean {

    private List empList = RequiredInputsBean.createList();

    private UIOutput msg;private HtmlGridView grid;

     

    public String showDetails(){

    FacesContext facesContext = FacesContext.getCurrentInstance();

    String str = (String) facesContext.getExternalContext().getRequestParameterMap().get("fname");

    msg.setValue("Details on " + str);

    System.out.println("First Name: " + str);

    return str;

    }

     

    public void onPressDelete(ActionEvent e){

    RowItem rowItem = (RowItem) e.getComponent().getParent().getParent();

    Person person = (Person) HtmlGridView.getDataRow(rowItem);

    System.    out.println(person.getFirstName());

    Iterator it = empList.iterator();

    while (it.hasNext()){

    Person pers = (Person) it.next();

    if (pers.getFirstName().equalsIgnoreCase(person.getFirstName())){

    empList.remove(pers);

    grid.dataBind();break;

    }

     

    }

    msg.setValue(person.getFirstName() + " was removed!");

    }

     

    ...

    // Getters and Setters

    ...

     

    }

    Regards!