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.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
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
}
|
