Skip to content

Commit

Permalink
DataGrid.Pdf - Wrong horizontal alignment for group columns (#21185)
Browse files Browse the repository at this point in the history 
* DataGrid.Pdf - Wrong horizontal alignment for group column

* small fix
  • Loading branch information
Vladimir Kuznetsov authored Feb 24, 2022
1 parent da5e26a commit 53c8682
Show file tree
Hide file tree
Showing 2 changed files with 353 additions and 3 deletions.
11 changes: 8 additions & 3 deletions js/exporter/jspdf/current/rows_generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,13 @@ function generateRowCells({ doc, dataProvider, rowIndex, wordWrapEnabled, column
for(let cellIndex = 0; cellIndex < columns.length; cellIndex++) {
const cellData = dataProvider.getCellData(rowIndex, cellIndex, true);
const cellStyle = styles[dataProvider.getStyleId(rowIndex, cellIndex)];
const style = getPdfCellStyle(rowType, cellStyle);
const style = getPdfCellStyle(columns[cellIndex], rowType, cellStyle);

const defaultAlignment = rtlEnabled ? 'right' : 'left';
const pdfCell = {
text: getFormattedValue(cellData.value, cellStyle.format),
verticalAlign: 'middle',
horizontalAlign: columns[cellIndex].alignment ?? defaultAlignment,
horizontalAlign: style.alignment ?? defaultAlignment,
wordWrapEnabled,
backgroundColor,
padding: toPdfUnit(doc, 5),
Expand Down Expand Up @@ -148,8 +148,13 @@ function getBaseTableStyle() {
return defaultStyles['base'];
}

function getPdfCellStyle(rowType, cellStyle) {
function getPdfCellStyle(column, rowType, cellStyle) {
const styles = Object.assign({}, defaultStyles['base'], defaultStyles[rowType]);
const alignment = rowType === 'header' ? column.alignment : cellStyle.alignment;

if(alignment) {
styles.alignment = alignment;
}

if(cellStyle.bold && rowType !== 'header') {
styles.font = Object.assign({}, styles.font, { style: 'bold' });
Expand Down
345 changes: 345 additions & 0 deletions testing/tests/DevExpress.exporter/jspdfParts/v3/jspdf_v3.dataGrid.horizontalAlign.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3047,6 +3047,351 @@ const JSPdfHorizontalAlignTests = {
});
});

QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'left\'}, f2, f3]', function(assert) {
const done = assert.async();
const doc = createMockPdfDoc();

const dataGrid = createDataGrid({
columns: [
{ dataField: 'f1', groupIndex: 0, alignment: 'left' },
{ dataField: 'f2' },
{ dataField: 'f3' },
],
dataSource: [
{ f1: 'f1', f2: 'f1_2', f3: 'f1_3' },
{ f1: 'f1', f2: 'f2_2', f3: 'f2_3' },
],
});

const expectedLog = [
'setTextColor,#979797',
'setFontSize,10',
'text,F2,55,65.75,{baseline:middle}',
'setTextColor,#979797',
'text,F3,145,65.75,{baseline:middle}',
'setTextColor,#000000',
'setFont,helvetica,bold,',
'text,F1: f1,55,87.25,{baseline:middle}',
'setFont,helvetica,normal,',
'text,f1_2,55,108.75,{baseline:middle}',
'text,f1_3,145,108.75,{baseline:middle}',
'text,f2_2,55,130.25,{baseline:middle}',
'text,f2_3,145,130.25,{baseline:middle}',
'setLineWidth,0.5',
'setDrawColor,#979797',
'rect,50,55,90,21.5',
'setDrawColor,#979797',
'rect,140,55,80,21.5',
'setDrawColor,#979797',
'rect,50,76.5,170,21.5',
'setDrawColor,#979797',
'rect,50,98,90,21.5',
'setDrawColor,#979797',
'rect,140,98,80,21.5',
'setDrawColor,#979797',
'rect,50,119.5,90,21.5',
'setDrawColor,#979797',
'rect,140,119.5,80,21.5',
'setFontSize,16',
'setLineWidth,0.200025',
'setDrawColor,#000000'
];

exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => {
// doc.save(assert.test.testName + '.pdf');
assert.deepEqual(doc.__log, expectedLog);
done();
});
});

QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'left\'}, f2, f3], rtlEnabled', function(assert) {
const done = assert.async();
const doc = createMockPdfDoc();

const dataGrid = createDataGrid({
rtlEnabled: true,
columns: [
{ dataField: 'f1', groupIndex: 0, alignment: 'left' },
{ dataField: 'f2' },
{ dataField: 'f3' },
],
dataSource: [
{ f1: 'f1', f2: 'f1_2', f3: 'f1_3' },
{ f1: 'f1', f2: 'f2_2', f3: 'f2_3' },
],
});

const expectedLog = [
'setTextColor,#979797',
'setFontSize,10',
'text,F2,540.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setTextColor,#979797',
'text,F3,450.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setTextColor,#000000',
'setFont,helvetica,bold,',
'text,F1: f1,540.28,87.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setFont,helvetica,normal,',
'text,f1_2,540.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f1_3,450.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f2_2,540.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f2_3,450.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setLineWidth,0.5',
'setDrawColor,#979797',
'rect,455.28,55,90,21.5',
'setDrawColor,#979797',
'rect,375.28,55,80,21.5',
'setDrawColor,#979797',
'rect,375.28,76.5,170,21.5',
'setDrawColor,#979797',
'rect,455.28,98,90,21.5',
'setDrawColor,#979797',
'rect,375.28,98,80,21.5',
'setDrawColor,#979797',
'rect,455.28,119.5,90,21.5',
'setDrawColor,#979797',
'rect,375.28,119.5,80,21.5',
'setFontSize,16',
'setLineWidth,0.200025',
'setDrawColor,#000000'
];

exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => {
// doc.save(assert.test.testName + '.pdf');
assert.deepEqual(doc.__log, expectedLog);
done();
});
});

QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'center\'}, f2, f3]', function(assert) {
const done = assert.async();
const doc = createMockPdfDoc();

const dataGrid = createDataGrid({
columns: [
{ dataField: 'f1', groupIndex: 0, alignment: 'center' },
{ dataField: 'f2' },
{ dataField: 'f3' },
],
dataSource: [
{ f1: 'f1', f2: 'f1_2', f3: 'f1_3' },
{ f1: 'f1', f2: 'f2_2', f3: 'f2_3' },
],
});

const expectedLog = [
'setTextColor,#979797',
'setFontSize,10',
'text,F2,55,65.75,{baseline:middle}',
'setTextColor,#979797',
'text,F3,145,65.75,{baseline:middle}',
'setTextColor,#000000',
'setFont,helvetica,bold,',
'text,F1: f1,55,87.25,{baseline:middle}',
'setFont,helvetica,normal,',
'text,f1_2,55,108.75,{baseline:middle}',
'text,f1_3,145,108.75,{baseline:middle}',
'text,f2_2,55,130.25,{baseline:middle}',
'text,f2_3,145,130.25,{baseline:middle}',
'setLineWidth,0.5',
'setDrawColor,#979797',
'rect,50,55,90,21.5',
'setDrawColor,#979797',
'rect,140,55,80,21.5',
'setDrawColor,#979797',
'rect,50,76.5,170,21.5',
'setDrawColor,#979797',
'rect,50,98,90,21.5',
'setDrawColor,#979797',
'rect,140,98,80,21.5',
'setDrawColor,#979797',
'rect,50,119.5,90,21.5',
'setDrawColor,#979797',
'rect,140,119.5,80,21.5',
'setFontSize,16',
'setLineWidth,0.200025',
'setDrawColor,#000000'
];

exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => {
// doc.save(assert.test.testName + '.pdf');
assert.deepEqual(doc.__log, expectedLog);
done();
});
});

QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'center\'}, f2, f3], rtlEnabled', function(assert) {
const done = assert.async();
const doc = createMockPdfDoc();

const dataGrid = createDataGrid({
rtlEnabled: true,
columns: [
{ dataField: 'f1', groupIndex: 0, alignment: 'center' },
{ dataField: 'f2' },
{ dataField: 'f3' },
],
dataSource: [
{ f1: 'f1', f2: 'f1_2', f3: 'f1_3' },
{ f1: 'f1', f2: 'f2_2', f3: 'f2_3' },
],
});

const expectedLog = [
'setTextColor,#979797',
'setFontSize,10',
'text,F2,540.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setTextColor,#979797',
'text,F3,450.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setTextColor,#000000',
'setFont,helvetica,bold,',
'text,F1: f1,540.28,87.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setFont,helvetica,normal,',
'text,f1_2,540.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f1_3,450.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f2_2,540.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f2_3,450.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setLineWidth,0.5',
'setDrawColor,#979797',
'rect,455.28,55,90,21.5',
'setDrawColor,#979797',
'rect,375.28,55,80,21.5',
'setDrawColor,#979797',
'rect,375.28,76.5,170,21.5',
'setDrawColor,#979797',
'rect,455.28,98,90,21.5',
'setDrawColor,#979797',
'rect,375.28,98,80,21.5',
'setDrawColor,#979797',
'rect,455.28,119.5,90,21.5',
'setDrawColor,#979797',
'rect,375.28,119.5,80,21.5',
'setFontSize,16',
'setLineWidth,0.200025',
'setDrawColor,#000000'
];

exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => {
// doc.save(assert.test.testName + '.pdf');
assert.deepEqual(doc.__log, expectedLog);
done();
});
});

QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'right\'}, f2, f3]', function(assert) {
const done = assert.async();
const doc = createMockPdfDoc();

const dataGrid = createDataGrid({
columns: [
{ dataField: 'f1', groupIndex: 0, alignment: 'right' },
{ dataField: 'f2' },
{ dataField: 'f3' },
],
dataSource: [
{ f1: 'f1', f2: 'f1_2', f3: 'f1_3' },
{ f1: 'f1', f2: 'f2_2', f3: 'f2_3' },
],
});

const expectedLog = [
'setTextColor,#979797',
'setFontSize,10',
'text,F2,55,65.75,{baseline:middle}',
'setTextColor,#979797',
'text,F3,145,65.75,{baseline:middle}',
'setTextColor,#000000',
'setFont,helvetica,bold,',
'text,F1: f1,55,87.25,{baseline:middle}',
'setFont,helvetica,normal,',
'text,f1_2,55,108.75,{baseline:middle}',
'text,f1_3,145,108.75,{baseline:middle}',
'text,f2_2,55,130.25,{baseline:middle}',
'text,f2_3,145,130.25,{baseline:middle}',
'setLineWidth,0.5',
'setDrawColor,#979797',
'rect,50,55,90,21.5',
'setDrawColor,#979797',
'rect,140,55,80,21.5',
'setDrawColor,#979797',
'rect,50,76.5,170,21.5',
'setDrawColor,#979797',
'rect,50,98,90,21.5',
'setDrawColor,#979797',
'rect,140,98,80,21.5',
'setDrawColor,#979797',
'rect,50,119.5,90,21.5',
'setDrawColor,#979797',
'rect,140,119.5,80,21.5',
'setFontSize,16',
'setLineWidth,0.200025',
'setDrawColor,#000000'
];

exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => {
// doc.save(assert.test.testName + '.pdf');
assert.deepEqual(doc.__log, expectedLog);
done();
});
});

QUnit.test('1 level - 1 group - [{f1, groupIndex: 0, alignment: \'right\'}, f2, f3], rtlEnabled', function(assert) {
const done = assert.async();
const doc = createMockPdfDoc();

const dataGrid = createDataGrid({
rtlEnabled: true,
columns: [
{ dataField: 'f1', groupIndex: 0, alignment: 'right' },
{ dataField: 'f2' },
{ dataField: 'f3' },
],
dataSource: [
{ f1: 'f1', f2: 'f1_2', f3: 'f1_3' },
{ f1: 'f1', f2: 'f2_2', f3: 'f2_3' },
],
});

const expectedLog = [
'setTextColor,#979797',
'setFontSize,10',
'text,F2,540.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setTextColor,#979797',
'text,F3,450.28,65.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setTextColor,#000000',
'setFont,helvetica,bold,',
'text,F1: f1,540.28,87.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setFont,helvetica,normal,',
'text,f1_2,540.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f1_3,450.28,108.75,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f2_2,540.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'text,f2_3,450.28,130.25,{baseline:middle,align:right,isInputVisual:false,isOutputVisual:true,isInputRtl:true,isOutputRtl:false}',
'setLineWidth,0.5',
'setDrawColor,#979797',
'rect,455.28,55,90,21.5',
'setDrawColor,#979797',
'rect,375.28,55,80,21.5',
'setDrawColor,#979797',
'rect,375.28,76.5,170,21.5',
'setDrawColor,#979797',
'rect,455.28,98,90,21.5',
'setDrawColor,#979797',
'rect,375.28,98,80,21.5',
'setDrawColor,#979797',
'rect,455.28,119.5,90,21.5',
'setDrawColor,#979797',
'rect,375.28,119.5,80,21.5',
'setFontSize,16',
'setLineWidth,0.200025',
'setDrawColor,#000000'
];

exportDataGrid({ jsPDFDocument: doc, component: dataGrid, topLeft: { x: 10, y: 15 }, columnWidths: [ 90, 80 ] }).then(() => {
// doc.save(assert.test.testName + '.pdf');
assert.deepEqual(doc.__log, expectedLog);
done();
});
});

});
}
};
Expand Down

0 comments on commit 53c8682

Please sign in to comment.