Friday, September 14, 2007

Tree View in Dropdownlist

We all are very much aware of the DropDownList(a server control available in asp .net), the way it functions and the way the data are listed in it.

eg .,
There is another server control available which is < asp:TreeView > which gets rendered something like this


eg.,


I was wondering whether it is possible to have this tree view inside the dropdown. To start with, I tried binding the dropdown with the treeview and then with xml having various sub levels but I couldn't make up.


So I tried combining the available controls which will produce the look and feel of a drop down box with a tree view. A textbox, button(probably loaded with down arrow image) and a treeview were chosen. To make it behave like a dropdown, the visibility of the div which contains the tree view can be controlled.


eg.,

protected void downArrowButton_Click(object sender, EventArgs e)
{
treeViewDiv.Visible = true;
}


Now, we have a list of items displayed in a tree like structure when the down arrow button is clicked. And when any option is selected the text box should be loaded with it and the tree structure should not be visible in order to make it behave like a drop down box. The code goes something like this,


protected void stateTreeView_SelectedNodeChanged(object sender, EventArgs
e)
{
if (sender.GetType().ToString().EndsWith("TreeView"))
{
cityTextBox.Text = stateTreeView.SelectedNode.Text;
treeViewDiv.Visible = false;
}
}


This code can further be customised as per one's requirement and can even Ajaxify certain things for better user experience.


The final output which i got was something similar to this,




Makkals, this was my long time plan(to post some technical thing). Kindly bare with me.....

அரசியல்ல இதெல்லாம் சகஜமப்பா!!!!!!




3 comments:

Hemal said...

I tried to build similar control with combobox with a treeview using method suggested by you.

What my requirement demands is i should be able to give user a choice to add many such control on a page.

Once i try to accomplish this the treeview control stops funtioning and starts giving javascript errors.(This has something to do with callback functionality of treeview which fires when you expand nodes).

ashis said...

Thanks it is help ful

buy wow gold said...

When Wow Gold wolf finally found the wow gold cheap hole in the chimney he crawled cheap wow gold down and KERSPLASH right into that kettle of water and that was cheapest wow gold the end of his troubles with the big bad wolf.
game4power.
The next day the Buy Wow Goldlittle pig invited hisbuy gold wow mother over . She said "You see it is just as mygamegoldI told you. The way to get along in the world is to do world of warcraft gold things as well as you can." Fortunately for that little pig, he buy cheap wow gold learned that lesson. And he just k4gold lived happily ever after!.