ReoGrid Forum

AB Zaman

Member

Registered: 2015-02-23

Posts: 14

Using outline to make tree rows

Yes sure,

Firstly this is my code;

                    sheet.InsertRows(e.Cell.Row +1, dt.Rows.Count);
                    sheet[e.Cell.Row + 1, 0, dt.Rows.Count, sheet.ColumnCount] = dt;
                    sheet.AddOutline(RowOrColumn.Row, e.Cell.Row + 1, dt.Rows.Count);

This is what I'm trying to do, I have few records pulled from, db. Some have child records, they are hyperlinked, some dont. On MouseUp event of a cell, if they have child records outline is expanded.

From above img, when row 5 records is clicked, it expands outline as below;

But when row 6 is clicked, it gives error as below;

If I comment the AddOutline code line, I manage to get the child record (2nd image in previous post),

Regards

Jingwood

Moderator

From: jing at reogrid.net

Registered: 2014-06-03

Posts: 615

Re: Using outline to make tree rows

Sorry you can't do that. You want to create a tree in grid, but outline is not tree, it cannot work like a tree.

Microsoft Project shows tree struct naturally, but Excel doesn't. ReoGrid is Excel-like component, the built-in outline cannot do what Microsoft Project does.

Let's try your case in Excel, Excel also cannot create a sub outline inside A row and B row.

So the difference between 'tree' and 'outline' is:

You couldn't put the parent row into another outline, that will cause outline intersection exception.

To implement your case:

Short answer: ReoGrid cannot do that by using built-in features.

Long answer: You could use custom cell to extend ReoGrid, to draw a button that is very like a tree node, see below. (although isn't too easy)

Code to initialize worksheet:

worksheet.IndentSize = 17;
worksheet.ColumnHeaders[0].WidthInPixel = 200;

worksheet["A5"] = new TreeNodeCell("Parent 1", 1, 6);
worksheet["A6:A8"] = new object[] { "Item 1.1", "Item 1.2" };

worksheet["A8"] = new TreeNodeCell("Parent 1.1", 2, 3);
worksheet["A9"] = new TreeNodeCell("Parent 1.1.1", 3, 2);
worksheet["A10"] = new TreeNodeCell("Parent 1.1.1.1", 4, 1);
worksheet["A11"] = "Item 1.1.1.1.1.1";

worksheet.SetRangeStyle("A6:A8", new ReoGridStyleObject { Flag = PlainStyleFlag.Indent, Indent = 3 });
worksheet.Cells["A8"].Style.Indent = 3;
worksheet.Cells["A9"].Style.Indent = 5;
worksheet.Cells["A10"].Style.Indent = 7;
worksheet.Cells["A11"].Style.Indent = 8;

Custom tree node cell class:

class TreeNodeCell : unvell.ReoGrid.CellTypes.CellBody
{
	public bool IsCollapsed { get; set; }

	public int ChildrenCount { get; set; }

	public int Indent { get; set; }

	public string Text { get; set; }

	public TreeNodeCell(string text, int indent, int childrenCount)
	{
		this.Text = text;
		this.Indent = indent;
		this.ChildrenCount = childrenCount;
	}

	public override void OnSetup(ReoGridCell cell)
	{
		cell.Data = this.Text;
		cell.Style.Indent = (ushort)this.Indent;
		
		// offset button by indent
		this.buttonRect.Offset((int)Math.Round((this.Indent - 1) * cell.Worksheet.IndentSize), 0);
	}

	private Rectangle buttonRect = new Rectangle(2, 2, 15, 15);

	public override void OnPaint(RGDrawingContext dc)
	{
		var g = dc.PlatformGraphics;

		g.DrawRectangle(Pens.Black, buttonRect);
		g.FillRectangle(Brushes.Black, this.buttonRect.X + 3, this.buttonRect.Y + 7, 10, 2);

		if (IsCollapsed)
		{
			g.FillRectangle(Brushes.Black, this.buttonRect.X + 7, this.buttonRect.Y + 3, 2, 10);
		}

		dc.DrawCellText();
	}

	public override bool OnMouseDown(unvell.ReoGrid.Events.CellMouseEventArgs e)
	{
		if (buttonRect.Contains(e.RelativePosition))
		{
			IsCollapsed = !IsCollapsed;

			if (IsCollapsed)
			{
				OnCollapse();
			}
			else
			{
				OnExpand();
			}

			e.Cell.Worksheet.InvalidateSheet();
			return true;
		}
		else
		{
			return false;
		}
	}

	protected virtual void OnCollapse()
	{
		this.Cell.Worksheet.HideRows(this.Cell.Row + 1, ChildrenCount);

		// other code goings here
	}

	protected virtual void OnExpand()
	{
		this.Cell.Worksheet.ShowRows(this.Cell.Row + 1, ChildrenCount);

		// other code goings here
	}
}

This is an extension for ReoGrid cell by using custom-cell feature (http://reogrid.net/document/custom-cell).
There still many things have to do to implement this solution, the code is only an example. If you spend a lot of time to implement this, I want to recommend you to choose another control that does real tree style feature.

Last edited by Jingwood (2015-03-30 04:05:01)

AB Zaman

Member

Registered: 2015-02-23

Posts: 14

Re: Using outline to make tree rows

Hello Jing,

Yes it was hard to accomplish the above for runtime/dynamic values and n-level of nodes depths. I have been able to give the tree effect for the time being, with data presentation.
Thank you so much for such a detailed reply and explanation. I really appreciate your good and honest support,

Regards

Jingwood

Moderator

From: jing at reogrid.net

Registered: 2014-06-03

Posts: 615

Re: Using outline to make tree rows

You're welcome!