What's New?

Problem at refresh a TreePanel and load TreeNodes by demand

  1. #1
    Mar 22, 2010, 8:08 PM

    Problem at refresh a TreePanel and load TreeNodes by demand

    Hi,

    I am working with a TreePanel in which we are loading TreeNode objects.

    Here I am gonna to explain all we have at moment. First I have the following code in our Default.aspx page in which:

    - Currently I have a menu that load all pages available for a web client. The menu is added dynamically inside the Panel1 in Default.aspx page. The menu is constructed as follows:

    <West>
    <ext:Panel SkinID="lytLeftSideBar" ID="pnlLytLeftSideBar" runat="server">
        <Body>
            <ext:BorderLayout runat="server">
                <Center>
                    <ext:Panel ID="Panel1" Border="false" runat="server">
                          <%-- --%>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Body>
    </ext:Panel>
</West>
    Inside the Panel1 is added dinamically an Accordion Coolite control. In the accordion Items property we add TreePanel (the numbers of TreePanel controls added depends of the number of available options in the menu of the client. These options come from a database in an object of type List<Menu> where Menu is a class which have the name and an id for each option.

    Inside of each TreePanel we add TreeNodes which are the TreePanel?s children nodes.

    Each parentNode data (TreePanel) and children nodes data (TreeNode) are loaded by services and the data come from a database.

    Visually we obtain the following result: (see Picture1)

    The problem is when I add a new favorite node to the Treepanel, this is not updated and shows the new node added it doesn?t refresh and show the new node added as it should work.

    The example that Coolite propose is add a tool object to the panel which subscribes to a Refhesh method. This method should update the treePanel?..but in our code it doesn?t fire. (see Picture 2)

    The following code example attached with an explanation of what each method does.

    1.- There is a global TreePanel.

    TreePanel panel= new TreePanel();
    - In page load method we call LoadMenu which call to a service that bring the father nodes (TreePanels) that are going to load in the accordion control.
    - Within the LoadMenu method fills the menuList variable. This variable is of List<Menu> type, and contains a list of the data of each TreePanel.

    protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack &amp;&amp; !Ext.IsAjaxRequest)
    {
        accordion1.ID = "Accordion1";
        accordion1.SkinID = "lytLeftSideBar";
        this.Presenter.LoadMenu();
    }
}
    - Inside of the LoadMenu method and after we have the list of fathers to show, we call to ShowMenu. It receives a dataMenu List with the fathers to show.

    - We created a new instance of Accordion control and we call to BuildMenu. Inside of BuildMenu method we load the children nodes (TreeNode).

    [AjaxMethod]
public void ShowMenu(List<COBISCorp.eCOBIS.InternetBanking.Admin.DTO.Menu> dataMenu)
{
    menuList = dataMenu;
    accordion1 = new Accordion();

    if (menuList != null)
      {
          Coolite.Ext.Web.TreeNodeCollection listOfNodes = BuildMenu(panel.Root, dataMenu);
          Panel1.BodyControls.Add(accordion1);
      }
}
    - Inside of the BuidMenu method is the code with we create the TreePanel objects for each father node. We add a tool like the Coolite example to refresh the panel in which is added the Accordion control.

    - The method to refresh the panel proposed by Coolite is:

    function refreshTree(tree) {    
    Coolite.AjaxMethods.RefreshMenu(
     {                
       success: function(result) 
         {                    
          var nodes = eval(result);                    
          tree.root.ui.remove();                    
          tree.initChildren(nodes);                    
          tree.root.render();                
         }            
     }
    );       
}
    This method call to Ajax RefreshMenu method.

    [AjaxMethod]
public string RefreshMenu()
{
   Coolite.Ext.Web.TreeNodeCollection nodes = BuildMenu(null, null);
   return nodes.ToJson();
}
    - The LoadFavorites method allows add favorites nodes in the TreePanel and then there is a foreach that load every children node (all nodes that come in dataMenu parameter) in each TreePanel

    [AjaxMethod]
private Coolite.Ext.Web.TreeNodeCollection BuildMenu(Coolite.Ext.Web.TreeNodeCollection nodes, List<COBISCorp.eCOBIS.InternetBanking.Admin.DTO.Menu> dataMenu)
{
    menuList = dataMenu;

    if (menuList != null)
    {
        if (nodes != null)
            nodes = new Coolite.Ext.Web.TreeNodeCollection();

        root = new Coolite.Ext.Web.TreeNode("Composers1");
        root.Expanded = true;

        panel = new TreePanel();
        panel.Title = GetLocalResourceObject("FavoritesList").ToString();
        panel.SkinID = "treeOptions";
        panel.ID = "TreePanel0";

        Tool tool = new Tool();
        tool.Handler = "refreshTree(#{Panel1});";
        tool.Type = ToolType.Refresh;
        tool.Qtip = "Refresh";
        Panel1.Tools.Add(tool);

        LoadFavorites(1, root);
        panel.Root.Add(root);

        nodes.Add(root);
        accordion1.Items.Add(panel);

        foreach (COBISCorp.eCOBIS.InternetBanking.Admin.DTO.Menu item in menuList)
        {
            panel = new TreePanel();
            panel.Title = item.Name;
            panel.SkinID = "treeOptions";

            root = new Coolite.Ext.Web.TreeNode("Composers1");
            root.Expanded = true;
            LoadChilds(item.Option, 1, root);
            panel.Root.Add(root);
            accordion1.Items.Add(panel);
        }
    }

    return panel.Root;
}
    - I can add or remove a favorite node by pressing the Add To Favorites/Remove from Favorites button which is subscribe to a javascript function inside the Default.aspx page. This function is:

    function temp(option)
{
   Coolite.AjaxMethods.FavoriteReload(option);
}
    - Note: The role of the button depends if the current page is in the favorites list or not. (see Picture 3).

    - This function in turn calls to the FavoriteReload method, which allow save or remove a favorite node of the database y again performs the process calling the ShowMenu method described above.

    [AjaxMethod]
