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

Question

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)!

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

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, Aug 28 '19 at 16:14

score 0 · Answer 1 · answered Aug 28 '19 at 19:36

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>

It is strange that updating a panel around a datatable makes it work. What version are you doing this? — Kukeltje, Aug 28 '19 at 21:07
@Kukeltje Yes is very strange, I had this problem with the version 2.2 and 2.3 jsf and 6.9 and 7.9 primefesis — vincenzopalazzo, Aug 28 '19 at 21:25
@Kukeltje Yes is very strange, I had this problem with the version 2.2 and 2.3 jsf and 6.0 and 7.0 primefesis, sorry my fault — vincenzopalazzo, Aug 28 '19 at 21:48
Your example is identical to what I'd originally done. Once I change the order of 'sortBy' up and down and 'p:selectManyCheckbox' is selected it now won't appear on 'p:dataTable' with 'p:column'. — NOTiFY, Aug 30 '19 at 10:02

score 0 · Answer 2 · edited Aug 28 '19 at 21:53

0

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

edited Aug 28 '19 at 21:53

Kukeltje

12,223
4
24
47

answered Aug 28 '19 at 20:02

alibttb

526
4
19

You can combine them in some way... but not using rendered but visible is the way to go then... https://stackoverflow.com/questions/25487243/how-can-i-initially-hide-columns-in-a-pdatatable-with-pcolumntoggler#30262447 – Kukeltje Aug 28 '19 at 21:12
that's true if you use visible instead of rendered, thanks for the information @Kukeltje – alibttb Aug 28 '19 at 21:19
I've tried to use the 'DataTable - Dynamic Columns' but I can't it get it to display all the ''Year, Brand, Colour, Price & Sold' to show the dataTable for each 'column'. IMO there isn't an easy version of PrimeFaces that can display 'p:dataTable' and its 'h:panelGrid'. The 'Template' is not easy to use. – NOTiFY Sep 02 '19 at 14:10

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

2 Answers2