I have a large dataset of employees.

I want to load one node initially and all other node collapsed and load other node on demand.

But this control is loading complete data on page load which is making it slow.

is there any way to rebind the org chart on expand and bind all child nodes?

I would like to add a hyper link to the node of an Org Chart, and I tried to add like:

<telerik:RadOrgChart>
<ItemTemplate>
<div class="abc">
<a herf="abc.abc">test link</a>

My page logic is that I click on an 'Apply' button, then in the Apply_Click method, I do some data binding, such as: Grid1.Datasource = xxx; Grid1.DataBind(); . And the grid can show properly on the page. But when I click on other buttons on this page (for example: click the filter on the grid) to trigger a post back, the content on the grid just disappears (The datasource is stored in a session, so it's not datasource's problem). I need to add databind() to Page_Load() to prevent this from happening. But this is very weird and feels not right. Can you help me locate the real problem?

The same issue is happening bothe in Grid and OrgChart.

I read this , but when I copied the code into my own project and followed the documentation, this just didn't work. The node size and the group size are weird.  No matter how I tried to edit the css settings, the height of the node just wouldn't change. Can anybody help me?

And btw I also want to ask, what do  .rocItem and .rocItemContent mean? When I use my browser's inspect function, I also see a .rocItemTemplate, what is that?

So I have a organization chart and a button. When I click on the button, I will fill in a DataTable stored in ViewState to be the data source of the org chart. Since I'm still having the problem in another post that nobody replied yet: Databinding keeps disappearing when post back in UI for ASP.NET AJAX | Telerik Forums  So I add some handling in Page_Load to avoid the org chart from becoming blank.

My Page logic is as follows:

<Telerik:RadButton ID="btn1" OnClick="btn_click">
...
<Telerik:RadOrgChart ID="OrgChart1">

protected DataTable table1 
{
            get
            {
                if (ViewState["table1"] != null)
                    return (DataTable)ViewState["table1"];
                else
                    return  null;
            }
            set
            {
                ViewState["table1"] = value;
            }
}
protected DataTable table2
{
            get
            {
                if (ViewState["table2"] != null)
                    return (DataTable)ViewState["table2"];
                else  return  null;
            }
            set
            {
                ViewState["table2"] = value;
            }
}


protected void Page_Load(object sender, EventArgs e) 
{
       if (!PostBack) // do something
       if (table1 != null && table2!=null) {
                OrgChart1.GroupEnabledBinding.NodeBindingSettings.DataFieldID = "aaa";
                OrgChart1.GroupEnabledBinding.NodeBindingSettings.DataFieldParentID = "bbb";
                OrgChart1.GroupEnabledBinding.NodeBindingSettings.DataCollapsedField = "ccc";
                OrgChart1.RenderedFields.NodeFields.Add(new OrgChartRenderedField() { DataField = "A" });
                OrgChart1.GroupEnabledBinding.NodeBindingSettings.DataSource = table1;

                OrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataFieldNodeID = "aaa";
                OrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataFieldID = "ddd";
                OrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataSource = table2;

                OrgChart1.DataBind();
       }
}


protected void btn_click(object sender, EventArgs e) {

               // do something to provide data for table1 and table2

                OrgChart1.GroupEnabledBinding.NodeBindingSettings.DataFieldID = "aaa";
                OrgChart1.GroupEnabledBinding.NodeBindingSettings.DataFieldParentID = "bbb";
                OrgChart1.GroupEnabledBinding.NodeBindingSettings.DataCollapsedField = "ccc";
                OrgChart1.RenderedFields.NodeFields.Add(new OrgChartRenderedField() { DataField = "A" });
                OrgChart1.GroupEnabledBinding.NodeBindingSettings.DataSource = table1;

                OrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataFieldNodeID = "aaa";
                OrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataFieldID = "ddd";
                OrgChart1.GroupEnabledBinding.GroupItemBindingSettings.DataSource = table2;

                OrgChart1.DataBind();

}

    

       

