Thursday, August 30, 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 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.....

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



2 comments:

Anonymous said...

Good for people to know.

Wind Sailor said...

All the events are seems to be on server side, even if u use ajax still the page gets postback.Have u tried it using javascript.I am sure that click event for the dropdown can be handled in javascript, so u can show/hide the treeview. If there is any clientside event for treeview then u can assign the selected value to the dropdrown here itself, not postback is needed. Have u tried this?. Is it possible??