[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:
Code:
<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>
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
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:
Code:
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" & 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" & 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" & 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" & 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" & 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
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/
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?
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
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?
RE: [CLOSED] Javascript error when using this usercontrol
Hi,
It is initial page load, you always know your initial data
Code:
if(string.IsNullOrEmpty(Combo1.SelectedItem.Value)){/* then assume that selected value is 0 */}
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?
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
Code:
AssetTypeGrid.Call("initChildren", AssetTypeGrid.Root[0].ToJson());