Question

How can I bind data to YUI Treeview control http://developer.yahoo.com/yui/examples/treeview/default_tree.html

here is sample JavaScript code that have been used in the above URL

<div id="treeDiv1">
</div>

<script type="text/javascript">
    var tree;
    (function() {
        function treeInit() {
            buildRandomTextNodeTree();
        }
        function buildRandomTextNodeTree() {
            tree = new YAHOO.widget.TreeView("treeDiv1");
            for (var i = 0; i < 5; i++) {
                var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
                buildLargeBranch(tmpNode);
            }
            tree.draw();
        }
        function buildLargeBranch(node) {
            if (node.depth < 8) {
                YAHOO.log("buildRandomTextBranch: " + node.index, "info", "example");
                for (var i = 0; i < 8; i++) {
                    new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
                }
            }
        }

        YAHOO.util.Event.onDOMReady(treeInit);
    })();

</script>

The problem is, YUI treeview control is binded in javascript, but I want to bind in C# code, because I need to get data from Database, here is how I am binding data to asp.net treeview control

if (dsSalesRepresent.Tables[0].Rows.Count > 0)
    {
        dsSalesRepresent.Relations.Add("Children", dsSalesRepresent.Tables[0].Columns["NodeId"], dsSalesRepresent.Tables[0].Columns["ParentId"]);

        trvSalesRepresent.Nodes.Clear();

        foreach (DataRow masterRow in dsSalesRepresent.Tables[0].Rows)
        {
            if (masterRow["ParentId"].ToString() == "")
            {
                TreeNode masterNode = new TreeNode((String)masterRow["JobTitle"], Convert.ToString(masterRow["NodeId"]));
                trvSalesRepresent.Nodes.Add(masterNode);

                TreeNode FirstchildNode = new TreeNode((String)masterRow["UserName"], Convert.ToString(masterRow["ParentId"]));
                masterNode.ChildNodes.Add(FirstchildNode);

                foreach (DataRow childRow in masterRow.GetChildRows("Children"))
                {
                    TreeNode childNode = new TreeNode((String)childRow["UserName"], Convert.ToString(childRow["ParentId"]));
                    masterNode.ChildNodes.Add(childNode);
                }
            }
        }
        trvSalesRepresent.ExpandAll();
    }

Answer 1

All of my comments are assuming you mean WebForms and not MVC.

The YUI framework is purely client side. It is intended to be able to used with any website regardless of the server platform. The ASP.NET tree view is used only with ASP.Net and so doesn’t have that limitation. It is a server control and so it actually emits everything the client needs even though it looks like you are binding directly to it.

A couple of options, but there’s lots:

• Use an AJAX/JSON to call back to your website to get the data in JSON format which you can then handle client side.

Just the way that you’re asking this question makes me think that you aren’t that familiar with “real” AJAX, so that’s why I’ve got the next option:

• Emit the Java YUI code directly from your code behind. Javascript is just more text that the server sends to the client and you can dynamically emit it just like any other part of your client script. ScriptManager can help here as far as getting it to the right spot on the page, but you could theoretically do it with just a place holder or literal control. Alternately, you could put most of the code in the markup and use <% %> to replace the parts that need to come from the server side. Either way, you need to write all the code to render your tree, then figure out the “Replaceable” bits and supply them from the server side code. BUT make sure that none of the info coming back is data that was entered by an end user otherwise you could end up with a Cross Site Scripting vulnerability.