SfTreeGrid: Grid without borders and without First Column

[Andres]

Hello,

I have used the SfTreeGrid. Please I would like to indicate me as change the style of the grid so that it has no borders, I try to modify the style of the cell, but I have obtained the shown in the image (attached), also try changing the whole style of the TreeGridView, but I did not get results.

You could also do me the favor to tell me how to hide the first column that appears in the image (attached).


<Style TargetType="syncfusion:TreeGridCell">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>

<syncfusion:SfTreeGrid x:Name="treeGrid"                              
                               AllowEditing="False"
                               ChildPropertyName="SubItems"
                               ItemsSource="{Binding ExplorerItems}"
                               CellStyle="{StaticResource customStyleTreeGridCell}">

Thanks.

Attachment: stylecell_e2b863d.zip

[Gnanasownthari Thirugnanam]

Hi Andres, 

Please find the response for your queries. 

Query 1: change the style of the grid so that it has no border

You can change the border thickness for expander cell like TreeGridCell by writing style to TreeGridExpanderCell as like below code example.  <Window.Resources>          <Style TargetType="syncfusion:TreeGridCell">              <Setter Property="BorderBrush" Value="Transparent"/>              <Setter Property="BorderThickness" Value="0"/>          </Style>          <Style TargetType="syncfusion:TreeGridExpanderCell">              <Setter Property="BorderBrush" Value="Transparent"/>              <Setter Property="BorderThickness" Value="0"/>          </Style>  </Window.Resources>

Query 2: how to hide the first column

You can hide the expander column (First column) by override the SetColumnWidth method in TreeGridColumnSizer as like below code example.  this.treeGrid.TreeGridColumnSizer = new GridColumnSizerExt(this.treeGrid);    public class GridColumnSizerExt : TreeGridColumnSizer  {      public GridColumnSizerExt(SfTreeGrid sfTreeGrid)          : base()      {        }      public override double SetColumnWidth(TreeGridColumn column, double Width)      {          MethodInfo methodInfo = this.TreeGrid.ColumnResizingController.GetType().GetMethod("IsExpanderColumn", BindingFlags.NonPublic | BindingFlags.Instance);                      if ((bool)methodInfo.Invoke(this.TreeGrid.ColumnResizingController, new object[] { column }))                {              var columnIndex = this.TreeGrid.Columns.IndexOf(column);              var scrollColumnIndex = this.TreeGrid.ResolveToScrollColumnIndex(columnIndex);              var treeGridPanel = this.TreeGrid.GetTreePanel();              //You can hide the expander column by setting width as 0 here.              treeGridPanel.ColumnWidths[scrollColumnIndex] = 0.0;              return 0.0;          }                         else              return base.SetColumnWidth(column, Width);      }       }

We have prepared the sample based on your requirement, you can download the same from below mentioned location: 

Sample location: 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGridExpander-997554040 

Please let us know if this helps you. 

Regards, 

Gnanasownthari T.