This should do it.
<!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 id="Head1" runat="server">
<title></title>
<script runat="server">
Public Enum GridType As Integer
Accounts = 0
AssetType = 1
End Enum
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack And Not Ext.Net.X.IsAjaxRequest Then
BuildTree(HoldingsTreeGrid.Root)
End If
End Sub
Protected Function BuildTree(ByVal nodes As Ext.Net.TreeNodeCollection) As Ext.Net.TreeNodeCollection
If nodes Is Nothing Then nodes = New Ext.Net.TreeNodeCollection
Dim root As New Ext.Net.TreeNode("Root")
nodes.Add(root)
Dim vb As GridType = If(String.IsNullOrEmpty(ViewBy.SelectedItem.Value), 0, CInt(ViewBy.SelectedItem.Value))
Select Case vb
Case GridType.Accounts
BindViewByAccounts(root)
Case GridType.AssetType
BindViewByAssetType(root)
End Select
Return nodes
End Function
Protected Sub SetColumnsVisible(ByVal account As Boolean, ByVal type As Boolean, ByVal price As Boolean)
With HoldingsTreeGrid
.SetColumnVisible(1, account)
.SetColumnVisible(2, type)
.SetColumnVisible(3, price)
End With
End Sub
Public Sub BindViewByAccounts(ByVal r As Ext.Net.TreeNode)
SetColumnsVisible(True, True, False)
r.Nodes.Add(Root)
End Sub
Public Sub BindViewByAssetType(ByVal r As Ext.Net.TreeNode)
SetColumnsVisible(False, False, False)
r.Nodes.Add(Root)
End Sub
Protected ReadOnly Property Root() As Ext.Net.TreeNode
Get
Dim o As New Ext.Net.TreeNode("Root")
For i = 1 To 10
Dim n As New Ext.Net.TreeNode("Test " & i)
n.CustomAttributes.Add(New ConfigItem("description", i.ToString, ParameterMode.Value))
n.CustomAttributes.Add(New ConfigItem("account", i.ToString, ParameterMode.Value))
n.CustomAttributes.Add(New ConfigItem("assettype", i.ToString, ParameterMode.Value))
n.CustomAttributes.Add(New ConfigItem("price", i.ToString, ParameterMode.Value))
n.CustomAttributes.Add(New ConfigItem("marketvalue", i.ToString, ParameterMode.Value))
n.CustomAttributes.Add(New ConfigItem("gainloss", i.ToString, ParameterMode.Value))
n.CustomAttributes.Add(New ConfigItem("allocation", i.ToString, ParameterMode.Value))
o.Nodes.Add(n)
Next
Return o
End Get
End Property
<DirectMethod()> _
Public Function RefreshTreeGrid() As String
Return BuildTree(Nothing).ToJson()
End Function
</script>
<script type="text/javascript">
var refreshTreeGrid = function(tg) {
Ext.net.DirectMethods.RefreshTreeGrid({
success: function(result) {
var nodes = eval(result);
if(nodes.length > 0){
tg.initChildren(nodes);
}
else{
tg.getRootNode().removeChildren();
}
}
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
<ext:ComboBox ID="ViewBy" runat="server" SelectedIndex="0">
<Items>
<ext:ListItem Text="Account" Value="0" />
<ext:ListItem Text="Asset Type" Value="1" />
</Items>
<Listeners>
<Select Handler="refreshTreeGrid(#{HoldingsTreeGrid});" />
</Listeners>
</ext:ComboBox>
<ext:TreeGrid ID="HoldingsTreeGrid" runat="server" AutoExpandColumn="description" Border="false" NoLeafIcon="true">
<Columns>
<ext:TreeGridColumn Header="Foo" Width="150" DataIndex="description" />
<ext:TreeGridColumn Header="Bar" Width="100" DataIndex="account" />
<ext:TreeGridColumn Header="Type" Width="150" DataIndex="assettype" />
<ext:TreeGridNumberColumn Header="Price" Width="125" DataIndex="price" Align="Right" SortType="AsFloat">
<XTemplate runat="server">
<Html>
{price:usMoney}
</Html>
</XTemplate>
</ext:TreeGridNumberColumn>
<ext:TreeGridNumberColumn Header="Unrealized Gain/Loss" Width="125" DataIndex="gainloss" Align="Right" SortType="AsFloat">
<XTemplate runat="server">
<Html>
{gainloss:usMoney}
</Html>
</XTemplate>
</ext:TreeGridNumberColumn>
<ext:TreeGridNumberColumn Header="Market Value" Width="125" DataIndex="marketvalue" Align="Right" SortType="AsFloat">
<XTemplate runat="server">
<Html>
{marketvalue:usMoney}
</Html>
</XTemplate>
</ext:TreeGridNumberColumn>
<ext:TreeGridNumberColumn Header="Allocation %" Width="125" DataIndex="allocation" Align="Right" SortType="AsFloat">
<XTemplate ID="XTemplate3" runat="server">
<Html>
{allocation} %
</Html>
</XTemplate>
</ext:TreeGridNumberColumn>
</Columns>
</ext:TreeGrid>
</form>
</body>
</html>