Is there way to print the full data grid without adjusting the panes? I am html printing the data grid but I only get half of the grid when I print.
I am using the blazor version of the data grid.
Hello Luis,
I have been investigating into the behavior you are seeing, and while I am a bit unsure of what you mean by “Html Printing” your data grid, I imagine that this likely has something to do with the DOM?
If I am correct in this case, I would recommend against doing this, because not all of the rows or cells of the grid are going to show up in the DOM. This is because they are virtualized by default. If they weren’t, you would see some serious performance issues when using larger data sources, as the entirety of the grid would need to be rendered and added to the DOM.
My best recommendation in this case to print the Ignite UI for Blazor would be to loop through your underlying bound data source of the grid and printing out the values that way.
Please let me know if you have any other questions or concerns on this matter.
What would you recommend for for printing the financial chart Individually, same scenario as the previous question above?
I have been discussing the ability to print the FinancialChart individually from the rest of your application, and there’s nothing built-in to the FinancialChart that would allow you to do this, and I am not sure of a Blazor-specific way to do it from a .razor page at the moment either.
What you can do in this case though, is call into a JavaScript method from your .razor page, and then you would print the window. Here is a link on how to call into Javascript methods from your .razor page: https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0.
Also, here is an article I found about using Javascript to print the contents of a window: https://www.geeksforgeeks.org/print-the-contents-of-a-div-element-using-javascript/.
The thing about this though, is that is not simple to just render existing HTML from your full application to an image, let alone a complex component like the FinancialChart, and so I would recommend in this case that you have a separate .razor page in your application that you print that only has the content to be printed on it. The problem with this is that the view of your application would likely need to change in order to do this printing, or perhaps you could have a link to another page in your application to open on a separate tab in the browser and print from there?
If you would like to see a way of printing the FinancialChart potentially implemented in the Ignite UI for Blazor toolset, I would recommend suggesting a new product idea for it at our Blazor Ideas Site, here. This will place you in direct communication with our product management teams who plan and prioritize upcoming features and development based on community and user feedback.
I am getting the following error when I try to print using JavaScript. "Failed to execute CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0."
Is there a way to edit the canvas element?
I believe the CanvasRenderingContext2D is an object that is used internal to the FinancialChart component. It is not something that would be able to be modified or replaced.
Would it be possible for you to provide some information on how exactly you are receiving this error? If you could please provide an isolated sample project that reproduces this, that would be most helpful.
How can I send you sample project? Is there a place I can upload it?
You can upload the sample project to this forum, but please remember to delete the bin and obj files of your Blazor application before compressing it into a .zip file or the file will be too large to attach.
Alternatively, you can send your sample to support@infragistics.com and I will be able to download it from there.
BlazorDockManagerWC-main - Copy.zip
I just uploaded it, here is a sample project. The issue is html printing the financials chart from the dock manager.
I am able to html print the datagrid but not the financials chart.
I have been investigating into the sample project with my colleagues, and it appears that your sample is currently trying to get the <div> that contains the FinancialChart and print it. This will not work, as it is not straightforward to render existing HTML to an image, let alone a complex component like our chart, and this is extended to canvas elements, which the FinancialChart uses. There is no way that we can reconstruct the canvas from the root element, and so it will not be possible to print the chart this way.
What you can do instead is dig into the DOM of the FinancialChart, get the canvases, draw them to an image, and push the image into a new window that you can print. I am attaching a modified version of the sample project you sent to demonstrate.
BlazorDockManagerWC.zip