We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hello !
I have a Syncfusion Grid with a few text columns and 4 base64 image columns. The image content is stored into a table as base64 binary data.
Please tell me :
@page "/"
@using Syncfusion.Blazor.Grids
<SfGrid ID="DefaultGrid" DataSource="@Orders" GridLines="GridLine.Default" AllowTextWrap="true" Height="615" Toolbar="@(new List<string>() { "PdfExport" })" AllowPdfExport="true">
<GridTextWrapSettings WrapMode="WrapMode.Both"></GridTextWrapSettings>
<GridEvents PdfQueryCellInfoEvent="PdfQueryCellInfoHandler" OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>
<GridColumns>
<GridColumn HeaderText="Foto" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="100">
<Template>
@{
var cliente = (context as Order);
<div class="image">
<img src="@($"Images/Uploads/{cliente.RollNo}.png")" alt="@("assets/Clientes/semfoto.jpg")" />
</div>
}
</Template>
</GridColumn>
<GridColumn Field=@nameof(Order.Name) HeaderText="Name of the inventor" Width="70"></GridColumn>
<GridColumn Field=@nameof(Order.PatentFamilies) HeaderText="No of patentfamilies" Width="70"></GridColumn>
<GridColumn Field=@nameof(Order.Country) HeaderText="Country" Width="100"></GridColumn>
<GridColumn Field=@nameof(Order.MainFields) HeaderText="Main fields of Invention" Width="120"></GridColumn>
<GridColumn HeaderText="Foto1" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="60">
<Template>
@{
var cliente = (context as Order);
<div class="image">
<img src="@($"Images/Uploads/{cliente.RollNo}.png")" alt="@("assets/Clientes/semfoto.jpg")" />
</div>
}
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
@code{
private SfGrid<Order> DefaultGrid;
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 9).Select(x => new Order()
{
RollNo = x,
Name = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
PatentFamilies = 1000 + x * 5,
Country = (new string[] { "Australia", "Japan", "Canada", "India", "USA" })[new Random().Next(5)],
MainFields = (new string[] { "Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI", "Various", "Printing, Digital paper, Internet, Electronics, CGI, VLSI", "Automotive, Stainless steel products", "Gaming machines" })[new Random().Next(5)],
}).ToList();
}
public class Order
{
public int? RollNo { get; set; }
public string Name { get; set; }
public int? PatentFamilies { get; set; }
public string Country { get; set; }
public string MainFields { get; set; }
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
//if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
//{
PdfExportProperties ExportProperties = new PdfExportProperties();
ExportProperties.IncludeTemplateColumn = true;
await this.DefaultGrid.ExportToPdfAsync(ExportProperties);
//}
}
public void PdfQueryCellInfoHandler(PdfQueryCellInfoEventArgs<Order> args)
{
/*
if (args.Column.Field == "CustomerID")
{
args.Cell.Value = "Mr." + args.Data.CustomerID;
}
*/
}
}
Hi Tom,
Greetings from Syncfusion support.
We suggest you to enable the IncludeTemplateColumn property of PdfExportProperties to export Template columns in Grid. And also we suggest you to ensure to set values for args.Cell.Value inside the corresponding event handlers(PdfQueryCellInfoEvent) to export the contents of template column in Grid.
References :
https://blazor.syncfusion.com/documentation/datagrid/events#pdfquerycellinfoevent
Please refer the codes below,
|
<GridEvents OnToolbarClick="ToolbarClickHandler" PdfQueryCellInfoEvent="PdfQueryCellInfoEvent" TValue="Order"></GridEvents>
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname { PdfExportProperties pdfExportProperties = new PdfExportProperties(); pdfExportProperties.IncludeTemplateColumn = true; await this.DefaultGrid.ExportToPdfAsync(pdfExportProperties); }
}
|
Query : export image column to pdf.
We suggest you to customize the codes inside PdfQueryCellInfoEvent as like the below code to export images in template column to pdf file. Please refer and use as like the code below,
|
public void PdfQueryCellInfoEvent(PdfQueryCellInfoEventArgs<Order> args) { if (args.Column.HeaderText == "Order ID") { Image img = Image.FromFile(@"wwwroot/Images/Uploads/" + args.Data.OrderID.ToString() + ".png"); byte[] bytes = (byte[])(new ImageConverter()).ConvertTo(img, typeof(byte[]));
//use the byte to generate a base64String and assign to image to get displayed in Grid string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);
byte[] dataString = Convert.FromBase64String(base64String); System.IO.MemoryStream imageStream = new System.IO.MemoryStream(dataString); args.Cell.Style.BackgroundImage = Syncfusion.PdfExport.PdfImage.FromStream(imageStream); args.Cell.ImagePosition = Syncfusion.PdfExport.PdfGridImagePosition.Center; } ... }
|
We are also attaching the sample based on this requirement for your convenience, please download and refer the sample .
Please get back to us if you need further assistance.
Regards,
Bala.
Hello again and thanks for your help !
Can you please tell me how can I resize the picture and to export it to PDF resized ?
Please tell me how can I export the entire grid including pictures on two rows : on the first row I want to export only the columns with text and on the second row I want to display only the columns with images from the grid.
I attached an image for better understanding.
Thank You Very Much !
Hello !
Can anybody help me, please ?
Thank You !
Hi Tom,
Based on your query, we understand that you would like to export a grid with some customization. We suggest using the column Template feature of the Grid to display customized values in the columns. After that, you can define the IncludeTemplateColumn property of PdfExportProperties as true to export the templated column from the grid.
Reference: https://blazor.syncfusion.com/documentation/datagrid/pdf-export#export-template-columns
https://blazor.syncfusion.com/documentation/datagrid/column-template
https://blazor.syncfusion.com/documentation/datagrid/templates
If you have any further queries, please get back to us.
Regards,
Sarvesh
Believe me, I looked to your links !
I managed to export to PDF my grid with images but only on one line for each row !
I don't know how to split each row into two rows, one row for text/numeric columns and
one row for images !
Can you tell me how can I split every grid row into two rows, one for
text/numeric columns and one row for images !
I attached a image for better understanding.
Thank You Very Much !
Hi Tom,
From your query, we suspect that you want to split a row into two halves, one
for text/numeric values and another one for rendering images. We would like to
inform you that, currently we didn’t have support to split rows in our
component.
If you have any further queries, please don’t hesitate to get back us
Regards,
Sarvesh
Yes, I want to split a grid row into two or more rows, depending of what I need.
Please be aware of the A4 page length limitations, portrait or landscape, when you have to print a lot of columns in one row. If you have multiple columns that needs to be printed, you must be able to split a row into as many rows you need and to be able to resize the printed pictures.
I used Visual FOXPRO a lot of time and I still use it. In Visual FOXPRO's report designer you can easily split a row into as many rows you need. It is an important function for your components !
Thank You Very Much !
Hi Tom,
After careful evaluation of your query, we regret to inform you that, it’s not feasible
to achieve your requirement based on our current Grid architecture. So,
currently we don’t have support for splitting rows in the Grid component.
Please get back to us if you have any further queries.
Regards,
Sarvesh
