Unable to Child Nodes of a Node in JavaScript for Tree view with Load on Demand.

[Ramraj]

Hi,

I have requirement where I have to build a tree view which has skills in it and they are categorized under different domains.
As the data tree has almost 8 levels of drilldown we went with Load on demand mode as the page will be responsive and lite.
But make it easier for the users we are providing them search option where they type in the skill and ajax suggestion come in showing the skills available with the name under different parent nodes.
But to make it even easier we are providing suggestions with radio buttons when user select them they tree will be expanded to that particular skill.

I'm using the following function to expand the tree 
        function findNodes(node, searchString) {
            var nodesarray = new Array();
            nodesarray = searchString.split(".");
            for (var i = nodesarray.length - 1; i >= 0; i--) {
                if ((node.get_value() == nodesarray[i]) && i!=0) {
                    node.set_expanded(true);
                    node.set_visible(true);
                    for (var j = 0; j < node.get_nodes().get_count(); j++) {
                        findNodes(node.get_nodes().getNode(j), searchString);
                    }
                } else if ((node.get_value() == nodesarray[i]) && i == 0) {
                node.set_checked(true);
                }

            }
This function works fine with tree view which is already preloaded but doesn't work with load on demand tree.
It fails at 

   for (var j = 0; j < node.get_nodes().get_count(); j++) {
                        findNodes(node.get_nodes().getNode(j), searchString);
                    }
to be specific node.get_nodes().getNode(j),
It can expand the first level but not able to get nodes after that ...
Any suggestions or workarounds ?

Regards,
Mohan

[Princy]

Hi Ramraj,

I guess you want to expand the RadTreeView node by selecting items from the RadioButton list. You can do this from server side as follows.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTreeView1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
    <asp:ListItem Text="Products" Value="1">
    </asp:ListItem>
    <asp:ListItem Text="Sports" Value="4">
    </asp:ListItem>
    <asp:ListItem Text="Events" Value="7">
    </asp:ListItem>
</asp:RadioButtonList>
<telerik:RadTreeView ID="RadTreeView1" runat="server" Width="100%">
</telerik:RadTreeView>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        LoadRootNodes(RadTreeView1, TreeNodeExpandMode.ServerSideCallBack);
    }
}
private static void LoadRootNodes(RadTreeView treeView, TreeNodeExpandMode expandMode)
{
    DataTable data = GetData(new SqlCommand("SELECT * FROM Details WHERE parentid IS NULL"));
    foreach (DataRow row in data.Rows)
    {
        RadTreeNode node = new RadTreeNode();
        node.Text = row["text"].ToString();
        node.Value = row["id"].ToString();
        node.ExpandMode = expandMode;
        treeView.Nodes.Add(node);
    }
}
protected  void PopulateNodeOnDemand(String e, TreeNodeExpandMode expandMode)
{
    DataTable data = GetChildNodes(e);
    RadTreeNode node1 = (RadTreeNode)RadTreeView1.FindNodeByValue(RadioButtonList1.SelectedItem.Value);
    foreach (DataRow row in data.Rows)
    {
        RadTreeNode node = new RadTreeNode();
        node.Text = row["text"].ToString();
        node.Value = row["id"].ToString();
        node1.Nodes.Add(node);
        }
    node1.Expanded = true;
}
private static DataTable GetChildNodes(string parentId)
{
    SqlCommand selectCommand = new SqlCommand("select id,text from Details where parentid=@parentId");
    selectCommand.Parameters.AddWithValue("parentId", parentId);
    return GetData(selectCommand);
}
private static DataTable GetData(SqlCommand selectCommand)
{
    selectCommand.Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["Northwind_newConnectionString"].ConnectionString);
    SqlDataAdapter adapter = new SqlDataAdapter(selectCommand);
    DataTable data = new DataTable();
    adapter.Fill(data);
    return data;
}
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
    PopulateNodeOnDemand(RadioButtonList1.SelectedItem.Value, TreeNodeExpandMode.ServerSideCallBack);
}

Thanks,
Princy.

[Ramraj]

HI Princy,
Thanks for the reply but my issue is not with the search my issue is that I'm not able to get nodes of selected node of treeview
Regards,
Ramraj.

[Princy]

Hi Ramraj,

Please have a look into the following code snippet to get the nodes of a selected node.

JavaScript:

<script type="text/javascript">
    function GetNode() {
        var tree = $find("<%=RadTreeView1.ClientID %>");
        for (var i = 0; i < tree.get_selectedNode().get_nodes().get_count(); i++) {
            alert(tree.get_selectedNode().get_nodes()._array[i].get_text());
        }
    }
</script>

Thanks,
Princy.