OrgChart: possible to have multiple types of boxes on the chart?

3 posts, 0 answers
  1. DAVE
    DAVE avatar
    19 posts
    Member since:
    Jun 2010

    Posted 16 Dec 2011 Link to this post

    The OrgChart would fill a need I have for a tree-type diagram but I would like to have 3 different types of boxes represented based on some attribute I can supply.  Is this possible or do all boxes have to look the same?  I can't tell from looking at the online info/demos.

    Also, are there any limitations as to number of nodes or levels of the chart?
  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 20 Dec 2011 Link to this post

    Hi Dave,

    Currentlty, the RadOrgChart control is supporting only one type of boxes and they can be styled. Here is an example with custom styles:
    <head runat="server">
        <title></title>
        <style type="text/css">
            .RadOrgChart .rocNode .rocGroup
            {
                background: none !important;
            }
             
            .RadOrgChart .rocNode .rocItemContent
            {
                background: none !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager">
            </telerik:RadScriptManager>
            <hr />
            <telerik:RadOrgChart runat="server" ID="RadOrgChart2" DisableDefaultImage="true">
                <Nodes>
                    <telerik:OrgChartNode>
                        <GroupItems>
                            <telerik:OrgChartGroupItem Text="text description">
                            </telerik:OrgChartGroupItem>
                            <telerik:OrgChartGroupItem Text="text description">
                            </telerik:OrgChartGroupItem>
                        </GroupItems>
                        <Nodes>
                            <telerik:OrgChartNode>
                                <GroupItems>
                                    <telerik:OrgChartGroupItem Text="text description">
                                    </telerik:OrgChartGroupItem>
                                </GroupItems>
                            </telerik:OrgChartNode>
                            <telerik:OrgChartNode>
                                <GroupItems>
                                    <telerik:OrgChartGroupItem Text="text description">
                                    </telerik:OrgChartGroupItem>
                                </GroupItems>
                            </telerik:OrgChartNode>
                        </Nodes>
                    </telerik:OrgChartNode>
                </Nodes>
            </telerik:RadOrgChart>
        </div>
        </form>
    </body>

    Regarding your second question, there is no limitation for the number of nodes and levels.


    All the best,
    Peter Filipov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 20 Dec 2011 Link to this post

    Hello Dave,

    With my previous post I meant that RadOrgChart control supports only one type of rendering.
    In addition I can suggest to use templates. Please consult with the following help article and demo.
    Note that Container.DataItem is giving you a reference to the row of the data to which the item is bound. E.g. :
    <telerik:RadOrgChart runat="server" ID="RadOrgChart2" >
    <ItemTemplate>
        <span><%#DataBinder.Eval(Container.DataItem , "SomeTextField") %></span>
    </ItemTemplate>
    </telerik:RadOrgChart>


    Regards,
    Peter Filipov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top