syncfusion-content · vikramsundarajan · Mar 24, 2025 · Mar 24, 2025
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
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    ViewBag.dataSource =  OrdersDetails.GetAllRecords();;
+    ViewBag.employeeDataSource = EmployeeView.GetAllRecords();
+    return View();
+}
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
@@ -0,0 +1,33 @@
+@{
+   var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.dataSource,
+      QueryString = "EmployeeID",
+      Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
+      {
+        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<object>)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<string>() { "ExcelExport"}).ChildGrid(ChildGrid).ToolbarClick("toolbarClick").ExportDetailDataBound("exportDetailDataBound").Render()
+<script>
+   function toolbarClick(args) {
+       var grid = document.getElementById("Grid").ej2_instances[0];
+       if (args.item.id === 'Grid_excelexport') {
+            var excelExportProperties = {
+                 hierarchyExportMode: "All"
+            };
+        grid.excelExport(excelExportProperties);
+      }
+   }
+   function exportDetailDataBound(args) {
+      args.childGrid.columns[2].format = {type: 'date',format: 'dd\\/MM\\/yyyy'};
+   }
+</script>
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
@@ -0,0 +1,33 @@
+@{ var ChildGrid = new Syncfusion.EJ2.Grids.Grid() {
+          DataSource = (IEnumerable<object>)ViewBag.DataSource,
+          QueryString = "EmployeeID",
+          Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
+                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" },
+        }
+      };
+  }
+<ejs-grid id="Grid" dataSource="@ViewBag.employeeDataSource" allowExcelExport="true" childGrid="ChildGrid" toolbar="@(new List<string>() {"ExcelExport" })" toolbarClick="toolbarClick" exportDetailDataBound="exportDetailDataBound">
+    <e-grid-columns>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="125"></e-grid-column>
+        <e-grid-column field="FirstName" headerText="First Name" width="120"></e-grid-column>
+        <e-grid-column field="LastName" headerText="Last Name" width="170"></e-grid-column>
+        <e-grid-column field="City" headerText="City" textAlign="Right" width="135"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    function toolbarClick(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        if (args.item.id === 'Grid_excelexport') {
+            var excelExportProperties = {
+                hierarchyExportMode: "All"
+            };
+            grid.excelExport(excelExportProperties);
+        }
+    }
+    function exportDetailDataBound(args) {
+        args.childGrid.columns[2].format = {type: 'date',format: 'dd\\/MM\\/yyyy'};
+    }
+</script>
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
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource =  OrdersDetails.GetAllRecords();;
+    ViewBag.EmpDataSource = EmployeeView.GetAllRecords();
+    return View();
+} 
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
@@ -0,0 +1,33 @@
+@{
+    var ChildGrid = new Syncfusion.EJ2.Grids.Grid() { DataSource = (IEnumerable<object>)ViewBag.DataSource,
+        QueryString = "EmployeeID",
+        Columns = new List<Syncfusion.EJ2.Grids.GridColumn>
+        {
+          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<object>)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<string>() { "PdfExport"}).ChildGrid(ChildGrid).ToolbarClick("toolbarClick").ExportDetailDataBound("exportDetailDataBound").Render()
+<script>
+    function toolbarClick(args) {
+        if (args.item.id === 'Grid_pdfexport') {
+            let grid = document.getElementById("Grid").ej2_instances[0]; 
+            let exportProperties = {
+                hierarchyExportMode: "All" 
+            };
+            grid.pdfExport(exportProperties); 
+        }
+    }
+    function exportDetailDataBound(args) {
+        args.childGrid.columns[2].format = {type: 'date',format: 'dd\\/MM\\/yyyy'};
+    }
+</script>
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
@@ -0,0 +1,33 @@
+@{ 
+    var ChildGrid = new Syncfusion.EJ2.Grids.Grid(){
+        DataSource = (IEnumerable<object>)ViewBag.DataSource,
+        QueryString = "EmployeeID",
+        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
+            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" },
+    }};
+}
+<ejs-grid id="Grid" dataSource="@ViewBag.EmpDataSource" allowPdfExport="true" childGrid="ChildGrid" toolbar="@(new List<string>() {"PdfExport" })" toolbarClick="toolbarClick" exportDetailDataBound="exportDetailDataBound">
+    <e-grid-columns>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="90"></e-grid-column>
+        <e-grid-column field="FirstName" headerText="Name" width="100"></e-grid-column>
+        <e-grid-column field="LastName" headerText="Last Name" width="100"></e-grid-column>
+        <e-grid-column field="City" headerText="City" width="100"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    function toolbarClick(args) {
+        if (args.item.id === 'Grid_pdfexport') {
+            let grid = document.getElementById("Grid").ej2_instances[0];
+            let exportProperties = {
+                hierarchyExportMode: "All"
+            };
+            grid.pdfExport(exportProperties);
+        }
+        function exportDetailDataBound(args) {
+            args.childGrid.columns[2].format = {type: 'date',format: 'dd\\/MM\\/yyyy'};
+        }
+    }
+</script>
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
@@ -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
@@ -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
@@ -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
@@ -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.