RadOrgChart Performance, Grouping and Search

[Teja]

We are doing a POC project using Telerik RadOrgChart following are the issues we are facing please advise.

1. with 5k records (single hierarchy) we loaded RadOrgchart it took around 15 to 20 mins to load the chart. 

Example : CEO -> 5k employess directly reporting him. CEO is the parent node and 5k employess are under him in single line. It is just an example and we  have multi tier reporting as well. I have used loadondemand feature also but it didn't help.

2. Is there any way we can group 5k employees to avoid horizontal scroll. You can imagine how long scroll would have expand. We don't have ColumnGroupCount to play around.

3. Without calling server code, can telerik manage to  search the data in loaded view ? I know we can manage this using script techniques. It would be great to know if telerik has in-builtin feature like this.

[Teja]

Telerik Team... Can you please advise on my above questions? Your response will help us in progress with our POC project on Telerik RadOrgchart.

[Peter Milchev]

Hello Hariteja,

The Load on Demand works for loading the direct children of a node, not a portion of the direct children. That is why the Load On Demand does not have any effect when all 5K nodes are direct children of the Root node. 

Also, would you please share a sample business case where 5000 Employees are directly related to the same Manager as this sounds quite uncommon.

If your use case is similar, having ~5k direct children, then you can add them to a group, where you can set the ColumnCount. Keep in mind that the nodes in a group cannot have child nodes and any child nodes will be directly related to the group, not a specific node in the group.

On the performance of the OrgChart, the best performance can be obtained via WebService binding:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/orgchart/data-binding/web-service-binding

Regarding the positioning and scrolling, using a RadDiagram can be a replacement in some scenarios:

• https://demos.telerik.com/aspnet-ajax/diagram/examples/layouts/defaultcs.aspx;
• https://demos.telerik.com/aspnet-ajax/diagram/examples/customizingelements/defaultcs.aspx

The OrgChart has a client-side object and below you can find its available methods:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/orgchart/client-side-programming/radorgchart-object

Unfortunately, the client-side search is not one of them and it would require custom JavaScript logic.

On the non-technical part, keep in mind that the Telerik forums are a public and community-driven resource, meaning we cannot guarantee we would be able to address all forum threads.

Usually, for such technical questions addressed to us, you can open official support thread where you will receive a guaranteed answer within the support package plan response time:

• https://www.telerik.com/purchase/support-plans
• https://www.telerik.com/blogs/how-to-submit-a-support-ticket

If you don't have a license but your company does, please share the following article with them so that they can assign you as a developer and allow you to open official support threads.

• How do I assign developers and managers to the purchased licenses? section here:
  https://www.telerik.com/purchase/faq/licensing-purchasing

Regards,
Peter Milchev
Progress Telerik

[Teja]

Thanks Peter for the response. I took a general example of Employees under a manager to explain the issue but in our case we have a real time use case where we have to display up to 10K nodes under a parent node. Again, not necessarily all use-cases are same, i.e sometimes we will have multi tiers and individual nodes will be scattered under sub main nodes. I have attached basic code that i have used for this test.

I had gone through above web service article and i think it will not boost the performance for the use case i had mentioned as radorgchart data binding is taking actual time that i had mentioned above.

Please advise if there is a better way to achieve the output in less time. 

[Peter Milchev]

Hello Teja,

The WebService binding will allow the page to be loaded while the nodes are being taken from the web service and rendered on the page. 

Unfortunately, the RadOrgChart does not support partial loading of the direct children, so there is not much that would improve this performance.

Regarding the horizontal width, a custom JavaScript might be possible that would hide/show some items, something like a custom virtual scrolling.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>

<script>
    function showItems(index, count, parentUL) {
        var lis = parentUL.find(">li")
        lis.hide();
        for (var i = index; i < index + count; i++) {
            lis.eq(i).show()
        }
    }
</script>
<telerik:RadButton runat="server" ID="RadButton1" Text="Previous" AutoPostBack="false" OnClientClicked="ShowPrevPortion" />
<telerik:RadButton runat="server" ID="RadButton2" Text="Next" AutoPostBack="false" OnClientClicked="ShowNextPortion" />
<script>
    var index = 0,
        count = 5;

    function ShowNextPortion(sender, args) {
        var orgChart = $find("<%= RadOrgChart2.ClientID %>");
        var nodesCount = orgChart.get_nodes().getNode(0).get_nodes().get_count();
        var parentUL = $telerik.$(orgChart.get_nodes().getNode(0).get_nodeListElement());
        index += count;
        index = Math.min(nodesCount - count, index);
        if (index < 0) {
            index = 0;
        }
        showItems(index, count, parentUL);
    }
    function ShowPrevPortion(sender, args) {
        var orgChart = $find("<%= RadOrgChart2.ClientID %>");
        var nodesCount = orgChart.get_nodes().getNode(0).get_nodes().get_count();
        var parentUL = $telerik.$(orgChart.get_nodes().getNode(0).get_nodeListElement());
        index -= count;
        index = Math.min(nodesCount - count, index);
        if (index < 0) {
            index = 0;
        }
        showItems(index, count, parentUL);
    }
    function pageLoadHandler() {
        var orgChart = $find("<%= RadOrgChart2.ClientID %>");
        var parentUL = $telerik.$(orgChart.get_nodes().getNode(0).get_nodeListElement());
        showItems(index, count, parentUL);
        // Sys.Application.remove_load(pageLoadHandler);  
    }
    Sys.Application.add_load(pageLoadHandler);
</script>
<telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart2">
</telerik:RadOrgChart>

internal class SiteDataItem
{
    private string _text;
    private int _id;
    private int _parentId;

    public string Text
    {
        get { return _text; }
        set { _text = value; }
    }


    public int ID
    {
        get { return _id; }
        set { _id = value; }
    }

    public int ParentID
    {
        get { return _parentId; }
        set { _parentId = value; }
    }

    public SiteDataItem(int id, int parentId, string text)
    {
        _id = id;
        _parentId = parentId;
        _text = text;
    }
}

private static void BindToIEnumerable(RadOrgChart orgChart)
{
    List<SiteDataItem> siteData = new List<SiteDataItem>();

    siteData.Add(new SiteDataItem(1, 0, "Animals"));
    var id = 2;
    for (int i = 2; i < 40; i++, id++)
    {
        siteData.Add(new SiteDataItem(id, 1, "American lion" + (i - 1)));
    }

    var childNodes = new List<SiteDataItem>();
    foreach (var item in siteData)
    {
        childNodes.Add(new SiteDataItem(++id, item.ID, "American child lion" + (id - 1)));
        childNodes.Add(new SiteDataItem(++id, item.ID, "American child lion" + (id - 1)));
    }

    siteData.AddRange(childNodes);

    orgChart.DataTextField = "Text";
    orgChart.DataFieldID = "ID";
    orgChart.DataFieldParentID = "ParentID";
    orgChart.DataSource = siteData;
    orgChart.DataBind();
}

protected void Page_Load(object sender, EventArgs e)
{
    BindToIEnumerable(RadOrgChart2);
}

 

Another option is, as I mentioned previously, using the RadDiagram control, where you have more control on the creation of the nodes. 

Regards,
Peter Milchev
Progress Telerik