Blazor grid exports have blank rows

Question

Hi, I have a project using Syncfusion.Blazor version 18.1.0.36-beta and every time I export using csv, excel or pdf I just get blank rows. I am just using the boilerplate code. I do note that I am getting the headers and the correct number of lines exported, it's just that all the fields are blank.Here is the grid I am using. Here is the C# code; public void ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Id == "Grid_excelexport") { this.Grid.ExcelExport(); } if (args.Item.Id == "Grid_csvexport") { this.Grid.CsvExport(); } if (args.Item.Id == "Grid_pdfexport") { this.Grid.PdfExport(); } }Any suggestions as to what I am doing wrong?Kind regards,Stuart

Renjith Singh Rajendran · Answer

Hi Stuart,   
  
Thanks for contacting Syncfusion support. 
  
We suspect that you may be facing camel case problem in your application. Normally, ASP.NET Core 1.0+ framework has camel casing issues while serializing the JSON Object. If you are facing the same camel casing issue (first letter of the word will be converted to small case) while running the sample then please use the below codes in Startup.cs file to overcome that casing issue.   
  
In the below code, we have called the ContractResolver options under the Startup.cs file to avoid camel casing conversion during the serialization process. The is related to ASP.NET Core specifics and we suggest refer to the following article which describes how to overcome a similar issues.  
  
Reference Link: https://dotnetcoretutorials.com/2017/01/02/pascalcase-vs-camelcase-asp-net-core/   
  
We have also prepared a sample to performing exporting with UrlAdaptor in Grid. Please download the sample form the link below, 
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/EFGrid790071775 
 
Also we have discussed this topic in our below documentation, 
https://blazor.syncfusion.com/documentation/grid/data-binding/#troubleshoot-grid-renders-without-data-even-though-server-returns-with-correct-data   
 
Please use the code below,  
  




[Startup.cs]  
  
            public void ConfigureServices(IServiceCollection services) 
            { 
                ... 
               services.AddSyncfusionBlazor(); 
                services.AddControllers().AddNewtonsoftJson(options => 
                { 
                    options.SerializerSettings.ContractResolver = new DefaultContractResolver(); 
                }); 
                services.AddSingleton<OrderDataAccessLayer>(); 
            } 
  
   
Kindly get back to us if you have any queries.   
  
Regards,  
Renjith Singh Rajendran.

Stuart · Answer

Hi Renjith,Thanks for that clue. I'm using the new .Net Core 3.1 builtin Json handler so the following change to my code seems to have fixed this problem for me.services.AddControllers().AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);Thanks so much for your help with this.Kind regards,Stuart

Renjith Singh Rajendran · Answer

Hi Stuart, 

Thanks for your update. 

We are glad to hear, that you have achieved your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran.

Alexandre Silva · Answer

Hello, I'm having exactly the same problem, but I'm using Blazor WebAssembly, the official version that was released this week on MS Build. The interesting thing is that when I generate from the current page it works perfectly well, but when I have to generate from all the pages it is left with blank lines. I'm using WebApi as a data source and the URL call to bring all the data is working perfectly (following by the browser devtools).In the WebAssembly version I was unable to add the suggested code, as .AddControllers () just doesn't exist.Best regards,Alexandre

Renjith Singh Rajendran · Answer

Hi Alexandre, 

Greetings from Syncfusion support. 

We have prepared a WebAssembly hosted sample to bind WebApi service as data to Grid using WebApiAdaptor. We have added the below code in the Startup.cs of the Server project folder in the hosted application. We will be fetching the data from webapi service controller in the server project folder using WebApiAdaptor.  
Documentation : https://blazor.syncfusion.com/documentation/datagrid/data-binding/#web-api 
 
We are attaching the sample for your reference, please download the sample from the link below,  
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionBlazorApp1-732019434 





[Startup.cs] 
 
public void ConfigureServices(IServiceCollection services) 
{ 
    services.AddControllersWithViews(); 
    services.AddRazorPages(); 
    services.AddControllers().AddNewtonsoftJson(options => 
    { 
        options.SerializerSettings.ContractResolver = new DefaultContractResolver(); 
    }); 
} 


For this we need to install the below package in your application, 




<PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.1.0" />


If we have misunderstood your query, or if you still face difficulties in achieving your requirement, then kindly get back to us with the following details for better assistance. 

Share the sample which you have tried from your side.
Share the complete Grid code and web api controller codes.
Share the screenshot/video demo showing the problem and exported file.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith Singh Rajendran

Alexandre Silva · Answer

Thanks for the answer, I downloaded the example and it worked fine, but the solution was applied on the server side which for me will be a problem, as I need to send the method names with the first lowercase letter, due to a legacy application that uses the API , so I couldn't be changing this information.

