What's New?

[CLOSED] [1.0] TreePanel

Page 1 of 2 12 LastLast
  1. #1
    Apr 02, 2011, 6:33 PM

    [CLOSED] [1.0] TreePanel

    Hello,

    I have the following TreePanel:

    <ext:TreePanel ID="Category" runat="server"
	AutoScroll="true"
	Border="false"
	Cls="x-tree-noicon"
	IsFormField="false"
	UseArrows="true">
	<Loader>
		<ext:TreeLoader AutoDataBind="true" DataUrl='<%# Url.Action("Category", "Get") %>' PreloadChildren="true" RequestMethod="GET" />
	</Loader>
	<Root>
		<ext:AsyncTreeNode Expanded="true" NodeID="Root" Text="Categories" />
	</Root>
	<Sorter Direction="ASC" Property="text" />
</ext:TreePanel>
    Which has the following JSON:

    [
  {
    "children": [],
    "id": "1",
    "text": "Category 1",
    "keywords": "Category 1 Keywords 1234",
    "checked": false
  },
  {
    "children": [],
    "id": "2",
    "text": "Category 2",
    "keywords": "Category 2 Keywords 1234",
    "checked": false
  }
]
    Would there be any way I could display keywords in the tree? Like as an additional column? Or a summary under the tree items? Or in the last resort perhaps even as a tool tip?

    Would appreciate your feedback. I don't think I can use the TreeGrid because it does not support the checked feature like TreePanel does?

    Cheers,
    Timothy
    Last edited by Daniil; Apr 09, 2011 at 10:14 AM. Reason: [CLOSED]
  2. #2
    Apr 04, 2011, 11:04 AM
    Hi,

    Yes, you are right, TreeGrid doesn't support checkboxes (at least, in ExtJS 3. Maybe it supports that in ExtJS 4, I have not reviewed TreeGrid there).

    It would be easiest to show any additional info in a tooltip. What about that?

    Another way (much more difficult) - creating your own uiProvider class, see
    http://dev.sencha.com/deploy/dev/doc...ber=uiProvider
  3. #3
    Apr 05, 2011, 12:27 PM
    Thanks! Have you got an example of using a Tooltip in a TreePanel?

    Cheers
  4. #4
    Apr 05, 2011, 12:59 PM
    Hi,

    Please see the following sample
    http://forums.ext.net/showthread.php...ll=1#post43767

    Just change Delegate property to ' Delegate=".x-tree-node" '
  5. #5
    Apr 05, 2011, 3:28 PM
    Hello vladsch,

    The example you provided is not working for me, here is what I have:

    				<ext:ToolTip runat="server"
					Delegate=".x-tree-node"
					Target="={Category.body}"
					TrackMouse="true">
					<Listeners>
						<Show Fn="ShowTip" />
					</Listeners>
				</ext:ToolTip>
    			var ShowTip = function() {
				var nodeId = Ext.fly(this.triggerElement).parent('.x-tree-node-el').getAttribute('ext:tree-node-id'),
					node = Category.getNodeById(nodeId),
					keywords = node.attributes['keywords'];
				this.body.dom.innerHTML = 'Keywords: ' + keyword;
			}
    Suggestions?

    Cheers,
    Timothy
  6. #6
    Apr 05, 2011, 3:32 PM 
    var ...
    keywords = node.attributes['keywords'];this.body.dom.innerHTML = 'Keywords: ' + keyword;
    I guess you have to change 'keyword' to 'keywords'.

    'keyword' is undefined in your code.
  7. #7
    Apr 05, 2011, 6:20 PM
    Quote Originally Posted by Daniil View Post 
    var ...
    keywords = node.attributes['keywords'];this.body.dom.innerHTML = 'Keywords: ' + keyword;
    I guess you have to change 'keyword' to 'keywords'.

    'keyword' is undefined in your code.
    I've corrected that; still nothing here on my end. It appears that the ShowTip method never executes.

    Any other suggestions?

    Cheers
  8. #8
    Apr 05, 2011, 7:00 PM
    Please look at the example.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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 runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var showTip = function () {
            var nodeId = Ext.fly(this.triggerElement).child('.x-tree-node-el').getAttribute('ext:tree-node-id');
                node = TreePanel1.getNodeById(nodeId),
                attr = node.attributes['attr'],
            this.body.dom.innerHTML = attr;
        }
     
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TreePanel 
        ID="TreePanel1" 
        runat="server" 
        AutoHeight="true" 
        RootVisible="false">
        <Root>
            <ext:TreeNode Expanded="true">
                <Nodes>
                    <ext:TreeNode NodeID="Node1" Text="Node1">
                        <CustomAttributes>
                            <ext:ConfigItem Name="attr" Value="Hello " Mode="Value" />
                        </CustomAttributes>
                    </ext:TreeNode>
                    <ext:TreeNode NodeID="Node2" Text="Node2">
                        <CustomAttributes>
                            <ext:ConfigItem Name="attr" Value="World!" Mode="Value" />
                        </CustomAttributes>
                    </ext:TreeNode>
                </Nodes>
            </ext:TreeNode>
        </Root>
    </ext:TreePanel>
    <ext:ToolTip 
        ID="CellTip" 
        runat="server" 
        Target="={TreePanel1.body}" 
        Delegate=".x-tree-node"
        TrackMouse="true">
        <Listeners>
            <Show Fn="showTip" />
        </Listeners>
    </ext:ToolTip>
    </form>
</body>
</html>
  9. #9
    Apr 05, 2011, 10:13 PM
    Got it to work with the example above, looks like its a problem with the <Ext:ToolTip> control rendering in an MVC Html.RenderExtPartial. Vladsch, can you look into this?

    Daniil, is there anyway to cancel it from showing if the keywords are empty?

    Cheers
  10. #10
    Apr 06, 2011, 10:59 AM
    Hi,

    In the partial view need to use custom js functions carefully because script from script tags will be initialized after widgets
    Please replace Show listener by the following code
    <Show Handler="showTip.call(this);" />
    In the following post the similar problem is discussed (solution in last posts)
    http://forums.ext.net/showthread.php?11175
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Bug in TreePanel
    By gets_gui in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 05, 2012, 3:04 PM
  2. [CLOSED] Drag and drop from treepanel to treepanel in "copy" mode
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 14, 2011, 6:45 PM
  3. TreePanel shows only default Icons when TreePanel.AppendChild is used unless we set the IconFile
    By reverseblade in forum 1.x Help
    Replies: 5
    Last Post: Mar 23, 2011, 9:57 AM
  4. TreePanel->Tools(Type="Refresh"), when click refresh icon, can I show a mask over the TreePanel?
    By zhangsir199 in forum 1.x Help
    Replies: 2
    Last Post: Jul 30, 2010, 12:37 AM
  5. Dynamically changing Treepanel other Treepanel
    By airforcz in forum 1.x Help
    Replies: 0
    Last Post: Jun 16, 2010, 8:33 AM

Tags for this Thread

Posting Permissions