[CLOSED] Navigation tree/gridview

[Aad]

<p class="MsoNormal">Hi,

I am working on an application that consists of a viewport.
The West panel has a treepanel, the center panel a gridview
and the East panel a details view (form).


The tree and the grid are populated from a SQL database


When I click on a node in the tree the details are
populated.


When I click in a row in the grid the details are populated.


What I want is that:


1. when I click on a node that the corresponding row is highlighted.
2. when I click on a row in the grid that the corresponding node in the tree is selected/highlighted.


Any idea how I can accomplish this?
Thanks,
Aad
</p>

[geoffrey.mcgill]

Hi Aad,

I don't have a sample to demonstate the functionality, but you'll need to Listen for the following events...

GridPanel
<RowSelect> event of the RowSelectionModel of the GridPanel


http://extjs.com/deploy/dev/docs/?cl...mber=rowselect


TreePanel
<Click> event of the TreePanel
http://extjs.com/deploy/dev/docs/?cl...p;member=click

[Aad]

Hi Geoffrey,

Thanks for your reply!

Forgot to tell that this is already in place.

Code for grid

       public void navigationTreeNode_Click(object sender, NavigationTreeClickEventArgs e)
        {
            if (e.Level.Equals(NavigationTreeLevel.Company))
            {
                //select row based on global id here....
               
            }
        }

        protected void RowSelect(object sender, AjaxEventArgs e)
        {
            string akCompanyID = e.ExtraParams["akCompanyID"];

            if (null != this.companyGridClick)
            {
                GridClickEventArgs ge = new GridClickEventArgs(new Guid(akCompanyID));
                companyGridClick(this, ge);

            }
        }

and for tree

    public void companyGrid_Click(object sender, GridClickEventArgs e)
    {
        //e.Id contains global id, set treepanel here.....
    }

    protected void TreePanel1_Click(object sender, AjaxEventArgs e)
    {
        string id = e.ExtraParams["id"];
        int depth = int.Parse(e.ExtraParams["depth"]);

        if (depth != 0)
        {
            this.OnNavigationTreeNodeClick(id, depth);
        }
    }

What I need to know is how to fire an event that either:

<ul>[*]selects or sets the focus to the row that corresponds with the selected node[*]shows the node that corresponds with the selected row[/list]
Thanks,

Aad

[geoffrey.mcgill]

Hi Aad,

It would be best if you could post a full .aspx sample demonstrating how you have all the components configured.

[Aad]

Hi Geoffrey,

I solved on of the issues by using the row selection model:

public void navigationTreeNode_Click(object sender, NavigationTreeClickEventArgs e)
        {
            if (e.Level.Equals(NavigationTreeLevel.Company))
            {
                //select row based on global id here....
                string id = e.Id.ToString();
                RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;
                sm.SelectedRows.Add(new SelectedRow(id));
                sm.UpdateSelection();
            }
        }

For the other part I need to find the node in the tree by the ID of the selected row.
In ext there is a method 'getNodeById', but I cannot find anything like it in the Coolite documentation.

The example that I found I cannot get to work.

asyncExpand : function(x) {
    var treepanel = Ext.getCmp('treepanel');
    var node = treepanel.getNodeById(this.config.initOpenFolder);
    if(!node) {
        var x = x+1;
        var nextnodeid = this.config.pathToFolder[x];
        var nextnode = treepanel.getNodeById(nextnodeid);
        nextnode.on("expand",this.asyncExpand.createDelegate(this,[x]), this, {single:true});
        nextnode.expand(true);
    } else {
        node.select()
        node.fireEvent("click",node);
    }
}
    };

If you would have an example of this that works in code behind that would be great.

Thanks,
Aad