Print Selected Rows

[Guadalupe]

Hello

I need a example of print the selected rows.

[Vignesh Natarajan]

Hi Guadalupe, 

 

Thanks for using Syncfusion products. 

 

Query: “I need a example of print the selected rows.” 

 

From your query, we understand that you need to print the selectedRecords of ejGrid. We have achieved your requirement using ActionBegin and BeforePrint event of ejGrid. Refer the below code example 

 

<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" Selectiontype="Multiple" AllowPaging="True"> 

            <ToolbarSettings ShowToolbar="true" ToolbarItems="printGrid"></ToolbarSettings> 

            <Columns> 

                <ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" Width="75" /> 

                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" /> 

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" /> 

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" /> 

                <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" /> 

                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" /> 

            </Columns>       

      <ClientSideEvents ActionBegin="begin" BeforePrint="beforePrint" /> 

        </ej:Grid> 

    <script type="text/javascript"> 

 window.selectedRows = [];  // window variable to store the selectedrecords while moving from one page to another 

        function printSelectedRows(selRows) {  

            if (!selectedRows.length) selectedRows = selRows;  

            else {  

                for (var sr = 0; sr < selRows.length; sr++) {  

                    selectedRows.push(selRows[sr]);  

                }  

            }  

        }  

        function begin(args) {  

            if (args.requestType == "paging") {                

                if (this.getSelectedRows().length) {  

                    var selRows = this.getSelectedRows();  

                    printSelectedRows(selRows);  

                }  

            }  

        }  

        function beforePrint(args) {  

            var gridInst = $("#<%= FlatGrid.ClientID %>").ejGrid("instance");  

            var selRows = gridInst.getContentTable().find('tr[aria-selected="true"]');  

            if (selectedRows.length || selRows.length) {  

                if (selRows.length) printSelectedRows(selRows);  

                args.element.find(".e-gridcontent tbody tr").remove();  

                args.element.find(".e-gridcontent tbody").append(selectedRows);  

                gridInst.refreshContent();  

            }  

        }  

    </script> 

 

 

Refer the below screenshot for the output 

 

 

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin  

 

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan. 

[Guadalupe]

Thank you! This is perfect!

[Guadalupe]

Hello

I have other problem. When prints for second ocassion, prints the actuality rows and preview rows.

Attachment: EnviarSyncfusionPrintSelectRows_82328e32.rar

[Vignesh Natarajan]

Hi Guadalupe, 

 

Thanks for the update.  

 

Query: ”When prints for second ocassion, prints the actuality rows and preview rows.” 

 

We have validated the reported query and we are able to reproduce the reported issue at out end. To overcome the reported issue we suggest you to clear the selectedRows from window variable in ActionComplete event of ejGrid. 

 

Refer the below code example 

 

<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" Selectiontype="Multiple" AllowPaging="True">  

            <ToolbarSettings ShowToolbar="true" ToolbarItems="printGrid"></ToolbarSettings>  

            …………………………………………………. 

      <ClientSideEvents ActionBegin="begin" ActionComplete="complete" BeforePrint="beforePrint" />  

        </ej:Grid>  

    <script type="text/javascript">  

 window.selectedRows = [];  // window variable to store the selectedrecords while moving from one page to another  

        function printSelectedRows(selRows) {   

………………………………………. 

        }   

        function beforePrint(args) {   

            ……………………………………………………… 

        }   

         function complete(args){         

        if(args.requestType == "print"){ 

          window.selectedRows = []; // clear the window variable 

        } 

      } 

    </script> 

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Guadalupe]

Hello

I have this new problem with her help...

Attachment: EnviarSyncfusionPrintSelectRows_f734bc6c.rar

[Vignesh Natarajan]

Hi Guadalupe, 

 

Query: “I have this new problem with her help...” 

 

We have analyzed the provided video demo and we found that reported issue “previously selected records are not cleared while printing” is not resolved in your end. From your code example we have found that in ActionComplete event you have cleared the wrong variable windows.selectedRecords instead of window.selectedRecords.  Extra (s) added. Hence the reported issue occur. To overcome the reported issue, we suggest you to clear the selectedRecords using window variable. 

 

Refer the below code example. 

 

function complete(args){          

        if(args.requestType == "print"){  

          window.selectedRows = []; // clear the window variable  

        }  

 

 

Please get back to us if you have further queries. 

  

Regards, 

Vignesh Natarajan. 

[Guadalupe]

Hello

This is error

Attachment: EnviarSyncfusionPrintSelectRows_49ff7f94.rar

[Vignesh Natarajan]

Hi Guadalupe, 

 

Query: “This is error” 

 

We have validate the reported issue in provided video demostration. So to overcome the reported issue, we have cleared the selectedRows variable in ActionComplete event. But in you code example you have defined the variable wrongly. Refer the below code example for the issue. 

 

function complete(args){          

        if(args.requestType == "print"){  

          windows.selectedRows = []; // clear the window variable  

        }  

 

 

Kindly modify your code example as below  

 

function complete(args){          

        if(args.requestType == "print"){  

          window.selectedRows = []; // clear the window variable  

        }  

 

 

Please let us know if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Guadalupe]

Hello

This problem is correct, but my problem is equal.

[Vignesh Natarajan]

Hi Gaudalupe, 

  

Thanks for your update.    

  

We have created a new incident under your direct trac for your requirement. For more clarification on your request, Kindly follow on that incident.   

 

 http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac     

  

Regards,
Vignesh Natarajan