Board index JavaServer Faces General Populating Data Grid table with Spinner Components

Populating Data Grid table with Spinner Components

Components, Ajax Framework, Utilities and More.


Posts: 7
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.

<?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>


Posts: 15043
Location: Cybertron

Can you try;

<p:dataGrid id="additionalItemGrid" var="selectionItem" value="#{itemSelection.selectionAddtionalItems}" columns="1">
   <p:column>
                        <h:panelGroup>
                            <h:outputText value="#{selectionItem.itemType.name} "/>
                            <p:spinner  value="#{selectionItem.itemCount}" min="#{selectionItem.min}" max ="#{selectionItem.max}"/>
                        </h:panelGroup>
   </p:column>
                    </p:dataGrid>
PrimeFaces Lead


Posts: 7
Hi Optimus,

Thank you for the reply.
When I added <p:column> element, unique ids are created and min and max values are correctly rendered on IE 8 and Firefox 3.6.
But in Chrome, controls buttons next to text are missing (Spinner example http://www.primefaces.org/showcase/ui/spinner.jsf works fine in Chrome)

Regards


Posts: 15043
Location: Cybertron

You need f:view contentType="text/html" in your page, search the forum for similar topics about webkit.
PrimeFaces Lead


Posts: 7
Adding f:view solved Chrome issue. Thanks a lot.


Return to General