Blazor how to export pdf according to range of date like Date start to Date end

Question

Hi i just wanted to export a pdf according to Date Started to Date End picker from data source of datagrid

Vignesh Natarajan · Accepted Answer

Hi Leonardo,

Thanks for contacting Syncfusion support.

Query: “i just wanted to export a pdf according to Date Started to Date End picker from data source of datagrid”

We have analyzed your query and Grid data can be exported to Pdf format using PdfExport() method of Grid. While exporting, grid will consider the data operations applied to its data (i.e.) if filtering is applied, filtered data will be exported. So we have filtered the Grid using DateRangePicker component value and export the Grid data on external button click.

Refer the below code example.

<SfDateRangePicker @ref="DatePicker" Placeholder="Choose a Range">

<DateRangePickerEvents ValueChange="OnChange"></DateRangePickerEvents>

</SfDateRangePicker>

<SfButton OnClick="PdfExport" Content="Pdf Export"></SfButton>

<SfGrid @ref="DefaultGrid" DataSource="@Orders" Query="@Qry" AllowPdfExport="true" AllowPaging="true">

</SfGrid>

@code{

private SfGrid<Order> DefaultGrid;

public Query Qry = new Query();

SfDateRangePicker DatePicker { get; set; }

public List<Order> Orders { get; set; }

public void OnChange(RangeEventArgs Args)

{

var Col1Pre = new WhereFilter();

var predicate = new List<WhereFilter>();

predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = Args.StartDate, Operator = "greaterthanorequal" });

predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = Args.EndDate, Operator = "lessthanorequal" });

Col1Pre = WhereFilter.And(predicate);

Qry = new Query().Where(Col1Pre); // to filter the Grid

}

public async Task PdfExport()

{

await this.DefaultGrid.PdfExport(); // export the Grid to PDF format

}

Kindly download the sample from below which we have prepared using above solution.

Sample: https://www.syncfusion.com/downloads/support/forum/159831/ze/DataGrid-2098144183

Refer our Ug documentation for your reference

https://blazor.syncfusion.com/documentation/datagrid/pdf-export/

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

leonardo · Answer

Wow that was amazing! thank you so much

Rahul Narayanasamy · Answer

Hi Leonardo, 

Thanks for the update. 

Please get back to us if you need further assistance. 

Regards, 
Rahul

leonardo · Answer

How about this one, how did you make this chat app that can have emoticons and store data in SQL Server.sample screenshot from zip below.Attachment: Untitled_6abda495.rar

Vignesh Natarajan · Answer

Hi Leonardo,  
 
Query: “How about this one, how did you make this chat app that can have emoticons and store data in SQL Server” 
 
We have analyzed your query and we suspect that you want to develop a chat similar to attached screenshot. It is a third party application which we have incorporated in our chat conversation and there are many third party applications available for this in the market. 
 
Please get back to us if you have further queries.    
 
Regards, 
Vignesh Natarajan

leonardo · Answer

Hi Leonardo,

Thanks for contacting Syncfusion support.

Query: “i just wanted to export a pdf according to Date Started to Date End picker from data source of datagrid”

We have analyzed your query and Grid data can be exported to Pdf format using PdfExport() method of Grid. While exporting, grid will consider the data operations applied to its data (i.e.) if filtering is applied, filtered data will be exported. So we have filtered the Grid using DateRangePicker component value and export the Grid data on external button click.

Refer the below code example.

<SfDateRangePicker @ref="DatePicker" Placeholder="Choose a Range">

<DateRangePickerEvents ValueChange="OnChange"></DateRangePickerEvents>

</SfDateRangePicker>

<SfButton OnClick="PdfExport" Content="Pdf Export"></SfButton>

<SfGrid @ref="DefaultGrid" DataSource="@Orders" Query="@Qry" AllowPdfExport="true" AllowPaging="true">

</SfGrid>

@code{

private SfGrid<Order> DefaultGrid;

public Query Qry = new Query();

SfDateRangePicker DatePicker { get; set; }

public List<Order> Orders { get; set; }

public void OnChange(RangeEventArgs Args)

{

var Col1Pre = new WhereFilter();

var predicate = new List<WhereFilter>();

predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = Args.StartDate, Operator = "greaterthanorequal" });

predicate.Add(new WhereFilter() { Condition = "or", Field = "OrderDate", value = Args.EndDate, Operator = "lessthanorequal" });

Col1Pre = WhereFilter.And(predicate);

Qry = new Query().Where(Col1Pre); // to filter the Grid

}

public async Task PdfExport()

