[CLOSED] TreeGrid not rendering correctly after nodes/columns change

  1. #1

    [CLOSED] TreeGrid not rendering correctly after nodes/columns change

    I'm using this solution to change the nodes during a DirectEvent:

    http://forums.ext.net/showthread.php...om-parent-page

    I'm also trying to use this solution to hide/show certain columns during the same event:

    http://forums.ext.net/showthread.php...the-serverside

    The example posted in that solution works, but when I try to use it with the node change solution, I get stuff like the attached screenshot. If I resize one of the columns. everything re-renders correctly (see 2nd screenshot).

    What am I doing wrong?
    Attached Thumbnails Click image for larger version. 

Name:	Capture.jpg 
Views:	187 
Size:	12.5 KB 
ID:	1328   Click image for larger version. 

Name:	Capture-after.jpg 
Views:	162 
Size:	14.0 KB 
ID:	1329  
    Last edited by geoffrey.mcgill; Jul 07, 2010 at 7:10 PM.
  2. #2
    Hello, jmcantrell!

    Could you provide me with an example to demonstrate this behavior?
  3. #3
    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>
  4. #4
    Hi,

    Please call 'updateColumnWidths' method at the end of the success handler

    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();
                        }
                        tg.updateColumnWidths();
                    }
                });
            };
  5. #5
    That worked. Thanks. :)

Similar Threads

  1. Custom TreeGrid nodes ?
    By Mohammad in forum 1.x Help
    Replies: 18
    Last Post: Aug 22, 2012, 9:49 AM
  2. Tooltip CSS not rendering correctly
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Oct 24, 2011, 6:36 PM
  3. [CLOSED] Dynamic controls are not rendering correctly
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 16, 2011, 9:05 PM
  4. Replies: 16
    Last Post: Jun 24, 2010, 2:41 PM
  5. [CLOSED] [1.0] Setting Cls property on nodes with TreeGrid
    By tdracz in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 15, 2010, 1:23 PM

Posting Permissions