And then, when the page is post back, suddenly there are duplicate group names in the org chart as you can see in the screenshot.

Can somebody help me?

Is there any way to sort nodes based on hierarchyid?

currently default sorting based on alphabetical order.

Thanks in advance

Hi Telerik Team,

I'm having an issue with the drill down functionality, I'm binding the data source to the org chart control on Page Load Event and I have a drill down handler when the user click on the drill down icon.

The data tables I'm using to bind the org chart are:

1). OrgChartStructure (Which will be defined the levels of the organization chart)

Id | ParentID|Title

1    NULL     CEO (PK)

2     1            President

3     2            VP Sales

2). Org Chart

Id| NodeID| FirstName|LastName| Title|ImgPath

1    1             John        Doe            CEO

2     2            Jane        Doe            President

3     2            James     Doe            VP Sales

My Code:

<div class="demo-container no-bg">
    <div class="search">
        <telerik:RadSearchBox RenderMode="Lightweight" runat="server"  ID="RadSearchBox1" DataTextField="FullName" DataValueField="NodeID" EnableAutoComplete="true"
            OnClientSearch="onClientSearch" Skin="Silk">
        </telerik:RadSearchBox>
        <div class="rocBreadCrumb"></div>
    </div>
    <telerik:RadOrgChart ID="rocOrgChart"
        runat="server"
        RenderMode="Lightweight"
        EnableCollapsing="true"
        EnableDrillDown="true"
        EnableGroupCollapsing="true"
        Skin="Silk"
        DataFieldID="ID" DataFieldParentID="ParentID"
        DataTextField="FullName" DataImageUrlField="ImgPath">
    </telerik:RadOrgChart>
</div>

BackCode:

 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        If Not Page.IsPostBack Then
            GenerateOrgChart()
        End If
    End Sub

 Public Sub GenerateOrgChart()
        Try
            Dim ds_orgStructure As DataSet = sqhBI20.ReturnDataSetFromSproc("spGetOrgChartStructure")
            Dim dt_orgStucture As DataTable = ds_orgStructure.Tables(0)
            If Not dt_orgStucture Is Nothing Then
                rocOrgChart.GroupEnabledBinding.NodeBindingSettings.DataFieldID = "ID"
                rocOrgChart.GroupEnabledBinding.NodeBindingSettings.DataFieldParentID = "ParentID"
                rocOrgChart.GroupEnabledBinding.NodeBindingSettings.DataSource = ds_orgStructure
            End If


            Dim ds_OrgChart As DataSet = sqhBI20.ReturnDataSetFromSproc("SpGetOrgChart")
            Dim dt_OrgChart As DataTable = ds_OrgChart.Tables(0)
            If Not dt_OrgChart Is Nothing Then
                rocOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataFieldID = "ID"
                rocOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataFieldNodeID = "NodeID"
                rocOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataTextField = "FullName"
                rocOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataImageUrlField = "ImgPath"
                rocOrgChart.RenderedFields.ItemFields.Add(New Telerik.Web.UI.OrgChartRenderedField() With {.DataField = "NodeID"})
                rocOrgChart.GroupEnabledBinding.GroupItemBindingSettings.DataSource = ds_OrgChart
            End If
            rocOrgChart.DataBind()

            RadSearchBox1.Text = ""
            RadSearchBox1.DataSource = ds_OrgChart
            RadSearchBox1.DataBind()

        Catch ex As Exception
            Throw New Exception(ex.ToString())
        End Try
    End Sub

Public Sub rocOrgChart_DrillDown(sender As Object, e As Telerik.Web.UI.OrgChartDrillDownEventArguments) Handles rocOrgChart.DrillDown
    
        Dim item = New OrgChartGroupItem() With {.DataItem = "NodeID"}
        e.SourceNode.Renderer.Controls.Remove(e.SourceNode.Nodes.Renderer)
        e.SourceNode.GroupItems.Clear()
        e.SourceNode.Nodes.Clear()
        e.SourceNode.GroupItems.Add(item)

    End Sub