Is it possible to modify Report Viewer column header alignment and text wrapping?
I have two issues with the Report Viewer column headers:
1. The column header text is always left-aligned, which is never in line with the numeric data that is in its column.
- This leads to much confusion as to which header represents which content
- I would like to be able to right-align the header text, or at least have it default to Centered to minimize the confusion.
- <ENHANCEMENT REQUEST> Ideally, header text should automatically align with its contents, or better yet, have the Caption have its own Settings/Properties to be editable.
2. The column header text is always only displayed on a single row and truncates if wider than the column. I would like to enable text wrapping instead of truncation as we need to see the full text of the caption.
- We have a number of columns that have similar captions, but once they get truncated (with ellipsis...) if the column isn't wide enough, we can't tell which column is which, both titles look the same.
In general, what you need to do is find out (e.g., through IE Developer Tools) what the class is of the element you want to change styles on. For instance, in the case of the column headers for this report:
The class you need to specify the style for is this:
You need to override this somewhere in your application's CSS/skin to set the text alignment to what you want. You can set the word-wrap you want as well.
Public Safety Canada
CA
Thanks for your response, Ronald. I'm just not sure how to modify the CSS, I don't know which file I need to modify or create, etc. If you have any suggestions on that, it would be greatly appreciated!
Tetrasoft India Private Limited
IN
Hello,
Can you please let us know the version of PRPC being used here?
This issue was seen in Pega 7.1.5 previously.
You may refer SA-7831
This is as per design of the report viewer in previous versions. In order to avoid a scroll bar, the report viewer has been designed in such a way that the columns get adjusted as per the width of the screen.
In later version, that is, 7.1.7 the report viewer has been updated to display the entire text of the header. The width of the column gets adjusted as per the content of the header. Hence, the scroll bar comes up when the entire report is displayed.
Public Safety Canada
CA
Hi Swati,
I am in 7.1.8. I finally have some screenshots available to show what I mean.
The behaviour I've observed is that the columns are all the same width and spread to fill 100% of the window. Then if the header text is too long for this column width, the text is truncated with an ellipsis (as highlighted in yellow below). The preferred behaviour would be to wrap the header text over multiple lines so that none of the text is hidden.
My second issue was with the Header text alignment when you have numerical data in your column that is right-aligned, but the header text is left-aligned. You can see it above, but it is more pronounced below. Your eye is drawn immediately to the wrong column. All my clients have complained about this. And even though you are aware that this is the way it is and to be careful of this, you still get caught by it and make the mistake of referring to the wrong header. The header should always align with its respective data.
Hi Swati,
I am in 7.1.8. I finally have some screenshots available to show what I mean.
The behaviour I've observed is that the columns are all the same width and spread to fill 100% of the window. Then if the header text is too long for this column width, the text is truncated with an ellipsis (as highlighted in yellow below). The preferred behaviour would be to wrap the header text over multiple lines so that none of the text is hidden.
My second issue was with the Header text alignment when you have numerical data in your column that is right-aligned, but the header text is left-aligned. You can see it above, but it is more pronounced below. Your eye is drawn immediately to the wrong column. All my clients have complained about this. And even though you are aware that this is the way it is and to be careful of this, you still get caught by it and make the mistake of referring to the wrong header. The header should always align with its respective data.
Hopefully this explains my problem better. And hopefully it is fixable! Or if the behaviour is different in 7.2, please let me know.
Thank you.
Updated: 18 May 2016 5:38 EDT
Tetrasoft India Private Limited
IN
Hi,
It has been resolved in 7.1.8
I tested it locally.
Report comes up with complete headers along with a scroll bar at the bottom to move towards RHS to view other columns.
Request you to please check if HFix-25493 and HFix-24739 are applied at your end or not.
You may refer SA-17611 for details.
In 7.2 version also, we have a scroll bar which helps in proper display of columns.
Please find below the snapshot in 7.2 version
Public Safety Canada
CA
Thank you Swati, the hotfix would provide a <minimally acceptable> solution. But we have a some reports that have a lot of columns, and the column text can sometimes be rather long also, it makes for a LOT of horizontal scrolling and make the page difficult to read. This is not at all desirable.
If someone could register an Enhancement Request to be able to edit the alignment of the report column headers (left, right, center align and wrap-text), that would go a long way to improve the UI experience for viewing reports in the Report Browser.
Tetrasoft India Private Limited
IN
Hi Swati,
Thank you for creating the request. I have updated it under Related Work section above!
Hi Marie,
This enhancement will next be reviewed by the Product Management Team. Please contact your Account Executive to know the status of the enhancement.
Thank you for your valuable contribution
Regards,
Lochan | Online Community Moderator | Pegasystems Inc.
Coforge DPA private limited
AU
Hi Marie,
Can you please try to override "workform_pyReportingSkin" rule and use below CSS:
table.gridTable[pl_prop="pyReportContentPage.pxResults"] {
table-layout: fixed;
}
table.gridTable[pl_prop="pyReportContentPage.pxResults"] th {
overflow-x: hidden;
text-overflow: ellipsis;
height: auto;
}
table.gridTable[pl_prop="pyReportContentPage.pxResults"] td .oflowDivM{
text-overflow: ellipsis;
}
div.gridDefault div.divCont {
white-space: normal;
}
div.gridDefault div.oflowDiv {
height: auto !important;
}
I also faced the similar issue and it worked for me. And also try to set width in the report definition for each column.