Aug 12, 2014, 2:18 PM
[CLOSED] [#533] TreeGrid with dynamic nodes, layout problems
There are two display problems here: first, in chrome, the column headers overlap. Second in both IE and Chrome, my icons are not showing up. I saw a similar post with the column overlap problem that was solved by HideMode="Offsets" but that didn't work here. I apologize for the namespace "v1" but our application uses both versions and in order to create an example, the namespace is needed.
<%@ Page Language="vb" %>
<%@ Import Namespace="Ext.Net.v1" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim root As New Ext.Net.v1.TreeNode("Households")
root.Expanded = True
root.Text = "All Households"
root.Leaf = False
root.Icon = Icon.Folder
tgHouseholds.Root.Add(root)
root.Nodes.Add(Me.CreateNodeWithChildren())
fpTrees.DoLayout
End Sub
Private Function CreateNodeWithChildren() As Ext.Net.v1.TreeNode
Dim treeNode As Ext.Net.v1.TreeNode
treeNode = New Ext.Net.v1.TreeNode()
With treeNode
.Expanded = True
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "ID", .Value = 12345, .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "DisplayName", .Value = "John Smith", .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "Address", .Value = "4355 Main Street", .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "AccountNumber", .Value = "", .Mode = ParameterMode.Value})
.Leaf = False
.NodeID = 12345
.Text = "John Smith"
.AllowDrag = False
.Qtip = "3 Accounts"
.Icon = Icon.Folder
End With
treeNode.Nodes.Add(CreateNodeWithOutChildren(1))
treeNode.Nodes.Add(CreateNodeWithOutChildren(2))
Return treeNode
End Function
Private Function CreateNodeWithOutChildren(i As Integer) As Ext.Net.v1.TreeNode
Dim treeNode As Ext.Net.v1.TreeNode
treeNode = New Ext.Net.v1.TreeNode
With treeNode
.Leaf = True
Select Case i
Case 1
.NodeID = 11
.Text = "Mary Smith"
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "ID", .Value = 11, .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "DisplayName", .Value = "Mary Smith", .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "Address", .Value = "", .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "AccountNumber", .Value = "ATX9943", .Mode = ParameterMode.Value})
.Icon = Icon.User
Case 2
.NodeID = 22
.Text = "John Smith"
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "ID", .Value = 22, .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "DisplayName", .Value = "John Smith", .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "Address", .Value = "", .Mode = ParameterMode.Value})
.CustomAttributes.Add(New Ext.Net.v1.ConfigItem With {.Name = "AccountNumber", .Value = "ATX4933", .Mode = ParameterMode.Value})
.Icon = Icon.User
End Select
End With
Return treeNode
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager" runat="server" />
<ext:Panel runat="server" Border="false" Layout="FitLayout" Height="500">
<Items>
<ext:FormPanel ID="fpTrees" Title="Assign Accounts" runat="server" Layout="HBoxLayout" HideMode="Offsets" Border="false" Padding="20" AutoScroll="true">
<Items>
<ext:Container runat="server" Flex="1" Margins="0 20 0 0" Layout="FormLayout" HideMode="Offsets" AutoHeight="true" DefaultAnchor="100%">
<Items>
<ext:TreeGrid id="tgHouseholds"
runat="server"
Title="Household and Accounts"
Width="300"
Height="600"
HideMode="Offsets"
autoscroll="true">
<Columns>
<ext:TreeGridColumn Header="ID" Width="230" Hidden="true" DataIndex="ID" />
<ext:TreeGridColumn Header="HouseholdName" Width="130" DataIndex="DisplayName" />
<ext:TreeGridColumn Header="Address" Width="130" DataIndex="Address" />
<ext:TreeGridColumn Header="AccountNumber" Width="100" DataIndex="AccountNumber">
</ext:TreeGridColumn>
</Columns>
</ext:TreeGrid>
</Items>
</ext:Container>
</Items>
</ext:FormPanel>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by Daniil; Aug 25, 2014 at 11:08 AM.
Reason: [CLOSED] [#533]
