CODEWITHSUNDEEP
jsf-2datatablepanelgrid
shyju cv
shyju cv

Reputation: 11

JSF 2 display List values in 2 columns

I am a newbie in JSF. I am using JSF 2 and there is a list being populated by my bean file. In my .xhtml file, I want to display this information as 2 columns.

In bean class List modules;(Contains module.enable module.name)

The list has say 30 modules. I want to display all these modules information in 2 columns. For eg: I want to display first module information(module.enable module.name) in one column and the second in second column. Or it can be first 15 modules in first column and the remaining 15 in second column. Tried with both h:dataTable and h:panelGrid but couldn't get it working.

Any help would be highly appreciated.

Thanks Shyju

Upvotes: 0

Views: 4893

Answers (2)

shyju cv
shyju cv

Reputation: 11

This is my code to resolve the issue using the varStatus property of ui:repeat

   <h:panelGrid  id="moduleList" columns="2" border="1" >
        <f:facet name="header">
            <h:outputText value="Modules"/>
        </f:facet>
        <ui:repeat  value="#{EnableCodeBean.modules}"  var="modules" varStatus="status">
            <h:panelGroup>
                <h:selectBooleanCheckbox value="#{modules.enable}"/>
                <h:outputText value="#{modules.name}"/>
            </h:panelGroup>
            <f:verbatim rendered="#{status.index mod 2 == 1}">
                &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
            </f:verbatim>
            <f:verbatim rendered="#{status.index mod 2 == 0}">
                &lt;/td&gt;&lt;td&gt;
            </f:verbatim>
        </ui:repeat>
    </h:panelGrid>

Upvotes: 1

Omar
Omar

Reputation: 1440

By playing with some <h:dataTable>'s attributes' values, we can make something like that: The attribute first, idicates to the first index of the list to start displaying from, and the rows's one, indicates to the rows' number to be diplayed starting from the begining index designed if explicited, else, it displays from the 1st row and so on.

Here's a kickoff example of this, relying on 2 <h:dataTalbe> tags included in one <h:panelGrid coulmns="2">, and relying only on 4 modules for simplification's purpose, 2 per every column. Every <h:dataTable> tag must have different value of its first attribute :

The Backing-bean:

@ManagedBean
@RequestScoped
public class ModuleBacking{

private List<Module> modules = new ArrayList<Module>();

public ModuleBacking() {
}

@PostConstruct
public void insertion() {
    Module m1 = new Module("math",true);
    Module m2 = new Module("english",false);
    Module m3 = new Module("physics",false);
    Module m4 = new Module("chimics",true);        
    modules.add(m1);
    modules.add(m2);
    modules.add(m3);
    modules.add(m4);
}

public List<Module> getModule() {
    return modules;
}

public List<Module> displayModules(){
    return modules;
}

}

The view :

    <h:body>
    <h:panelGrid columns="2" cellspacing="3" cellpadding="3" style="border-style:   solid" rules="all" >
        <f:facet name="header">
            <h:outputText value="First 2 modules" style="padding-right:80px "/>
            <h:outputText value="Second 2 modules"/>
        </f:facet>
            <h:dataTable value="#{moduleBacking.displayModules()}" var="m" rules="all" first="0" rows="2">
                <h:column>
                        <f:facet name="header" ><h:outputText value="Module's name" /></f:facet>
                        <h:outputText value="#{m.name}" />
                </h:column>
                <h:column>
                    <f:facet name="header" ><h:outputText value="Module's enabling" /></f:facet>
                    <h:outputText value="#{m.enable}" />
                </h:column>
            </h:dataTable>
            <h:dataTable value="#{moduleBacking.displayModules() }" var="m" rules="all" first="2" rows="2">
                <h:column>
                        <f:facet name="header" ><h:outputText value="Module's name" /></f:facet>
                        <h:outputText value="#{m.name}" />
                </h:column>
                <h:column>
                    <f:facet name="header" ><h:outputText value="Module's enable" /></f:facet>
                    <h:outputText value="#{m.enable}" />
                </h:column>
            </h:dataTable>

    </h:panelGrid>  
</h:body>

In your case, the two <h:dataTable> seem to be like these :

<h:dataTable value="#{moduleBacking.displayModules()}" var="m" rules="all" first="0" rows="15">

<h:dataTable value="#{moduleBacking.displayModules()}" var="m" rules="all" first="15" rows="15">

Upvotes: 0

Related Questions