Best Way to add dynamic Navigation to a DataBound Treeview

[David]

I have a simple TreeView

    <telerik:RadTreeView ID="radTreeViewIndex" runat="server">
                    </telerik:RadTreeView>

That I am databinding on the page load.

My query returns heirarchical records such as the following

SPOP   TheKey     SYear     Norder

Null        A             Adult          4000
Null        P             Pediatric    3000
A            A2022     2022          2500
A            A2021      2021         2500
A           A2020      2020        2500
P            P2022     2022          2000
P            P2021      2021         2000
P           P2020      2020        2000

On the page load, I call the Oracle query, get back a cursor and construct the treeview by binding a data table to it

        DataTable dt1 =
            new DataTable();
        da1.Fill(dt1);
        RadTreeView radTreeViewIndex = (RadTreeView)FindControl("radTreeViewIndex");
        radTreeViewIndex.NodeDataBound += new RadTreeViewEventHandler(radTVI_click);
        radTreeViewIndex.DataFieldParentID = "SPOP";
        radTreeViewIndex.DataFieldID = "theKey";
        radTreeViewIndex.DataTextField = "sYear";
        radTreeViewIndex.DataValueField = "sYear";

        radTreeViewIndex.DataSource = dt1;
        radTreeViewIndex.DataBind();

The tree expanded would look like

> Adult

      - 2022 

     -  2021

     -  2020

> Pediatric

      - 2022 

     -  2021

     -  2020

The databinding and expanding/collapsing is working fine

That I am trying to now do and figure out how best to do is to navigate and load a grid based upon the click of a year

So clicking on Adult or Pediatric Nodes would only expand or collapse the tree
Clicking on the Year node would then call an event that would pass in the population and the year and then load that grid (to the right of the tree)  So for clicking on (Adult > 2021 ) node - was thinking navigating back to the page witth these values set, the tree expanded to show the selected node and the grid populated to display the records for population = adult and year = 2021

I was thinking I would add the event to the NodeDataBound

    protected void radTVI_click(object sender, RadTreeNodeEventArgs e)
    {
        if (string.IsNullOrEmpty(e.Node.NavigateUrl))
            e.Node.Attributes["onclick"] = "return Redirect(https://myjunkurl.com);";

    }

And then work with it to basically ignore or only have expand or collapse on the clicks of Adult or Pediatric but otherwise generate the URL to call the page and pass in the SPop and Year to then load the tree and grid.

[Rumen]

Hi David,

To achieve different behaviors for parent nodes (expand/collapse only) and child nodes (navigate and load a grid), the recommended approach is to use the OnClientNodeClicking client-side event to control the behavior based on whether the node has children.

Solution:

1. Add the client-side handler to your RadTreeView:

<telerik:RadTreeView ID="radTreeViewIndex" runat="server"
    OnNodeClick="radTreeViewIndex_NodeClick"
    OnNodeDataBound="radTreeViewIndex_NodeDataBound"
    OnClientNodeClicking="onNodeClicking">
</telerik:RadTreeView>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function onNodeClicking(sender, args) {
            var node = args.get_node();
            var hasChildren = node.get_nodes().get_count() > 0;
            
            if (hasChildren) {
                // Parent node: toggle expand/collapse, cancel postback
                args.set_cancel(true);
                node.toggle();
            }
            // Child nodes: allow postback to proceed (handled server-side)
        }
    </script>
</telerik:RadScriptBlock>

2. Configure nodes in NodeDataBound(server-side):

protected void radTreeViewIndex_NodeDataBound(object sender, RadTreeNodeEventArgs e)
{
    DataRowView dataRow = e.Node.DataItem as DataRowView;
    if (dataRow != null)
    {
        string parentId = dataRow["SPOP"] as string;
        bool isParentNode = string.IsNullOrEmpty(parentId);

        if (isParentNode)
        {
            // Parent nodes: expand/collapse handled client-side
            e.Node.ExpandMode = TreeNodeExpandMode.ClientSide;
        }
        else
        {
            // Child nodes: store data for server-side click handler
            e.Node.Attributes["Population"] = parentId;
            e.Node.Attributes["Year"] = dataRow["SYear"].ToString();
        }
    }
}

3. Handle child node clicks (Node Click server event) to load the grid:

protected void radTreeViewIndex_NodeClick(object sender, RadTreeNodeEventArgs e)
{
    string population = e.Node.Attributes["Population"];
    string year = e.Node.Attributes["Year"];

    if (!string.IsNullOrEmpty(population) && !string.IsNullOrEmpty(year))
    {
        // Store selection and rebind grid
        SelectedPopulation = population;
        SelectedYear = year;
        RadGrid1.Visible = true;
        RadGrid1.Rebind();
    }
}

• The onNodeClicking client-side function fires before any postback
• It checks if the clicked node has children using node.get_nodes().get_count() > 0
• Parent nodes (Adult/Pediatric): Cancels the postback via args.set_cancel(true) and toggles expand/collapse using node.toggle()
• Child nodes (Years): Allows the postback to proceed, triggering the server-side NodeClick event to load the grid

 

I've attached a complete working example (TreeViewWithGrid.aspx and TreeViewWithGrid.aspx.cs) demonstrating this approach.

Please let me know if you have any questions.

Regards,
Rumen
Progress Telerik