TreeView find in lazyload

Feb 1, 2009 at 4:59 PM
I need to add clientside search to treeview in lazyload mode, and navigate to selected node and focus on it.i tested the demo and i couldnt call ajax function.with timeout .

how can i wait for node to load dynamically andexpand it  after that ?
is it possible to do this with ajax?
would you please give me a sample if it is possible?
Coordinator
Feb 1, 2009 at 6:10 PM
Hi pabbasian, and thanks for using YUIAsp.Net Controls.

As you probably know, the YUIAsp.Net TreeView control is based on YUI's TreeView. I implemented most common usages in my version of the control, but you can do LOTS more with the original YUI control.

About your problem, I'm pretty sure YUI exposes an "after data recieved" event, where you can manipulate the newly created child nodes as you'd like.

I will have a look in the next days at this, and post a new example page on how to do that in YUIAsp.Net Demo project.

Thanks,
Raul
Feb 2, 2009 at 9:24 AM
Hi Raul,
Thanks for your response :)

anything that can show me how to expand a node with javascript or use LoadNodes in Demo(i cant dynamically use it) and populate its child and access them after that they are loaded,would be use useful .i can expand the node but i dont how to wait for it and load others.

Stay tuned,
payman
Coordinator
Feb 2, 2009 at 10:53 AM
Below you'll find some code which hopefully does what you need. If the page is displayed ugly, send me an email [dev at yuiasp.net] and I'll email you the  aspx page.
Raul



<%@ Page Title="" Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="LazyTreeView.aspx.cs" Inherits="YUIAspNetDemo.TreeView.LazyTreeView" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : TreeView : Lazy loading</title>
    <script type="text/javascript">
        var loadCallback = false;
    
        function LoadNodes(tree, node) {
            YUIAspNetDemo.TreeView.NodeSource.set_defaultSucceededCallback(function(result, userContext) {
                tree._appendChilds(node, result);
                node.loadComplete();
                
                if(loadCallback && typeof(loadCallback) == "function")
                {
                    loadCallback(tree, node);
                    loadCallback = null;
                }
            });

            YUIAspNetDemo.TreeView.NodeSource.set_defaultFailedCallback(function(result, userContext) {
                node.loadComplete();
                alert("failed to get childs from node: " + userContext.value); 
            });

            YUIAspNetDemo.TreeView.NodeSource.GetChildNodes(node.data, null, null, node.data);
        }
        
        //expand node automatically...
        function Expand(sender, args)
        {
            var tree = $find('<%= this.lazyTree.ClientID %>');
            var nodeToExpand = tree.get_YUIControl().getNodeByProperty("value", "n1");
            
            loadCallback = CustomFunctionAfterLoad;
            
            nodeToExpand.expand();
            
            //LoadNodes(tree, nodeToExpand);
            args.cancel = true;
        }
        
        function CustomFunctionAfterLoad(tree, node)
        {
            alert(node.children[0].label);
        }
        
    </script>
    
    
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:ScriptManagerProxy ID="scriptProxy" runat="server">
    <Services>
        <asp:ServiceReference Path="~/TreeView/NodeSource.asmx" />
    </Services>
</asp:ScriptManagerProxy>

<h4>Lazy TreeView</h4>
<p>In this demo, a javascript callback is defined in order to get the child nodes from the server, by making a call to a ASP.NET web service. The callback takes 2 arguments: the instance of the TreeView and the Node that is expanded. The node is a YUI node instance!</p>
    <p>
        <yui:TreeView ID="lazyTree" OnClientNodePopulate="LoadNodes" LazyLoad="true" runat="server">
            <Nodes>
                <yui:TreeNode Text="node 1" Value="n1"></yui:TreeNode>
                <yui:TreeNode Text="node 2" IsLeaf="true" Value="n2"></yui:TreeNode>
            </Nodes>
        </yui:TreeView>
    </p>
    
    <p><yui:Button ID="btn" runat="server" Text="Expand Node 1" OnClientClick="Expand"></yui:Button></p>
</asp:Content>

Feb 3, 2009 at 11:57 AM
Thanks buddy, it will definitely do the job done.
it's GR8