Click here to Skip to main content
Click here to Skip to main content

TreeView with ContextMenu using AJAX.NET

, 7 Dec 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
This is a sample which demonstrates usage of AJAX.NET Webservices and UpdatePanel

Introduction

This is the sample code which uses AJAX.NET and JavaScript to build treeview on the fly. It allows to add, edit and delete tree nodes. It also demonstrates how to using UpdatePanel to refresh from the client side.

Background

If we want to generate a treeview which gives us more flexibility and control in each part of the functionality, then we can use this code.

Using the Code

Pre-requisite for this code is VS2005, SQL2000 and AJAX.NET (with DLL System.Web.Extensions, Version=1.0.61025.0). Please use the DB script available in App_Data folder which creates the table and stored procedure required for this demo.

We need to define a DIV place holder for Treeview so that it will not stretch or generate scroll bars when the tree grows:

<div style="height:200px; width:300px; overflow-y:scroll;"></div> 

We need a Root node from where we can start building our tree, this is not editable and deletable. This is the only static node and rest of the children are going to be of the same structure and will be included on the fly. "displayMenu(0, 'Root')" displays the context menu, "0" represents the categoryid or treenode DB ID. It will be greater than 0 (Zero) in case of child nodes. Rest of the processing will be the interaction of webservice and updating the Grid.

<table width="100%" id="tblRoot">
            <tr valign='top'>
                <td width="20px"><img src="Images/Plus.gif" 
		id="img_1" title="Expand" 
                   border="0" onClick="CollapseOrExpand(this, 0, 'Root');"/></td>
                <td oncontextmenu="displayMenu(0, 'Root');return false;">Root</td>
            </tr>
</table>

The below code is required to call the webservice from the client side:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/TreeViewWS.asmx" />
    </Services>
</asp:ScriptManager>

To update the gridview when we make any modifications to the grid, we need to refresh the updatepanel in which we included the gridview. This can be triggered by using the following JavaScript code.

__doPostBack(HdnCurrentFileID, '');

As we already have triggers in updatepanel for this hidden variable, this will postback the panel and refresh the grid.

Points of Interest

The most fun and worst part is handling the JavaScript errors that we will get while coding, especially when our web method is throwing exceptions, use the "debugger" keyword to quickly debug the JavaScript code.

Generating the context base and passing the respective node details like Id, Desc will be fun.

Last but not least, AJAX Webservice call and updatepanel which refreshes the grid will be worth mentioning as it eases a lot of the coding effort.

HATS OFF TO AJAX! 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jithendra R
Software Developer
India India
No Biography provided

Comments and Discussions

 
Questiongreat Pinmemberphongsun0110-Feb-12 6:19 
GeneralErrror PinmemberPintu paraliya31-Jan-10 20:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411023.1 | Last Updated 8 Dec 2007
Article Copyright 2007 by Jithendra R
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid