|
|
Rank: Member
Groups: Member
Joined: 3/19/2008
Posts: 14
|
I have just bought the kit with EO.Web objects, Like the functions very much but I have some problems getting started. I want server-side events to trigger automatically when I click on a node, rename or drag & drop nodes. I successfully achieved this now when renaming a node, drag & drop will probably work on the same way but I have some problem with the OnItemClick event. this is my code:
Code: C#
protected void Page_Load(object sender, EventArgs e)
{
List<ForumCategory> fmcList = ForumCategoryFacad.GetForumCategoryList();
DataSet mainDs = CreateDataSet(fmcList);
// Specify the data source. Here we bind to the Menu. You
// can also bind to any sub menu.
TreeView1.DataSource = mainDs;
// Bind the "Website" column in the table to
// "NavigateUrl" property.
EO.Web.DataBinding binding = new EO.Web.DataBinding();
binding.DataField = "FolderName";
binding.Property = "Text-Html";
TreeView1.Bindings.Add(binding);
// Populate from the data source (mainTable);
TreeView1.DataBind();
}
protected void CallbackItemRenamed_Execute(object sender, CallbackEventArgs e)
{
LogFacad.WriteToLog(FPLogMessage.MessageType.DEBUG, "CallbackItemRenamed_Execute");
}
protected void CallbackItemClicked_Execute(object sender, CallbackEventArgs e)
{
LogFacad.WriteToLog(FPLogMessage.MessageType.DEBUG, "CallbackItemClicked_Execute");
}
protected void TreeView1_ItemRenamed(object sender, TreeNodeRenameEventArgs e)
{
string text = e.Node.Text;
LogFacad.WriteToLog(FPLogMessage.MessageType.WARNING, "item renamed is fired, text: " + text);
}
protected void TreeView1_ItemClicked(object sender, NavigationItemEventArgs e)
{
LogFacad.WriteToLog(FPLogMessage.MessageType.WARNING, "item click is fired");
}
protected void BtnTestSave_Click(object sender, EventArgs e)
{
LogFacad.WriteToLog(FPLogMessage.MessageType.DEBUG, "TestSave button is fired");
}
Code: HTML/ASPX
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function TreeView_OnItemXXX(treeView, srcNode, destNode)
{
window.setTimeout("__doPostBack('<%=btnTestSave.ClientID%>', '');", 10);
}
function executeCallbackItemRenamed() {
eo_Callback('<%=CallbackItemRenamed.ClientID%>');
}
function executeCallbackItemClicked() {
eo_Callback('<%=CallbackItemClicked.ClientID%>');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptMgr" EnablePartialRendering="true" EnableScriptGlobalization="true" />
<div>
<eo:CallbackPanel ID="CallbackItemRenamed" runat="server" OnExecute="CallbackItemRenamed_Execute" ClientSideAfterExecute="TreeView_OnItemXXX" />
<eo:CallbackPanel ID="CallbackItemClicked" runat="server" OnExecute="CallbackItemClicked_Execute" ClientSideAfterExecute="TreeView_OnItemXXX" />
<eo:TreeView runat="server" id="TreeView1" Width="200px" ControlSkinID="None" Height="250px"
AllowDragDrop="True" AllowEdit="true"
ClientSideOnNodeRename="executeCallbackItemRenamed"
OnItemRenamed="TreeView1_ItemRenamed"
ClientSideOnItemClick="executeCallbackItemClicked"
OnItemClick="TreeView1_ItemClicked"
CausesValidation="false">
<LookNodes>
<eo:TreeNode ImageUrl="00030301" 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;"
CollapsedImageUrl="00030301" ItemID="_Default" NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
ExpandedImageUrl="00030302" 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>
</eo:TreeView>
<asp:UpdatePanel ID="uplTemp" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnTestSave" runat="server" OnClick="BtnTestSave_Click" Text="Test" CausesValidation="false" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Is this the way to do this? It seems a little bit complicated but this is the only way achieved it. the above code doesn't fire TreeView1_ItemClicked. I tried to add RaisesServerEvent="true", when I did that the TreeView1_ItemClicked actually fires (I can see it in my logs) but I got a javascript error: http://www.korbergschottenius.se/error1.jpgSo my question is if I'm doin this the way it's supposed to be done? with the callback element and everything or if theres a better way, and then I of course wonder why I get the error?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Hi,
You should use RaisesServerEvent. The way that you use CallbackPanel is wrong. You should
1. Use one CallbackPanel only;
2. Place the TreeView inside the CallbackPanel;
3. Remove all those ClientSideOnxxx handler and rely on server side events only;
4. Set the TreeView as a trigger of the CallbackPanel;
Also you should not populate the TreeView everytime in your Page_Load. You should only do it when the page is not postback:
if (!Page.IsPostBack)
{
.... populate your treeview
}
Otherwise you are wiping out any changes made on the client every time.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 3/19/2008
Posts: 14
|
oh, Thanks, Now it looks much more neat. But now I can't get renaming to work, When I double click a item it doesn't change itself to a textbox. item click and item move works like a charm. heres my code now
Code: C#
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
List<ForumCategory> fmcList = ForumCategoryFacad.GetForumCategoryList();
DataSet mainDs = CreateDataSet(fmcList);
// Specify the data source. Here we bind to the Menu. You
// can also bind to any sub menu.
TreeView1.DataSource = mainDs;
// Bind the "Website" column in the table to
// "NavigateUrl" property.
EO.Web.DataBinding binding = new EO.Web.DataBinding();
binding.DataField = "FolderName";
binding.Property = "Text-Html";
TreeView1.Bindings.Add(binding);
// Populate from the data source (mainTable);
TreeView1.DataBind();
}
}
protected void TreeView1_ItemRenamed(object sender, TreeNodeRenameEventArgs e)
{
LogFacad.WriteToLog(FPLogMessage.MessageType.WARNING, "item renamed is fired");
}
protected void TreeView1_ItemClicked(object sender, NavigationItemEventArgs e)
{
LogFacad.WriteToLog(FPLogMessage.MessageType.WARNING, "item click is fired");
}
protected void TreeView1_ItemMoved(object sender, TreeNodeMovedEventArgs e)
{
LogFacad.WriteToLog(FPLogMessage.MessageType.WARNING, "item moved is fired");
}
Code: HTML/ASPX
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:CallbackPanel ID="Callback1" runat="server" Triggers="{ControlID:TreeView1;Parameter:}">
<eo:TreeView runat="server" id="TreeView1" Width="200px" ControlSkinID="None" Height="250px"
RaisesServerEvent="true" AllowDragDrop="True" AllowEdit="true"
OnItemRenamed="TreeView1_ItemRenamed"
OnItemMoved="TreeView1_ItemMoved"
OnItemClick="TreeView1_ItemClicked"
CausesValidation="false">
<LookNodes>
<eo:TreeNode ImageUrl="00030301" 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;"
CollapsedImageUrl="00030301" ItemID="_Default" NormalStyle-CssText="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: black; BORDER-TOP-STYLE: none; PADDING-TOP: 1px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none"
ExpandedImageUrl="00030302" 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>
</eo:TreeView>
</eo:CallbackPanel>
</div>
</form>
</body>
</html>
if you wanne try it out live, heres the url http://dev.brightville.se/rsAdmin/tmpFmc.aspxwhat am I missing now?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Hi,
Check your version. Make sure you have the latest build (5.0.44). I believe this is a bug that has been recently fixed.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 3/19/2008
Posts: 14
|
I have version 5.0.44.2 on the eo.web.dll
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,088
|
Hi,
Try to set RaisesServerEvent to false. You won't be able to have RaisesServerEvent and label editing at the same time because whenver you click a node, RaisesServerEvent causes the page to immediately posts back (through the Callback), at which time the whole TreeView is reloaded.
In order to use label editing, you must have something else rather than the TreeView to posts back the page, for example, a submit button. Another advantage of doing it this way is that you can edit multiple tree nodes before submitting. When that occurs, your TreeView1_ItemRenamed will be called multiple times during one postback.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 3/19/2008
Posts: 14
|
ok thanks. But the actual thing I'm trying to do here is to catch the selected node after a post-back. It doesnt need to fire every time user click on a node. So I just figured the obvious
Code: C#
protected void BtnTest_Click(object sender, EventArgs e)
{
Response.Write("selected node: " + TreeView1.SelectedNode.Text);
}
So easy, sorry I didnt try this before.
|
|