Add Edit Delete Row To Datatable On The Fly Using PDF

MENU
Add, edit, delete row to dataTable on the fly using PrimeFaces

Posted on November 18, 2012
by admin
17 comments
This tutorial will show how to add, edit, delete row to data table on the fly. This is a very
important issue for a web application. This example shows a very basic task that add item
name, quantity and price from user input and add them to data table. Users have also
option to edit or remove item from data table.
1. saleitem.xhtml
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml"
3 xmlns:h="http://java.sun.com/jsf/html"
4 xmlns:p="http://primefaces.org/ui"
5 xmlns:f="http://java.sun.com/jsf/core"
6 xmlns:ui="http://java.sun.com/jsf/facelets"
7 >
8 <h:head>
9 <title>Sale Item</title>
10 </h:head>
11 <h:body>
12 <h:form id="form1">
13 <p:growl id="messages" showDetail="true"/>
14 <p:panel header="Sale Item" style="width: 400px;">
15 <p:panelGrid columns="2">
16 <h:outputLabel for="item" value="Item Name: " />
17 <p:inputText value="#{item.item}"/>
18 <h:outputLabel for="qty" value="Qyantity: " />
19 <p:inputText value="#{item.qty}"/>
20 <h:outputLabel for="price" value="Price: " />
21 <p:inputText value="#{item.price}"/>
22 <f:facet name="footer">
23 <h:commandButton value="Add Item" action="#{item.addAction}"/>
24 </f:facet>
25 </p:panelGrid>
26 <p:spacer height="30px;"/>
27 <p:dataTable value="#{item.orderList}" var="o" widgetVar="50" style="width: 60px
27 <p:dataTable value="#{item.orderList}" var="o" widgetVar="50" style="width: 60px
28 >
29 <f:facet name="header">
30 Order List
31 </f:facet>
32 <p:ajax event="rowEdit" listener="#{item.onEdit}" update=":form1:messages"
33 <p:ajax event="rowEditCancel" listener="#{item.onCancel}" update=":form1:mes
34 <p:column>
36 <h:outputText value="Item Name" />
37 </f:facet>
38 <p:cellEditor>
39 <f:facet name="output">
40 <h:outputText value="#{o.item}" />
41 </f:facet>
42 <f:facet name="input">
43 <p:inputText value="#{o.item}" style="width:100%"/>
44 </f:facet>
45 </p:cellEditor>
46 </p:column>
47
48 <p:column>
50 <h:outputText value="Quantity" />
51 </f:facet>
52 <p:cellEditor>
54 <h:outputText value="#{o.qty}" />
55 </f:facet>
57 <p:inputText value="#{o.qty}" style="width:100%"/>
58 </f:facet>
59 </p:cellEditor>
60 </p:column>
61
62 <p:column>
64 <h:outputText value="Price" />
65 </f:facet>
66 <p:cellEditor>
68 <h:outputText value="#{o.price}" />
69 </f:facet>
71 <p:inputText value="#{o.price}" style="width:100%"/>
72 </f:facet>
73 </p:cellEditor>
74 </p:column>
75 <p:column headerText="Options" style="width:50px">
76 <p:rowEditor />
77 </p:column>
78 </p:dataTable>
79 </p:panel>
80 </h:form>
81 </h:body>
</html>
2. Item.java
1 package beans;
1 package beans;
2
3 import java.io.Serializable;
4 import java.util.ArrayList;
5 import javax.faces.application.FacesMessage;
6 import javax.faces.bean.ManagedBean;
7 import javax.faces.bean.SessionScoped;
8 import javax.faces.context.FacesContext;
9 import org.primefaces.event.RowEditEvent;
10
11 @ManagedBean(name = "item")
12 @SessionScoped
13 public class Item implements Serializable {
14
15 private static final long serialVersionUID = 1L;
16 private String item;
17 private Integer qty;
18 private Double price;
19 OrderBean order;
20
21 public String getItem() {
22 return item;
23 }
24
25 public void setItem(String item) {
26 this.item = item;
27 }
28
29 public Double getPrice() {
30 return price;
31 }
32
33 public void setPrice(Double price) {
34 this.price = price;
35 }
36
37 public Integer getQty() {
38 return qty;
39 }
40
41 public void setQty(Integer qty) {
42 this.qty = qty;
43 }
44
45 public OrderBean getOrder() {
46 return order;
47 }
48
49 public void setOrder(OrderBean order) {
50 this.order = order;
51 }
52 private static final ArrayList<OrderBean> orderList = new ArrayList<OrderBean>();
53
54 public ArrayList<OrderBean> getOrderList() {
55 return orderList;
56 }
57
58 public String addAction() {
59 OrderBean orderitem = new OrderBean(this.item, this.qty, this.price);
60 orderList.add(orderitem);
61
61
62 item = "";
63 qty = 0;
64 price = 0.0;
65 return null;
66 }
67 public void onEdit(RowEditEvent event) {
68 FacesMessage msg = new FacesMessage("Item Edited",((OrderBean) event.getObject
69 FacesContext.getCurrentInstance().addMessage(null, msg);
70 }
71
72 public void onCancel(RowEditEvent event) {
73 FacesMessage msg = new FacesMessage("Item Cancelled");
74 FacesContext.getCurrentInstance().addMessage(null, msg);
75 orderList.remove((OrderBean) event.getObject());
76 }
77 }
3. OrderBean.java
1 package beans;
2
3 import java.io.Serializable;
4
5 public class OrderBean implements Serializable {
6
7 private static final long serialVersionUID = 1L;
8 private String item;
9 private Integer qty;
10 private Double price;
11
12 public OrderBean(String item, Integer qty, Double price) {
14 this.qty = qty;
16 }
17
18 public String getItem() {
19 return item;
20 }
21
22 public void setItem(String item) {
24 }
25
26 public Double getPrice() {
27 return price;
28 }
29
30 public void setPrice(Double price) {
32 }
33
34 public Integer getQty() {
35 return qty;
36 }
37
38 public void setQty(Integer qty) {
39 this.qty = qty;
40 }
41 }
Here is the output:

Dynamic data table primefaces
Related Posts
Display DataTable from MySQL db in PrimeFaces
PrimeFaces 3.4.1 chain combo population from db
Upload and display image from MySQL db using PrimeFaces
Re-sizing image before uploading to MySQL db using PrimeFaces
Dynamic JTable: Display Sum of Selected Row
PrimeFaces Carousel Component with Dynamic Image
Share 2 Like 2 Share

admin
Hello! I am Md. Abdul Bari; founder and admin of
javaknowledge; currently providing training as a J2EE faculty in
The Computers Ltd. Dhaka, Bangladesh under an IT Scholarship
project provided by IDB-BISEW. I am a self learner and
passionate about training and writing. I am always trying my
best to share my knowledge through my blog.
More Posts - Website
Follow Me:
tagged with dynamic row, primefaces
PrimeFaces
132,325` Total Views
LEAVE A REPLY
Your email address will not be published. Required fields are marked *
Name *
Email *
Website
three 3 =
Comment
Post Comment
17 COMMENTS
rubel November 19, 2012 10:49 am
i apply this just now.. but when i reload the page, add previous items
automatically..
Reply
admin November 19, 2012 10:59 am
Re-lode is just submitting the form. So the value is added automatically.

In this case you just have to apply validation to submit the form.
Reply
Thiago May 2, 2014 5:12

am
Sorry, but the problem also happens to me. How to validate the form
submission?
Reply
bely November 19, 2012 10:52 am
It,s really amazing.

successfully done.
Reply
Mehedi December 13, 2012 11:11 am
how can show value from database into a text field against another input of
a text field?
Reply
Alexander April 19, 2013 4:41

pm
How to add a static editable row at the bottom of the table for new item?
Reply
camiloleal August 1, 2013 5:30

am
This is perfect, after how I have do, for save datable in db ?
Reply
Pre. Comment 1 2 3 Next Comment
Search...
Follow Us!
Recent Posts
Struts2 Ajax Validation
Struts2 Multiple Configuration File
Struts2 Multiple Namespace
Struts2 Introduction
URL Rewriting Example in JSF 2.0 using PrettyFaces

Recent Comments
Masaki: No Please When i run from the jar works ...
admin: Have you tried this example ...
admin: If you want to choose Java then see this example ...
admin: Does the same thing happening when you run from th ...
Categories
Android (19)
Core Java (37)
Free Projects (2)
Hibernate (5)
Jasper report (7)
JSF 2.0 (14)
JSP & Servlet (9)
JSTL 1.1 (4)
NetBeans (2)
PrimeFaces (8)
Add, edit, delete row to dataTable on the fly using PrimeFaces
Authentication based secure login-logout using JSF 2.0 and PrimeFaces 3.4.1
Display DataTable from MySQL db in PrimeFaces
PrimeFaces 3.4.1 chain combo population from db
PrimeFaces Carousel Component with Dynamic Image
PrimeFaces login example using MySQL db
Re-sizing image before uploading to MySQL db using PrimeFaces
Upload and display image from MySQL db using PrimeFaces
Software (3)
Spring (1)
Struts2 (5)
Tomcat (2)
Tag Cloud
Meta
Register
Log in
Entries RSS
Comments RSS
WordPress.org
Archives
Archives Select Month
Connect on Facebook
Javaknowledge
3,714 likes
Like Page Sign Up
Be the first of your friends to like this
Tweets by @java_knowledge
Journey to the way of Java...

Add Edit Delete Row To Datatable On The Fly Using PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Add Edit Delete Row To Datatable On The Fly Using PDF

Caricato da

Copyright:

Formati disponibili

MENU

Add, edit, delete row to dataTable on the fly using PrimeFaces

Here is the output:

PrimeFaces 3.4.1 chain combo population from db

Upload and display image from MySQL db using PrimeFaces

Re-sizing image before uploading to MySQL db using PrimeFaces

Dynamic JTable: Display Sum of Selected Row

PrimeFaces Carousel Component with Dynamic Image

Share 2 Like 2 Share

tagged with dynamic row, primefaces

132,325` Total Views

rubel November 19, 2012 10:49 am

admin November 19, 2012 10:59 am

Re-lode is just submitting the form. So the value is added automatically.

Thiago May 2, 2014 5:12

bely November 19, 2012 10:52 am

It,s really amazing.

Alexander April 19, 2013 4:41

camiloleal August 1, 2013 5:30

This is perfect, after how I have do, for save datable in db ?

Pre. Comment 1 2 3 Next Comment

Struts2 Ajax Validation

Struts2 Multiple Configuration File

Struts2 Multiple Namespace

URL Rewriting Example in JSF 2.0 using PrettyFaces

admin: Have you tried this example ...

Like Page Sign Up

Be the first of your friends to like this

Journey to the way of Java...

Potrebbero piacerti anche