Free ASP.NET Hosting – HostForLIFE.eu :: Building Tree Picker Dialog using jQuery UI and TreeView Control

Selecting things from dialogs and data represented as trees are very common things we see in business applications. In this posting, I will show you how to use ASP.NET TreeView control and jQuery UI dialog component to build picker dialog that hosts tree data.

BigTreeBuilding Dialog Box

We’re gonna use jQuery UI to solve the question related to dialogs. If you are not sure how to include jQuery UI to your page then take a look at source code.Then you can add some jQuery based JavaScript to you page head to get dialog and button work:

 Here is the mark-up of your form’s main content area:

 Notice that this mark-up is very compact for what you will achieve. If you are going to use it in some real-world application then this mark-up gets even shorter, I am sure that in most cases the data you display in TreeView comes from database or some domain specific data source.

Hacking TreeView

TreeView needs some little hacking to make it work as client-side component. For more advanced scenarios, I suggest you to use some jQuery based tree component. This example works for you if you need something done quickly.

Number one problem is getting over the postbacks because in your scenario postbacks only screw up things. Also you need to find a way how to let our client-side code to know that something was selected from TreeView.

You can solve these to problems at same time: let’s move to JavaScript links. You have to make sure that when user clicks the node then information is sent to some JavaScript function. Also you have to make sure that this function returns something that is not processed by browser. You can use this function:

 Notice that this function returns undefined. You get the better idea why I did so if you look at server-side code that corrects NavigateUrl properties of TreeView nodes.

Now you have TreeView that renders nodes the way that postback doesn’t happen anymore. Instead of postback our callback function is used and provided with selected values. In this function we are free to use node text and value as you like.

Here are the result:

tree pickerYou can aplly some more bells and whistles and sample data to source code to make your sample more informative.

HostForLIFE.eu Free ASP.NET Hosting

Try their Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of their Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.

hostforlife banner

Leave a Reply

Your email address will not be published.