[CLOSED] Javascript error when using this usercontrol

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] Javascript error when using this usercontrol

    Just having this usercontrol on a page gives the javascript error and I'm unable to find anything wrong with it:

    Webpage error details


    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
    Timestamp: Wed, 9 Jun 2010 13:47:54 UTC




    Message: 'width' is null or not an object
    Line: 553
    Char: 21
    Code: 0
    URI: http://localhost/test/ux/extensions/treegrid/treegrid-js/ext.axd?v=30187


    Here is the control:



    
    
    <ext:FitLayout ID="FitLayout1" runat="server">
        <Items>
            <ext:Panel ID="grid" runat="server" Layout="Card" ActiveIndex="0" AutoWidth="true">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:ComboBox ID="ViewBy" runat="server" SelectedIndex="0">
                                <Items>
                                    <ext:ListItem Text="Account" Value="0" />
                                    <ext:ListItem Text="Asset Type" Value="1" />
                                </Items>
                                <DirectEvents>
                                    <Select OnEvent="ChangeGrid">
                                        <EventMask ShowMask="true" CustomTarget="={#{grid}.body}" />
                                    </Select>
                                </DirectEvents>
                            </ext:ComboBox>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="AccountsPanel" runat="server" AutoWidth="true">
                        <Items>
                            <ext:TreeGrid ID="AccountsGrid" runat="server" AutoExpandColumn="Description" AutoWidth="true">
                                <Columns>
                                    <ext:TreeGridColumn Header="Decription" Width="150" DataIndex="description" />
                                    <ext:TreeGridColumn Header="Account" Width="100" DataIndex="account" />
                                    <ext:TreeGridColumn Header="Type" Width="150" DataIndex="assettype" />
                                    <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="Unrealized Gain/Loss" Width="125" DataIndex="totalgainloss" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {totalgainloss:usMoney}
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                    <ext:TreeGridNumberColumn Header="Allocation %" Width="125" DataIndex="allocationpercent" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {allocationpercent} %
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                </Columns>
                            </ext:TreeGrid>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="AssetTypePanel" runat="server" AutoWidth="true">
                        <Items>
                            <ext:TreeGrid ID="AssetTypeGrid" runat="server" AutoExpandColumn="Description" AutoWidth="true">
                                <Columns>
                                    <ext:TreeGridColumn Header="Description" Width="150" DataIndex="description" />
                                    <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="Unrealized Gain/Loss" Width="125" DataIndex="totalgainloss" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {totalgainloss:usMoney}
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                    <ext:TreeGridNumberColumn Header="Allocation %" Width="125" DataIndex="allocationpercent" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {allocationpercent} %
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                </Columns>
                            </ext:TreeGrid>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="AssetClassPanel" runat="server" AutoWidth="true">
                        <Items>
                            <ext:TreeGrid ID="AssetClassGrid" runat="server" AutoExpandColumn="Description" AutoWidth="true">
                                <Columns>
                                    <ext:TreeGridColumn Header="Description" Width="150" DataIndex="description" />
                                    <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="Unrealized Gain/Loss" Width="125" DataIndex="totalgainloss" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {totalgainloss:usMoney}
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                    <ext:TreeGridNumberColumn Header="Allocation %" Width="125" DataIndex="allocationpercent" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {allocationpercent} %
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                </Columns>
                            </ext:TreeGrid>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="AssetSectorPanel" runat="server" AutoWidth="true">
                        <Items>
                            <ext:TreeGrid ID="AssetSectorGrid" runat="server" AutoExpandColumn="Description" AutoWidth="true">
                                <Columns>
                                    <ext:TreeGridColumn Header="Description" Width="150" DataIndex="description" />
                                    <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="Unrealized Gain/Loss" Width="125" DataIndex="totalgainloss" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {totalgainloss:usMoney}
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                    <ext:TreeGridNumberColumn Header="Allocation %" Width="125" DataIndex="allocationpercent" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {allocationpercent} %
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                </Columns>
                            </ext:TreeGrid>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="AssetSubsectorPanel" runat="server" AutoWidth="true">
                        <Items>
                            <ext:TreeGrid ID="AssetSubsectorGrid" runat="server" AutoExpandColumn="Description" AutoWidth="true">
                                <Columns>
                                    <ext:TreeGridColumn Header="Description" Width="150" DataIndex="description" />
                                    <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="Unrealized Gain/Loss" Width="125" DataIndex="totalgainloss" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {totalgainloss:usMoney}
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                    <ext:TreeGridNumberColumn Header="Allocation %" Width="125" DataIndex="allocationpercent" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {allocationpercent} %
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                </Columns>
                            </ext:TreeGrid>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="AssetCategoryPanel" runat="server" AutoWidth="true">
                        <Items>
                            <ext:TreeGrid ID="AssetCategoryGrid" runat="server" AutoExpandColumn="Description" AutoWidth="true">
                                <Columns>
                                    <ext:TreeGridColumn Header="Description" Width="150" DataIndex="description" />
                                    <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="Unrealized Gain/Loss" Width="125" DataIndex="totalgainloss" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {totalgainloss:usMoney}
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                    <ext:TreeGridNumberColumn Header="Allocation %" Width="125" DataIndex="allocationpercent" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {allocationpercent} %
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                </Columns>
                            </ext:TreeGrid>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="AssetPanel" runat="server" AutoWidth="true">
                        <Items>
                            <ext:TreeGrid ID="AssetGrid" runat="server" AutoExpandColumn="Description" AutoWidth="true">
                                <Columns>
                                    <ext:TreeGridColumn Header="Description" Width="150" DataIndex="description" />
                                    <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="Market Value" Width="125" DataIndex="marketvalue" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {marketvalue:usMoney}
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                    <ext:TreeGridNumberColumn Header="Unrealized Gain/Loss" Width="125" DataIndex="totalgainloss" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {totalgainloss:usMoney}
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                    <ext:TreeGridNumberColumn Header="Allocation %" Width="125" DataIndex="allocationpercent" Align="Right" SortType="AsFloat">
                                        <XTemplate runat="server">
                                            <Html>
                                                {allocationpercent} %
                                            </Html>
                                        </XTemplate>
                                    </ext:TreeGridNumberColumn>
                                </Columns>
                            </ext:TreeGrid>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:FitLayout>
  2. #2

    RE: [CLOSED] Javascript error when using this usercontrol

    Hi,

    You defined AutoExpandColumn="Description" but DataIndex="description" (different case for the first letter).
    Please use the same case
  3. #3

    RE: [CLOSED] Javascript error when using this usercontrol

    Thanks. That fixed the javascript error, but I have another problem with actually adding nodes in the code behind. While debugging, I can actually see the nodes being created and added, but when it renders, there's no nodes. Here's the code behind:

    
    
    Imports WAP.Data
    Imports Ext.Net
    
    
    Partial Public Class ClientHoldingsGridControl
        Inherits BaseControl
    
    
        Private _household As Household
    
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not Ext.Net.X.IsAjaxRequest Then
                BindViewBy()
            End If
        End Sub
    
    
        Protected Sub BindViewBy()
            Select Case ViewBy.SelectedItem.Value
                Case 0
                    BindViewByAccounts()
                Case 1
                    BindViewbyAssetType()
            End Select
        End Sub
    
    
        Public Sub BindViewByAccounts()
            Dim node As New TreeNode
            node.Icon = If(Household.IsMasterHousehold, Icon.HouseStar, Icon.House)
            node.Leaf = False
            node.NodeID = "Household" &amp; Household.HouseholdID_in
            node.CustomAttributes.Add(New ConfigItem("description", Household.DisplayName, ParameterMode.Value))
            node.CustomAttributes.Add(New ConfigItem("account", "", ParameterMode.Value))
            node.CustomAttributes.Add(New ConfigItem("assettype", "", ParameterMode.Value))
            node.CustomAttributes.Add(New ConfigItem("marketvalue", CStr(Household.MarketValue), ParameterMode.Value))
            node.CustomAttributes.Add(New ConfigItem("totalgainloss", CStr(Household.TotalGainLoss), ParameterMode.Value))
            node.CustomAttributes.Add(New ConfigItem("allocationpercent", CStr(100.0), ParameterMode.Value))
            node.Expanded = True
    
    
            Dim root As New TreeNode
            root.Nodes.Add(node)
    
    
            For Each kvp In Household.AssetAllocationsByAccount
                Dim actnode = New TreeNode
                actnode.Icon = Icon.User
                actnode.Leaf = False
                actnode.NodeID = "Account" &amp; kvp.Key.AccountID_in
                actnode.CustomAttributes.Add(New ConfigItem("description", kvp.Key.DisplayName, ParameterMode.Value))
                actnode.CustomAttributes.Add(New ConfigItem("account", kvp.Key.AccountNumber_vc, ParameterMode.Value))
                actnode.CustomAttributes.Add(New ConfigItem("assettype", kvp.Key.AccountType_vc, ParameterMode.Value))
                actnode.CustomAttributes.Add(New ConfigItem("marketvalue", CStr(kvp.Value.Allocation.Value), ParameterMode.Value))
                actnode.CustomAttributes.Add(New ConfigItem("totalgainloss", CStr(kvp.Value.GainLoss), ParameterMode.Value))
                actnode.CustomAttributes.Add(New ConfigItem("allocationpercent", CStr(Math.Round(kvp.Value.Allocation.Percent, 1)), ParameterMode.Value))
                For Each aa In kvp.Value.Values
                    Dim assetnode As New TreeNode
                    assetnode.Leaf = True
                    assetnode.NodeID = "Asset" &amp; aa.Object.AssetID_in
                    assetnode.CustomAttributes.Add(New ConfigItem("description", aa.Object.DisplayName, ParameterMode.Value))
                    assetnode.CustomAttributes.Add(New ConfigItem("account", "", ParameterMode.Value))
                    assetnode.CustomAttributes.Add(New ConfigItem("assettype", "", ParameterMode.Value))
                    assetnode.CustomAttributes.Add(New ConfigItem("marketvalue", CStr(aa.Allocation.Value), ParameterMode.Value))
                    assetnode.CustomAttributes.Add(New ConfigItem("totalgainloss", CStr(aa.GainLoss), ParameterMode.Value))
                    assetnode.CustomAttributes.Add(New ConfigItem("allocationpercent", CStr(Math.Round(aa.Allocation.Percent, 1)), ParameterMode.Value))
                    actnode.Nodes.Add(assetnode)
                Next
                node.Nodes.Add(actnode)
            Next
    
    
            AccountsGrid.Root.Add(root)
        End Sub
    
    
        Public Sub BindViewByAssetType()
            Dim MarketValue = Household.MarketValue
    
    
            Dim node As New TreeNode
            node.Icon = If(Household.IsMasterHousehold, Icon.HouseStar, Icon.House)
            node.Leaf = False
            node.NodeID = "Household" &amp; Household.HouseholdID_in
            node.CustomAttributes.Add(New ConfigItem("description", Household.DisplayName, ParameterMode.Value))
            node.CustomAttributes.Add(New ConfigItem("marketvalue", CStr(Household.MarketValue), ParameterMode.Value))
            node.CustomAttributes.Add(New ConfigItem("totalgainloss", CStr(Household.TotalGainLoss), ParameterMode.Value))
            node.CustomAttributes.Add(New ConfigItem("allocationpercent", CStr(100.0), ParameterMode.Value))
            node.Expanded = True
    
    
            Dim root As New TreeNode
            root.Nodes.Add(node)
    
    
            For Each kvp In Household.AssetTypeAllocations
                Dim atnode As New TreeNode
                atnode.Icon = Icon.User
                atnode.Leaf = False
                atnode.NodeID = "AssetType" &amp; kvp.Key.AssetTypeID_in
                atnode.CustomAttributes.Add(New ConfigItem("description", kvp.Key.Description_vc, ParameterMode.Value))
                atnode.CustomAttributes.Add(New ConfigItem("marketvalue", CStr(kvp.Value.Allocation.Value), ParameterMode.Value))
                atnode.CustomAttributes.Add(New ConfigItem("totalgainloss", CStr(kvp.Value.GainLoss), ParameterMode.Value))
                atnode.CustomAttributes.Add(New ConfigItem("allocationpercent", CStr(Math.Round(kvp.Value.Allocation.Percent, 1)), ParameterMode.Value))
                node.Nodes.Add(atnode)
            Next
    
    
            AssetTypeGrid.Root.Add(root)
        End Sub
    
    
        Public Property HouseholdID() As Integer
            Get
                Return ViewStateValue("HouseholdID", 0)
            End Get
            Set(ByVal value As Integer)
                ViewState("HouseholdID") = value
            End Set
        End Property
    
    
        Protected Property Household() As Household
            Get
                If _household Is Nothing Then _household = DB.GetHousehold(HouseholdID)
                Return _household
            End Get
            Set(ByVal value As Household)
                _household = value
            End Set
        End Property
    
    
        Public Sub ChangeGrid(ByVal sender As Object, ByVal e As DirectEventArgs)
            grid.ActiveIndex = CInt(ViewBy.SelectedItem.Value)
            Select Case grid.ActiveIndex
                Case 0
                    BindViewByAccounts()
                Case 1
                    BindViewByAssetType()
            End Select
            'Dim p = CType(grid.Items(index), Ext.Net.Panel)
    
    
        End Sub
    
    
    End Class
  4. #4

    RE: [CLOSED] Javascript error when using this usercontrol

    Hi,

    Do you have problem with nodes during initial page load or during direct event?


    - I cannot run your code because it doesn't compile for me (required additional code)
    - remove AutoWidth property in the user control
    - if you need to change nodes during DirectEvent then please see
    https://examples1.ext.net/#/TreePane...h_Static_Tree/
  5. #5

    RE: [CLOSED] Javascript error when using this usercontrol

    Okay. I think I've found part of the problem. Is there a reason why a combobox with a selectedindex="0" in the markup would yield an empty string during the initial page load when trying to access ComboBox.SelectedItem.Value?
  6. #6

    RE: [CLOSED] Javascript error when using this usercontrol

    Hi,

    Combo selection performs on the client side only because combo items is not always accessable on the server side (for example, if you use store with http proxy). Therefore if you use SelectedIndex then SelectedItem.Value is undefined during initial page load
  7. #7

    RE: [CLOSED] Javascript error when using this usercontrol

    What's the right way to do this then? How do I access the value of the combobox on the initial page load?
  8. #8

    RE: [CLOSED] Javascript error when using this usercontrol

    Hi,

    It is initial page load, you always know your initial data
    if(string.IsNullOrEmpty(Combo1.SelectedItem.Value)){/* then assume that selected value is 0 */}
  9. #9

    RE: [CLOSED] Javascript error when using this usercontrol

    So, if a tree has no nodes and i want to add them during a directevent, i have to implement a javascript function (and the handler on the server side) like the one from that link? There's no way to do it completely in the code behind?
  10. #10

    RE: [CLOSED] Javascript error when using this usercontrol

    Hi,

    Well, I think can do it without that javascript handler. Try to call the following script during DirectEvent
    AssetTypeGrid.Call("initChildren", AssetTypeGrid.Root[0].ToJson());
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Mar 29, 2011, 3:59 PM
  2. Replies: 2
    Last Post: Jan 14, 2011, 5:51 PM
  3. [CLOSED] [1.0] Javascript error when loading usercontrol from code
    By klaus.schwarz in forum 1.x Legacy Premium Help
    Replies: 17
    Last Post: Jul 12, 2010, 3:59 PM
  4. [CLOSED] Javascript Error loading dynamic usercontrol 1.0
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 01, 2010, 3:05 AM
  5. How to add UserControl in JavaScript?
    By dbassett74 in forum 1.x Help
    Replies: 2
    Last Post: May 27, 2009, 8:52 PM

Posting Permissions