|
|
Rank: Newbie
Groups: Member
Joined: 1/17/2012
Posts: 4
|
Hi guys.
I'm going to keep this simple, so lets say I have a treeview with 8 items.
Item0: A
Item1: B
Item2: C
Item3: D
Item4: E
Item5: F
Item6: G
Item7: H
Item8: I
I have enabled drag'n drop and drag item6: G between A and B
so new list should be:
Item0: A
Item1: G
Item2: B
Item3: C
Item4: D
Item5: E
Item6: F
Item7: H
Item8: I
Here is the issue:
On postback (ive checked and doublechecked and even on page load)
I run the following lines of code
var lst = new List<string>();
foreach (TreeNode webnode in webtree.Nodes)
{
lst.Add(webnode.Text);
}
When I review the list, or if I break the code before any code at all is ran
I constantly get this order:
Item0: A
Item1: F
Item2: G
Item3: B
Item4: C
Item5: D
Item6: E
Item7: H
Item8: I
And I'm really twisting my head on how the F item managed to move position, I just changed the position of G.
Any clues of why this is occurring would be greatly appreciated!
|
|
Rank: Newbie
Groups: Member
Joined: 1/17/2012
Posts: 4
|
Okay, after some investigation ive found out that
ClientSideOnItemClick calls a JS that eventually does a postback, somehow this postback is the root cause
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
It should be OK for you to trigger post back inside ClientSideOnItemClick. We tested that at here and it appears to work fine. If you wish us to look further, you can try to isolate the problem into a small test page. Once we have that we will try to run it here. As soon as we can duplicate the problem in our environment, we should be able to find out the root cause.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 1/17/2012
Posts: 4
|
Hi. Thanks for following up, i've isolated the problem as much as I can and it seems that a updatepanel is the actual root cause. In my original design, you would select an item and the updatepanel would update with information regarding that item. The NoPush button is in order to get the updatepanel to update, normally it would be hidden With the following sample, you should be able to reproduce the issue. Ie. Just take item 8 and drag it between 1 and 2 and push Save HTML <%@ Register assembly="EO.Web" namespace="EO.Web" tagprefix="eo" %> Quote:<body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <eo:TreeView ID="TreeViewControl" runat="server" AllowDragDrop="True" AllowDragReordering="True" AutoSelectSource="ItemClick" ControlSkinID="None" ClientSideOnNodeRename="treeview_rename" ClientSideOnDragDrop="treeview_move" AllowEdit="True" ViewStateMode="Enabled" ClientSideOnItemClick="treeview_click"> <TopGroup Style-CssText="border:none;cursor:hand;font-family:Arial;font-size:12pt;padding:2px;" /> <LookNodes> <eo:TreeNode ItemID="_Default" DisabledStyle-CssText="background-color:transparent;border:none;color:gray;padding:1px;" NormalStyle-CssText="color:#333333; border:none; background-color: transparent;padding:1px;" SelectedStyle-CssText="background-color:#F9AC00;border:#999999 solid 1px;color:White;padding:0px"> </eo:TreeNode> </LookNodes> </eo:TreeView> <asp:Button ID="tbsubmitbtn" runat="server" CssClass="hidden" Text="NoPush" /> <asp:UpdatePanel ID="datapanel" runat="server"> <ContentTemplate> a </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="tbsubmitbtn" EventName="Click" /> </Triggers> </asp:UpdatePanel> <asp:Button ID="btn_save" runat="server" CssClass="textbox submitbutton" onclick="btn_save_Click" Text="Save" /> </form> </body> CodeBehind C# Quote:
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack) { return; }
genWebTree();
genPostBackJs();
}
private void genWebTree()
{
for (int i = 1; i < 10; i++)
{
var node = new EO.Web.TreeNode() { Text = i.ToString(), Value = i.ToString(), AllowDrag = true, AllowEdit = true };
TreeViewControl.Nodes.Add(node);
}
}
private void genPostBackJs()
{
if (Page.ClientScript.IsClientScriptBlockRegistered("selval")) return;
var jScript = new StringBuilder();
jScript.Append("<script language='javascript' type='text/javascript'>");
jScript.Append("function treeview_click(e, node) {");
jScript.Append("__doPostBack('" + tbsubmitbtn.ClientID + "', '');}");
jScript.Append("</script>");
Page.ClientScript.RegisterClientScriptBlock(GetType(), "click", jScript.ToString());
}
protected void btn_save_Click(object sender, EventArgs e)
{
var lst = (from TreeNode n in TreeViewControl.Nodes select n.Text).ToList();
}
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Yes. That will definitely cause problem. The TreeView works by keeping a list of change logs (something like X was moved after Y) on the client side, then merge that data into view state when the page posts back, at which point the client change logs are cleared. When you have an UpdatePanel involved and it triggers a post back WITHOUT reloading the TreeView, the client side change logs are merged into view state but it is NOT cleared on the client side. To solve this problem, you must reload the TreeView (for example, to include the TreeView inside your UpdatePanel) when the page posts back.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 1/17/2012
Posts: 4
|
Hi, thanks for the explanation.
Would there be any other ways around this problem?
When I put the TreeView inside the updatepanel I experience the following:
* On click reloads the TreeView and doesn't expand the node as it should
* When the TreeView reloads you could see the 'blinking'
Normally it would be multiple clicks/minute when browsing through the treeview and this things would really kill the user experience
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Unfortunately we are not aware of any way to get around this. The hard rule is if you want to do a post back, you have to reload the TreeView and there is no way around that rule. So you might want to turn your UpdatePanel based AJAX calls into Web Service based AJAX calls (like the way AutoComplete textbox works). That way your AJAX calls would only be fetching data from the server instead of posting back the form. It's more work but it's more efficient.
Thanks!
|
|