Skip to content

Update README.md #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 31, 2025
Merged

Update README.md #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 91 additions & 95 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ You can load different controls for each row based on the column value by using
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<syncfusion:SfTreeGrid Name="treeGrid"
AutoGenerateColumns="False"
AllowEditing="True"
ItemsSource="{Binding Employees}"
ChildPropertyName="ReportsTo"
LiveNodeUpdateMode="AllowDataShaping"
ParentPropertyName="ID"
SelfRelationRootValue="-1" >
<syncfusion:SfTreeGrid Name="treeGrid"
AutoGenerateColumns="False"
AllowEditing="True"
ItemsSource="{Binding Employees}"
ChildPropertyName="ReportsTo"
LiveNodeUpdateMode="AllowDataShaping"
ParentPropertyName="ID"
SelfRelationRootValue="-1" >
<interactivity:Interaction.Behaviors>
<local:SfTreeGridBehavior/>
</interactivity:Interaction.Behaviors>
Expand All @@ -46,108 +46,107 @@ The following code explains how different templates are loaded for each row base

public class DataTemplateSelectorExt : DataTemplateSelector
{
DataTemplate TextBoxTemplate;
DataTemplate ComboBoxTemplate;
DataTemplate CheckBoxTemplate;
DataTemplate CurrencyTemplate;
DataTemplate UpdownTemplate;
DataTemplate TextBlockTemplate;

public DataTemplateSelectorExt()
DataTemplate TextBoxTemplate;
DataTemplate ComboBoxTemplate;
DataTemplate CheckBoxTemplate;
DataTemplate CurrencyTemplate;
DataTemplate UpdownTemplate;
DataTemplate TextBlockTemplate;

public DataTemplateSelectorExt()
{
TextBlockTemplate = App.Current.Resources["TextBlockTemplate"] as DataTemplate;
TextBoxTemplate = App.Current.Resources["TextBoxTemplate"] as DataTemplate;
ComboBoxTemplate = App.Current.Resources["ComboBoxTemplate"] as DataTemplate;
CheckBoxTemplate = App.Current.Resources["CheckBoxTemplate"] as DataTemplate;
CurrencyTemplate = App.Current.Resources["CurrencyTemplate"] as DataTemplate;
UpdownTemplate = App.Current.Resources["UpdownTemplate"] as DataTemplate;
}

public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item == null)
return TextBlockTemplate;

// Customize based on your scenario
EmployeeInfo orderInfo = item as EmployeeInfo;
if (orderInfo == null)
return TextBlockTemplate;

switch (orderInfo.LastName)
{
TextBlockTemplate = App.Current.Resources["TextBlockTemplate"] as DataTemplate;
TextBoxTemplate = App.Current.Resources["TextBoxTemplate"] as DataTemplate;
ComboBoxTemplate = App.Current.Resources["ComboBoxTemplate"] as DataTemplate;
CheckBoxTemplate = App.Current.Resources["CheckBoxTemplate"] as DataTemplate;
CurrencyTemplate = App.Current.Resources["CurrencyTemplate"] as DataTemplate;
UpdownTemplate = App.Current.Resources["UpdownTemplate"] as DataTemplate;
}

public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item == null)
case "TextColumn":
return TextBoxTemplate;
case "ComboBoxColumn":
return ComboBoxTemplate;
case "CheckBoxColumn":
return CheckBoxTemplate;
case "CurrencyColumn":
return CurrencyTemplate;
case "GridUpDownColumn":
return UpdownTemplate;
default:
return TextBlockTemplate;

//Here customize based on your scenario

EmployeeInfo orderInfo = item as EmployeeInfo;
if (orderInfo == null)
return TextBlockTemplate;

switch (orderInfo.LastName)
{
case "TextColumn":
return TextBoxTemplate;
case "ComboBoxColumn":
return ComboBoxTemplate;
case "CheckBoxColumn":
return CheckBoxTemplate;
case "CurrencyColumn":
return CurrencyTemplate;
case "GridUpDownColumn":
return UpdownTemplate;
default:
return TextBlockTemplate;
}
}
}
}

```

The **RecordPropertyChanged** event of data grid is used to update the corresponding values to [TreeGridTemplateColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTemplateColumn.html) when the LastName column value is changed. The **CollectionChanged** event is used to update the values of [TreeGridTemplateColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTemplateColumn.html) based on the LastName column value when a record is added at runtime.

```C#

