How to Add Multiple Column Headers in Flexsheet PDF

Posted by: curiosichi on 19 July 2019, 5:19 pm EST

  • Posted 19 July 2019, 5:19 pm EST - Updated 3 October 2022, 7:50 pm EST

    I am trying to add multiple column headers to my PDF outputs. On Using the code below, I almost accomplished what I wanted, but it leaves an empty row no matter what I do.

    My ultimate goal is the top header image on every page that requires the column headers. It’s only an issue when I have large datasets, and there are multiple pages. The numbers are present in the itemSource as the first row[0].

    I guess another way to ask this question, would be how do you remove a row from the grid.row array, and add it to the grid.columnheader.row array. And if I do this, how would I apply a style to the new row to center align them like they are before the move.

    Another thing I have to work around is the PDF component adds the default grey number and letter headers, and I have to remove those before I can continue. Perhaps that messes with things but I do not want them there in my final pdf output. The first few lines of the code below removes them.

    
            const desiredSheetGrid = new wjcGrid.FlexGrid(wijmo.createElement('<div></div>'), {
                itemsSource: this.workbookData.WorkSheets[index]
            });
     const colCnt = grid.rowHeaders.columns.length;
            grid.rowHeaders.columns.removeAt(colCnt - 1);
    
            // remove the extra line number at the end of the sheets
            grid.columns.splice(grid.columns.length - 1, 1);
    
                const newRow = new wjcGrid.Row();
                newRow.dataItem = desiredSheetGrid.rows[0].dataItem;
    
                const secondRowHeader = Object.keys(desiredSheetGrid.columnHeaders.rows[0].collectionView.currentItem);
                const existingRow = new wjcGrid.Row();
                existingRow.dataItem = JSON.parse(JSON.stringify(newRow.dataItem));
    
                let i = 0;
                for (const [key, value] of Object.entries(existingRow.dataItem)) {
    
                    existingRow.dataItem[key] = secondRowHeader[i];
                    i++;
                }
    
                desiredSheetGrid.columnHeaders.rows.splice(0, 1);
    
                desiredSheetGrid.columnHeaders.rows.push(existingRow);
                desiredSheetGrid.columnHeaders.rows.push(newRow);
    
                desiredSheetGrid.itemsSource.splice(0, 1);
                desiredSheetGrid.rows.splice(0, 1);
                (desiredSheetGrid.collectionView as wijmo.CollectionView).remove(desiredSheetGrid.rows[1].dataItem);
    
               // just trying stuff, thinking the row is removed but not refreshed?
                desiredSheetGrid.invalidate(true);
                desiredSheetGrid.refresh(true);
    
    
  • Posted 22 July 2019, 5:48 am EST

    Hi,

    Please refer to the sample below:

    https://stackblitz.com/edit/js-fhfcka

    To add an extra header row, you will need to push the new row with the appropriate data item to the row collection of column headers of the grid.

    To center align the items, you may need to handle the formatItem callback of FlexGridPdfConverter and cancel the standard cell drawing. Then, you will need to draw the text manually using the drawText method.

    Please let us know if this fulfills your requirement or otherwise.

    Regards,

    Ashwin

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels