Skip to content

Commit

Permalink
Merge pull request #3699 from syncfusion-content/EJ2-PdfExportOption-…
Browse files Browse the repository at this point in the history 
…928389

Documentation(928389-hotfix): Revamp for Pdf-Export Option in ASP.NET…
  • Loading branch information
@VigneshNatarajan27
VigneshNatarajan27 authored Jan 6, 2025
2 parents 7d7562f + 24d41a5 commit d75437f
Show file tree
Hide file tree
Showing 70 changed files with 1,812 additions and 1,208 deletions.
6 changes: 6 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/additonal-parameter/additional-parameter.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
29 changes: 29 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/additonal-parameter/razor
View file
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 30 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/additonal-parameter/tagHelper
View file
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 6 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/cell-customization/cell-customization.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
45 changes: 45 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/cell-customization/razor
View file
Original file line number Diff line number Diff line change
@@ -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>
46 changes: 46 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/cell-customization/tagHelper
View file
Original file line number Diff line number Diff line change
@@ -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>
44 changes: 28 additions & 16 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/customfont/razor
View file

Large diffs are not rendered by default.

55 changes: 35 additions & 20 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/customfont/tagHelper
View file

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/customizing-column/customizing-column.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
25 changes: 25 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/customizing-column/razor
View file
Original file line number Diff line number Diff line change
@@ -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>
27 changes: 27 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/customizing-column/tagHelper
View file
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 6 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/default-font/default-font.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
public IActionResult Index()
{
var Order = OrderDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
39 changes: 39 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/default-font/razor
View file
Original file line number Diff line number Diff line change
@@ -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>
41 changes: 41 additions & 0 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/default-font/tagHelper
View file
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 8 additions & 9 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/export-current/razor
View file
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 8 additions & 8 deletions ej2-asp-core-mvc/code-snippet/grid/pdf-export/export-current/tagHelper
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit d75437f

Please sign in to comment.