C# .NET - Trre List View - Asked By stefan on 11-Nov-11 02:46 AM

Hi All
I have a quick question. Can anyone help me with populating a tree list view and if it is possible to display photos of the employees in the tree list view next to there names
Thanks for the help

All the Best
Stefan
Jitendra Faye replied to stefan on 11-Nov-11 02:55 AM

Each item in a tree-view control can have four bitmapped images associated with it.

  • An image, such as an open folder, displayed when the item is selected.
  • An image, such as a closed folder, displayed when the item is not selected.
  • An overlay image that is drawn transparently over the selected or nonselected image.
  • A state image, which is an additional image displayed to the left of the selected or nonselected image. You can use state images, such as checked and cleared check boxes, to indicate application-defined item states.

By default, a tree-view control does not display item images. To display item images, you must create image lists and associate them with the control. For more information about image lists, see http://msdn.microsoft.com/en-us/library/windows/desktop/bb761389%28v=vs.85%29.aspx.





http://www.mobzystems.com/code/transparent-state-images-in-tree-views/
http://msdn.microsoft.com/en-us/library/windows/desktop/bb760017%28v=vs.85%29.aspx#tv_image_lists

stefan replied to Jitendra Faye on 11-Nov-11 03:06 AM
Would it be possible to display custom images of employees next to there names?
Jitendra Faye replied to stefan on 11-Nov-11 03:22 AM

Yes, you can display like this-


private void FillTreeView()
{
	// Load the images in an ImageList.
	ImageList myImageList = new ImageList();
	myImageList.Images.Add(Image.FromFile("Default.gif"));
	myImageList.Images.Add(Image.FromFile("SelectedDefault.gif"));
	myImageList.Images.Add(Image.FromFile("Root.gif"));
	myImageList.Images.Add(Image.FromFile("UnselectedCustomer.gif"));
	myImageList.Images.Add(Image.FromFile("SelectedCustomer.gif"));
	myImageList.Images.Add(Image.FromFile("UnselectedOrder.gif"));
	myImageList.Images.Add(Image.FromFile("SelectedOrder.gif"));
	
	// Assign the ImageList to the TreeView.
	myTreeView.ImageList = myImageList;
	
	// Set the TreeView control's default image and selected image indexes.
	myTreeView.ImageIndex = 0;
	myTreeView.SelectedImageIndex = 1;

	/* Set the index of image from the 
	ImageList for selected and unselected tree nodes.*/
	this.rootImageIndex = 2;
	this.selectedCustomerImageIndex = 3;
	this.unselectedCustomerImageIndex = 4;
	this.selectedOrderImageIndex = 5;
	this.unselectedOrderImageIndex = 6;
	
	// Create the root tree node.
	TreeNode rootNode = new TreeNode("CustomerList");
	rootNode.ImageIndex = rootImageIndex;
	rootNode.SelectedImageIndex = rootImageIndex;
      
	// Add a main root tree node.
	myTreeView.Nodes.Add(rootNode);

	// Add a root tree node for each Customer object in the ArrayList.
	foreach(Customer myCustomer in customerArray)
	{
		// Add a child tree node for each Order object.
		int countIndex=0;
		TreeNode[] myTreeNodeArray = new TreeNode[myCustomer.CustomerOrders.Count];
		foreach(Order myOrder in myCustomer.CustomerOrders)
		{
			// Add the Order tree node to the array.
			myTreeNodeArray[countIndex] = new TreeNode(myOrder.OrderID,
			  unselectedOrderImageIndex, selectedOrderImageIndex);
			countIndex++;
		}
		// Add the Customer tree node.
		TreeNode customerNode = new TreeNode(myCustomer.CustomerName,
			unselectedCustomerImageIndex, selectedCustomerImageIndex, myTreeNodeArray);
		myTreeView.Nodes[0].Nodes.Add(customerNode);
	}
}


Try this code and let me know.
Anoop S replied to stefan on 11-Nov-11 03:38 AM
Use Custom Collapse and Expand Images

You can use images to indicate an expandable node, a collapsible node, or a node that does not expand or collapse. You can create images for this purpose in most graphics programs.

To assign an image to a particular node type, you assign the location of the image file to be used to the corresponding property. These properties include http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.treeview.expandimageurl.aspx, http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.treeview.collapseimageurl.aspx, and http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.treeview.noexpandimageurl.aspx. The following example sets these properties to custom images in the Images directory of the Web site.

    <asp:TreeView ID="TreeView1" 
        runat="server" 
        DataSourceID="XmlDataSource1"
            ExpandImageUrl="~/Images/ExpandAll.gif"
            CollapseImageUrl="~/Images/CollapseAll.gif"
            NoExpandImageUrl="~/Images/stop.gif">
    </asp:TreeView>

refer this for more details ->Using Images with the TreeView Control
http://msdn.microsoft.com/en-us/library/ms366759.aspx
Kirtan Patel replied to stefan on 11-Nov-11 01:08 PM
here is code how you can use TreeView control to populate Images and Text Info ie Employee Name etc
you need to use ImageList control to load Images in TreeView

ImageList il = new ImageList();
private void TreeViewDemo_Load(object sender, System.EventArgs e)
{
  // image list you can use Employee photo here
  il.Images.Add(new Icon("KEY04.ICO"));
  il.Images.Add(new Icon("ARW06LT.ICO"));
  il.Images.Add(new Icon("LITENING.ICO"));
  il.Images.Add(new Icon("ARW06UP.ICO"));
  treeView1.ImageList = il ;
  
  // Create the RootNode
  TreeNode rootNode = treeView1.Nodes.Add("USA");
  rootNode.ImageIndex =0 ;
 
  // Create the Child nodes for the root
  TreeNode states1 = rootNode.Nodes.Add("New York");
  states1.ImageIndex =1 ;
  TreeNode states2 = rootNode.Nodes.Add("Michigan");
  states2.ImageIndex =1 ;
  TreeNode states3 = rootNode.Nodes.Add("Wisconsin");
  states3.ImageIndex =1 ;
  TreeNode states4 = rootNode.Nodes.Add("California");
  states4.ImageIndex =1 ;
 
  // Create siblings nodes for the Child nodes
  TreeNode child = states1.Nodes.Add("Rochester");
  child.ImageIndex = 2 ;
  child =states1.Nodes.Add("new York");
  child.ImageIndex = 2 ;
  child =states1.Nodes.Add("Albany");
  child.ImageIndex = 2 ;
 
  child = states2.Nodes.Add("Detroit");
  child.ImageIndex = 2 ;
  child =states2.Nodes.Add("Ann Arbor");
  child.ImageIndex = 2 ;
  child =states2.Nodes.Add("Lansing");
  child.ImageIndex = 2 ;
 
  child = states3.Nodes.Add("Milwaukee");
  child.ImageIndex = 2 ;
  child =states3.Nodes.Add("Madison");
  child.ImageIndex = 2 ;
  child =states3.Nodes.Add("La Cross");
  child.ImageIndex = 2 ;
  
  child = states4.Nodes.Add("Los Angeles");
  child.ImageIndex = 2 ;
  child =states4.Nodes.Add("San Fransisco");
  child.ImageIndex = 2 ;
  child =states4.Nodes.Add("San Diego");
  child.ImageIndex = 2 ;
}