Populating Data Grid table with Spinner Components
Posted: 25 Jan 2011, 13:04
Hi all,
I am trying to create a data grid component including spinner components in its cells. Spinner components have corresponding min and max values.
However, the created spinner controls on the page have all the same min and max values. I checked the created XHTML and observed all have the same id.
I think this confuses the javascript manipulating the DOM. I also tried to assign ids to spinner components using "${}" syntax. But then I got "Empty id attribute is not allowed"
error on the page.
Shouldn't we get uniquely generated element ids for these components?
Actually getting empty id error when I try to assign ids myself is another question for me. What would be happen if I need to know ids of those element. (i.e. for component updates in form posts)
Any help is really appreciated.
Regards
Here is the facelet I use.
I am trying to create a data grid component including spinner components in its cells. Spinner components have corresponding min and max values.
However, the created spinner controls on the page have all the same min and max values. I checked the created XHTML and observed all have the same id.
I think this confuses the javascript manipulating the DOM. I also tried to assign ids to spinner components using "${}" syntax. But then I got "Empty id attribute is not allowed"
error on the page.
Shouldn't we get uniquely generated element ids for these components?
Actually getting empty id error when I try to assign ids myself is another question for me. What would be happen if I need to know ids of those element. (i.e. for component updates in form posts)
Any help is really appreciated.
Regards
Here is the facelet I use.
Code: Select all
<?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:p="http://primefaces.prime.com.tr/ui"
>
<h:head>
<title>Test Page</title>
</h:head>
<h:body>
<p:panel header="Item Selection">
<h:form prependId="false" id="itemSelectionForm">
<h:panelGrid columns="2">
<h:outputText value="Main Item"/>
<h:selectOneMenu id="mainItemList" label="Main Item Selection" required="true" valueChangeListener="#{itemSelection.mainItemSelected}" >
<f:selectItems value="#{itemSelection.mainItems}" var="mainItem" itemLabel="#{mainItem.name}" itemValue="#{mainItem.itemId}"/>
<f:ajax event="valueChange" execute="@form" render="additionalItemGrid"/>
</h:selectOneMenu>
<h:outputText value="Additional Items"/>
<p:dataGrid id="additionalItemGrid" var="selectionItem" value="#{itemSelection.selectionAddtionalItems}" columns="1">
<h:panelGroup>
<h:outputText value="#{selectionItem.itemType.name} "/>
<p:spinner value="#{selectionItem.itemCount}" min="#{selectionItem.min}" max ="#{selectionItem.max}"/>
</h:panelGroup>
</p:dataGrid>
</h:panelGrid>
</h:form>
</p:panel>
</h:body>
</html>