public void FavoriteReload(string option)
{
    string[] param = { "-" };
    string[] args = option.Split(param, StringSplitOptions.None);
    string opt = args[0];

    bool addFav = Boolean.Parse(args[1]);

    if (addFav)
    {
        this.Presenter.AddFavorites(Int32.Parse(opt));
    }
    else
    {
        this.Presenter.DeleteFavorites(Int32.Parse(opt));
    }
}
    All work fine, except that after performing this process the treePanel does not refresh.

    An extra information is that the nodes should be loaded by demand, but when I use the coolite example defined on https://examples2.ext.net/ ( TreePanel ? Loaders ? Ajax Method Loader), the nodeLoad function comes with the node parameter as null.

    function nodeLoad(node) {
    Coolite.AjaxMethods.NodeLoad(node.id, {
        success: function(result) {
            var data = eval("(" + result + ")");
            node.loadNodes(data);
        },

        failure: function(errorMsg) {
            Ext.Msg.alert('Failure', errorMsg);
        }
    });            
}
    The subscription to the nodeLoad is:

    Panel.Listeners.BeforeLoad.Fn = "nodeLoad";
    And that does not work!

    Please we need your help.

    Thanks in advance,
  2. #2
    Mar 24, 2010, 5:32 PM

    RE: Problem at refresh a TreePanel and load TreeNodes by demand

    </PRE>



    Hi,


    Using your bussiness logic, I think I have a solution:
    JS Function:


    

function temp(option) {


var args = option.split("-");


var addFav = args[1];


Coolite.AjaxMethods.FavoriteReload(option, {


success: function(result) {


if (addFav === "True") {


var nodo = TreePanel0.getRootNode();


var data = eval("(" + result + ")");


nodo.loadNodes(data);


Ext.Msg.alert('Favorites', 'Page Added to Favorites.');


}


if (addFav === "False") {


var nodo = TreePanel0.getRootNode();


var data = eval("(" + result + ")");


nodo.ui.remove(data);


TreePanel0.getRootNode().reload();


Ext.Msg.alert('Favorites', 'Page Removed from Favorites');


}


}


});


}

    Code Behind



        




[AjaxMethod]


public string FavoriteReload(string option)


{


string[] param = { "-" };


string[] args = option.Split(param, StringSplitOptions.None);


string opt = args[0];


bool addFav = Boolean.Parse(args[1]);


if (addFav)


{


this.Presenter.AddFavorites(Int32.Parse(opt));


return GetFavorite(opt);


}


else


{


this.Presenter.DeleteFavorites(Int32.Parse(opt));


return GetFavorite(opt);


}


 


}


private string GetFavorite(string id)


{


nodeList = null;


nodeList = new TreeNodeCollection();


List<COBISCorp.eCOBIS.InternetBanking.Admin.DTO.Menu> favorites = (List<COBISCorp.eCOBIS.InternetBanking.Admin.DTO.Menu>)this.Presenter.LoadFavorites();


this.Presenter.FillFavorites(favorites);


if (favorites != null)


{


foreach (COBISCorp.eCOBIS.InternetBanking.Admin.DTO.Menu item in favorites)


{


if (item.Option.ToString() == id)


{


Coolite.Ext.Web.TreeNode node = new Coolite.Ext.Web.TreeNode(item.Name);


node.Leaf = true;


node.NodeID = item.Option.ToString();


node.IconFile = item.Image;


if (item.Url != null)


node.Listeners.Click.Handler = "#{pnlLytWorkArea}.load('" + item.Url + "?id=" + item.Option + "');";


nodeList.Add(node);


}


}


}


return nodeList.ToJson();


}
    Hope it works!

Similar Threads

  1. TreePanel->Tools(Type="Refresh"), when click refresh icon, can I show a mask over the TreePanel?
    By zhangsir199 in forum 1.x Help
    Replies: 2
    Last Post: Jul 30, 2010, 12:37 AM
  2. [CLOSED] Using UserControls as modules and load on demand
    By smart+ in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 22, 2010, 6:25 PM
  3. Add Parameters to TreePanel treenodes
    By andrlar in forum 1.x Help
    Replies: 2
    Last Post: May 15, 2009, 4:01 AM
  4. How to Remove Particualr TreeNodes from a TreePanel Using Code Behind?
    By yaser82 in forum 1.x Help
    Replies: 0
    Last Post: Feb 23, 2009, 7:02 PM
  5. Load on demand combo box
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 03, 2008, 1:39 PM

Posting Permissions