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.....

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




2 comments:

Anonymous 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).

Anonymous said...

Thanks it is help ful