public class SfTreeGridBehavior : Behavior<SfTreeGrid>
{
SfTreeGrid treegrid = null;
protected override void OnAttached()
SfTreeGrid treegrid = null;

protected override void OnAttached()
{
treegrid = this.AssociatedObject as SfTreeGrid;
treegrid.CellRenderers.Remove("Template");
treegrid.CellRenderers.Add("Template", new TreeGridCellTemplateRenderer());
treegrid.Loaded += Treegrid_Loaded;
}

private void Treegrid_Loaded(object sender, RoutedEventArgs e)
{
this.treegrid.View.NodeCollectionChanged += View_NodeCollectionChanged;
this.treegrid.View.RecordPropertyChanged += View_RecordPropertyChanged1;
}

private void View_RecordPropertyChanged1(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
var treeGridRowGenerator = this.treegrid.GetTreeGridRowGenerator();
var treeDataRowBase = treeGridRowGenerator.Items.FirstOrDefault(row => row.RowData == sender);

if (treeDataRowBase != null)
{
treegrid = this.AssociatedObject as SfTreeGrid;
treegrid.CellRenderers.Remove("Template");
treegrid.CellRenderers.Add("Template", new TreeGridCellTemplateRenderer());
treegrid.Loaded += Treegrid_Loaded;
}

private void Treegrid_Loaded(object sender, RoutedEventArgs e)
{
this.treegrid.View.NodeCollectionChanged += View_NodeCollectionChanged;
this.treegrid.View.RecordPropertyChanged += View_RecordPropertyChanged1;
}

private void View_RecordPropertyChanged1(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
var treeGridRowGenerator = this.treegrid.GetTreeGridRowGenerator();

var treeDataRowBase = treeGridRowGenerator.Items.FirstOrDefault(row => row.RowData == sender);
if (treeDataRowBase != null)
{
var columns = treeDataRowBase.VisibleColumns as List<TreeDataColumnBase>;
foreach (var dataColumn in columns.Where(column => column.Renderer != null && column.TreeGridColumn != null))
{
dataColumn.UpdateBinding(sender, false);
}
var columns = treeDataRowBase.VisibleColumns as List<TreeDataColumnBase>;
foreach (var dataColumn in columns.Where(column => column.Renderer != null && column.TreeGridColumn != null))
{
dataColumn.UpdateBinding(sender, false);
}
}
}

private void View_NodeCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
if (e.OldItems == null)
return;

var rowData = (e.OldItems[0] as TreeNode).Item;
var treeGridRowGenerator = this.treegrid.GetTreeGridRowGenerator();
var treeGridDataRowBase = treeGridRowGenerator.Items.FirstOrDefault(row => row.RowData == rowData);

private void View_NodeCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
if (treeGridDataRowBase != null)
{
if (e.OldItems == null)
return;
var rowData = (e.OldItems[0] as TreeNode).Item;
var treeGridRowGenerator = this.treegrid.GetTreeGridRowGenerator();
var treeGridDataRowBase = treeGridRowGenerator.Items.FirstOrDefault(row => row.RowData == rowData);
if (treeGridDataRowBase != null)
{
var columns = treeGridDataRowBase.VisibleColumns as List<TreeDataColumnBase>;
foreach (var dataColumn in columns.Where(column => column.Renderer != null && column.TreeGridColumn != null))
{
dataColumn.UpdateBinding(rowData, false);
}
var columns = treeGridDataRowBase.VisibleColumns as List<TreeDataColumnBase>;
foreach (var dataColumn in columns.Where(column => column.Renderer != null && column.TreeGridColumn != null))
{
dataColumn.UpdateBinding(rowData, false);
}
}
}
}
}

```

![Shows the different cell types for each row based on another column cell value in SfTreeGrid](EachRowLoadedDifferentCell.gif)
Expand All @@ -157,8 +156,5 @@ The following screenshot shows the different cell types for each row in [WPF Tre
![Shows the different cell loaded in SfTreeGrid](DifferentCell.png)

Take a moment to peruse the [WPF TreeGrid – TreeGridTemplateColumn](https://help.syncfusion.com/wpf/treegrid/column-type#treegridtemplatecolumn) documentation, where you can find about [TreeGridTemplateColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTemplateColumn.html) with code examples.

KB article - [How to load different cell types for each row based on another column cell value in WPF TreeGrid (SfTreeGrid)?](https://www.syncfusion.com/kb/12743/how-to-load-different-cell-types-for-each-row-based-on-another-column-cell-value-in-wpf)

## Requirements to run the demo
Visual Studio 2015 and above versions