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

4 posts, 0 answers
  1. Ramraj
    Ramraj avatar
    15 posts
    Member since:
    Jun 2010

    Posted 06 Feb 2014 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Feb 2014 in reply to Ramraj Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ramraj
    Ramraj avatar
    15 posts
    Member since:
    Jun 2010

    Posted 06 Feb 2014 in reply to Princy Link to this post

    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Feb 2014 in reply to Ramraj Link to this post

    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.
Back to Top