I suggest you run the complete code example below:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 1; i <= 3; i++)
{
Ext.Net.Menu myContextMenu = new Ext.Net.Menu();
myContextMenu.ID = "menu" + i.ToString();
for (int j = 1; j <= 3; j++)
{
myContextMenu.Items.Add(new Ext.Net.MenuItem("Menu " + i.ToString() + " Item " + j.ToString()));
}
this.PlaceHolder1.Controls.Add(myContextMenu);
}
Ext.Net.TreePanel tree = new Ext.Net.TreePanel();
this.PlaceHolder1.Controls.Add(tree);
tree.ID = "TreePanel1";
tree.Width = Unit.Pixel(600);
tree.Height = Unit.Pixel(450);
tree.Icon = Icon.BookOpen;
tree.Title = "Catalog";
tree.AutoScroll = true;
Ext.Net.Button btnExpand = new Ext.Net.Button();
btnExpand.Text = "Expand All";
btnExpand.Listeners.Click.Handler = tree.ClientID + ".expandAll();";
Ext.Net.Button btnCollapse = new Ext.Net.Button();
btnCollapse.Text = "Collapse All";
btnCollapse.Listeners.Click.Handler = tree.ClientID + ".collapseAll();";
Toolbar toolBar = new Toolbar();
toolBar.ID = "Toolbar1";
toolBar.Items.Add(btnExpand);
toolBar.Items.Add(btnCollapse);
tree.TopBar.Add(toolBar);
StatusBar statusBar = new StatusBar();
statusBar.ID = "StatusBar1";
statusBar.AutoClear = 1000;
tree.BottomBar.Add(statusBar);
tree.Listeners.ItemClick.Handler = "onItemClick(record)";
tree.Listeners.ItemExpand.Handler = statusBar.ClientID + ".setStatus({text: 'Node Expanded: <b>' + item.data.text + '</b>', clear: false});";
tree.Listeners.ItemContextMenu.Fn = "onItemContextMenu";
tree.Listeners.ItemExpand.Buffer = 30;
tree.Listeners.ItemCollapse.Handler = statusBar.ClientID + ".setStatus({text: 'Node Collapsed: <b>' + item.data.text + '</b>', clear: false});";
tree.Listeners.ItemCollapse.Buffer = 30;
Ext.Net.Node root = new Ext.Net.Node()
{
Text = "Composers"
};
root.Expanded = true;
tree.Root.Add(root);
List<Composer> composers = this.GetData();
foreach (Composer composer in composers)
{
Ext.Net.Node composerNode = new Ext.Net.Node()
{
Text = composer.Name,
Icon = Icon.UserGray
};
root.Children.Add(composerNode);
foreach(Composition composition in composer.Compositions)
{
Ext.Net.Node compositionNode = new Ext.Net.Node()
{
Text = composition.Type.ToString()
};
composerNode.Children.Add(compositionNode);
foreach (Piece piece in composition.Pieces)
{
Ext.Net.Node pieceNode = new Ext.Net.Node()
{
Text = piece.Title,
Icon = Icon.Music,
Leaf = true
};
pieceNode.CustomAttributes.Add(new ConfigItem
{
Name = "pID",
Value = piece.PID,
Mode = ParameterMode.Value
});
pieceNode.CustomAttributes.Add(new ConfigItem
{
Name = "myIDvalue",
Value = "menu" + piece.MyIDValue.ToString(),
Mode = ParameterMode.Value
});
compositionNode.Children.Add(pieceNode);
}
}
}
}
public class Composer
{
public Composer(string name) { this.Name = name; }
public string Name { get; set; }
private List<Composition> compositions;
public List<Composition> Compositions
{
get
{
if (this.compositions == null)
{
this.compositions = new List<Composition>();
}
return this.compositions;
}
}
}
public class Composition
{
public Composition() { }
public Composition(CompositionType type)
{
this.Type = type;
}
public CompositionType Type { get; set; }
private List<Piece> pieces;
public List<Piece> Pieces
{
get
{
if (this.pieces == null)
{
this.pieces = new List<Piece>();
}
return this.pieces;
}
}
}
public class Piece
{
public static Random rnd = new Random();
public Piece() {}
public Piece(string title)
{
this.Title = title;
}
public string Title { get; set; }
public string PID
{
get
{
return Guid.NewGuid().ToString();
}
}
public int MyIDValue
{
get
{
return rnd.Next(1, 4);
}
}
}
public enum CompositionType
{
Concertos,
Quartets,
Sonatas,
Symphonies
}
public List<Composer> GetData()
{
Composer beethoven = new Composer("Beethoven");
Composition beethovenConcertos = new Composition(CompositionType.Concertos);
Composition beethovenQuartets = new Composition(CompositionType.Quartets);
Composition beethovenSonatas = new Composition(CompositionType.Sonatas);
Composition beethovenSymphonies = new Composition(CompositionType.Symphonies);
beethovenConcertos.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "No. 1 - C" },
new Piece{ Title = "No. 2 - B-Flat Major" },
new Piece{ Title = "No. 3 - C Minor" },
new Piece{ Title = "No. 4 - G Major" },
new Piece{ Title = "No. 5 - E-Flat Major" }
});
beethovenQuartets.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "Six String Quartets" },
new Piece{ Title = "Three String Quartets" },
new Piece{ Title = "Grosse Fugue for String Quartets" }
});
beethovenSonatas.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "Sonata in A Minor" },
new Piece{ Title = "sonata in F Major" }
});
beethovenSymphonies.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "No. 1 - C Major" },
new Piece{ Title = "No. 2 - D Major" },
new Piece{ Title = "No. 3 - E-Flat Major" },
new Piece{ Title = "No. 4 - B-Flat Major" },
new Piece{ Title = "No. 5 - C Minor" },
new Piece{ Title = "No. 6 - F Major" },
new Piece{ Title = "No. 7 - A Major" },
new Piece{ Title = "No. 8 - F Major" },
new Piece{ Title = "No. 9 - D Minor" }
});
beethoven.Compositions.AddRange(new List<Composition>{
beethovenConcertos,
beethovenQuartets,
beethovenSonatas,
beethovenSymphonies
});
Composer brahms = new Composer("Brahms");
Composition brahmsConcertos = new Composition(CompositionType.Concertos);
Composition brahmsQuartets = new Composition(CompositionType.Quartets);
Composition brahmsSonatas = new Composition(CompositionType.Sonatas);
Composition brahmsSymphonies = new Composition(CompositionType.Symphonies);
brahmsConcertos.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "Violin Concerto" },
new Piece{ Title = "Double Concerto - A Minor" },
new Piece{ Title = "Piano Concerto No. 1 - D Minor" },
new Piece{ Title = "Piano Concerto No. 2 - B-Flat Major" }
});
brahmsQuartets.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "Piano Quartet No. 1 - G Minor" },
new Piece{ Title = "Piano Quartet No. 2 - A Major" },
new Piece{ Title = "Piano Quartet No. 3 - C Minor" },
new Piece{ Title = "Piano Quartet No. 3 - B-Flat Minor" }
});
brahmsSonatas.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "Two Sonatas for Clarinet - F Minor" },
new Piece{ Title = "Two Sonatas for Clarinet - E-Flat Major" }
});
brahmsSymphonies.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "No. 1 - C Minor" },
new Piece{ Title = "No. 2 - D Minor" },
new Piece{ Title = "No. 3 - F Major" },
new Piece{ Title = "No. 4 - E Minor" }
});
brahms.Compositions.AddRange(new List<Composition>{
brahmsConcertos,
brahmsQuartets,
brahmsSonatas,
brahmsSymphonies
});
Composer mozart = new Composer("Mozart");
Composition mozartConcertos = new Composition(CompositionType.Concertos);
mozartConcertos.Pieces.AddRange(new List<Piece> {
new Piece{ Title = "Piano Concerto No. 12" },
new Piece{ Title = "Piano Concerto No. 17" },
new Piece{ Title = "Clarinet Concerto" },
new Piece{ Title = "Violin Concerto No. 5" },
new Piece{ Title = "Violin Concerto No. 4" }
});
mozart.Compositions.Add(mozartConcertos);
return new List<Composer>{ beethoven, brahms, mozart };
}
[DirectMethod]
public void GetOrDoSomethingFromServer(string id)
{
X.Msg.Info("GetOrDoSomethingFromServer", "Called by node " + id).Show();
}
[DirectMethod]
public void GetOrDoSomethingElseFromServer(string id)
{
X.Msg.Info("GetOrDoSomethingElseFromServer", "Called by node " + id).Show();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Tree with Events and ContextMenu</title>
<script>
var onItemClick = function (record) {
App.StatusBar1.setStatus({text: 'Node Selected: <b>' + record.data.text + '</b> (' + record.raw["pID"] + ")", clear: false});
// decide what server side method to call here based on node data
if (record.raw["myIDvalue"] == "menu1") {
App.direct.GetOrDoSomethingFromServer(record.raw["pID"]);
}
else {
App.direct.GetOrDoSomethingElseFromServer(record.raw["pID"]);
}
};
var onItemContextMenu = function (view, node, item, index, e) {
var menu = Ext.getCmp(node.raw["myIDvalue"]);
this.menuNode = node;
menu.nodeName = node.get("text");
view.getSelectionModel().select(node);
menu.showAt([e.getXY()[0], e.getXY()[1] + 10]);
e.stopEvent();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Tree with Events and ContextMenu</h1>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" />
</form>
</body>
</html>
Hope it helps.