From 9313e2531f25afb071fc588e6d4673ae0b770c33 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Mon, 24 Mar 2025 16:07:43 +0530 Subject: [PATCH 1/2] 940682: Added the topic of Format the child Grid columns before exporting --- .../excelexport-format/excel-export.cs | 6 ++++ .../excel-export/excelexport-format/razor | 33 +++++++++++++++++++ .../excel-export/excelexport-format/tagHelper | 33 +++++++++++++++++++ .../grid/pdf-export/format/format.cs | 6 ++++ .../code-snippet/grid/pdf-export/format/razor | 33 +++++++++++++++++++ .../grid/pdf-export/format/tagHelper | 33 +++++++++++++++++++ .../excel-export/excel-exporting.md | 16 +++++++++ .../grid/EJ2_ASP.MVC/pdf-export/pdf-export.md | 13 ++++++++ .../excel-export/excel-exporting.md | 16 +++++++++ .../EJ2_ASP.NETCORE/pdf-export/pdf-export.md | 16 +++++++++ 10 files changed, 205 insertions(+) create mode 100644 ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/excel-export.cs create mode 100644 ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/razor create mode 100644 ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/format.cs create mode 100644 ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/razor create mode 100644 ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/excel-export.cs b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/excel-export.cs new file mode 100644 index 0000000000..a07b5bf2c8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/excel-export.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + ViewBag.dataSource = OrdersDetails.GetAllRecords();; + ViewBag.employeeDataSource = EmployeeView.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/razor b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/razor new file mode 100644 index 0000000000..33398fb5c6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/razor @@ -0,0 +1,33 @@ +@{ + var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable)ViewBag.dataSource, + QueryString = "EmployeeID", + Columns = new List + { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120",TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate", HeaderText="Order Date", Width="150", Format="dd-MM-yyyy", Type="date" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, + } + }; +} +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.employeeDataSource).Height("348px").AllowExcelExport().Columns(col => +{ + col.Field("EmployeeID").HeaderText("Employee ID").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("FirstName").HeaderText("First Name").Width("125").Add(); + col.Field("LastName").HeaderText("Last Name").Width("180").Add(); + col.Field("City").HeaderText("City").Width("135").Add(); +}).Toolbar(new List() { "ExcelExport"}).ChildGrid(ChildGrid).ToolbarClick("toolbarClick").ExportDetailDataBound("exportDetailDataBound").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/tagHelper new file mode 100644 index 0000000000..8daedb0d14 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-format/tagHelper @@ -0,0 +1,33 @@ +@{ var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { + DataSource = (IEnumerable)ViewBag.DataSource, + QueryString = "EmployeeID", + Columns = new List { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Width="120" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="Freight", HeaderText="Freight", Width="120", Format="C2", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate", HeaderText="OrderDate", Width="130", Format="dd-MM-yyyy", Type="date" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, + } + }; + } + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/format.cs b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/format.cs new file mode 100644 index 0000000000..a2f8c3e6a1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/format.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrdersDetails.GetAllRecords();; + ViewBag.EmpDataSource = EmployeeView.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/razor b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/razor new file mode 100644 index 0000000000..156dcfee73 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/razor @@ -0,0 +1,33 @@ +@{ + var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable)ViewBag.DataSource, + QueryString = "EmployeeID", + Columns = new List + { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="120" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate", HeaderText="Order Date", Width="150", Format="dd-MM-yyyy", Type="date" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="110" }, + } + }; +} +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.EmpDataSource).AllowPdfExport().Columns(col => +{ + col.Field("EmployeeID").HeaderText("Employee ID").Width("90").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("FirstName").HeaderText("Name").Width("100").Add(); + col.Field("LastName").HeaderText("Last Name").Width("100").Add(); + col.Field("City").HeaderText("City").Width("100").Add(); +}).Toolbar(new List() { "PdfExport"}).ChildGrid(ChildGrid).ToolbarClick("toolbarClick").ExportDetailDataBound("exportDetailDataBound").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/tagHelper new file mode 100644 index 0000000000..a301a6c792 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/format/tagHelper @@ -0,0 +1,33 @@ +@{ + var ChildGrid = new Syncfusion.EJ2.Grids.Grid(){ + DataSource = (IEnumerable)ViewBag.DataSource, + QueryString = "EmployeeID", + Columns = new List { + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="90", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="CustomerID", Width="100" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderDate", HeaderText="OrderDate", Width="100", Format="dd-MM-yyyy", Type="date" }, + new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="110" }, + }}; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-exporting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-exporting.md index 30e163d57c..095e906518 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-exporting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-exporting.md @@ -230,6 +230,22 @@ The following example demonstrates how to export hierarchical grid to Excel docu ![Exporting hierarchy grid](../images/excel-exporting/excelexporting-heirachy.png) +### Format the child Grid columns before exporting + +The Syncfusion Grid allows customization of the child Grid's Excel export options, enabling precise control over data formatting before export. This functionality is achieved using the [exportDetailDataBound](https://help.syncfusion.com/cr/aspnetMVC-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ExportDetailDataBound) event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the Excel document. + +In the following example, the `exportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [format](https://help.syncfusion.com/cr/aspnetMVC-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to Excel. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/excel-export/excelexport-format/razor %} +{% endhighlight %} + +{% highlight c# tabtitle="excel-export.cs" %} +{% include code-snippet/grid/excel-export/excelexport-format/excel-export.cs %} +{% endhighlight %} +{% endtabs %} + ### Limitations * Microsoft Excel permits up to seven nested levels in outlines. So that in the grid we can able to provide only up to seven nested levels and if it exceeds more than seven levels then the document will be exported without outline option. Please refer the [Microsoft Limitation](https://learn.microsoft.com/en-us/sql/reporting-services/report-builder/exporting-to-microsoft-excel-report-builder-and-ssrs?view=sql-server-2017#ExcelLimitations). diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/pdf-export/pdf-export.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/pdf-export/pdf-export.md index 6a5662fdc8..1b4f656651 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/pdf-export/pdf-export.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/pdf-export/pdf-export.md @@ -224,6 +224,19 @@ The following example demonstrates how to export hierarchical grid to PDF docume ![Export Hierarchy Grid](../images/pdf-export/export-hierarchy-grid.png) +The Syncfusion Grid allows customization of the child Grid's PDF export options, enabling precise control over data formatting before export. This functionality is achieved using the [exportDetailDataBound](https://help.syncfusion.com/cr/aspnetMVC-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ExportDetailDataBound) event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the PDF document. + +In the following example, the `exportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [format](https://help.syncfusion.com/cr/aspnetMVC-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to PDF document. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/pdf-export/format/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Format.cs" %} +{% include code-snippet/grid/pdf-export/format/format.cs %} +{% endhighlight %} +{% endtabs %} + ## Remove header row while exporting When exporting data from the Syncfusion ASP.NET MVC Grid, you have an option to remove the header row from the exported file. This can be useful when you want to export grid data without including the header values in the exported document. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md index 039f8f5085..3038348bee 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md @@ -230,6 +230,22 @@ The following example demonstrates how to export hierarchical grid to Excel docu ![Exporting hierarchy grid](../images/excel-exporting/excelexporting-heirachy.png) +### Format the child Grid columns before exporting + +The Syncfusion Grid allows customization of the child Grid's Excel export options, enabling precise control over data formatting before export. This functionality is achieved using the [exportDetailDataBound](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ExportDetailDataBound) event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the Excel document. + +In the following example, the `exportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [format](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to Excel. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/excel-export/excelexport-format/tagHelper %} +{% endhighlight %} + +{% highlight c# tabtitle="excel-export.cs" %} +{% include code-snippet/grid/excel-export/excelexport-format/excel-export.cs %} +{% endhighlight %} +{% endtabs %} + ### Limitations * Microsoft Excel permits up to seven nested levels in outlines. So that in the grid we can able to provide only up to seven nested levels and if it exceeds more than seven levels then the document will be exported without outline option. Please refer the [Microsoft Limitation](https://learn.microsoft.com/en-us/sql/reporting-services/report-builder/exporting-to-microsoft-excel-report-builder-and-ssrs?view=sql-server-2017#ExcelLimitations). diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/pdf-export/pdf-export.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/pdf-export/pdf-export.md index 754d9559d0..d177fa6fc9 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/pdf-export/pdf-export.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/pdf-export/pdf-export.md @@ -224,6 +224,22 @@ The following example demonstrates how to export hierarchical grid to PDF docume ![Export Hierarchy Grid](../images/pdf-export/export-hierarchy-grid.png) +### Format the child Grid columns before exporting + +The Syncfusion Grid allows customization of the child Grid's PDF export options, enabling precise control over data formatting before export. This functionality is achieved using the [exportDetailDataBound](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ExportDetailDataBound) event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the PDF document. + +In the following example, the `exportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [format](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to PDF document. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/pdf-export/format/tagHelper %} +{% endhighlight %} + +{% highlight c# tabtitle="Format.cs" %} +{% include code-snippet/grid/pdf-export/format/format.cs %} +{% endhighlight %} +{% endtabs %} + ## Remove header row while exporting When exporting data from the Syncfusion ASP.NET Core Grid, you have an option to remove the header row from the exported file. This can be useful when you want to export grid data without including the header values in the exported document. From a1afc23d80dee70304a1966c32c384b4a6d06aa4 Mon Sep 17 00:00:00 2001 From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com> Date: Mon, 24 Mar 2025 16:09:09 +0530 Subject: [PATCH 2/2] 940682: Added the topic of Format the child Grid columns before exporting --- .../grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md index 3038348bee..8a4cef5b65 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-exporting.md @@ -234,7 +234,7 @@ The following example demonstrates how to export hierarchical grid to Excel docu The Syncfusion Grid allows customization of the child Grid's Excel export options, enabling precise control over data formatting before export. This functionality is achieved using the [exportDetailDataBound](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_ExportDetailDataBound) event, which is triggered for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the Excel document. -In the following example, the `exportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [format](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to Excel. +In the following example, the `exportDetailDataBound` event is used to modify the **OrderDate** column of the child Grid. By setting the column's [format](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Format) property, the date values are formatted as `dd/MM/yyyy` when exported to Excel. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %}