print report filter - print on Esc p2 printers - print a master row and its details - export grid to image

[Albert]

I have a master detail grid and I have few questions:

1- How to print report filters like date,etc on top of grid

2- How to print on Esc p2 printers that are pos printers 

3- Is there any feature to export report to image?

4- How Is it a feature to print only a row from master grid and then print its details below that?

Thanks in advance

[Pavithra Subramaniyam]

Hi Albert, 

 

Greeting from Syncfusion. 

 

Query: How to print report filters like date,etc on top of grid 

 

By default, we have beforePrint event in Grid which helps to customize the print element. Please refer the below code example and sample for more information. 

 

beforePrint(args) { 

  var customElem = document.createElement('div'); 

  customElem.innerHTML = document.getElementsByClassName("e-statustext")[0].innerHTML 

  customElem.appendChild(document.createElement('br')); 

  // you can customize and append the element based on your requirement. 

  args.element.insertBefore(customElem, args.element.childNodes[0]); 

} 

 

 

Sample : https://stackblitz.com/edit/react-whpbzv-vwulkd?file=index.js 

 

Help documentation : https://ej2.syncfusion.com/react/documentation/api/grid/#beforeprint 

 

Query: How to print on Esc p2 printers that are pos printers 

 

We are unclear about your query can you please share more details regarding your requirement that will helpful for us to validate further at our end. 

 

Query: Is there any feature to export report to image? 

 

Can you please confirm that you want to export grid images(template) in excel or pdf document? 

 

Query: How Is it a feature to print only a row from master grid and then print its details below that? 

 

Could you please share the below details that will be more helpful for us to analyze your requirement and to provide a better solution as soon as possible. 

 

• Do you want to show both master row and details row in single grid?
• Or you want to show in different grid?
• Do you expect to show master and detail grid like hierarchy grid ?

 

Demo sample: https://ej2.syncfusion.com/react/demos/#/material/grid/master-details-export  

 

Regards, 

Pavithra S. 

[Albert]

Hi and thanks for your response, please find below more information that may help you:

Query: How to print on Esc p2 printers that are pos printers  (We are unclear about your query can you please share more details regarding your requirement that will helpful for us to validate further at our end. )

- There are many printers in the market that are designed for connecting to cash registers and their standard is ESC P2 that have their own standards and they will not be added as normal printers in windows.

Answer : The question is this that have you prepared your reports to be printed on these types of printers?

Query: Is there any feature to export report to image? (Can you please confirm that you want to export grid images(template) in excel or pdf document? 

Answer : No we know that exporting to excel and pdf is possible but we need to export the report to .jpg or other image formats which is one of the ways to print on Esc P2 printers.

Query: How Is it a feature to print only a row from master grid and then print its details below that? 

 

Could you please share the below details that will be more helpful for us to analyze your requirement and to provide a better solution as soon as possible. 

 

• Do you want to show both master row and details row in single grid?
• Or you want to show in different grid?
• Do you expect to show master and detail grid like hierarchy grid ?

Answer : No for our specific needs , we can't use hierarchy report and we need to show a master grid and whenever user clicks on a row in master, we load its details data in detail grid . now we want to print that specific master row plus all its detail rows beneath that.

[Thavasianand Sankaranarayanan]

Hi Albert, 

Thanks for sharing the details. 

Query: How to print on Esc p2 printers that are pos printers 

By default, In our EJ2 Grid is purely web component(HTML, CSS and JavaScript) and its printing feature perform web page printing not windows, ESC P2 printing seems to print like emulator printing(window console or c program or other emulators), So can you please confirm whether we can print the HTML page using ESC P2? 

https://www.undocprint.org/formats/page_description_languages/esc_p2 

Query: Is there any feature to export report to image? 

 

We have analyzed your requirement and we don’t have any feature to export data grid as image. 

Query: How Is it a feature to print only a row from master grid and then print its details below that? 

 

Based on your requirement, we have created a sample. Please refer the below sample and code example for more information. 

beforePrint(args) { 

  var customElem = document.createElement("div"); 

  customElem.innerHTML = 

    document.getElementsByClassName("e-statustext")[0].innerHTML + 

    this.detailGrid.element.innerHTML; 

  customElem.appendChild(document.createElement("br")); 

  args.element.append(customElem); 

} 

Sample : https://stackblitz.com/edit/react-1kkn87-vijf1k?file=index.js  

Regards, 

Thavasianand S. 

[Albert]

Thanks for your clarifications,

Do you have the same limitation for printing on ESC-Pos printers?

https://reference.epson-biz.com/modules/ref_escpos/index.php?content_id=2

Thanks in advance

[Albert]

Thanks for your answer,

The sample code that you mentioned, print all the master rows and all the details for one of the master rows, Can you please provide a sample code to print only one row of master grid and all its details?

[Thavasianand Sankaranarayanan]

Hi Albert, 

Query: Can you please provide a sample code to print only one row of master grid and all its details? 

As per your requirement we have created a sample. In the below sample, we have bind load event and we change the dataSource for print grid based on selected records of master grid. Please refer the below code example and sample for more information 

load(){ // bind load event for master grid 

  this.Grid.on('printGrid-Init', (args)=>{ 

      args.printgrid.dataSource = [this.selRecords] // assign selected records  

   }) 

} 

Sample : https://stackblitz.com/edit/react-1kkn87-x5pf89?file=index.js 

Regards, 

Thavasianand S. 

[Albert]

Thanks a lot, 

would you please consider this question too:

----------------

Do you have the same limitation for printing on ESC-Pos printers?

https://reference.epson-biz.com/modules/ref_escpos/index.php?content_id=2

Thanks in advance

[Thavasianand Sankaranarayanan]

Hi Albert, 

Thanks for your update. 

We have referred the provided link and it seems the commands are related windows not web application. If possible can you please create a simple HTML sample and check with ESC printer and share the sample and details with us that will helpful for us to analyze further and helps to integrate with our grid. 

Regards, 

Thavasianand S.