0

i have checkbox column in datatable, i want to have some ajax code which when i click on the checbox button on the header should check all the checkbox in the rendered data rows of the datatable. I am using primefaces, they have something out of box for this but we don't want to implement it. Please let me know if there is a easy solution using ajax.

As of now we have coded as below but we can go something better than that.

<p:dataTable id="userListTable" value="#{Bean.List}"
                    var="user" rowClasses="odd even"


                    <p:column style="width:18px">
                        <f:facet name="header">
                            <p:selectBooleanCheckbox
                                valueChangeListener="#{Controller.toggleCheckBox}"
                                partialSubmit="true" immediate="true" />

                        </f:facet>
                        <p:selectBooleanCheckbox value="#{user.disable}"
                            disabled="#{user.disable}"
                            valueChangeListener="#{circleController.enableDisableOkbutton}"
                            partialSubmit="true" immediate="true" />

                    </p:column>

                    <p:column>

                        <f:facet name="header">
                            <h:outputText value="#{labels['circle.userList.name']}" />
                        </f:facet>
                        <p:panelGrid styleClass="noBorders">
                            <p:row>
                                <p:column rowspan="3" style="width:60px;">
                                    <p:graphicImage
                                        value="#{name}.jpg"
                                        style="width:50px;height:50px" />
                                </p:column>
                                <p:column>

                                    <h:outputText value="  " />
                                    <h:outputText value="#{user.firstName}" />
                                    <h:outputText value="  " />
                                    <h:outputText value="#{user.lastName}" />


                                </p:column>
                            </p:row>
                            <p:row>
                                <h:outputText value="#{user.country}" />
                            </p:row>


                        </p:panelGrid>
                    </p:column>

                </p:dataTable>
Coool Awesome
  • 145
  • 1
  • 5
  • 16
  • A basic recipe for what you want - one way it might be done ... Use jQuery to register a click event on the header checkbox. Since you're using server controls, you may need to force a postback with jQuery/JavaScript and pass a value you can check for(ie: on jsf's version of "Page_Load") to mark all of the checkboxes selected. If you dont do the postback (NOT ajax) I don't know about your control, but once you refresh the page the changes to the checkboxes will likely be gone without the postback and server code executing. I have not used jsf specifically or pimefaces so that's my disclaimer. – aikeru Aug 05 '12 at 16:19
  • @aikeru since i m using primefaces i'm not able to figure out how to add jQuery code. Is there an example link which can show me? – Coool Awesome Aug 05 '12 at 19:39
  • Apparently jQuery is bundled with PrimeFaces. This post is about including different versions: http://stackoverflow.com/questions/5457292/jquery-conflicts-with-primefaces – aikeru Aug 06 '12 at 11:20
  • In any case, jQuery is just the JavaScript library I prefer. – aikeru Aug 06 '12 at 11:21
  • 1
    if you are already using primefaces, why wouldn't you want to use implementation provided for this use case? primefaces even provides an ajax hook, "toggleSelect", that you can use for calling a method in backing bean and/or updating a component when the checkbox that selects/unselects all rows is clicked – damian Aug 06 '12 at 12:18
  • @Damian i have opened another thread on the issue when i am directly using datatable with checkbox button. Is it something you can update on it ? http://stackoverflow.com/questions/11822122/pdatatable-with-selectionmode-as-multiple – Coool Awesome Aug 06 '12 at 20:51

0 Answers0