Question about "GDBG TreeLines"-Sample

[silver air]

Hello Syncfusion-Team,

I have a DataSet object, containing several DataTables with relations between them. All DataTables does always have the same columns and contain only one single row. The whole structure is very similar to a tree. Now I want to bind my DataSet to the Grid in order to display all the DataTables as collapsible/expandable hierarchies. The "GDBG TreeLines" sample seems to be very close to what I'm looking for. There are only few points I was not able to figure out how to do:

- The borders of all cells in the first column are hidden, how can I make them visible?
- How can I remove these connection lines (between hierarchy levels) in the first column?
- I want to have collapse/expand arrows rather than +/- symbols. I guess I will have to provide my own implementation of a "GridCellButton", right (somthing similar to "GridDataBoundTreeCellButton")?
- Since all DataTables does have the same columns I want just one header to be visible. How can I hide another headers?

In attachment you will find a picture demonstrating how it should look like, though the naming of hierarchy levels is not consistent.

With best regards



GDBG_TreeLines_modified.zip

[Administrator]

Hi Silver,

Thanks for the interest in Syncfusion Grid.

#1. You can set the border of the any cell/column in a GridDataBoundGrid. Please refer the following code snippet that shows how we can set the border of a cell in GridDataBoundGrid.

 this.gridDataBoundGrid1.Model.ColStyles[1].Borders.Left = new GridBorder(GridBorderStyle.None, Color.Red, GridBorderWeight.ExtraThick);

Please refer the sample in the below.

#2. You can remove the tree lines of the Hierarchical levels using ShowTreeLines property. Please refer the code snippet below that shows how we can set the ShowTreeLines to false.

this.treeGrid.ShowTreeLines = false 

Please refer the sample in the below.

#3. You can change the +/- symbol to any image. Yes, you need to provide the implementation of GridCellButton in GridDataBoundTreeCellButton.
Please refer the sample in the below that shows how we can change this image.

#4. You can use CoveredRanges property so that the Header should be merged. You can also set the text alignment to left. Please refer the following code snippet for more details.

            this.gridDataBoundGrid1.Model.CoveredRanges.Add(GridRangeInfo.Cells(0, 2, 0, 1));
            this.gridDataBoundGrid1.Model[0, 1].HorizontalAlignment = GridHorizontalAlignment.Left;

Please refer the sample in the below link that illustrates #1 / #2 / #3 / #4.

http://websamples.syncfusion.com/samples/Grid.Windows/F73477/main.htm

If I have misunderstood your requirement, could you please explain me in detail, so that I can work in depth and try to send a better solution?


Regards,
Asem.

[silver air]

Hello Asem,

first of all, thank you for the quick response. Regarding to your advices:

#1: the code snippet: "this.gridDataBoundGrid1.Model.ColStyles[1].Borders.Left = new GridBorder(GridBorderStyle.None, Color.Red, GridBorderWeight.ExtraThick);" causes an out of range exception. My CoStyles-array is always empty and I guess I have to fill it with some values first - but how?

#2: Setting "this.treeGrid.ShowTreeLines = false" makes all indentations dissapear. The hierarchy levels are still expandable/collapsable but without indentations. This is not what I want. Please take a closer look at the attached image in my original post. You will see a grid with expandable/collapsible hierarchy levels, with arrow-symbols, bordered cells and indentations.

#4: I don't understand it. Please provide more details about the concept behind those RangeInfo-stuff. In the mean time I found out that desired functionality can be achieved by setting "GridHierarchyLevel.ShowHeaders = false;"

#3: Ahmmm, do you really want me to implement a dozen of all these "TreeGridHelper", "Node", "NodeArray", "SelfReferenceDataSourceAccessor", "PGGridDataBoundGrid", "PGGridModelDataBinder", "ITreeGridDataSource", "GridDataBoundTreeCellButton"... classes/interfaces just to get some arrow-symbols drawn? Come on Syncfusion please tell me that it is not true:( Don't get me wrong - I really apprechiate your efforts and your code samples but is there really no easier way to implement such a common requrement? May be I'm not experienced enough with Grids and my expectations are too naive, but why not to provide all these base functionality just "out of the box"... I how ever will study your sample in depth.

[Administrator]

Hi Silver,

#1. You can also handle QueryCellInfo and can get the lines in the first column of the Gird. Please refer the following code snippet that shows how we can handle QueryCellInfo to get lines in the first column.

private void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
{
if (e.RowIndex > this.gridDataBoundGrid1.Model.Rows.HeaderCount && e.ColIndex == 2)
{
e.Style.Borders.All = new GridBorder(GridBorderStyle.Standard, Color.Black, GridBorderWeight.Thin);
 }
}

Please refer the sample for more detial.

# 2. If your intention is not to allow expandable/collapsable, it can be achieved by using RowCollapsing event. Please refer the following code snippet that shows how we can restrict the collapsing of the tree in GirdDataBoundGrid.

        private void gridDataBoundGrid1_RowCollapsing(object sender, GridRowEventArgs e)
        {
            e.Cancel = true;
            //MessageBox.Show("Collapsing rows");
        }

Please refer the sample for more detial.

#3. You can also hide the header rows of the GirdDataBoundGird using HiddenRows properties. Please refer the following code snippet that shows how we can Hide the rows of the GirdDataBoundGird.

            this.gridDataBoundGrid1.Model.HideRows[0] = true;
            this.gridDataBoundGrid1.Model.HideRows[1] = true;
            this.gridDataBoundGrid1.Model.HideRows[2] = true;
            this.gridDataBoundGrid1.Model.HideRows[3] = true;

Please refer the sample for more detial.

#4. There is no direct property to set the arrow-symbols in the Tree of the Grid. You need to provide the implementation of GridCellButton in GridDataBoundTreeCellButton as the sample in the previous thread.

Please refer the sample here for #1 / #2 / #3.

http://websamples.syncfusion.com/samples/Grid.Windows/F73477C/main.htm

Please let me know if this helps.

Regards,
Asem.

[silver air]

Hello Asem,

I have studied the sample application you gave me and I have a question about it now:

- You create a list of nodes, and every node contains information about its expand/collapse-state, index, children and so on...
I guess that this list is just a "flat" representation of our actual (hierarchically structured) data, right? I see that on every call to the TreeGridHelper.ExandRow(...)/TreeGridHelper.CollapseRow(...)-method, you manipulate this nodelist by inserting/removing nodes on a proper position. But how does the grid know that it shall perform its expand/collapse actions right after the nodelist has changed? I was not able to find the line of code, where this nodelist is assigned to the grid as its DataSource. There is also no such a method like grid.ExpandSingleRow() or something like that... So how does it work than?

Greetings

[silver air]

It is really important for me to understand how it works.