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

4 posts, 0 answers
  1. Jaw
    Jaw avatar
    3 posts
    Member since:
    Jan 2015

    Posted 21 Oct 2015 Link to this post

    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

  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 26 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jaw
    Jaw avatar
    3 posts
    Member since:
    Jan 2015

    Posted 27 Oct 2015 Link to this post

    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.
  5. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 28 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top