{

await this.DefaultGrid.PdfExport(); // export the Grid to PDF format

}

Kindly download the sample from below which we have prepared using above solution.

Sample: https://www.syncfusion.com/downloads/support/forum/159831/ze/DataGrid-2098144183

Refer our Ug documentation for your reference

https://blazor.syncfusion.com/documentation/datagrid/pdf-export/

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

@OrderDate

@code{ Employee employee = new Employee(); List employeeList; private SfGrid DefaultGrid; public Query Qry = new Query(); SfDateRangePicker DatePicker { get; set; }protected override async Task OnInitializedAsync() { employeeList = await EmployeeService.GetEmployees(); } public void OnChange(RangeEventArgs Args) { var Col1Pre = new WhereFilter(); var predicate = new List(); predicate.Add(new WhereFilter() { Condition = "or", Field = "Date", value = Args.StartDate, Operator = "greaterthanorequal" }); predicate.Add(new WhereFilter() { Condition = "or", Field = "Date", value = Args.EndDate, Operator = "lessthanorequal" }); Col1Pre = WhereFilter.And(predicate); Qry = new Query().Where(Col1Pre); // to filter the Grid }}

Vignesh Natarajan · Answer

Hi Leonardo,  

Query: “ i have problem when picking start date to end date What if i have this data in SQL server and using EFCORE can you help me im stock in here.” 

As we are quite unclear about the issue, we need some more information about the issue you are facing. So kindly share the following details.  


Are you facing issue while selecting a value in DataRangePicker
Or facing trouble while filtering the Grid data using the Query property. 
Share the screenshot of the script error / exception if you are facing any. 
Share the video demonstration of the issue along with replication procedure. 
Share more details about the issue. 

Above requested details will be helpful for us to validate the reported query at our end and provide solution as early as possible.  

Regards, 
Vignesh Natarajan

leonardo · Answer

Hi Leonardo,  

Query: “ i have problem when picking start date to end date What if i have this data in SQL server and using EFCORE can you help me im stock in here.” 

As we are quite unclear about the issue, we need some more information about the issue you are facing. So kindly share the following details.  


Are you facing issue while selecting a value in DataRangePicker
Or facing trouble while filtering the Grid data using the Query property. 
Share the screenshot of the script error / exception if you are facing any. 
Share the video demonstration of the issue along with replication procedure. 
Share more details about the issue. 

Above requested details will be helpful for us to validate the reported query at our end and provide solution as early as possible.  

Regards, 
Vignesh Natarajan Hi i am facing trouble while filtering the Grid data using the Query property.I have this data set from SQL server "employee.Date" and tried to run with no errors but doesn't search all the desired date pickmy sample code below. public void OnChange(RangeEventArgs Args)    {        var Col1Pre = new WhereFilter();        var predicate = new List<WhereFilter>();        predicate.Add(new WhereFilter() { Condition = "or", Field = employee.Date.ToString("dd/MM/yyyy"), value = Args.StartDate, Operator = "greaterthanorequal" });        predicate.Add(new WhereFilter() { Condition = "or", Field = employee.Date.ToString("dd/MM/yyyy"), value = Args.EndDate, Operator = "lessthanorequal" });        Col1Pre = WhereFilter.And(predicate);        Qry = new Query().Where(Col1Pre); // to filter the Grid    }

Vignesh Natarajan · Answer

Hi Leonardo, Query: “I have this data set from SQL server "employee.Date" and tried to run with no errors but doesn't search all the desired date pick my sample code below” We have analyzed the provided code and we found that Field property of WhereFilter in OnChange event is wrongly defined. From the provided (previous udpate) code example, we suspects that employee in employee.Date represents the model class name and Date denotes the Field / column name. So we need to specify only the field name in Field property of WhereFilter class. Kindly define the value properly as per your previous update (11th December 2020). Refer the below code example. @code{ public void OnChange(RangeEventArgs Args) { var Col1Pre = new WhereFilter(); var predicate = new List(); predicate.Add(new WhereFilter() { Condition = "or", Field = "Date", value = Args.StartDate, Operator = "greaterthanorequal" }); predicate.Add(new WhereFilter() { Condition = "or", Field = "Date", value = Args.EndDate, Operator = "lessthanorequal" }); Col1Pre = WhereFilter.And(predicate); Qry = new Query().Where(Col1Pre); // to filter the Grid } } If you are still facing the reported issue, kindly get back to us with the details requested in previous update. Issue reproducible sample will be very helpful for us to validate the reported query at our end and provide solution as early as possible. Regards,Vignesh Natarajan