Welcome Guest Search | Active Topics | Sign In | Register

Treeview Drag-Reorder index not being set correctly? Options
Dynamic Web
Posted: Sunday, October 28, 2007 2:31:38 PM
Rank: Member
Groups: Member

Joined: 10/22/2007
Posts: 18
I am experiencing oddities with reordering when trying to move a tree node either to the first (index=0) or last position in the sibling set.

1) When moving a node before the first node, the "black line" appears to be in the correct place but e.Node.Index (in the TreeView1_ItemMoved handler) is set to the maxindex, not 0. In the example below, when you try to move section 1 quiz question 2, 3 or 4 before question 1, the index of the event node is set to 3, and the item is moved to the end of the list.

2) When moving a node just below the last node (trying to set the index to the max index), the "black line" actually jumps up to the index=1 position, and if I drop the node the move is processed as if I did indeed drop the node in the index=1 position. In the example below, try moving section 1 quiz question 1, 2, or 3 after question 4-- there is a spot where you can hover which causes the black line to appear between questions 1 and 2.

I have broken the tree and code down to bare bones to demonstrate. Here it is:

.aspx page

Code: HTML/ASPX
<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h2>Course Builder: [Course Name]</h2>
    <table border="0" cellpadding="3" cellspacing="0" style="margin-top:30px;">
        <tr>
            <td style="width:250px; vertical-align:top;">
                <eo:TreeView ID="TreeView1" runat="server" ControlSkinID="None" RaisesServerEvent="True" AllowDragDrop="True" AllowDragReordering="True" OnItemMoved="TreeView1_ItemMoved">
                    <LookNodes>
                        <eo:TreeNode CollapsedImageUrl="00030201" DisabledStyle-CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:Gray;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;"
                            ExpandedImageUrl="00030202" ImageUrl="00030203" ItemID="_Default" NormalStyle-CssText="cursor:pointer; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: #cccccc; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
                            SelectedStyle-CssText="background-color:#316ac5;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;color:White;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;">
                        </eo:TreeNode>
                    </LookNodes>
                    <Margin Visible="True" Width="24" />
                    <TopGroup>
                        <Nodes>
                            <eo:TreeNode Text="Course">
                                <SubGroup>
                                    <Nodes>
                                        <eo:TreeNode Text="Section 1">
                                            <SubGroup>
                                                <Nodes>
                                                    <eo:TreeNode Text="Lesson">
                                                    </eo:TreeNode>
                                                    <eo:TreeNode Text="Quiz">
                                                        <SubGroup>
                                                            <Nodes>
                                                                <eo:TreeNode Text="Question 1">
                                                                </eo:TreeNode>
                                                                <eo:TreeNode Text="Question 2">
                                                                </eo:TreeNode>
                                                                <eo:TreeNode Text="Question 3">
                                                                </eo:TreeNode>
                                                                <eo:TreeNode Text="Question 4">
                                                                </eo:TreeNode>
                                                            </Nodes>
                                                        </SubGroup>
                                                    </eo:TreeNode>
                                                </Nodes>
                                            </SubGroup>
                                        </eo:TreeNode>
                                        <eo:TreeNode Text="Section 2">
                                            <SubGroup>
                                                <Nodes>
                                                    <eo:TreeNode Text="Lesson">
                                                    </eo:TreeNode>
                                                    <eo:TreeNode Text="Quiz">
                                                        <SubGroup>
                                                            <Nodes>
                                                                <eo:TreeNode Text="Question 1">
                                                                </eo:TreeNode>
                                                                <eo:TreeNode Text="Question 2">
                                                                </eo:TreeNode>
                                                            </Nodes>
                                                        </SubGroup>
                                                    </eo:TreeNode>
                                                </Nodes>
                                            </SubGroup>
                                        </eo:TreeNode>
                                    </Nodes>
                                </SubGroup>
                            </eo:TreeNode>
                        </Nodes>
                    </TopGroup>
                </eo:TreeView>
            </td>
            <td><asp:Label ID="Label1" EnableViewState="false" runat="server" Text="This label will show the index of the item moved on postback."></asp:Label></td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>


...and the code-behind:

Code: C#
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class treetest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        foreach (EO.Web.TreeNode node0 in TreeView1.Nodes)
        {
            node0.ExpandAll();
        }
    }

    protected void TreeView1_ItemMoved(object sender, EO.Web.TreeNodeMovedEventArgs e)
    {
        Label1.Text = "The moved node index has been set to " + e.Node.Index;
    }
}


Let me know if you cannot duplicate and I will include screenshots or the web address for this code.
Thanks!
eo_support
Posted: Sunday, October 28, 2007 3:20:52 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Thanks for your code. #1 appears to be a bug. We will try to get it fixed as soon as possible.

#2 is not a bug. The reason is because there actually is no such thing as "moving beyond the last". A TreeNode can only be dropped "between gaps". For example, if you drop "Question 3", these three are all valid drop locations:

1. The gap between "Quiz" and "Question 1";
2. The gap between "Question 1" and "Question 2";
3. The gap between "Question 4" and "Section 2";

Scenario 1 represents dropping before the first; Scenario 2 represents dropping between two siblings; Scenario 3, however, does not represent dropping after the last. When you drop a node between "Question 4" and "Section 2", it will be inserted between sibling “Section 1” and “Section 2”.

Thanks
Dynamic Web
Posted: Sunday, October 28, 2007 3:52:37 PM
Rank: Member
Groups: Member

Joined: 10/22/2007
Posts: 18
Thanks so much for the reply. Just one question-- I understand the idea of not being able to drop a node after its last sibling-- ok. But what about the part where, when you try to drag question 1, 2, or 3 to the gap between question 4 and section 2, there are actually two drop zones there-- one that correctly marks the gap between question 4 and section 2, and one that causes the black line to show up between question 1 and question 2. Could this be a bug based on padding/margin issues? It will surely be a confusing point to users. If you cannot duplicate let me know and I can send a web address.

Thanks.
eo_support
Posted: Sunday, October 28, 2007 4:11:05 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
I think that's because for some reason the code did not see "Section 2" when mouse is at certain spot. We will look into it and see what we can do with it.
Dynamic Web
Posted: Sunday, October 28, 2007 4:15:15 PM
Rank: Member
Groups: Member

Joined: 10/22/2007
Posts: 18
Makes sense. Thanks so much.
Dynamic Web
Posted: Saturday, November 10, 2007 8:55:58 AM
Rank: Member
Groups: Member

Joined: 10/22/2007
Posts: 18
Just a quick check on how it's going with these 2 issues. Are you expecting the solutions to be included in the next build? When is the next build to be published?

Thanks,
Bobby
eo_support
Posted: Saturday, November 10, 2007 11:38:48 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi Boddy,

Thanks for following up. The fix will be in our next beta release for 2007.2. The final release of 2007.2 is scheduled to be at the end of this month. We will post the beta release next week.

Thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.