Peter Penzov
Peter Penzov

Reputation: 1766

How to add clear button into JSF table?

I'm working on this JSF table which is used for displaying data.

enter image description here

When I click the edit button the row in into the JSF page can be edit.

enter image description here

This is the code:

<?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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>

        <h:form>
            <h:dataTable value="#{order.orderList}" var="o"
                styleClass="order-table"
                headerClass="order-table-header"
                rowClasses="order-table-odd-row,order-table-even-row"
            >
                        <h:column>

                    <f:facet name="header">Select</f:facet>

                    <h:selectBooleanCheckbox value="#{order.selectedIds[dataItem.id]}" />

                </h:column>
                <h:column>

                    <f:facet name="header">Order No</f:facet>

                    <h:inputText value="#{o.orderNo}" size="10" rendered="#{o.editable}" />

                    <h:outputText value="#{o.orderNo}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Product Name</f:facet>

                    <h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" />

                    <h:outputText value="#{o.productName}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Price</f:facet>

                    <h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />

                    <h:outputText value="#{o.price}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Quantity</f:facet>

                    <h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" />

                    <h:outputText value="#{o.qty}" rendered="#{not o.editable}" />

                </h:column>

                <h:column>

                    <f:facet name="header">Action</f:facet>

                    <h:commandLink value="Edit" action="#{order.editAction(o)}" rendered="#{not o.editable}" />

                </h:column>

            </h:dataTable>

            <h:commandButton value="Save Changes" action="#{order.saveAction}" />
                <h:commandButton value="Delete" action="#{order.getSelectedItems}" />

        </h:form>
    </h:body>

</html>


import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Arrays;

import java.util.HashMap;
import java.util.Map;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{

        private Map<Long, Boolean> selectedIds = new HashMap<Long, Boolean>();
        private List<OrderBean> selectedDataList;
        Iterable<OrderBean> dataList = null;

        public String getSelectedItems() {

            // Get selected items.
            selectedDataList = new ArrayList<OrderBean>();

            for (OrderBean dataItem : dataList) {
                if (selectedIds.get(dataItem.getId()).booleanValue()) {
                    selectedDataList.add(dataItem);
                    selectedIds.remove(dataItem.getId()); // Reset.
                    /* Insert into DB SQL stetement which deletes rows by using 
                       dataItem as key */
                }
            }

            return "selected"; // Navigation case.
        }

        public Map<Long, Boolean> getSelectedIds() {
            return selectedIds;
        }

        public List<OrderBean> getSelectedDataList() {
            return selectedDataList;
        }


        /* Create list with data */


    private static final long serialVersionUID = 1L;

    private static final ArrayList<Order> orderList = 
        new ArrayList<Order>(Arrays.asList(

        new Order("A0001", "Intel CPU", 
                new BigDecimal("700.00"), 1),
        new Order("A0002", "Harddisk 10TB", 
                new BigDecimal("500.00"), 2),
        new Order("A0003", "Dell Laptop", 
                new BigDecimal("11600.00"), 8),
        new Order("A0004", "Samsung LCD", 
                new BigDecimal("5200.00"), 3),
        new Order("A0005", "A4Tech Mouse", 
                new BigDecimal("100.00"), 10)
    ));

    public ArrayList<Order> getOrderList() {

        return orderList;

    }

    public String saveAction() {

        //get all existing value but set "editable" to false 
        for (Order order : orderList){
            order.setEditable(false);
        }

        //return to current page
        return null;

    }

    public String editAction(Order order) {

        order.setEditable(true);
        return null;
    }

    private Object getId() {
        throw new UnsupportedOperationException("Not yet implemented");
    }

    public static class Order{

        String orderNo;
        String productName;
        BigDecimal price;
        int qty;
        boolean editable;

        public Order(String orderNo, String productName, BigDecimal price, int qty) {
            this.orderNo = orderNo;
            this.productName = productName;
            this.price = price;
            this.qty = qty;
        }

        public boolean isEditable() {
            return editable;
        }
        public void setEditable(boolean editable) {
            this.editable = editable;
        }
        public String getOrderNo() {
            return orderNo;
        }
        public void setOrderNo(String orderNo) {
            this.orderNo = orderNo;
        }
        public String getProductName() {
            return productName;
        }
        public void setProductName(String productName) {
            this.productName = productName;
        }
        public BigDecimal getPrice() {
            return price;
        }
        public void setPrice(BigDecimal price) {
            this.price = price;
        }
        public int getQty() {
            return qty;
        }
        public void setQty(int qty) {
            this.qty = qty;
        }
    }
}

I want to add cancel button which is displayed after the edit button in pushed. Now if I want to cancel to edit the table I have to reload the page. How I can add this button?

Upvotes: 0

Views: 1654

Answers (2)

user3143408
user3143408

Reputation:

if you want to cancel the edit mode you just simply refresh the page once more.i think no neeed to add another action methods.

            <f:facet name="header">Action</f:facet>

            <h:commandLink value="Edit" process="@form" update="@form" rendered="rendering option" />

        </h:column>

Upvotes: 1

Matt Handy
Matt Handy

Reputation: 30025

Simply do a page refresh with the button. Make sure that it is a button that fires a GET request, e.g a h:button. Let the button render if o.editable is true.

Or if you don't want a full refresh, use an ajaxified h:commandButton and rerender the editable row.

<h:commandButton value="Cancel" action="#{bean.cancelAction(o)}">
  <f:ajax execute="@this" render="ids of your row components">
<h:commandButton>

In your given code you have no id attributes for the outputText and inputText components. You will need to add them in order to use ajax.

Upvotes: 1

Related Questions