Jsf dynamic datatable

Hi
How can we make the columns of a datatable dynamic, I mean without knowing the numbers columns of the list to present in the datatable?
thanks for help

Yep, just build the h:columns inside a repeat tag that gets evaluated at the right time, like c:foreach.

Similar Messages

How to create dynamic DataTable with dynamic header/column in JSF?

Hello everyone,
I am having problem of programmatically create multiple DataTables which have different number of column? In my JSF page, I should implement a navigation table and a data table. The navigation table displays the links of all tables in the database so that the data table will load the data when the user click any link in navigation table. I have gone through [BalusC's post|http://balusc.blogspot.com/2006/06/using-datatables.html#PopulateDynamicDatatable] and I found that the section "populate dynamic datatable" does show me some hints. In his code,
// Iterate over columns.
        for (int i = 0; i < dynamicList.get(0).size(); i++) {
            // Create <h:column>.
            HtmlColumn column = new HtmlColumn();
            dynamicDataTable.getChildren().add(column);
            // Create <h:outputText value="dynamicHeaders"> for <f:facet name="header"> of column.
HtmlOutputText header = new HtmlOutputText();
header.setValue(dynamicHeaders[i]);
column.setHeader(header);
// Create <h:outputText value="#{dynamicItem[" + i + "]}"> for the body of column.
HtmlOutputText output = new HtmlOutputText();
output.setValueExpression("value",
createValueExpression("#{dynamicItem[" + i + "]}", String.class));
column.getChildren().add(output);
public HtmlPanelGroup getDynamicDataTableGroup() {
// This will be called once in the first RESTORE VIEW phase.
if (dynamicDataTableGroup == null) {
loadDynamicList(); // Preload dynamic list.
populateDynamicDataTable(); // Populate editable datatable.
return dynamicDataTableGroup;
I suppose the Getter method is only called once when the JSF page is loaded for the first time. By calling this Getter, columns are dynamically added to the table. However in my particular case, the dynamic list is not known until the user choose to view a table. That means I can not call loadDynamicList() in the Getter method. Subsequently, I can not execute the for loop in method "populateDynamicDataTable()".
So, how can I implement a real dynamic datatable with dynamic columns, or in other words, a dynamic table that can load data from different data tables (different number of columns) in the database at run-time?
Many thanks for any help in advance.

flyeminent wrote:
However in my particular case, the dynamic list is not known until the user choose to view a table. Then move the call from the getter to the bean's action method.

Generating a REAL dynamic datatable

Hi,
I've been looking for a solution, reading a lot of books about server faces, understood the whole Beans concept, took some sun courses (incl 314) but still don't get one thing. I need to finish a project and i have to move on fast now.
I want to be able to :
Generate a dynamic datatable from any query, WITHOUT having to know and create each column component for each resulting column.
In addition i need to be able to have a commandbutton on each row, that would enable me to retrieve which row should be updated exactly.
I found tons of examples on that, some people on forums wrote about how to do dynamic datatables, but they created each column from start and binded them to a fix field. I read a lot and tried a lot and til now i was just dissappointed of some people's code spaming google search results on "dynamic datatable" that definetly is not a dynamic datatable.
I tried myfaces samples too from apache, decompiled their bean, but they backing it with a simple datamodel and an arraylist :-(
1. I need someone to explain me how to generate a dynamic datatable.
2. I need to back that datatable with a cachedRowSet or a ResultSet and to understand how to get UIData from a ResultSet.
Sincerely please help i really need help about that fast.

The goal i wanted to reach (and my definition of "dynamic") is not having to redesign everything as soon as something changes.
Because binding has to be done, objects have to be declared for each column, and because binding is not dynamic (no expression), you cannot have a REAL dynamic datatable. I got that now meanwhile.
Exactly as i thaught (still HTML cough), it's web-based and a problem of the programming language.
Like in Delphi Pascal, or any none web-based development language, one could have done such thing in 5 minutes.
The problem with Java JSP JSF is that you only find out its limits after you have put some time into it, but not when you get conviced to use it.
I remember speaches swearing "it can do everything that other languages can and more ..." Well, i don't think so.
I meanwhile found so many threads of programmers, having to migrate to Java JSP JSF and now being lost in the same situation.
Still open to any suggestions.

How to create a Dynamic Datatable with sorting functioanlity

Hi,
I am new to JSF and need some help can some one please tell me how to create a dynamic datatable with sorting functionality. I am reading data data from a database table and wants to build the datatable dynamically based on the columns returned. I know how to created a datatble with a fixed number of columns but can't figure out how to create a datatable dynamically with sort functionality. Any small example will help.
Thanks

Hi,
Here is what I have so far and can't figure out how to add the sorting functionality. Any help is appreciated.
Managed Bean:
private List<MyDto> data ;
    public HtmlDataTable getDataTableOne ()
        if ( dataTableOne == null )
            populateCheckBoxes () ; // Preload.
            populateDynamicDataTableOne () ;
        return dataTableOne ;
    public void populateCheckBoxes ()
        data = new ArrayList<MyDto> () ;
        MyDto myDto1 = new MyDto () ;
        MyDto myDto2 = new MyDto () ;
        MyDto myDto3 = new MyDto () ;
        MyDto myDto4 = new MyDto () ;
        myDto1.setChecked ( true ) ;
        myDto1.setValue ( "myDto1" ) ;
        myDto2.setChecked ( false ) ;
        myDto2.setValue ( "myDto2" ) ;
        myDto3.setChecked ( false ) ;
        myDto3.setValue ( "myDto3" ) ;
        myDto4.setChecked ( true ) ;
        myDto4.setValue ( "myDto4" ) ;
        data.add ( myDto1 ) ;
        data.add ( myDto2 ) ;
        data.add ( myDto3 ) ;
        data.add ( myDto4 ) ;
    public void populateDynamicDataTableOne ()
        dataTableOne = new HtmlDataTable () ;
        UIOutput header = new UIOutput () ;
        header.setValue ( "" ) ;
        UIColumn tableColumn ;
        tableColumn = new UIColumn () ;
        HtmlOutputText textHeader = new HtmlOutputText () ;
        textHeader.setValue ( "" ) ;
        tableColumn.setHeader ( textHeader ) ;
        HtmlSelectBooleanCheckbox tCheckBox = new HtmlSelectBooleanCheckbox () ;
        tCheckBox.setValueBinding ( "value" , FacesContext.getCurrentInstance ().getApplication ().createValueBinding ( "#{row.checked}" ) ) ;
        tableColumn.getChildren ().add ( tCheckBox ) ;
        // Set output.
        UIOutput output = new UIOutput () ;
        ValueBinding myItem = FacesContext.getCurrentInstance ().getApplication ().createValueBinding ( "#{row.value}" ) ;
        output.setValueBinding ( "value" , myItem ) ;
        // Set header (optional).
        UIOutput header2 = new UIOutput () ;
        header2.setValue ( "" ) ;
        UIColumn column = new UIColumn () ;
        column.setHeader ( header2 ) ;
        column.getChildren ().add ( output ) ;
        dataTableOne.getChildren ().add ( tableColumn ) ;
        dataTableOne.getChildren ().add ( column ) ;
MyDto.java
public class MyDto
    private Boolean checked;
    private String value;
    public MyDto ()
    public void setChecked ( Boolean checked )
        this.checked = checked;
    public Boolean getChecked ()
        return checked ;
    public void setValue ( String value )
        this.value = value;
    public String getValue ()
        return value ;
JSP
<h:dataTable id="table" value="#{myRequestBean.data}" binding="#{myRequestBean.dataTableOne}" var="row" />Thanks

Creating dynamic dataTables **Very Urgent**

Hi all,
I m very new to JSF Technology. I m in need of creating dynamic dataTables. I need to populate the values from DB. At times, the number of columns varies. So, how can i create such kind of table? At least i need to know how can i create dataTable values using the Backing bean and mapping it to the JSF page, so that the browser will render that dataTable?
Please help me.. :)

The following code (taken from the BalusC article) do the task:
            // Create <h:column>.
            HtmlColumn column = new HtmlColumn();
            dynamicDataTable.getChildren().add(column);
            // Create <h:outputText value="dynamicHeaders"> for <f:facet name="header"> of column.
HtmlOutputText header = new HtmlOutputText();
header.setValue(dynamicHeaders[i]);
column.setHeader(header);
// Create <h:outputText value="#{dynamicItem[" + i + "]}"> for the body of column.
HtmlOutputText output = new HtmlOutputText();
output.setValueExpression("value",
createValueExpression("#{dynamicItem[" + i + "]}", String.class));
column.getChildren().add(output);

To find the "column value" when clicked on Dynamic datatable

I ahve done a dynamic table where the first row alone i ahve declared as command link.So when I click on the commadn link I need to get either column name or column count or rowdata.If I Get then I have some logic based on it to do.
I have placed my dynamic datatable code below.
public class Datatable2 extends PageCodeBase
UIData dataTable =new UIData();
public Datatable2()
UIColumn col;
UIOutput out = null;
ArrayList al=new ArrayList();
al.add("Item");
al.add("Creation date");
al.add("Priority");
Application app = FacesContext.getCurrentInstance().getApplication();
int colCount = 3;
for(int j = 0; j < colCount; ++j) {
out = new UIOutput();
col = new UIColumn();
if(dataTable.getRowIndex()==-1)
MethodBinding mb = app.createMethodBinding("#{pc_DataTable.item}", null);
HtmlCommandLink link = (HtmlCommandLink)app.createComponent(HtmlCommandLink.COMPONENT_TYPE);                     link.setActionListener(mb);
link.setAction(mb);
link.setId("Command"+j);
ValueBinding vb1 = app.createValueBinding("#{commands" + j + "}");
link.setValueBinding("value",vb1);
link.setRendererType("javax.faces.Link");
HtmlOutputText O = new HtmlOutputText();
O.setValue(al.get(j).toString());
link.getChildren().add(O);
col.setHeader(link);
ValueBinding vb = app.createValueBinding("#{rows["+j+"]}");
out.setValueBinding("value", vb);
out.setRendererType("javax.faces.Text");
col.getChildren().add(out);
dataTable.getChildren().add(col);
public UIData getDataTable()
     return dataTable;
public void setDataTable(UIData dataTable)
this.dataTable=dataTable;
public Object[] getTableRows()
Object[] test = new Object[]{new String[]{"1","2","3"},
new String[]{"4","5","6"},
new String[]{"7","8","9"},
new String[]{"10","11","12"},
new String[]{"13","14","15"}};
return test;
this is my jsp code
<f:view>
<P>Place content here.</P>
<h:form>
<h:dataTable binding="#{pc_Datatable2.dataTable}" value="#{pc_Datatable2.tableRows}" var= "rows" />
</h:form>
</f:view>
Could please tell how can i figure out my coulmn value when clicked on the command link

hello,
u can use two types methods u can create a dynamic action or by branching using conditional or java script code
for java script code just call the code when button clicked and in javascript function by using if condition u can redirect.
Regards,
Ramana

Dynamic datatable:adding rows

I am working with Dynamic datatable . whilke adding a row i am able to add only one row . later i am unable to a dd .
code:
<h:commandLink value="ADD" action="#{icdMBean.actionAddrow}" />
back bean:
public void actionAddrow() {
// Create new items.
icdList= new ArrayList<Icd>();
Icd myNewDataItem = new Icd();System.out.println("i am in action add row2");
myNewDataItem.setId("new");
icdList.add(myNewDataItem);
if i set the id value( myNewDataItem.setId("new");) only i am able to add only one row .
could you please suggest a solution for it.

Hi, many thanks for your answer, so what do you think is the best solution for adding rows by user to interactive form's dynamic table?
Manually read xml data during submit by this way: https://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/9121. [original link is broken] [original link is broken] [original link is broken] ?
Or is there better solution for this? (any link to some examples, blogs, etc...)
Many thanks for any answer!

Formatting a dynamic datatable

Hello, I am displaying a datatable on screen with a dynamic number of columns and rows and everything is working fine. However, I would also like to apply columnClass formatting to the columns and obviously the number of classes is dependent on the number of columns. In a regular static datatable in our system, I would normally do something like:
columnClasses="tierNameStyle,tierCheckStyle,tierNameStyle,tierNameStyle" styleClass="dataTableStyle"But if I add this into my dynamic datatable JSP as this, it ignores the formatting:
<h:dataTable binding = "#{dataSetBB.dataSetTableHeadings}" var="rows" value="#{dataSetBB.tableHeadingRows}" columnClasses="tierNameStyle,tierCheckStyle,tierNameStyle,tierNameStyle" styleClass="dataTableStyle"/>Is there a way to do this in the backing bean since I am doing everything else for the dynamic table there?

OK, I tried that and it still seems to be ignoring my columnClasses. Here is my code from the backing bean where I am building the table. Am I doing something wrong?:
     public DataSetBB(){
               //setup dataModel
               String[] colHeadings = new String[]{"Heading1", "Heading2", "Heading3"};
               String[] colDetail = new String[]{"Detail1", "Detail2", "Detail3"};
               Object[] headingsArray = new Object[]{colHeadings};
               Object[] detailArray = new Object[]{colDetail};
               tableHeadingRows = new ArrayDataModel();
               tableHeadingRows.setWrappedData(headingsArray);
               tableDetailRows = new ArrayDataModel();
               tableDetailRows.setWrappedData(detailArray);
               //setupTable
               dataSetTableHeadings = new HtmlDataTable();
               dataSetTableDetails = new HtmlDataTable();
               dataSetTableHeadings.setStyleClass("dataTableStyle");
               dataSetTableHeadings.setColumnClasses("tierNameStyle,tierCheckStyle,tierNameStyle");
               dataSetTableDetails.setStyleClass("dataTableStyle");
               dataSetTableDetails.setColumnClasses("tierNameStyle,tierCheckStyle,tierNameStyle");
               UIColumn col;
               UIInput in = null;
               Application app = FacesContext.getCurrentInstance().getApplication();
               int colCount = colHeadings.length;
               for(int j = 0; j < colCount; ++j) {
                    in = new UIInput();
                    col = new UIColumn();
                    in.setId("input" + j);
                    ValueBinding vb = app.createValueBinding("#{rows["+j+"]}");
                    in.setValueBinding("value", vb);
                    in.setRendererType("javax.faces.Text");
                    col.getChildren().add(in);
                    dataSetTableHeadings.getChildren().add(col);
               for(int j = 0; j < colCount; ++j) {
                    in = new UIInput();
                    col = new UIColumn();
                    in.setId("detail" + j);
                    ValueBinding vb = app.createValueBinding("#{rows["+j+"]}");
                    in.setValueBinding("value", vb);
                    in.setRendererType("javax.faces.Text");
                    col.getChildren().add(in);
                    dataSetTableDetails.getChildren().add(col);
     }

JSF, recalls datatable on POST

Hi,
Here is the test codes:
This is my simple managed bean:
public class Sample {
public String getText() {
    System.out.println("this is text");
    return "this is text";
public String[] getData() {
    System.out.println("this is data");
    return new String[] {
      "deneme1",
      "deneme2"
public String SampleAction() {
    return "sample";
This is web page:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!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=UTF-8"/>
    <title>JSP Page</title>
</head>
<body>
    <h:dataTable var="d" border="1" value="#{sample.data}">
      <h:column>
        <h:outputText value="#{d}" />
      </h:column>
    </h:dataTable>
    <h:form>
      <h:outputText value="#{sample.text}" />
      <h:commandButton action="#{sample.SampleAction}" value="click" />
    </h:form>
</body>
</html>----------------------------------
and this is faces config:
<navigation-rule>
    <navigation-case>
      <from-outcome>sample</from-outcome>
      <to-view-id>sample.jsf</to-view-id>
    </navigation-case>
</navigation-rule>
<managed-bean>
    <managed-bean-name>sample</managed-bean-name>
    <managed-bean-class>Sample</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>----------------------------------
When we call http://localhost:8080/index.jsf. The server output is:
this is text
this is data
Another word JSF calls datatable #{sample.data} and #{sample.text}.this normal.
But when we click the button. The Server output is:
this is data
is this a possible bug? How may i avoid of reloading datatable content.

A Response from MyFaces List:
hi,
that's a given behaviour. generally spoken: you don't know how often a component invokes your getter methods. you will find a lot of possible solutions.
e.g. there is a myfaces sub-project which provides a solution (the view-controller provided by orchestra [1]).
(or you use javax.faces.event.PreRenderViewEvent of jsf 2.0)
regards,
gerhard
[1] http://myfaces.apache.org/orchestra/myfaces-orchestra-core15/ViewControllerAnnotations.html
Gerhard Petracek

Dynamic DataTable without validation of the rest of the form

I'm having a bit of trouble implementing a piece of functionality with JSF and I'm hoping someone here will have some insight into how to accomplish this.
I have a quite large form, with some fields requiring quite complex and expensive (both performance and actual money) validation (e.g. calling external web services, etc.). For the sake of the explanation, let's say the user enters details about himself, such as name, social security number, address, etc. Along with his details, he's to enter a limited subset of the details for each of his children (say name and social security number). We do not know at design time how many children the user has (obviously), so this part of the form has to be dynamically generated. Validation is performed on these children fields as well, so the user needs to be able to edit and remove children from the form.
Prior to JSF (straight JSP), I used DHTML and a naming scheme for these records with a custom setters in the backing beans.
What I have tried with JSF is to have a DataTable backed by a List. This table contains a single "Add Child" button which adds a new empty row to the table. There is also a "Remove" button for each row.
This works just great as long as I allow all other fields in the form to validate each time the user clicks the button. However, as I stated before, these validations are very very expensive (transaction based costs) . Additionally, I do not want to force the user to fill in all the other required fields (close to 40) before he can go on with the children.
Now, setting immediate="true" on the commandButton elements solves the problem of the other form fields validating. However, now the Children in the DataTable are never set because the update model values phase is never invoked, leaving me with empty input fields. I really do not care in this instance whether the data for the Children is valid or not, I just need to get them into the form.
I can think of at least three possible solutions:
1) Split up the form into several pages, like a wizard. However, the customer has rejected this option.
2) Somehow simplify the Children section by providing a single entry and a read-only table. This way I can use a simpler read-only table and I can extract the values from the request parameters directly. However, this complicated the editing of previously entered Children. To make things worse, the order of the children has to remain intact.
3) Create a custom HtmlInputText component that sets the values regardless of whether immediate="true" or "false".
It is this last option that I do not know how to do. Which methods would I need to override in order to get the values to be set in my bounded Children object regardless of the immediate flag?
And of course, if anybody has any other design suggestions I'm open to them!
Thanks in advance!
/Kris

nboudani , let me answer your question first. The page does have a Submit button. It also has "Add Child" and "Remove Child", and some others as well. The Submit button has immediate="false". I also need form validation for interdependent form fileds (e.g. either Passport number or social security number are required), so I'm using the "hidden input field at the bottom of the form trick". This all works well enough.
OK, I got partway there. jaguar2010's mention of valueChangeListener made me investigate that further. So what I did was twofold. Set the immediate attribute to true for the inputText elements in question (for the Children data) as well as for the commandButton (as before). Also, add a valueChangeListener for each of the Children which simply calls updateModel.
So, view code:
<h:inputText id="cName"
                       valueChangeListener="#{testBean.procCNameValueChanged}"
                       value="#{child.name}"
                       required="true"
                       immediate="true"/>
<h:inputText id="cSS"
                       valueChangeListener="#{testBean.processCSSValueChanged}"
                       value="#{child.ss}"
                       validator="#{testBean.validateCSS}"
                       immediate="true"/>
<h:commandButton action="#{testBean.addChild}" immediate="true" value="Add Child"/>
...bean code:
public void procCNameValueChanged(ValueChangeEvent event) {
    HtmlInputText sender = (HtmlInputText) event.getComponent();
    sender.updateModel(FacesContext.getCurrentInstance());
}So, that does take care of the problem with the model not updating. However, there are a bunch of other problems still left to be resolved. For instance, as you'll notice, there is a validator attached to one of the inputs. If this validation fails, the invalid text is not put back in the input field. I can't temember now, but I think that is because the valueChangeListener is not called in that case, so the model is not updated. Sigh...
Another problem is that for each row in the data model's table, there is a "Remove" button (not shown in above code) to enable the user to remove an entry from the list of children. Well, because JSF process events in the order of their appearance in the view code, an exeption is thrown if the removed row is not the last one, and the last row has not been "saved" yet. That is, the valueChangeListener has not been called on the last row. What happens is that first the action method for the remove button is called, then the valueChangeListener for the last row is called. But by the time the valueChangeListener event is fired, the last row has chaned its index (because the remove action method was called first) and apparently this fact has escaped JSF so it throws an exception (property not found or something).
I'm starting to wonder if JSF is the wrong technology for complex forms. Just seems to want to do too much for me, assuming I have a simple form.

Dynamic datatable in custom component

hi all,
i'm working on a custom jsf component and this component will create a datatable dynamically. (you can see component details from http://www.jroller.com/page/hasant?entry=creating_dynamic_datatable_inside_of AND http://www.jroller.com/page/hasant?entry=jsf_question_for_community_what)
the question is; when i want to add a selection column(dynamically), how can i handle its selected values?
i mean, if i have created this datatable in a page with designer, i would bind an Integer[] to that selection column's checkboxes. But i have to add this selection column dynamically from my component. So, how can i GET and SET the selection columns values. Since this is a custom component, there is no backing bean for value binding to this component.
when i resolve the request param string to get the selected rows, it's working(=i can see the selected rows somehow..) but, i can not set that values again while encoding that column after a submit.
here is my row selection column encoding code;
     private void addSelectionColumnToTable(FacesContext context, UIData table) {
          UIColumn column = new UIColumn();
          HtmlInputRowSelect rowSelect = new HtmlInputRowSelect();
          rowSelect.setId("rowSelect1");
          rowSelect.setStyleClass("inputRowSelect");
          rowSelect.setValue(m_selectedRows);
          column.getChildren().add(rowSelect);
          table.getChildren().add(column);
     }In the code above, rowSelect.setValue(m_selectedRows); part not effecting anyhing. m_selectedRows variable includes row numbers(in an Integer array) that i want to see as selected.
any solution/recommendation?

Well if you are still interested in using a text component
instead of a Button the way you would go about this is using
textWidth. Here's how I've done it before using a text / label
whatever you want that shows text.
// => Set our text we got from database
myText.text = "This is the text I got from the DB";
// => Validate it so that way we make sure we get right
numbers
myText.validateNow();
// => Find out how wide our text really is.
var textWidth:Number = myText.textWidth
// => Reset the width of our text component and add 20 for
a little buffer
myText.width = textWidth + 20;
Now my suggestion is if your going to be dynamically creating
these on the fly from a database call you throw it into a method /
class and have that do all the work for you so all you have to do
is pass the text to it and it resizes itself based on the example
above.

JSF : Dynamic link generated by commandLink does not work

In the following code, without <f:verbatim>, it is giving "Duplicate ID in the view" Exception. But with <f:verbatim>, the links generated by commandLink does not work. Please help me to solve this problem.
Thank you in advance.
Regards
Abdul
<%-- jsf:pagecode language="java" location="/src/pagecode/eservice/DisplayMoreEServices.java" --%><%-- /jsf:pagecode --%>
<%@ include file="/includes/g_common_include.jsp" %>
<%@page import="java.util.Map"%>
<%@page import="bh.com.cio.egov.EGOVConstants"%>
<%@page import="javax.portlet.PortletSession"%>
<%@page language="java"%>
<%
     PortletSession ses = renderRequest.getPortletSession();
     Map eServiceCatMap = (Map) ses.getAttribute(EGOVConstants.REQ_ESERVICE_LIST_BY_CAT);
     renderRequest.setAttribute(EGOVConstants.REQ_ESERVICE_LIST_BY_CAT,eServiceCatMap);
%>
<%@page import="bh.com.cio.egov.vo.EServiceVO"%>
<f:view>
     <script type="text/javascript">
          function blinkThis(id, color, timeout)
               var idElem = document.getElementById(id);
               if(idElem)
                    idElem.getElementsByTagName('span')[0].style.color = color;
                    setTimeout('switchColor(\'' + id + '\', \'#8A7C5B\', ' + timeout + ')', timeout);
          function switchColor(id, color, timeout)
               var idElem = document.getElementById(id);
               if(idElem)
                    idElem.getElementsByTagName('span')[0].style.color = color;
                    setTimeout('blinkThis(\'' + id + '\', \'#FF3030\', ' + timeout + ')', timeout);
     </script>
<f:loadBundle basename="nls.egovresource" var="nls"/>
<hx:scriptCollector id="scriptCollector1">
     <h:form id="form2">
<f:verbatim>
          <div class="header-top">
               <h:outputText value='#{nls["eservice_label_title"]}'></h:outputText>
          </div>
          <c:forEach items="${requestScope.REQ_ESERVICE_LIST_BY_CAT}" var="categoryVOs" varStatus="catIndex">
               <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                         <td> </td>
                         <td class="gray1" height="30px">
                                   <c:out value="${categoryVOs.value.category.categoryName}" escapeXml="false"></c:out>
                         </td>
                    </tr>
                    <tr>
                         <td width="2">
                              <div align="right">
                                   <img src='<%= imageRootDir + "dot.png"%>' width="4" height="1" />
                              </div>
                         </td>
                         <td width="100%" >
                              <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
                                   <c:forEach items="${categoryVOs.value.eservice}" var="service" varStatus="serviceIndex">
                                   <%
                                        EServiceVO serviceObj = (EServiceVO) pageContext.getAttribute("service");
                                        String action = null;
                                        int serviceId= -1;
                                        if(serviceObj!=null)
                                             action = serviceObj.getServiceAction();
                                             serviceId = serviceObj.getServiceId();
                                        if(action!=null && action.startsWith("$"))
                                   %>
                                   <c:set var="jstl_to_jsf_serviceName" value="${service.serviceName}" scope="request"/>
                                   <c:set var="jstl_to_jsf_url_en" value="${service.serviceAction}" scope="request"/>
                                   <c:set var="jstl_to_jsf_url_ar" value="${service.serviceActionAr}" scope="request"/>
                                   <tr>
                                        <td height="17">
                                             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                  <tr>
                                                       <td width="95%" id="extMoreCell_${catIndex.index}_${serviceIndex.index}">
                                                            <img src='<%= imageRootDir +"arrow1.png"%>' width="15" height="16" border="0"/>
                                                            <h:commandLink styleClass="links menu-txt" action="#{pc_EServiceView.doExternalLinkAction}">
                                        <h:outputText value="#{jstl_to_jsf_serviceName}" styleClass="menu-txt"/>
                                             <f:param name="PARAM_ESERVICE_URL_EN" value="#{jstl_to_jsf_url_en}"></f:param>
                                             <f:param name="PARAM_ESERVICE_URL_AR" value="#{jstl_to_jsf_url_ar}"></f:param>
                                             <f:param name="JSP_ACTION" value="ACT_EXTERNAL_ESERVICE"></f:param>
                                        </h:commandLink>
                                                       </td>
                                                  </tr>
                                             </table>
                                             <script type="text/javascript">
                                                  <c:if test="${service.serviceId eq '53'}">
                                                       blinkThis('extMoreCell_7_3', '#FF3030', 1000);
                                                  </c:if>
                                                  <c:if test="${service.serviceId eq '54'}">
                                                       blinkThis('extMoreCell_7_4', '#FF3030', 1000);
                                                  </c:if>
                                                  <c:if test="${service.serviceId eq '55'}">
                                                       blinkThis('extMoreCell_7_5', '#FF3030', 1000);
                                                  </c:if>
                                                  <c:if test="${service.serviceId eq '56'}">
                                                       blinkThis('extMoreCell_0_8', '#FF3030', 1000);
                                                  </c:if>
                                                  <c:if test="${service.serviceId eq '57'}">
                                                       blinkThis('extMoreCell_8_8', '#FF3030', 1000);
                                                  </c:if>
                                                  <c:if test="${service.serviceId eq '59'}">
                                                       blinkThis('extMoreCell_1_8', '#FF3030', 1000);
                                                  </c:if>
                                                  <c:if test="${service.serviceId eq '58'}">
                                                       blinkThis('extMoreCell_5_6', '#FF3030', 1000);
                                                  </c:if>
                                                       <c:if test="${service.serviceId eq '28'}">
                                                       blinkThis('extMoreCell_1_4', '#FF3030', 1000);
                                                  </c:if>
                                                       <c:if test="${service.serviceId eq '20'}">
                                                       blinkThis('extMoreCell_5_3', '#FF3030', 1000);
                                                  </c:if>
                                                       <c:if test="${service.serviceId eq '60'}">
                                                       blinkThis('extMoreCell_7_6', '#FF3030', 1000);
                                                  </c:if>
                                             </script>
                                        </td>
                                   </tr>
                                   <tr>
                                        <td bgcolor="#FAF9FA" background='<%= imageRootDir + "line-bg-eservices.png"%>'><img src='<%= imageRootDir +"line-bg-eservices.png"%>' width="2" height="1" border="0"/></td>
                                   </tr>
                                   <%}
                                   else if(action!=null)
                                   %>
                                   <c:set var="jstl_to_jsf_serviceName" value="${service.serviceName}" scope="request"/>
                                   <wps:urlGeneration contentNode="${service.serviceAction}" allowRelativeURL="false" keepNavigationalState="true">
                                   <%
                                   //String urlC = "http://"+renderRequest.getServerName()+":"+renderRequest.getServerPort()+wpsURL;
                                   String urlC = "" + wpsURL;
                                   %>
                                   <c:set var="url" value="<%=urlC%>" scope="request"/>
                              </wps:urlGeneration>
                                   <tr>
                                        <td height="17">
                                             <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                  <tr>
                                                       <td id="intMoreCell_${catIndex.index}_${serviceIndex.index}">
                                                       <img src='<%= imageRootDir +"arrow1.png"%>' width="15" height="16" border="0"/>
                                                       <hx:outputLinkEx styleClass="links menu-txt" value="#{url}">
                                                            <h:outputText value="#{jstl_to_jsf_serviceName}" styleClass="menu-txt"></h:outputText>
                                                       </hx:outputLinkEx>
                                                       </td>
                                                  </tr>
                                             </table>
                                        </td>
                                   </tr>
                                   <tr>
                                        <td bgcolor="#FAF9FA" background='<%= imageRootDir + "line-bg-eservices.png"%>' ><img src='<%= imageRootDir +"line-bg-eservices.png"%>' width="2" height="1" border="0"/></td>
                                   </tr>
                                   <%
                                        %>
                                   </c:forEach>
                              </table>
                         </td>
                    </tr>
               </table>
          </c:forEach>
          </br>
          <h:messages styleClass="messages" id="messages1"></h:messages>
          </f:verbatim>
          </h:form>
     </hx:scriptCollector>
</f:view>

1) Throw your code away and use h:dataTable instead of c:forEach to render a table of dynamic size.
or:
2) Hand-assign every UIInput and UICommand element inside the loop an unique ID. E.g. "commandLinkId" + loopIndex

JSF: dynamic radiogroup with optional inputtext

Hi, I'm trying to create a jsf page for a survey webapp.
The problem is that I need to do a "unique answer" type of question. I have to render some dynamic options and in some cases an inputtext field to allow free text as answer, and, of course, I have to get the user answer to store the info in the DB.
It would be something like this:
Choose your DB:
[ ] Oracle
[ ] DB2: version ______
[ ] MySQL
[ ] other: ______
I have a List of "Options" in my backing bean (each one holds the text of the option and a flag to indicate the need of the inputtextfield). That's why it has to be dynamic.
I haven't found a way to do this with common jsf or tomahawk tags, and all my attempts to solve it using tables have failed. Does anybody have an idea on this?

Yep, I posted a question there. But that thread asks for a slightly different thing. There, the options in the selectOneRadio are fixed so he can build a hardcoded datatable in the jsp. Here I can't do that because I don't know how many options do I have to display or the text of each one. The only thing I know is that I will have to display some options and some of them will have to be associated to an inputtext field.
If I had to do this page without the inputtext feature, I would do something like this:
<h:selectOneRadio value="#{mybean.selectedOption}"
<f:selectItems value="#{mybean.options}" />
</h:selectOneRadio>I tried to mix this with the table solution you proposed on that thread, but I couldn't make it work. Could you explain it a little more?

BUG JSF h:dataTable with JDBC ResultSet - only last column is updated

I tried to create updatable h:dataTable tag with three h:inputText columns with JDBC ResultSet as data source. But what ever I did I have seceded to update only the last column in h:dataTable tag.
My JSF page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=windows-1250"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1250"/>
<title>Stevan</title>
</head>
<body><h:form>
<p>
<h:messages/>
</p>
<p>
<h:dataTable value="#{tabela.people}" var = "record">
<h:column>
<f:facet name="header">
<h:outputText value="PIN"/>
</f:facet>
<h:inputText value="#{record.PIN}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Surname"/>
</f:facet>
<h:inputText value="#{record.SURNAME}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:inputText value="#{record.NAME}"/>
</h:column>
</h:dataTable>
</p>
<h:commandButton value="Submit"/>
</h:form></body>
</html>
</f:view>
My java been is:
package com.steva;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class tabela {
private Connection conn;
private ResultSet resultSet;
public tabela() throws SQLException, ClassNotFoundException {
Statement stmt;
Class.forName("oracle.jdbc.OracleDriver");
conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "hr", "hr");
stmt = conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_UPDATABLE);
resultSet = stmt.executeQuery("SELECT PIN, SURNAME, NAME FROM PERSON");
public ResultSet getPeople() {
return resultSet;
I have instaled “Oracle Database 10g Express Edition Release 10.2.0.1.0” – product on my PC localy. I have enabled HR schema and I have instaled and pupulated with sample data folloving table:
CREATE TABLE "PERSON"
(     "PIN" VARCHAR2(20) NOT NULL ENABLE,
     "SURNAME" VARCHAR2(30),
     "NAME" VARCHAR2(30),
     CONSTRAINT "PERSON_PK" PRIMARY KEY ("PIN") ENABLE
I have:
Windows XP SP2
Oracle JDeveloper Studio Edition Version 10.1.3.1.0.3894
I am not shure why this works in that way, but I think that this is a BUG
Thanks in advance.

Hi,
I am sorry because of formatting but while I am entering text looks fine but in preview it is all scrambled. I was looking on the Web for similar problems and I did not find anything similar. Its very simple sample and I could not believe that the problem is in SUN JSF library. I was thinking that problem is in some ResultSet parameter or in some specific Oracle implementation of JDBC thin driver. I did not try this sample on any other platform, database or programming tool. I am new in Java and JSF and I have some experience only with JDeveloper.
Java been(session scope):
package com.steva;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class tabela {
private Connection conn;
private ResultSet resultSet;
public tabela() throws SQLException, ClassNotFoundException {
Statement stmt;
Class.forName("oracle.jdbc.OracleDriver");
conn = DriverManager.getConnection
("jdbc:oracle:thin:@localhost:1521:xe", "hr", "hr");
stmt = conn.createStatement
(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_UPDATABLE);
resultSet = stmt.executeQuery("SELECT PIN, SURNAME, NAME FROM PERSON");
public ResultSet getZaposleni() {
return resultSet;
JSF Page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=windows-1250"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1250"/>
<title>Stevan</title>
</head>
<body><h:form>
<p>
<h:messages/>
</p>
<p>
<h:dataTable value="#{tabela.zaposleni}" var = "record">
<h:column>
<f:facet name="header">
<h:outputText value="PIN"/>
</f:facet>
<h:inputText value="#{record.PIN}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Surname"/>
</f:facet>
<h:inputText value="#{record.SURNAME}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:inputText value="#{record.NAME}"/>
</h:column>
</h:dataTable>
</p>
<h:commandButton value="Submit"/>
</h:form></body>
</html>
</f:view>

Dynamic DataTable Creation

Hi
I want to write dataTable dynamic. with command link column..for that I had written following code.
import javax.faces.application.Application;
import javax.faces.component.UIInput;
import javax.faces.component.UIMessage;
import javax.faces.component.UIOutput;
import javax.faces.component.UIColumn;
import javax.faces.component.UIData;
import javax.faces.component.UIPanel;
import javax.faces.context.FacesContext;
import javax.faces.el.ValueBinding;
import javax.faces.component.html.HtmlDataTable;
import java.util.ArrayList;
import javax.faces.component.html.HtmlOutputLink;
protected void populateDataTable() { //
FacesContext facesContext = FacesContext.getCurrentInstance();
Application application = facesContext.getApplication();
UIData panel = (UIData) application.createComponent("javax.faces.component.html.HtmlDataTable");
String valueBindingExpressionForPanel1 = "#{" + "ListHolderBean.employeeList" + "}";
String valueBindingExpressionForPanel2 = "employee";
ValueBinding valueBindingForPanel1 = application.createValueBinding(valueBindingExpressionForPanel1);
ValueBinding valueBindingForPanel2 = application.createValueBinding(valueBindingExpressionForPanel2);
panel.setValueBinding("value", valueBindingForPanel1);
panel.setValueBinding("var", valueBindingForPanel2);
for (int index = 0; index < 2; index++) {
     UIColumn column = (UIColumn) application.createComponent("javax.faces.component.UIColumn");
     //output link
UIOutput outputLink = (UIOutput) application.createComponent("javax.faces.component.html.HtmlOutputLink");
// message.getAttributes().put("for", fieldNames[index]);
String valueBindingExpression = "#{" + "employee.name" + "}";
ValueBinding valueBinding = application.createValueBinding(valueBindingExpression);
System.out.println(valueBindingExpression);
outputLink.setValueBinding("title", valueBinding);
outputLink.setValueBinding("value", valueBinding);
ValueBinding valueBinding2 = application.createValueBinding("update(this.title);");
outputLink.setValueBinding("onmousedown", valueBinding2);
ValueBinding valueBinding3 = application.createValueBinding("onclick");
outputLink.setValueBinding("onclick", valueBinding3);
column.getChildren().add(outputLink);
panel.getChildren().add(column);
Following error comes when I run this code
Named Object: 'javax.faces.component.html.HtmlDataTable' not found.
What is issue although I had import that file also .

Application#createComponent() requires ComponentType. For an HtmlDataTable it is "javax.faces.HtmlDataTable". Also see HtmlDataTable.COMPONENT_TYPE.
So you have to use createComponent(HtmlDataTable.COMPONENT_TYPE);.
Or just HtmlDataTable table = new HtmlDataTable();
By the way an OutputLink is not the same as CommandLink.

Jsf dynamic datatable

Similar Messages

Maybe you are looking for