How to give javascript onclick event to an aspdotnet treeview parent node even it has server side event?

Question

_{Wednesday, May 12, 2010 8:17 AM}

Hi all,

I have developed a web application which contains aspdotnet treeview control. In this treeview control has binded with some database value.. that controls has one parent node and more than one child nodes for each parent node.

my problem is here, when the user clicks the parent node, I need to fire a javascript onclick function before the server side event(SelectedNodeChanged) called..

If I provide javascript to the parnet node when it is binding, then I could not fire the server side event(SelectedNodeChanged).

How to provide onclick javascript event for parent node in treeview control even the parent node has SelectedNodeChanged event.

thanks

r.e

All replies (6)

_{Tuesday, May 18, 2010 10:36 AM ✅Answered}

Hi Eswaran_MCA,

If we build the node with the onclick=”yourfunction()” code, the default onclick event which is rendered to call the server side event will be overridden.

For example, if we define the TreeView’s server side SelectedChangedEvent, the rendered element of TreeNode is like this:
*<TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD><IMG alt="" src="/WebResource.axd?d=08u6CDnFgocjx9dTO150kFe1XaZTLcMiHFkr6bkW3001&t=633802945995006876"></TD>
<TD style="WHITE-SPACE: nowrap">
**<A id=TreeView2t2 onclick="TreeView_SelectNode(TreeView2_Data, this,'TreeView2t2');" href="javascript:__doPostBack('TreeView2','sasd')">asd</A>
*</TD>
</TR>
</TBODY>
</TABLE>

If we write the Node’s onclick event, the element would be like this:
*<TABLE style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD><IMG alt="" src="/WebResource.axd?d=08u6CDnFgocjx9dTO150kFe1XaZTLcMiHFkr6bkW3001&t=633802945995006876"></TD>
<TD style="WHITE-SPACE: nowrap">
**<A id=TreeView2t2 onclick="yourFunction();" href="">asd</A>
*</TD>
</TR>
</TBODY>
</TABLE>

Which means, there is no javascript __doPostBack(‘TreeViewID’,’TreeNodeValue’) function to call its server side function.

So, to achieve your goal about firing the Server side event after the client event,  we need to add a doPostBack(‘TreeViewID’,’TreeNodeValue’) function.

In the other hand, you can also add onclick event on the TreeView control instead of single TreeNode like this:

        <asp:TreeView ID="TreeView2" runat="server" ShowLines="true" onclick="clientClick();">
            <Nodes>
                <asp:TreeNode Text="123" Value="123" Selected="true" />
                <asp:TreeNode Text="qwe" Value="qwe" />
                <asp:TreeNode Text="asd" Value="asd" />
                <asp:TreeNode Text="zxc" Value="zxc" />
            </Nodes>
        </asp:TreeView>

        <script type="text/javascript">
            function clientClick() {
                alert("client side clicked.");
            }

        </script>

        <script runat="server">
        
            Protected Sub TreeView2_SelectedNodeChanged(ByVal sender As Object, ByVal e As EventArgs) Handles TreeView2.SelectedNodeChanged
                ScriptManager.RegisterStartupScript(Me.Page, GetType(Page), "serverChanged", "alert('server side event.');", True)
            End Sub
        </script>

Have my suggestion helped?

Best regards,

Zhi-Qiang Ni

_{Wednesday, May 12, 2010 8:59 AM}

Hi

Add return true; statement at the end of the javascript function.

_{Thursday, May 13, 2010 6:48 AM}

Hi,

thanks for your reply.. 

I also, tried that way. I mean when I bind the treeview parent node, I have attached a javascript function. So, whenever I click the parent node then it gets called. after the javascript, I need to call the selectedIndex_Changed event. But, that event not called after the javascript function called.

the code like this...

TreeNode root = new TreeNode("<span onclick='javascript:parentNode_OnClicked();'>" + strEmail + " </span>");

_{Thursday, May 13, 2010 7:27 AM}

Hi

Try the following:

TreeNode root = new TreeNode("<span onclick='return javascript:parentNode_OnClicked();'>" + strEmail + " </span>");

And at the end of the javascript function, add return true; statement.

_{Thursday, May 13, 2010 7:54 AM}

Hi,

I have tried this one also,

TreeNode root = new TreeNode("<span onclick='javascript:parentNode_OnClicked(); return true;'>" + strEmail + " </span>");

and I have written javascript function like this

function parentNode_OnClicked() {

return true;

}

but no use, still javascript fires, but not the selectedIndex_changed event nor firing..

this is my aspx codeing

<asp:TreeView ID="treeViewEmail" runat="server" CssClass="treeViewStyle" 

                                                                            NodeStyle-CssClass="userNameNodeStyle" ShowLines="true" 

                                                                            onselectednodechanged="treeViewEmail_SelectedNodeChanged">

                                                                            <SelectedNodeStyle ForeColor="orange" Font-Bold ="true" Font-Italic="true" />

                                                                        </asp:TreeView>

<asp:TreeView ID="treeViewEmail" runat="server" CssClass="treeViewStyle"  NodeStyle-CssClass="userNameNodeStyle" ShowLines="true" 

onselectednodechanged="treeViewEmail_SelectedNodeChanged">

              <SelectedNodeStyle ForeColor="orange" Font-Bold ="true" Font-Italic="true" />

</asp:TreeView>

any other idea pls..

thanks

r.e

_{Thursday, October 7, 2010 6:16 PM}

Hi,

You should set the Treeview property 'SelectedAction' of each node to 'Select' or 'SelectExpand' in order to the postback event be called.