Wisej.Web.Ext.DevExtreme.dxDataGrid export to PDF struggle

Answered
0
0

Hi again.

 

I have a small sample project for DXDataGrid exoirt to PDF. (please find attached) (you will need to ad Wisej.Framework.dll and Wisej.Web.Ext.DevExtreme.dll, I have stiped them for your file size limit)

From DevExtreeme they set to me that I have to set ID to parent ID of the grid, and to reference that id in export to PDF JS code. (Please find image attached)

  1. How to set id of parent element of the DXDataGRID.
  2. How to reference it in the in export to PDF JS code.

Would you please settle that in my sample project and send it back to me working, pleeeease???

Great thanks in advance!!!

 

Export to PDF JS code is under the button “Export to PDF”

The code is:

Private Sub OBTN_ExportTheGridToPDF_Click(sender As Object, e As EventArgs) Handles OBTN_ExportTheGridToPDF.Click
‘PUT HERE YOUR SOLuTION CODE

‘https://wisej.com/docs/2.0/html/JavaScript.htm
‘https://wisej.com/docs/2.0/html/JavaScriptObjectModel.htm

‘https://wisej.com/docs/2.0/html/M_Wisej_Web_Control_Call.htm
‘https://wisej.com/docs/2.0/html/M_Wisej_Web_Control_Eval_1.htm

Application.Eval(”
window.jsPDF = window.jspdf.jsPDF;
applyPlugin(window.jsPDF);

try {
var dxDataGridinstance = $(‘#ID01’).dxDataGrid(‘instance’);
}
catch (err) {
alert(‘Exception handled: ‘ + err.message);
}

const doc = new jsPDF();
window.DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: dxDataGridinstance
}).then(function() {
doc.save(‘Customers.pdf’);
});

“)

End Sub

 

 

Here is what DevEX sayed:

Hello Mariyan,

Have a look at the following code line:

var dxDataGridinstance = $('#ID01').dxDataGrid('instance');

You need to access a parent element of your DataGrid to get its instance. I marked it in the following screenshot: (attached)

So, “ID01” should be assigned to that div element.

Also, note that id and name are different attributes. $('#ID01') points to an element with the “ID01” id. For the name attribute, other jQuery selectors should be used.

 

 

 

  • You must to post comments
Best Answer
0
0

this.dxDataGrid1.Eval(@”
window.jsPDF = window.jspdf.jsPDF;
applyPlugin(window.jsPDF);
var dxDataGridinstance = $(‘.dx-gridbase-container’).parent().dxDataGrid(‘instance’);
//console.info(dxDataGridinstance);

const doc = new jsPDF();
window.DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: dxDataGridinstance
}).then(function() {
doc.save(‘Customers.pdf’);

})”);

 

This code partially works. At least do not generate error messages. But the grid just blinks once and nothing happens. What can be done to make it working?
DevEx refuse any support as they say they do not support Wisej platform. So you are my only hope. PDF export of the grid is vital for reporting model of my application.

Thank you!

  • You must to post comments
0
0

The problem PDF export of the grid was just solved. Thank you! We may close the case!

  • You must to post comments
0
0

The id is the widget id + “_container”. You can see it in the browser use Developer Tools or F12. The id of the widget is ((IWisejComponent)widget1).Id.

However, you don’t need to do that because the devexpress extension already retrieves the jquery instance and saves it in the “widget” field. You can simply do this:

this.widget1.Eval(@"
  const doc = new jsPDF();
  window.DevExpress.pdfExporter.exportDataGrid({
     jsPDFDocument: doc,
     component: this.container
  }).then(function() {
     doc.save('Customers.pdf');
  })");

Calling this.widget1.Eval() makes this the wisej widget context in javascript, so using this.widget returns the dx jquery instance.

 

 

  • mgmst
    • mgmst
    • May 24, 2021 - 7:19 am
    This code does not works. Still says: component should contain grid reference.
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.