Forum:

how to add a row dynamically in panel grid by clicking on command button using jsf

Greenhorn

Posts: 2

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello all,

Iam new to JSF.I created a form which contains panelgrid with rows and one command button.when i click on the command button it should display a new row(textboxes) dynamically.Can anyone help me on how to do this...

Here is my code:

grid.jsp

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Grid Data</title>
</head>
<body>
<f:view>
<h:form>
 <center>
<h:panelGrid width="500" bgcolor="#e6edfd" columns="5" border="0" style="display:block;text-align:left">

<h:outputText value="Name"></h:outputText>
<h:outputText value="num1"></h:outputText>
<h:outputText value="num2"></h:outputText>
<h:outputText value="Fax"></h:outputText>
<h:outputText value="Email"></h:outputText>

<h:outputText value="Pm :"></h:outputText>
<h:inputText maxlength="10" size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText value=""></h:inputText>

<h:outputText value="Pe :"></h:outputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText value=""></h:inputText>

<h:outputText value="of :"></h:outputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText value=""></h:inputText>

<h:outputText value="Dj :"></h:outputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText value=""></h:inputText>

<h:outputText value="Df :"></h:outputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText size="10" value=""></h:inputText>
<h:inputText value=""></h:inputText>

</h:panelGrid>
</center>
 <center>
<h:commandButton action="" value="Add Row" />
</center>
</h:form>
</f:view>

</body>
</html>

Bean class:

package com.isi.grid.bean;

public class griddata {
String name;
private int num1;
private int num2;
private int fax;
String email;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public int getNum1() {
return num1;
}

public void setNum1(int num1) {
this.num1 = num1;
}

public int getNum2() {
return num2;
}

public void setNum2(int num2) {
this.num2 = num2;
}

public int getFax() {
return fax;
}

public void setFax(int fax) {
this.fax = fax;
}

public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}

}

Martin Lopez Ochoteco

Greenhorn

Posts: 15

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi, I'm not really answering your question, but have you considered using dataTable component instead of panelGrid?
The difference is that in dataTable you can bind its value to an array of inputTexts or whatever objects you need, then you can add inputText components to this array by a method binded in the action property of your commandButton.

JM.-

Wei Geng

Greenhorn

Posts: 28

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I suggest you to read the book of 'JavaServer Faces in Action', the author of which is Kito Mann.

In this book, the first sample is very similar with the case you described.

The keypoint:

1. Bind the GridPanel with the member variable of the backing-bean with 'binding' attribute of component Tag.
2. Write an method as actionListener.
3. When the button triggers the actionListener method, in this method, you can manipulate the GridPanel Java instance with Backing-Bean member varialbe, getting the child-component collection and adding the new component into it. In the following View-Restore phase, the new element will appear on page.

I hope it can be helpful.

Time is the best teacher, but unfortunately, it kills all of its students - Robin Williams. tiny ad:

We need your help - Coderanch server fundraiser

https://coderanch.com/wiki/782867/Coderanch-server-fundraiser