Hello everyone!
I have a modal popup where OkControl is TreeView
<cc1:ModalPopupExtender ID="BaseModalPopupExtender" runat="server" CancelControlID="CancelButton" DropShadow="true" OkControlID="CourseFSTreeView" OnCancelScript="onCancel()" OnOkScript="onOk()" PopupControlID="BaseCoursePanel" PopupDragHandleControlID="BaseCoursePanelHeader" TargetControlID="dummy1"> </cc1:ModalPopupExtender>
So, when I select one of it's nodes OnOkCript is fired. And within it I need to retrieve a name of selected node. I can find the treeview control, but what to do next I don't know.
function onOk() { var tvResult = document.getElementById('<%=CourseFSTreeView.ClientID%>'); window.alert (tvResult.uniqueNumber);}I've also noticed, that each node has unique value of property uniqueNumber. May be it is possible to use it in order to find node name?
Any help is appreciated... Thanks in advance!
No suggestions?
Hi Wazzzuup,
As we know, TreeView control has no corresponding object Modal on client side ,so it is a hard way to implement what you want. However , my solution is use a UpdatePanel. When click, the UpdatePanel will post an asynchronous postback automatically. So we can get the text easily on the server side. Here is the sample.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void CourseFSTreeView_SelectedNodeChanged(object sender, EventArgs e) { TextBox1.Text = CourseFSTreeView.SelectedNode.Text; }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TreeView ID="CourseFSTreeView" runat="server" OnSelectedNodeChanged="CourseFSTreeView_SelectedNodeChanged"> <Nodes> <asp:TreeNode Text="My Computer"> <asp:TreeNode Text="Favorites"> <asp:TreeNode Text="News"> <asp:TreeNode Text="MSN" /> <asp:TreeNode Text="MSNBC News" /> </asp:TreeNode> <asp:TreeNode Text="Technology"> <asp:TreeNode Text="Microsoft" /> <asp:TreeNode Text="ASP.NET" /> <asp:TreeNode Text="GotDotNet" /> <asp:TreeNode Text="MSDN" /> </asp:TreeNode> <asp:TreeNode Text="Shopping"> <asp:TreeNode Text="MSN Shopping" /> <asp:TreeNode Text="MSN Autos" /> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="City Links"> <asp:TreeNode Text="MapPoint" /> <asp:TreeNode Text="MSN City Guides" /> </asp:TreeNode> <asp:TreeNode Text="Music Links"> <asp:TreeNode Text="MSN Music" /> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" Text="Cancel" /> </asp:Panel> <asp:Button ID="Button1" runat="server" Text="Button" /><ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="myMPE1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="Button2" BackgroundCssClass="modalBackground"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript" language="javascript"> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler(sender, args){ alert($get("<%=TextBox1.ClientID%>").value); $find("myMPE1").hide(); } </script> </form></body></html>We suggest that you wholly copy my source code and have a test.
I hope this help.
Best regards,
Jonathan
Hi there..
Just a few weeks ago, I tried to do the exact same thing, and well blah blah, here is a simple workaround:
you can put an iframe (with no borders, no margins, etc whatever fits your needs) inside the modal popup panel and have your treeview inside that.
Thank you very much! It works!
I only wanted to know more about this call:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
what does it mean? I would appreciate if You give me reference to article(s) describing this and similar methods and and their use. And also I'm asking You to check following thread of mine connected with TreeView. Thanks!
Hi Wazzzuup,
This sentence will make Javascript function "EndRequestHandler" be called when the asynchronous postback is finished. For more details, please visithere.
Best regards,
Jonathan
Hello Again!
I'm facing the next problem now connected with issue of this topic:
I've placed additional updatepanels object on this page and now the code in EndRequestHandler function fires after asynchronus postback of every update panel, not only of that is connected with my treeview. That is logically right. But I need to execute this code only after particular updatepanel postback. How could I do this? Is it possible to check, what updatepanel sended asynchronous postback? and do something like this
<scripttype="text/javascript"language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args){if (postback caused by UpdatePanel1)
{
execute my code
}
}
I've ran through properties of sender and args objects and didn't find what I need.
Hi Wazzzuup,
function EndRequestHandler(sender, args){
var requestStr = args._response._webRequest._body;
if (requestStr.indexOf("UpdatePanel1")>-1 ){ //UpdatePanel }
}
I hope this help.
Best regards,
Jonathan
Cool, it works!!!
And I would never found out this by myself, because of these properties that you use are not saying for themselves. Could you again refer me to some kind of theory that describes what is going on in this code? I just want to understand more clearly this "asynchronous" stuff...
Hi Wazzzuup,
What I do is that add debugger to the code like this.
function EndRequestHandler(sender, args){
var requestStr = args._response._webRequest._body;
debugger;
if (requestStr.indexOf("UpdatePanel1")>-1 ){ //UpdatePanel }
}
Now you can find out all the properties and functions of args with the help of Visual Studio.
I hope this help.
Best regards,
Jonathan
I know this trick with JS debugger and do this always too at first, before asking on the forum. But I mean, that this solution is hard to find even in debugger, because it is hidden so deep (third level) and moreover - in hierarchy of objects (._response._webRequest._body) whatching on that is hard to suppose that thay could be responsible for information I need. Thus, I want to say that this solution could be offered by one, who understands this technology well and asking (if it possible) some sources that covers this question.
No comments:
Post a Comment