Change Group Background Color / Vertical distance from the parent nodes / Customize OrgChart PDF

[Jaw]

Hi,

I have 3 questions actually. Dont know the idea of posting it in the same thread is good or not. Please suggest. Below are my questions :

1. ​How to change the background color of ​groups (not the ​group items) based upon groups type user is selecting. Please see screen shot (ColoredGroups.png).

2. I want to define the height or vertical distance of node / groups from the parent nodes or show it ​horiz​ontally but little below ​from parent node . Because of an obvious fact that the secretary of the CEO cannot be shown at the same level ​with other heads reporting to CEO in a real time Organization Chart. Please see LineHeight.png

3. PDF Export, I want to export the chart with titles and legends for groups and group items (customize PDF before exporting). Cannot export the html page using RadExport content because I am showing the RadOrgChart in RadSplitter center pane (fixed pane), left pane (sliding pane) has chart values (Titles and all) and right pane (also sliding pane) shows the tree of elements showing in the chart. I need to export only center page and its has only OrgChart nothing else. The left and right panes are sliding to proivde more space for the OrgChart to view (center pane).

I appreciate your kind help.

 

Thanks,

Jawwad

[Dimitar]

Hi Jawwad,

It is a good practice to divide separate questions/ issues in separate threads. Thus, we would keep them as short and concise as possible. This would help the community to find answers faster, if needed.

1. You could change the color of a group with the following selector (apply any color needed):

<style type="text/css">
    html .RadOrgChart .rocGroup {
        background-color: red !important;
    }
</style>

2. Such node positioning is not supported by the RadOrgChart control. I would suggest you to try the RadDiagram control for such scenarios.

3. You may refer to the RadOrgChart PDF export demo. It uses the RadClientExportManager control to export the OrgChart.

Regards,
Dimitar
Telerik

[Jaw]

Hi Dimitar,

       Yes sure, next time I will take care of it. I used this approach of using the same thread for multiple questions as its easier to track the updates and follow up.

 

1. This setting will apply for all groups. I want to set, lets say, 6 different colors for six different groups based on the group name. That means while loading the chart I want to set the color "Blue" if Group Name is "A", "Green" if group name is "B". Like that I want to set the colors from code behind for each group individually.

 

2. RadOrgChart is more user friendly and actually to the point than RadDiagram when its comes to Organization Charts. I prefer using the same. However, please tell me how to set the item width / height of a particular node and group.

3. I am using the same approach "RadClientExportManager" and it exports RadOrgChart elements only but I want to add custom labels and fields. In short design the PDF with headers ​/ footers and adding custom labels and elements in it before exporting it to the PDF. Please see untitled.png.

[Dimitar]

Hi,

1. You may add a certain class to a group in your code behind. It would allow you to apply different styles to each group accordingly, based on the class set.

2. You would be able to apply width and height to a particular group based on the custom class added in point 1 above.

3. The following help article explains how content could be manipulated just before export. You may add the required text to the page and hide it with CSS. And just before export, you may use the k-pdf-export class to make the text visible for the RadClientExportManager, as explained in the article.

Regards,
Dimitar
Telerik