How to print the custom report in ASP.NET MVC Grid

[Vanderlei]

Hi guys,

I'm using VS2017, Syncfusion JS2 components, EF6, MVC5.

I tryed to follow your example "Sample1357381980" but it is for JS1, so it doesn't work in my environment. 

I need to print some reports wich will contain non tabular data. Please see bellow:

Scenario one is:

a - users will select a register in a child grid and press a print button

b - MVC5 web application has to print current order data and the selected related register (basic client/order/quotation relationship) to a report which should look like the following picture:

Question: Whatis the best way to achieve that?

Scenario two:

a - consider now the user selecting a register in the main grid which contains related orders registers (1:N relationship);

b - MVC5 web application has to print current order data and the selected related registers to a custom report as shown in the picture above.

Question 2: How to do it?

Thanks in advance!

[Thavasianand Sankaranarayanan]

Hi Vanderlei, 

Query #1 & #2: What is the best way to achieve that? How to do it? 

We have analyzed your query and we can achieve your requirement by enabling the grid internal event printGrid-Init to print the selected records and beforePrint to add custom content in the printing sheet. In the below sample, using grid.on method we have bind the printGrid-Init event in the grid and in the beforePrint event, we have prepend a custom div element to the grid. Please refer to the below sample for your reference, 

Code Example:  

... 

var childGrid = new ej.grids.Grid({ 

            dataSource: new ej.data.DataManager({ 

                url: "/Home/UrlDatasource/", 

                insertUrl: "/Home/Insert/", 

                updateUrl: "/Home/Update/", 

                removeUrl: "/Home/Remove/", 

                adaptor: new CustomAdaptor() 

            }), 

            load: function (args) { 

                this.query = new ej.data.Query().where("contatos.EmployeeID", "equal", rowData['EmployeeID']); 

                this.on('printGrid-Init', function (args) { args.printgrid.dataSource = this.getSelectedRecords(); }); 

            }, 

... 

           selectionSettings: { type: 'Multiple' }, 

 

            beforePrint: (args) => { 

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

                customElem.innerHTML = "<h1>Required custom content here</h1>"; 

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

                args.element.prepend(customElem); 

            } 

... 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/custom-print-1512159302  

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

Please get back to us for further assistance. 

Regards, 

Thavasianand S.