5 Replies Latest reply on Nov 23, 2010 12:42 AM by Shashank Raj

    rich:dataTable - print issue....

    Shashank Raj Newbie

      hello every one, I'm new to JSF and Richfaces. Let me explain my problem.

       

      I have a <rich:dataTable> with some columns, The records from database are retrieved and are displayed here in this table. This table have two more columns for Edit and Delete options. So along with each record there will be Edit and Delete commandLinks. I have placed this table with in <div> tag so that i can pass the div id to the javascript to print the table. Below this table i have a print button which is <h:commandButton> and it will print this table by calling a javascript method.

       

      Now whenever user clicks on print button then the Edit & Delete columns should not appear in the print page. how can i disable or set the render values to false. Here this print button calls no backing bean method. it just calls a javascript method. Here i cannot use <a4j:commandButton>.

       

      I have placed the same table twice in my jsf page. Within one table i removed Edit and Delete columns and placed this table within <h:inputHidden> so that whenever user clicks on the print button this perticular table can be passed to the print functionality and another table with all the options so that user can view the records and perform operations.

       

      But now here both the tables are being displayed one after the other. If any one knows how to solve this problem then please post it here...

      Let me give some sample code here

       

      <script>

           function print(node) {

       

           }

      </script>

       

      <h:inputHidden>

      <div id="printTable">

      <rich:dataTable>

                                         //     Here this table will not have edit and delete columns.

       

      </rich:dataTable>

      </div>

      </h:inputHidden>

       

      <rich:dataTable>

       

                                         //     Here this table will have edit and delete columns to perform on the each record present in the table.

       

      <rich:dataTable>

      <h:commandButton value="Print" onclick="print(printTable)">

        • 1. Re: rich:dataTable - print issue....
          Ilya Shaikovsky Master

          I do not think that usage of two tables is a good workaround so propose to decline that way from the beginning.

           

          It's better to load special stylesheet using media=print which will have the classes which will hide the columns with those classes specified for printing mode.

          • 2. Re: rich:dataTable - print issue....
            Shashank Raj Newbie

            First of all thanks for the reply

             

            I have even tried this approach.... but still no proper outcome. I have written the following css with in the file

             

            <style type="text/css" media="print">
                div.hidden {
                    display:none;
                }
            </style>

             

            and with in the <div class='hidden'> tag i am placing the columns which should not be rendered when clicked on print button...

             

            any furthur help appreciated....

            • 3. Re: rich:dataTable - print issue....
              Ilya Shaikovsky Master

              <style media="print">
              .hide{
              display: none;
              }
              </style>
              <h:form>
              <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="20" reRender="ds" id="simpletable">
              <f:facet name="header">
              <rich:columnGroup>
              <rich:column colspan="2" >
              <h:outputText value="Filtering Example"/>
              </rich:column>
              <rich:column breakBefore="true">
              <h:outputText value="State Name"/>
              </rich:column>
              <rich:column>
              <h:outputText value="State Capital"/>
              </rich:column>
              </rich:columnGroup>
              </f:facet>
              <rich:column filterBy="#{cap.state}" filterEvent="onkeyup" filterValue="#{capitalsBean.currentStateFilterValue}" styleClass="hide">
              <h:outputText value="#{cap.state}"/>
              </rich:column>
              <rich:column filterBy="#{cap.name}" filterEvent="onkeyup" filterValue="#{capitalsBean.currentNameFilterValue}">
              <h:outputText value="#{cap.name}"/>
              </rich:column>
              <f:facet name="footer">
              <rich:datascroller id="ds" renderIfSinglePage="false"></rich:datascroller>
              </f:facet>
              </rich:dataTable>
              <a4j:commandButton action="#{capitalsBean.resetFilter}" value="Reset Current Filtering" reRender="simpletable" ajaxSingle="true" limitToList="true"/>
              </h:form>

              <style media="print">

                   .hide{

                   display: none;

                   }

              </style>

                   <h:form>

                        <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="20" reRender="ds" id="simpletable">

                             <rich:column filterBy="#{cap.state}" filterEvent="onkeyup" filterValue="#{capitalsBean.currentStateFilterValue}" styleClass="hide">

                                  <h:outputText value="#{cap.state}"/>

                             </rich:column>

                             <rich:column filterBy="#{cap.name}" filterEvent="onkeyup" filterValue="#{capitalsBean.currentNameFilterValue}">

                                  <h:outputText value="#{cap.name}"/>

                             </rich:column>

                        </rich:dataTable>

                   </h:form>

              just tried and it works.

               

              if you trying to wrap the column into the div - it's wrong as breaking table structure. (table-tbody-tr-div-td - not correct html hierarchy)

              • 4. Re: rich:dataTable - print issue....
                Shashank Raj Newbie

                Even i tried this way buddy but no use... Here is my complete page code just check it out and point out where exactly the problem is ...?

                 

                 


                <style type="text/css" media="print">
                .hidden{
                    display:none;
                }
                </style>

                 

                <script type="text/javascript">
                    function print(node) {
                        var content = node.innerHTML;
                        var printWindow = window.open();

                 

                        printWindow.document.write("<body onload='this.print()'>"+content);
                        printWindow.document.close();
                    }
                </script>

                 

                <h:form id="form">
                <a4j:outputPanel ajaxRendered="true">
                <rich:panel>

                 

                <div id="printTable">

                 

                <rich:dataTable border="1" value="#{hc.h_List}" rows="1" var="list">

                 

                <f:facet name="header">
                   
                <rich:columnGroup>
                    <rich:column width="10%" rowspan="2">
                        <h:outputText value="#" />
                    </rich:column>
                    <rich:column colspan="2">
                        <h:outputText value="Date" />
                    </rich:column>
                    <rich:column rowspan="2">
                        <h:outputText value="Name" />
                    </rich:column>
                    <rich:column rowspan="2">
                        <h:outputText value="Classes" />
                    </rich:column>
                    <rich:column rowspan="2">
                        <h:outputText value="Remarks" />
                    </rich:column>
                    <rich:column rowspan="2" styleClass="hidden">
                        <h:outputText value="Edit" />
                    </rich:column>
                    <rich:column rowspan="2" styleClass="hidden">
                        <h:outputText value="Delete" />
                    </rich:column>
                    <rich:column breakBefore="true">
                        <h:outputText value="From" />
                    </rich:column>
                    <rich:column>
                        <h:outputText value="To" />
                    </rich:column>
                </rich:columnGroup>
                </f:facet>

                 

                <rich:subTable value="#{list.hbList}" var="record">
                <rich:column>
                    <h:outputText value="#{record.counter}" />
                </rich:column>
                <rich:column>
                    <h:outputText value="#{record.fromDate}" />
                </rich:column>
                <rich:column>
                    <h:outputText value="#{record.toDate}" />
                </rich:column>
                <rich:column>
                    <h:outputText value="#{record.name}" />
                </rich:column>
                <rich:column>
                    <h:outputText value="#{record.class}" />
                </rich:column>
                <rich:column>
                    <h:outputText value="#{record.remarks}" />
                </rich:column>
                <rich:column styleClass="hidden">
                    <a4j:region>
                    <a4j:commandLink ajaxSingle="true" styleClass="cmdlink" onclick="#{rich:component('editPanel')}.show()">
                        <h:graphicImage value="/images/icons/edit.gif" />
                        <f:setPropertyActionListener />
                    </a4j:commandLink>
                    </a4j:region>
                </rich:column>
                <rich:column styleClass="hidden">
                    <a4j:region>
                    <a4j:commandLink ajaxSingle="true" oncomplete="#{rich:component('deletePanel')}.show()">
                        <h:graphicImage value="/images/icons/delete.gif" />
                        <f:setPropertyActionListener />
                    </a4j:commandLink>
                    </a4j:region>
                </rich:column>
                </rich:subTable>
                </rich:dataTable>

                 

                </div>

                 

                <f:verbatim><BR></f:verbatim>
                <f:verbatim><BR></f:verbatim>

                 

                <h:panelGrid>
                    <h:commandButton value="Print" onclick="print(printTable)" immediate="true" />
                </h:panelGrid>

                 

                </rich:panel>

                 

                </a4j:outputPanel ajaxRendered="true">

                 

                </h:form>

                • 5. Re: rich:dataTable - print issue....
                  Shashank Raj Newbie

                  Hey buddy its working when i use print preview/print from browser's file menu but not the print button that is present in the page and when I use browser's print option its disabling the columns but entire page is displaying for the printing. I think, I need to make some modifications in the javascript. Can u help me out....