I attached your project again with a change in the Shared / Data / Orders.cs class to see if there is such a possibility of use, forcing the properties name in a json serialization / deserialization with the [JsonProperty ("nameProperty")] attribute or something like this, without the need to change the server side.

Best regards,

Alexandre

Attachment: SyncfusionBlazorApp1_newSample_f055a6b3.zip

Renjith Singh Rajendran · Answer

Hi Alexandre, 

Thanks for your update. 

Based on your scenario, we suggest you to set the JsonProperty as like the below code to overcome the problem you are facing. Please use as like the code below, 





 
public class Orders 
{ 
    ... 
    [JsonProperty("OrderID")] 
    public long OrderID { get; set; } 
    [JsonProperty("CustomerID")] 
    public string CustomerID { get; set; } 
    ... 
} 


We have also modified the sample based on this scenario for your convenience. Please download the sample form the link below, 
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionBlazorApp1-2008549139 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran

Alexandre Silva · Answer

The problem in this scenario that you went through is that the server will generate JSON content with the characters starting in capital letters, because the class is shared, so it worked in this test. I'm going through the test again, this time, without the shared class, I'm creating a new model / orders class in the Wasm project and leaving the server in the standard form (with the first characters in lowercase), because as I informed you, I need to receive the data from this way (I have no way to change the data received. Sorry for the insistence.

Correct data received:

Incorrect data received:

If I create the class as in the image below (properties starting in lowercase) the excel export works normal, but it deviates from the C # standard for naming properties.

This other way, using JsonProperty doesn't really work, and it would be the expected way

Attachment: SyncfusionBlazorApp1_f0f576da.zip

Renjith Singh Rajendran · Answer

Hi Alexandre,

Greetings from Syncfusion support.

We have prepared a WebAssembly hosted sample to bind WebApi service as data to Grid using WebApiAdaptor. We have added the below code in the Startup.cs of the Server project folder in the hosted application. We will be fetching the data from webapi service controller in the server project folder using WebApiAdaptor.

Documentation : https://blazor.syncfusion.com/documentation/datagrid/data-binding/#web-api

We are attaching the sample for your reference, please download the sample from the link below,

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionBlazorApp1-732019434

[Startup.cs]

public void ConfigureServices(IServiceCollection services)

{

services.AddControllersWithViews();

services.AddRazorPages();

services.AddControllers().AddNewtonsoftJson(options =>

{

options.SerializerSettings.ContractResolver = new DefaultContractResolver();

});

}

For this we need to install the below package in your application,

If we have misunderstood your query, or if you still face difficulties in achieving your requirement, then kindly get back to us with the following details for better assistance.

Share the sample which you have tried from your side.
Share the complete Grid code and web api controller codes.
Share the screenshot/video demo showing the problem and exported file.

The provided information will help us analyze the problem, and provide you a solution as early as possible.

Regards,

Renjith Singh Rajendran

Chris Rowe · Answer

We are running into this same issue even after applying all of the fixes listed here.

Exporting grids in WASM is resulting in Excel (.xlsx) and CSV files that appear blank/empty. The grid's DataSource is an in-memory collection and the grid itself is rendering in the UI will all of the data fine. Just getting empty files. Its worth noting, exporting from a grid with 3 records reuslts in a smaller csv file and exporting wfrom a grid showing a large number of records creates a bigger CSV file with more carriage returns and white space characters.

Examining the CSV in notepad, its just a bunch of single white space character separated by carriage returns
Image_6639_1717084969900
Image_1194_1717084942177

Prathap Senthil · Answer

Hi Chris,

Based on the reported problem,
we suspect that have used the template column, so we suggest including the
template columns in the exported Excel file. To do this, set the
IncludeTemplateColumn property of ExcelExportProperties to true. Here’s a
code snippet that demonstrates how to achieve this. Please refer to the code
snippet and documentation below for your reference.

public async Task
  ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs
  args)
    {
        if
  (args.Item.Id == "Grid_excelexport") //Id
  is combination of Grid's ID and itemname
        {
           
  ExcelExportProperties ExcelProperties = new ExcelExportProperties();
           
  ExcelProperties.IncludeTemplateColumn
  = true;
           
  await this.DefaultGrid.ExcelExport(ExcelProperties);
        }
    }

UG: https://blazor.syncfusion.com/documentation/datagrid/template-excel-export#exporting-with-column-template

Regards,
Prathap Senthil

Chris Rowe · Answer

This corrected my issue! Thank you!I had seen the boolean flag in the documentation but misunderstood what it was going to do. I thought it was going to try to render my render fragment inside the Excel cells so I avoided it. I didn't realize it's essentially "export columns even if I defined a template for them"

Prathap Senthil · Answer

Thanks for the update, we glad to hear that the
provide solution resolved your issue.

Note: The IncludeTemplateColumn set to True determines whether
columns using templates should be included in the export.