p:dataTable doesn't display each p:selectManyCheckbox selected

1
votes

Passed on the demo example of:

https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml

and I can show the complete example as primefaces-test-master and run as mvn clean jetty:run-exploded

I've created a displays using 'p:selectManyCheckbox ' to show all my Year, Brand, Colour, Price & Sold' as:

<p:selectManyCheckbox id="carColumns" value="#{carService.selectedItems}">
            <f:selectItem itemLabel="Year" itemValue="Year"/>
            <f:selectItem itemLabel="Brand" itemValue="Brand"/>
            <f:selectItem itemLabel="Colour" itemValue="Colour"/>
            <f:selectItem itemLabel="Price" itemValue="Price"/>
            <f:selectItem itemLabel="Sold" itemValue="Sold"/>
            <p:ajax listener="#{carService.selectedItemsChanged}" update="formCars:tblCars"/>
 </p:selectManyCheckbox>

It then displays the p:dataTable and each p:column of the 'car' plus the others:

<p:dataTable id="tblCars" var="car" value="#{dtBasicView.cars}" paginator="true"
                     rows="100"
                     multiViewState="true"
                     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     rowsPerPageTemplate="5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100"
                     resizableColumns="true"
                     draggableColumns="true"
                     scrollWidth="100%">

            <f:facet name="header">
                <p:commandButton id="columnTogglerCars" type="button" value="Columns" style="float:right"
                                 icon="pi pi-align-justify"/>
                <p:columnToggler datasource="tblCars" trigger="columnTogglerCars"/>
            </f:facet>

            <p:column headerText="Id" rendered="true">
                <h:outputText value="#{car.id}"/>
            </p:column>

            <p:column headerText="Year" sortBy="#{car.year}" rendered="#{carService.yearColumnRendered}">
                <h:outputText value="#{car.year}"/>
            </p:column>

            <p:column headerText="Brand" sortBy="#{car.brand}" rendered="#{carService.brandColumnRendered}">
                <h:outputText value="#{car.brand}"/>
            </p:column>

            <p:column headerText="Colour" sortBy="#{car.colour}" rendered="#{carService.colourColumnRendered}">
                <h:outputText value="#{car.colour}"/>
            </p:column>

            <p:column headerText="Price" sortBy="#{car.price}" rendered="#{carService.priceColumnRendered}">
                <h:outputText value="#{car.price}"/>
            </p:column>

            <p:column headerText="Sold" sortBy="#{car.sold}" rendered="#{carService.soldColumnRendered}">
                <h:outputText value="#{car.sold}"/>
            </p:column>
</p:dataTable>

If I then alter the orders (up or down) displayed of p:column headerText on the selected items of p:selectManyCheckbox then sometimes will not actually displayed each of the 'Year, Brand, Colour, Price & Sold' in dataTable.

Am I doing something wrong with p:selectManyCheckbox and p:dataTable ?

(1) Hows all five images 'Year, Brand, Colour, Price & Sold'. (2) Show two pages 'Year, Brand' (3) Selects "Year, Brand, Colour but it only shows '"Year, Brand', though selected (Colour)!

enter image description here

enter image description here

enter image description here

See the code at: https://www.dropbox.com/s/vfugj0fppejtti7/primefaces-test-master.zip?dl=0

2
primefaces
try to insert the tblCars inside the panel and with ajax you update the panel, I have same problem and this have resolved it – vincenzopalazzo
Thanks for that. Have you a pull example? – NOTiFY
yes, I add a new answer – vincenzopalazzo

2 Answers

0
votes

I had the same problem with ajax and p:dataTable, I solve it insert the p:dataTable inside the p:panel and with ajax I have update the panel, an example

<p:panel id="panel-update">
    <p:dataTable id="tblCars" var="car" value="#{dtBasicView.cars}" paginator="true"
                         rows="100"
                         multiViewState="true"
                         paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100"
                         resizableColumns="true"
                         draggableColumns="true"
                         scrollWidth="100%">

                <f:facet name="header">
                    <p:commandButton id="columnTogglerCars" type="button" value="Columns" style="float:right"
                                     icon="pi pi-align-justify"/>
                    <p:columnToggler datasource="tblCars" trigger="columnTogglerCars"/>
                </f:facet>

                <p:column headerText="Id" rendered="true">
                    <h:outputText value="#{car.id}"/>
                </p:column>

                <p:column headerText="Year" sortBy="#{car.year}" rendered="#{carService.yearColumnRendered}">
                    <h:outputText value="#{car.year}"/>
                </p:column>

                <p:column headerText="Brand" sortBy="#{car.brand}" rendered="#{carService.brandColumnRendered}">
                    <h:outputText value="#{car.brand}"/>
                </p:column>

                <p:column headerText="Colour" sortBy="#{car.colour}" rendered="#{carService.colourColumnRendered}">
                    <h:outputText value="#{car.colour}"/>
                </p:column>

                <p:column headerText="Price" sortBy="#{car.price}" rendered="#{carService.priceColumnRendered}">
                    <h:outputText value="#{car.price}"/>
                </p:column>

                <p:column headerText="Sold" sortBy="#{car.sold}" rendered="#{carService.soldColumnRendered}">
                    <h:outputText value="#{car.sold}"/>
                </p:column>
    </p:dataTable>
</p:panel>

Now with ajax can update the panel

<p:selectManyCheckbox id="carColumns" value="#{carService.selectedItems}">
            <f:selectItem itemLabel="Year" itemValue="Year"/>
            <f:selectItem itemLabel="Brand" itemValue="Brand"/>
            <f:selectItem itemLabel="Colour" itemValue="Colour"/>
            <f:selectItem itemLabel="Price" itemValue="Price"/>
            <f:selectItem itemLabel="Sold" itemValue="Sold"/>
            <p:ajax listener="#{carService.selectedItemsChanged}" update="formCars:panel-update"/>
 </p:selectManyCheckbox>
0
votes

you're doing something that's not consistent, the p:columnToggler uses javascript to show and hide those dataTable columns, but using your selectManyCheckbox you're using the jsf some managed bean to not render some column, first of all stick to one of those, as the selectManyCheckbox and it's managed bean carService.selectedItems have no idea what you have hidden or displayed using the p:columnToggler.

anyway if you're trying to create a p:dataTable that has dynamic columns then you should do it as in this example.

Edit 1: As described in Kukeltje comment, using visible attribute of p:column is the way to go instead of using rendered if you really nead to manage showing and hiding columns in the backing bean and still be able to use the columnToggler