[CLOSED] Reload treepanel dynamically

  1. #1

    [CLOSED] Reload treepanel dynamically

    Hi
    I have following problem: based on some filter from user i have to reload the whole treegrid for the simplicity let's take a treepanel. the filter is only applied on the children of root.
    My solution: the filter criteria is submitted as extraparameters of the (page)loader. The NodeLoad method loads the children nodes based on the filter submitted.

    Following is a simplified example based on https://examples1.ext.net/#/TreePane...ageTreeLoader/.
    In this example i am showing the problem I have, namely changing the loader's baseparameter will not be reflected in the nodeLoad method. This example is supposed to load the tree each time when the refresh button is clicked, and clicking this button will change the BaseParameter and then loads Root node again. but this modified Baseparameter is not transmitted to the nodeload(). how can I achieve such functionality?

    Thanks.
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>TreePanel with Async TreeLoader using Page - Ext.NET Examples</title>
        
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <script runat="server">
            protected void NodeLoad(object sender, NodeLoadEventArgs e)
            {
                //string prefix = e.ExtraParams["prefix"] ?? "";
                string prefix = TreePanel1.Loader[0].BaseParams[0].Value ?? "";
    
                if (!string.IsNullOrEmpty(e.NodeID))
                {
                    for (int i = 1; i < 6; i++)
                    {
                        AsyncTreeNode asyncNode = new AsyncTreeNode();
                        asyncNode.Text = prefix + e.NodeID + i;
                        asyncNode.NodeID = e.NodeID + i;
                        e.Nodes.Add(asyncNode);
                    }
    
                    for (int i = 6; i < 11; i++)
                    {
                        Ext.Net.TreeNode treeNode = new Ext.Net.TreeNode();
                        treeNode.Text = prefix + e.NodeID + i;
                        treeNode.NodeID = e.NodeID + i;
                        treeNode.Leaf = true;
                        e.Nodes.Add(treeNode);
                    }
                }
            }
            
            protected void Refresh_Clicked(object sender, DirectEventArgs args)
            {
                TreePanel1.Loader[0].BaseParams[0].Value = DateTime.Now.ToLongTimeString();
                TreePanel1.ReloadAsyncNode("root_id", null);
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>TreePanel using PageTreeLoader</h1> 
            
            <p>Set custom node prefix: </p>
            <ext:Button ID="Button_Refresh" runat="server" Text="Refresh">
                <DirectEvents>
                    <Click OnEvent="Refresh_Clicked"></Click>
                </DirectEvents>
            </ext:Button>
            
            <ext:TreePanel 
                ID="TreePanel1" 
                runat="server" 
                Title="Tree" 
                AutoHeight="true" 
                Border="false">
                <Loader>
                    <ext:PageTreeLoader OnNodeLoad="NodeLoad">
                        <BaseParams>
                            <ext:Parameter Name="prefix" Value="1" Mode="Value" />
                        </BaseParams>
                    </ext:PageTreeLoader>
                </Loader>
                <Root>
                    <ext:AsyncTreeNode NodeID="root_id" Text="Root" />
                </Root>
            </ext:TreePanel>       
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 27, 2012 at 3:28 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Yes, changing BaseParams during a DirectEvent doesn't affect.

    I can suggest the following solution.

    1. The DirectEvent handler:

    C#
    protected void Refresh_Clicked(object sender, DirectEventArgs args)
    {
        X.Js.Call("reload", new JRawValue(this.TreePanel1.ClientID), DateTime.Now.Second.ToString());
    }
    2. The reload function:

    JavaScript
    <script type="text/javascript">
        var reload = function (tree, prefix) {
            var loader = tree.loader;
    
            loader.on(
                "beforeload", 
                function (loader) {
                    if (!loader.baseParams) {
                        loader.baseParams = {};
                    };
    
                    Ext.apply(loader.baseParams, {
                        prefix : prefix
                    });
                },
                null,
                {
                    single : true
                });
    
            tree.getRootNode().reload();
        };
    </script>
    3. Uncomment:
    //string prefix = e.ExtraParams["prefix"] ?? "";
    and remove
    string prefix = TreePanel1.Loader[0].BaseParams[0].Value ?? "";
  3. #3
    well thanks Daniil for the solution. this work fine for this simplified example but it is not a solution or(not the best) for my real problem, which is to filter a treegrid.

    The problem is there are many filter criteria, almost one for each column of the treegrid. So do you think there is a better way to handle this problem without considering these baseparameters? Any hints will be appreciated.

    thank you.
  4. #4
    How does look these filter criteria?

    Do you really need to force reloading from server side? I guess no and you can send the filter parameters easier.

    Generally, I would suggest you to set up your BeforeLoad listener instead of BaseParams.

    Example
    <script type="text/javascript">
        var onBeforeLoad = function (loader, node) {
            if (!loader.baseParams) {
                loader.baseParams = {};
            };
    
            Ext.apply(loader.baseParams, yourFilterParams);
        };
    </script>
    
    <ext:PageTreeLoader OnNodeLoad="NodeLoad">
        <Listeners>
            <BeforeLoad Fn="onBeforeLoad" />
        </Listeners>
    </ext:PageTreeLoader>
    Also I would prefer an HTTP handler or Web Service.
    https://examples1.ext.net/#/TreePane...Using_Handler/
    https://examples1.ext.net/#/TreePane...iceTreeLoader/

    A common page life-cycle is executed during DirectEvent. You would avoid it with an HTTP handler or Web Service and get better performance.
  5. #5

    [CLOSED]

    well yes I need to force reload from sever, as in the beginning when page is loaded there is a default filte. later user can change it.
    the filter has different fields, datefields, list of users, list of prioritytype,....
    I solved it by parsing the filter object from the the GUI each time the node is loaded, this is not a performance problem because this filter is only applies if the loading node is root node.

    Thanks for the hints.

Similar Threads

  1. [CLOSED] Reload store created dynamically
    By stoque in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 18, 2011, 5:07 PM
  2. TreePanel.Reload
    By ankit in forum 1.x Help
    Replies: 0
    Last Post: Jun 11, 2010, 7:05 AM
  3. [CLOSED] [1.0] Reload treepanel
    By juane66 in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Mar 29, 2010, 6:22 PM
  4. Reload TreePanel
    By Maia in forum 1.x Help
    Replies: 1
    Last Post: Jan 07, 2010, 4:39 AM
  5. Retrieve treepanel's root after reload
    By whitvanilla in forum 1.x Help
    Replies: 0
    Last Post: Jun 04, 2009, 9:28 AM

Tags for this Thread

Posting Permissions