Documentation(928389-hotfix): Revamp for Pdf-Export Option in ASP.NET…

ej2-asp-core-mvc/code-snippet/grid/pdf-export/additonal-parameter/additional-parameter.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrderDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/pdf-export/additonal-parameter/razor

@@ -0,0 +1,29 @@
+<div style="margin-left:180px">
+    <p style="color:red;" id="message"></p>
+</div>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPaging(true).Toolbar(new List<string> { "PdfExport" }).AllowPdfExport(true).Columns(col =>{
+  col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(120).Add();
+  col.Field("CustomerID").HeaderText("Customer ID").Visible(false).Width("150").Add();
+  col.Field("ShipCity").HeaderText("Ship City").Width(150).Add();
+  col.Field("ShipCountry").HeaderText("Ship Country").Width(150).Add();
+}).ToolbarClick("toolbarClick").PdfExportComplete("pdfExportComplete").Render();
+<script>
+    var queryClone;
+    var grid;
+    document.addEventListener('DOMContentLoaded', function () {
+        grid = document.getElementById('Grid').ej2_instances[0];
+    });
+    function toolbarClick(args) {
+        if (args.item.id === 'Grid_pdfexport') {
+            queryClone = grid.query;
+            grid.query = new ej.data.Query().addParams('recordcount', '15');
+            document.getElementById('message').innerText =
+                'Key: ' + grid.query.params[0].key +
+                ' and Value: ' + grid.query.params[0].value + ' on ' + args.item.text;
+            grid.pdfExport();
+        }
+    }
+    function pdfExportComplete() {
+    grid.query = queryClone;
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/additonal-parameter/tagHelper

@@ -0,0 +1,30 @@
+<div style="margin-left:180px">
+    <p style="color:red;" id="message"></p>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowPdfExport="true" toolbarClick="toolbarClick" pdfExportComplete="pdfExportComplete" toolbar="@(new List<string>() { "PdfExport" })">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" visible="false" width="150"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+var queryClone;
+document.addEventListener('DOMContentLoaded', function () {
+    grid = document.getElementById('Grid').ej2_instances[0];
+});
+function toolbarClick(args) {
+    if (args.item.id === 'Grid_pdfexport') { 
+            queryClone = grid.query;
+            grid.query = new ej.data.Query().addParams('recordcount', '15');
+            document.getElementById('message').innerText =
+                'Key: ' + grid.query.params[0].key +
+                ' and Value: ' + grid.query.params[0].value + ' on ' + args.item.text;
+            grid.pdfExport();
+    }
+}
+function pdfExportComplete() {
+        grid.query = queryClone; 
+}
+</script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/cell-customization/cell-customization.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrderDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/pdf-export/cell-customization/razor

@@ -0,0 +1,45 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPdfExport(true).PdfQueryCellInfo("pdfQueryCellInfo").QueryCellInfo("queryCellInfo").ToolbarClick("toolbarClick").Columns(col =>
+    {
+        col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
+        col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
+        col.Field("Freight").HeaderText("Freight").Width(80).Add();
+        col.Field("ShipName").HeaderText("Ship Name").Width(120).Add();
+    }).Toolbar(new List<string>() { "PdfExport" }).Height(272).Render()
+<script>
+function toolbarClick(args){
+    let grid = document.getElementById("Grid").ej2_instances[0];
+    if (args.item.id === 'Grid_pdfexport') {
+        grid.pdfExport();
+    }
+}
+
+function pdfQueryCellInfo(args)
+{
+    if (args.column.field === 'Freight') {
+        if ((args.value) < 30) {
+            (args.style)= { backgroundColor: '#99ffcc' };
+        } else if ((args.value) < 60) {
+            (args.style) = { backgroundColor: '#ffffb3' };
+        } else {
+            (args.style) = { backgroundColor: '#ff704d' };
+        }
+    }
+}
+
+function queryCellInfo(args)
+{
+    var column = args.column;
+    var cell = args.cell;
+    var data = args.data;
+    if (column.field === 'Freight') {
+        var FreightData= data.Freight;
+        if (FreightData < 30) {
+            cell.style.background = '#99ffcc';
+        } else if (FreightData < 60) {
+            cell.style.background = '#ffffb3';
+        } else {
+            cell.style.background = '#ff704d';
+        }
+    }
+}
+</script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/cell-customization/tagHelper

@@ -0,0 +1,46 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="272px" allowPdfExport="true" toolbar="@(new List<string> { "PdfExport" })" toolbarClick="toolbarClick" queryCellInfo="queryCellInfo" pdfQueryCellInfo="pdfQueryCellInfo">
+<e-grid-columns>
+    <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-grid-column>
+    <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+    <e-grid-column field="Freight" headerText="Freight" width="80"></e-grid-column>
+    <e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-column>
+</e-grid-columns>
+</ejs-grid>
+<script>
+function toolbarClick(args){
+    let grid = document.getElementById("Grid").ej2_instances[0];
+    if (args.item.id === 'Grid_pdfexport') {
+        grid.pdfExport();
+    }
+}
+
+function pdfQueryCellInfo(args)
+{
+    if (args.column.field === 'Freight') {
+        if ((args.value) < 30) {
+            (args.style)= { backgroundColor: '#99ffcc' };
+        } else if ((args.value) < 60) {
+            (args.style) = { backgroundColor: '#ffffb3' };
+        } else {
+            (args.style) = { backgroundColor: '#ff704d' };
+        }
+    }
+}
+
+function queryCellInfo(args)
+{
+    var column = args.column;
+    var cell = args.cell;
+    var data = args.data;
+    if (column.field === 'Freight') {
+        var FreightData= data.Freight;
+        if (FreightData < 30) {
+            cell.style.background = '#99ffcc';
+        } else if (FreightData < 60) {
+            cell.style.background = '#ffffb3';
+        } else {
+            cell.style.background = '#ff704d';
+        }
+    }
+}
+</script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/customizing-column/customizing-column.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrderDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/pdf-export/customizing-column/razor

@@ -0,0 +1,25 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPdfExport(true).ToolbarClick("toolbarClick").Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width(100).Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width(120).Add();
+}).AllowPaging(true).Toolbar(new List<string>() { "PdfExport" }).Height(272).Render()
+<script>
+    function toolbarClick(args) {
+        if (args.item.id === 'Grid_pdfexport') {
+            let pdfExportColumns = [
+                { field: 'OrderID', textAlign: 'Right', width: '90' },
+                { field: 'CustomerID', headerText: 'Customer Name', width: '100' },
+                { field: 'ShipCity', textAlign: 'Center', width: '80' }
+            ];
+
+            let pdfExportProperties = {
+                columns: pdfExportColumns
+            };
+
+            let grid = document.getElementById("Grid").ej2_instances[0];
+            grid.pdfExport(pdfExportProperties);
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/customizing-column/tagHelper

@@ -0,0 +1,27 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="272px" allowPdfExport="true" allowPaging="true"
+toolbar="@(new List<string> { "PdfExport" })" toolbarClick="toolbarClick">
+<e-grid-columns>
+    <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-grid-column>
+    <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+    <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
+    <e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-column>
+</e-grid-columns>
+</ejs-grid>
+<script>
+    function toolbarClick(args) {
+        if (args.item.id === 'Grid_pdfexport') {
+            let pdfExportColumns = [
+                { field: 'OrderID', textAlign: 'Right', width: '90' },
+                { field: 'CustomerID', headerText: 'Customer Name', width: '100' },
+                { field: 'ShipCity', textAlign: 'Center', width: '80' }
+            ];
+
+            let pdfExportProperties = {
+                columns: pdfExportColumns
+            };
+
+            let grid = document.getElementById("Grid").ej2_instances[0];
+            grid.pdfExport(pdfExportProperties);
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/default-font/default-font.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrderDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/pdf-export/default-font/razor

@@ -0,0 +1,39 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPdfExport(true).AllowGrouping(true).GroupSettings(group => { group.Columns(new string[] { "ShipCity" }); }).ToolbarClick("toolbarClick").Columns(col =>
+    {
+        col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
+        col.Field("CustomerID").HeaderText("Customer Name").Width(100).Add();
+        col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();
+        col.Field("ShipName").HeaderText("Ship Name").Width(120).Add();
+    }).AllowPaging(true).Toolbar(new List<string>() { "PdfExport" }).Height(272).Render()
+<script>
+    function toolbarClick(args) {
+        if (args.item.id === 'Grid_pdfexport') {
+            let grid = document.getElementById("Grid").ej2_instances[0];
+            const pdfExportProperties = {
+                theme: {
+                    header: {
+                        font: new ej.pdfexport.PdfStandardFont(
+                            ej.pdfexport.PdfFontFamily.TimesRoman,
+                            11,
+                            ej.pdfexport.PdfFontStyle.Bold
+                        ),
+                        fontColor: '#000080',
+                        bold: true,
+                        border: { color: '#5A5A5A', dashStyle: 'Solid' },
+                    },
+                    caption: {
+                        font: new ej.pdfexport.PdfStandardFont(ej.pdfexport.PdfFontFamily.TimesRoman, 9),
+                        fontColor: '#0B6623',
+                        bold: true,
+                    },
+                    record: {
+                        font: new ej.pdfexport.PdfStandardFont(ej.pdfexport.PdfFontFamily.TimesRoman, 10),
+                        fontColor: '#B22222',
+                        bold: true,
+                    },
+                },
+            };
+            grid.pdfExport(pdfExportProperties);
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/default-font/tagHelper

@@ -0,0 +1,41 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="272px" allowPdfExport="true" allowGrouping="true" toolbar="@(new List<string> { "PdfExport" })" toolbarClick="toolbarClick">
+<e-grid-groupsettings columns="@(new string[] {"ShipCity"})"></e-grid-groupsettings>
+<e-grid-columns>
+    <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-grid-column>
+    <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+    <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
+    <e-grid-column field="ShipName" headerText="Ship Name" width="120"></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];
+        const pdfExportProperties = {
+            theme: {
+                header: {
+                    font: new ej.pdfexport.PdfStandardFont(
+                        ej.pdfexport.PdfFontFamily.TimesRoman,
+                        11,
+                        ej.pdfexport.PdfFontStyle.Bold
+                    ),
+                    fontColor: '#000080',
+                    bold: true,
+                    border: { color: '#5A5A5A', dashStyle: 'Solid' },
+                },
+                caption: {
+                    font: new ej.pdfexport.PdfStandardFont(ej.pdfexport.PdfFontFamily.TimesRoman, 9),
+                    fontColor: '#0B6623',
+                    bold: true,
+                },
+                record: {
+                    font: new ej.pdfexport.PdfStandardFont(ej.pdfexport.PdfFontFamily.TimesRoman, 10),
+                    fontColor: '#B22222',
+                    bold: true,
+                },
+            },
+        };
+        grid.pdfExport(pdfExportProperties);
+    }
+}
+</script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/export-current/razor

@@ -1,21 +1,20 @@
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPdfExport().ToolbarClick("toolbarClick").Columns(col =>
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPdfExport(true).ToolbarClick("toolbarClick").Height("220px").Columns(col =>
 {
-   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
-   col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
-   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+   col.Field("OrderID").HeaderText("Order ID").Width("90").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("CustomerID").HeaderText("Customer Name").Width("100").Add();
+   col.Field("ShipCity").HeaderText("Ship City").Width("100").Add();
+   col.Field("ShipName").HeaderText("Ship Name").Width("120").Add();
 
 }).AllowPaging().Toolbar(new List<string>() { "PdfExport" }).Render()
 
 <script>
     function toolbarClick(args) {
-        var gridObj = document.getElementById("Grid").ej2_instances[0];
+        let grid = document.getElementById("Grid").ej2_instances[0];
         if (args.item.id === 'Grid_pdfexport') {
-            var exportProperties = {
+            let exportProperties = {
                 exportType: 'CurrentPage'
             };
-            gridObj.pdfExport(exportProperties);
+            grid.pdfExport(exportProperties);
         }
     }
 </script>

ej2-asp-core-mvc/code-snippet/grid/pdf-export/export-current/tagHelper

@@ -1,20 +1,20 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPdfExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"PdfExport"})" allowPaging="true">
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPdfExport="true" toolbarClick="toolbarClick" toolbar="@(new List<string>() {"PdfExport"})" allowPaging="true" height="220px">
     <e-grid-columns>
-        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
-        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
-        <e-grid-column field="OrderDate" headerText="Order Date" width="140" format="yMd"></e-grid-column>
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" width="120"></e-grid-column>
     </e-grid-columns>
 </ejs-grid>
 
 <script>
     function toolbarClick(args) {
-        var gridObj = document.getElementById("Grid").ej2_instances[0];
+        let grid = document.getElementById("Grid").ej2_instances[0];
         if (args.item.id === 'Grid_pdfexport') {
-            var exportProperties = {
+            let exportProperties = {
                 exportType: 'CurrentPage'
             };
-            gridObj.pdfExport(exportProperties);
+            grid.pdfExport(exportProperties);
         }
     }
 </script>