Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[mlcbtaylor]

I'm evaluating this treeview for my company, but I'm having trouble getting NodeControlContainer to work.  Can I get a simple example of a treeview with several columns and a series of 3 buttons spanning the bottom of the node?  Even better if the buttons are only visible when hovering/selecting the node.

Everything I try doesn't give errors, but the buttons just don't appear!

Thanks

[Ruslan]

Hello,

That`s pretty simple. Use the code below (note that you can use Flexible TreeView VS designer. The code below creates the tree manually to be easy to understand):

Code: [Select]

// add columns.
      TreeColumn col1 = new TreeColumn("1", 100);
      TreeColumn col2 = new TreeColumn("2", 100);
      TreeColumn col3 = new TreeColumn("3", 100);
      tree.Columns.Add(col1);
      tree.Columns.Add(col2);
      tree.Columns.Add(col3);

// add NodeTextBox node control to display bottom row with node text.
      new NodeTextBox().AttachTo(tree).AttachToColumn(col1);

// add NodeControlContainer node control to display our button below node text (second row).
      var ctrlContainer = new NodeControlContainer();
      ctrlContainer.AttachTo(tree);
      ctrlContainer.AttachToColumn(col1);
      ctrlContainer.Wrap = true;
      ctrlContainer.ColumnSpan = 3;
// define node states for which this node control will be shown.
      ctrlContainer.Visibility = eObjectVisibility.FocusedNode | eObjectVisibility.HotNode;

// add nodes. Note that the  class has the Container property to which the NodeControlContainer is bound (DataFieldName) by default.
      for (int i = 0; i < 10; i++)
      {
        var container = new ControlContainer(GetThreeButtonsControl());
        var node = new NodeWithControl(i.ToString(), container);
        node.AttachTo(tree);
      }

// enable node dynamic height.
      tree.Options.Node.AutoNodeHeight = true;

// create an user control with three buttons inside to show inside a node.
    Control GetThreeButtonsControl()
    {
      var panel = new Panel();

      var b1 = new Button();
      b1.Text = "First";
      b1.Location = Point.Empty;

      var b2 = new Button();
      b2.Text = "Second";
      b2.Location = new Point(b1.Right, 0);

      var b3 = new Button();
      b3.Text = "Third";
      b3.Location = new Point(b2.Right, 0);

      panel.Controls.Add(b1);
      panel.Controls.Add(b2);
      panel.Controls.Add(b3);

      panel.Size = new Size(b1.Width * 3, b1.Height);
      return panel;
    }
Please note that the current Flexible TreeView version has a bug with node selection when it shows the control container: if you click on the button of two nodes simultaneously the first node stay selected while should not. This bug will be fixed in the forthcoming release.

[mlcbtaylor]

Thanks for that.  I replaced the NodeControlContainer with a NodeExpandableControlContainer to get the buttons to only appear when selected.  However, the nodes are quite tall even when the buttons are not visible.  Is there a way to get the non selected nodes a bit closer together?
I've attached a picture to illustrate.

Thanks again.

[Ruslan]

Here is the fixed code with ExpandableControlContainer:

Code: [Select]

//      new NodeTextBox().AttachTo(tree).AttachToColumn(col1);
     
      var ctrlContainer = new NodeExpandableControlContainer();
      ctrlContainer.AttachTo(tree);
      ctrlContainer.AttachToColumn(col1);
//      ctrlContainer.Wrap = true;
      ctrlContainer.ColumnSpan = 3;
//      ctrlContainer.Visibility = eObjectVisibility.FocusedNode | eObjectVisibility.HotNode;

      for (int i = 0; i < 10; i++)
      {
        var container = new ControlContainer(GetThreeButtonsControl());
        var node = new NodeWithControl(i.ToString(), container);
        node.AttachTo(tree);
      }

      tree.Options.Node.AutoNodeHeight = true;
      tree.Options.Selection.HoverStyle = eHoverStyle.SoftSelect;
Please note that the NodeControlContainer was used here to display the node first row (text, NodeTextBox) within the first column bounds while buttons span all three columns. With ExpandableControlContainer both the title (text) and buttons will span all columns.

[mlcbtaylor]

Excellent.  Thank you.