We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
Index.js
var grid = new ej.grids.Grid({
dataSource: window.orderDatas,
allowPdfExport: true,
toolbar: ['ExcelExport', 'PdfExport'],
pageSettings: { pageSize: 7 },
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 100, textAlign: 'Center' },
{ field: 'CustomerID', headerText: 'Customer ID', width: 100, textAlign: 'Center' },
{ field: 'Freiaght', width: 100, format: 'C2', textAlign: 'Center' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 100 , textAlign: 'Center'},
],
});
grid.appendTo('#Grid');
grid.pdfHeaderQueryCellInfo = function(args){
var len = grid.columns.length;
for (let i = 0; i < len; i++) {
args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 50; // Set the column width as 50
}
}
grid.toolbarClick = function (args) {
if (args.item.id === 'Grid_pdfexport') {
grid.pdfExport();
}
}; |
|
Index.js
var grid = new ej.grids.Grid({
allowPdfExport: true,
pdfQueryCellInfo : childexport,
toolbar: ['PdfExport'],
pageSettings: { pageSize: 7 },
columns: [
…
],
childGrid: {
…
},
});
grid.appendTo('#Grid');
var parent=true; var child=true;
function childexport(args){
if(grid.columns[0].field === args.column.field){
var len = grid.columns.length;
for (let i = 0; i < len; i++) {
args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 100; // column width for Parent grid
}
}
if(grid.childGrid.columns[0].field === args.column.field ){
var len = grid.childGrid.columns.length;
for (let i = 0; i < len; i++) {
args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 75; // column width for Child grid
}
}
}; |
|
App.component.ts
toolbarClick(args: ClickEventArgs): void {
switch (args.item.text) {
case 'Excel Export':
const appendExcelExportProperties: ExcelExportProperties = {
multipleExport: { type: 'NewSheet' },
hierarchyExportMode: "All"
};
const GridExport: Promise<any> = this.grid.excelExport(appendExcelExportProperties, true);
GridExport.then((workbook: any) => {
var len = workbook.worksheets[0].columns.length;
for(var j=0; j<len; j++){
workbook.worksheets[0].columns[j].width = 200; // here you can set the width
}
const book: Workbook = new Workbook(workbook, 'xlsx');
book.save('Export.xlsx');
});
}
}
|
|
Index.js
ej.base.enableRipple(true);
var grid = new ej.grids.Grid({
dataSource: window.orderDatas.slice(0,5),
allowPdfExport: true,
pdfQueryCellInfo : childexport,
toolbar: ['PdfExport'],
pageSettings: { pageSize: 7 },
columns: [
…
],
childGrid: {
dataSource: data,
queryString: 'OrderID',
columns: [
…
],
},
});
grid.appendTo('#Grid');
function childexport(args){
if(grid.getVisibleColumns()[0].field === args.column.field){ // getVisibleColumns() method fetches the visible columns
var len = grid.getVisibleColumns().length;
for (let i = 0; i < len; i++) {
args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 120;
}
}
for(var j=0; j<grid.childGrid.columns.length; j++){ // for child grid
if(grid.childGrid.columns[j].field === args.column.field ){
var lengths = args.cell.gridRow.pdfGrid.columns.columns.length; // length of only visible columns
for (let i = 0; i < lengths; i++) {
args.cell.gridRow.pdfGrid.columns.getColumn(i).width = 75;
}
}
grid.toolbarClick = function (args) {
if (args.item.id === 'Grid_pdfexport') {
var exportProperties = {
hierarchyExportMode: "All",
}
grid.pdfExport(exportProperties);
}
}; |
|
Index.js
var grid = new ej.grids.Grid({
dataSource: window.orderDatas.slice(0,5),
allowPdfExport: true,
allowGrouping: true,
groupSettings: { showGroupedColumn: true }, // this allows to add the grouped column for width calculation
pdfQueryCellInfo : pdfexport,
toolbar: ['PdfExport'],
columns: [
{ field: 'OrderID', headerText: 'Order ID',visible: false, textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'CustomerID', width: 30},
{ field: 'Freight', headerText: 'Freight', width: 90 },
{ field: 'ShipCountry', headerText: 'ShipCountry', width: 130 },
],
});
grid.appendTo('#Grid');
function pdfexport(args){
var pdfcol = args.cell.gridRow.pdfGrid.columns;
var gridcol = grid.getVisibleColumns();
pdfcol.getColumn(0).width = gridcol[0].width;
pdfcol.getColumn(1).width = gridcol[1].width;
pdfcol.getColumn(2).width = gridcol[2].width;
}
|
|
Index.js
var grid = new ej.grids.Grid({
allowGrouping: true,
groupSettings: { showGroupedColumn: true, captionTemplate: '#captiontemplate', columns: ['CustomerID'] },
columns: [
…
],
});
grid.appendTo('#Grid');
grid.toolbarClick = function (args) {
if (args.item.id === 'Grid_pdfexport') {
grid.pdfExport();
}
}; |
|
Index.html
<html><head><script src="//ej2.syncfusion.com/javascript/demos/grid/default-exporting/datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<style>
<div class="stackblitz-container material">
<div class="control-section">
<div class="content-wrapper">
<script id="captiontemplate" type="text/x-template">
${field} - ${key}
</script>
<div id="Grid">
</div>
</div>
</div>
</div></body></html> |
|
Index.js
let grid: Grid = new Grid(
{
dataSource: data,
allowPaging: true,
toolbar: ['PdfExport'],
allowGrouping: true,
groupSettings: { captionTemplate: '#captiontemplate', columns: ['location'] },
allowPdfExport: true,
columns: [
{ field: 'name', headerText: 'name', textAlign: 'Right', width: 100 },
{ field: 'location', headerText: 'location', width: 150 },
{ field: 'purchase', headerText: 'purchase', width: 100, textAlign: 'Right'}
],
});
grid.appendTo('#Grid');
grid.toolbarClick = (args: ClickEventArgs) => {
if (args.item.id === 'Grid_pdfexport') {
grid.pdfExport();
}
};
grid.exportGroupCaption= (args) => { // define exportGroupCaption event
args.captionText =args.captionText.split("-")[0] // this will split the item values in the exported file
}
|
