Skip to content

Commit f35f6bd

Browse files
authored
docs(orgchart): Add css workaround for missing connection lines in exported PDF
1 parent 80f5053 commit f35f6bd

File tree

1 file changed

+47
-0
lines changed

1 file changed

+47
-0
lines changed

controls/orgchart/appearance-and-styling/connecting-lines.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,50 @@ If you want to add arrows to the ends of the connecting lines you can add the fo
8484

8585
Such implementation is not supported in IE6 and IE7 browsers because they do not implement the **":after"** css selector.
8686
![radorgchart-connecting-lines](images/radorgchart-connecting-lines.png)
87+
88+
## Modify connection lines in exported PDF file
89+
90+
The **RadClientExportManager** can be used to easily export the **RadOrgChart** to a PDF file as demonstrated in the [OrgChart - Export to PDF](https://demos.telerik.com/aspnet-ajax/client-export-manager/applicationscenarios/export-radorgchart/defaultcs.aspx?product=orgchart) online demo.
91+
92+
Due to a technical limitaion, the ClientExportManager cannot export the *:before* and *:after* pseudo elements that are actually the connecting lines of the RadOrgChart with Lightweight RenderMode.
93+
94+
Nevertheless, this issue is workarounded as of R2 2020, and for previous versions, the following CSS style can be used:
95+
96+
````CSS
97+
.RadOrgChart .kendo-pdf-hide-pseudo-elements:after,
98+
.RadOrgChart .kendo-pdf-hide-pseudo-elements:before {
99+
display: none !important; }
100+
101+
.k-pdf-export .rocNode:before {
102+
display: normal;
103+
height: 0.3px;
104+
max-width: 100%;
105+
background: black; }
106+
107+
.k-pdf-export .rocGroup:before,
108+
.k-pdf-export .rocGroup:after,
109+
.k-pdf-export .rocNode:after,
110+
.k-pdf-export .rocItem:after {
111+
display: normal;
112+
max-height: 100%;
113+
width: 0.3px;
114+
background: black; }
115+
116+
.k-pdf-export .RadOrgChart.rocHorizontal .rocNode:before,
117+
.k-pdf-export.RadOrgChart.rocHorizontal .rocNode:before {
118+
width: 0.3px; }
119+
120+
.k-pdf-export.RadOrgChart.rocHorizontal .rocGroup:before,
121+
.k-pdf-export.RadOrgChart.rocHorizontal .rocGroup:after,
122+
.k-pdf-export.RadOrgChart.rocHorizontal .rocNode:after,
123+
.k-pdf-export.RadOrgChart.rocHorizontal .rocItem:after,
124+
.k-pdf-export .RadOrgChart.rocHorizontal .rocGroup:before,
125+
.k-pdf-export .RadOrgChart.rocHorizontal .rocGroup:after,
126+
.k-pdf-export .RadOrgChart.rocHorizontal .rocNode:after,
127+
.k-pdf-export .RadOrgChart.rocHorizontal .rocItem:after {
128+
display: normal;
129+
border-top: 0.3px solid black !important;
130+
max-width: 100%;
131+
height: 0.3px; }
132+
````
133+

0 commit comments

Comments
 (0)