Skip to content

Documentation(ES-1048034): Redundant changes for the UWP TreeGrid #1205

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

Open
SreemonPremkumarM wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Documentation(ES-1048034): Redundant changes for the UWP TreeGrid #1205

Show file tree
Hide file tree
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
66 changes: 33 additions & 33 deletions uwp/TreeGrid/Clipboard-Operations.md
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions uwp/TreeGrid/ColumnTypes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ documentation: ug

# Column Types in UWP TreeGrid

SfTreeGrid provides support for various built-in column types. Each column has its own properties and renderer to handle different types of data.
UWP TreeGrid provides support for various built-in column types. Each column has its own properties and renderer to handle different types of data.
You can also add or override existing columns and renderers as you need.

<table>
Expand Down Expand Up @@ -106,7 +106,7 @@ Use to display the custom template-specified content.

## TreeGridColumn

TreeGridColumn is an abstract class provides base functionalities for all the column types in SfTreeGrid.
TreeGridColumn is an abstract class provides base functionalities for all the column types in TreeGrid.

### Mapping column to particular property

Expand Down Expand Up @@ -1213,7 +1213,7 @@ this.treeGrid.Columns.Add(new TreeGridTemplateColumn()

You can allow `UIElement` loaded inside `CellTemplate` to handle keyboard interaction by setting `[FocusManagerHelper.WantsKeyInput](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.FocusManagerHelper.html#Syncfusion_UI_Xaml_Grid_FocusManagerHelper_WantsKeyInputProperty)` attached property to `TreeGridColumn`. You can use this when loading edit element in CellTemplate.

In this case SfTreeGrid handles the below key operations and other keys are handled by UIElement loaded inside `CellTemplate`.
In this case TreeGrid handles the below key operations and other keys are handled by UIElement loaded inside `CellTemplate`.



Expand Down Expand Up @@ -1447,7 +1447,7 @@ treeGrid.Columns.Add(new TreeGridComboBoxColumn()
{% endhighlight %}
{% endtabs %}

SfTreeGrid triggers, `CurrentCellDropDownSelectionChanged` event, when the SelectedValue is changed. [CurrentCellDropDownSelectionChangedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellDropDownSelectionChangedEventArgs.html) of [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html) event provides the information about the changed cell value.
TreeGrid triggers, `CurrentCellDropDownSelectionChanged` event, when the SelectedValue is changed. [CurrentCellDropDownSelectionChangedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellDropDownSelectionChangedEventArgs.html) of [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html) event provides the information about the changed cell value.

`SelectedIndex` property returns the index of selected item.

Expand Down Expand Up @@ -1654,11 +1654,11 @@ You can change the foreground color of `TreeGridHyperlinkColumn` by writing the

## Custom column support

SfTreeGrid allows you to create your own column by overriding predefined column type or creating a new custom column.
TreeGrid allows you to create your own column by overriding predefined column type or creating a new custom column.

### Creating column from existing column

You can create your own column by overriding the predefined column types in SfTreeGrid.
You can create your own column by overriding the predefined column types in TreeGrid.

For example, the `TreeGridDateTimeColumn` loads the `DateTime` value by default. If you want to display [DateTimeOffset](https://msdn.microsoft.com/en-us/library/system.datetimeoffset.aspx) value, you can create a new column by overriding the `TreeGridDateTimeColumn` class.

Expand Down
26 changes: 13 additions & 13 deletions uwp/TreeGrid/Columns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ documentation: ug

# Columns in UWP TreeGrid

SfTreeGrid allows you to add or remove columns using [SfTreeGrid.Columns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) property. You can choose the columns to be added from built-in column types or you can create your own column and add to the `SfTreeGrid.Columns`.
UWP TreeGrid allows you to add or remove columns using [SfTreeGrid.Columns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) property. You can choose the columns to be added from built-in column types or you can create your own column and add to the `SfTreeGrid.Columns`.

Below are the built-in column types supported in SfTreeGrid. Each column has its own properties to handle different types of data.
Below are the built-in column types supported in TreeGrid. Each column has its own properties to handle different types of data.

<table>
<tr>
Expand Down Expand Up @@ -82,7 +82,7 @@ Use to display the custom template-specified content.

## Defining Columns

You can let the SfTreeGrid to create columns or you can manually defined columns to de displayed. Below sections explains both ways,
You can let TreeGrid to create columns or you can manually defined columns to de displayed. Below sections explains both ways,

1. Automatically generating columns
2. Manually define columns
Expand Down Expand Up @@ -145,7 +145,7 @@ TreeGridCheckBoxColumn
</table>


N> The order of columns in the collection will determine the order of that they will appear in SfTreeGrid.
N> The order of columns in the collection will determine the order of that they will appear in TreeGrid.

#### AutoGenerateColumns with different modes

Expand Down Expand Up @@ -251,7 +251,7 @@ private void TreeGrid_AutoGeneratingColumn(object sender, TreeGridAutoGenerating

#### Changing column type

You can change the type of column adding to SfTreeGrid by setting the instance of column you want to add in `AutoGeneratingColumn` event.
You can change the type of column adding to TreeGrid by setting the instance of column you want to add in `AutoGeneratingColumn` event.
In the below code, column type for `Salary` property is changed to `TreeGridTextColumn` by setting instance of TreeGridTextColumn to `Column` property.

{% tabs %}
Expand Down Expand Up @@ -330,7 +330,7 @@ Below screenshot shows the customized header template loaded on the header of Fi

### Data Annotations with AutoGenerateColumns

SfTreeGrid support to generate the columns based on built-in [Data Annotation Attributes](https://msdn.microsoft.com/en-us/library/mt185499.aspx). Data Annotations ignored, when the `AutoGenerateColumns` is set to False.
TreeGrid support to generate the columns based on built-in [Data Annotation Attributes](https://msdn.microsoft.com/en-us/library/mt185499.aspx). Data Annotations ignored, when the `AutoGenerateColumns` is set to False.


#### Exclude column
Expand Down Expand Up @@ -463,7 +463,7 @@ public double? Salary

### Manually defining columns

SfTreeGrid control allows you to define the columns manually by adding desired column to the [SfTreeGrid.Columns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) collection.
TreeGrid control allows you to define the columns manually by adding desired column to the [SfTreeGrid.Columns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) collection.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -545,7 +545,7 @@ treeGrid.Columns.RemoveAt(1);

## Resizing Columns

SfTreeGrid allows to resize the columns like in excel by resizing column header. This can be enabled or disabled by setting [SfTreeGrid.AllowResizingColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or
TreeGrid allows to resize the columns like in excel by resizing column header. This can be enabled or disabled by setting [SfTreeGrid.AllowResizingColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or

[TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property.

Expand All @@ -568,7 +568,7 @@ You can change the column width by clicking and dragging the resizing cursor at

### Hidden column resizing

SfTreeGrid shows indication for hidden columns in column header and also allows end-users to resize the hidden columns when setting [SfTreeGrid.AllowResizingHiddenColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingHiddenColumns) property to `true`.
TreeGrid shows indication for hidden columns in column header and also allows end-users to resize the hidden columns when setting [SfTreeGrid.AllowResizingHiddenColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingHiddenColumns) property to `true`.

![Hidden column resizing](Columns_images/Columns_img4.jpeg)

Expand All @@ -592,7 +592,7 @@ private void TreeGrid_ResizingColumns(object sender, ResizingColumnsEventArgs e)

### Identify resizing of the column gets completed

SfTreeGrid allows you to identify the progress of the resizing of columns through `ResizingColumnsEventArgs.Reason` property. You can get the width of the column after resizing completed by getting `ResizingColumnsEventArgs.Width` when `ResizingColumnsEventArgs.Reason` is `ColumnResizingReason.Resized` in `ResizingColumns` event.
TreeGrid allows you to identify the progress of the resizing of columns through `ResizingColumnsEventArgs.Reason` property. You can get the width of the column after resizing completed by getting `ResizingColumnsEventArgs.Width` when `ResizingColumnsEventArgs.Reason` is `ColumnResizingReason.Resized` in `ResizingColumns` event.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -691,7 +691,7 @@ this.treeGrid.FooterColumnCount = 2;

## Stacked Headers

SfTreeGrid supports additional unbound header rows known as `stacked header rows` that span across the TreeGrid columns using [StackedHeaderRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_StackedHeaderRows). You can group one or more columns under each stacked header.
TreeGrid supports additional unbound header rows known as `stacked header rows` that span across the TreeGrid columns using [StackedHeaderRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_StackedHeaderRows). You can group one or more columns under each stacked header.

Each [StackedHeaderRow](http://help.syncfusion.com/cr/uwp/Syncfusion.SfGrid.UWP~Syncfusion.UI.Xaml.Grid.StackedHeaderRow.html) contains the [StackedColumns](http://help.syncfusion.com/cr/uwp/Syncfusion.SfGrid.UWP~Syncfusion.UI.Xaml.Grid.StackedHeaderRow~StackedColumns.html) where each [StackedColumn](http://help.syncfusion.com/cr/uwp/Syncfusion.SfGrid.UWP~Syncfusion.UI.Xaml.Grid.StackedColumn.html) contains a number of child columns. `StackedColumn.ChildColumns` property returns the columns which are grouped under the stacked header row. `StackedColumn.HeaderText` returns the text that displays in stacked header row.

Expand Down Expand Up @@ -821,7 +821,7 @@ private void TreeGrid_Loaded(object sender, RoutedEventArgs e)

## Column Sizing

SfTreeGrid allows you to set the column widths based on certain logic using [SfTreeGrid.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ColumnSizer) or [TreeGridColumn.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ColumnSizer) property.
TreeGrid allows you to set the column widths based on certain logic using [SfTreeGrid.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ColumnSizer) or [TreeGridColumn.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ColumnSizer) property.

Below is the list of predefined column sizing options available.

Expand Down Expand Up @@ -854,7 +854,7 @@ Default column width or defined width set to column.

## Binding column properties with ViewModel

SfTreeGrid provides MVVM support for binding `TreeGridColumn` properties with ViewModel properties.
TreeGrid provides MVVM support for binding `TreeGridColumn` properties with ViewModel properties.

{% tabs %}
{% highlight c# %}
Expand Down
16 changes: 8 additions & 8 deletions uwp/TreeGrid/Conditional-Styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ documentation: ug
---
# Conditional Styling in UWP TreeGrid

You can style the treegrid and its inner elements conditionally based on data in three ways,
You can style the control and its inner elements conditionally based on data in three ways,

1. Using Converter
2. Using Data Triggers
Expand Down Expand Up @@ -98,7 +98,7 @@ internal class StyleConverter : IValueConverter
{% endhighlight %}
{% endtabs %}

![Styling cells using converter in UWP treegrid](Conditional-Styling_images/Conditional-Styling_img1.jpeg)
![Styling cells using converter](Conditional-Styling_images/Conditional-Styling_img1.jpeg)

### Style cells based on record using converter

Expand Down Expand Up @@ -140,7 +140,7 @@ internal class StyleConverter : IValueConverter
{% endhighlight %}
{% endtabs %}

![Styling cells based on record in UWP treegrid](Conditional-Styling_images/Conditional-Styling_img2.jpeg)
![Styling cells based on record](Conditional-Styling_images/Conditional-Styling_img2.jpeg)

### Style cells using style selector

Expand Down Expand Up @@ -176,7 +176,7 @@ public class SelectorClass : StyleSelector
{% endhighlight %}
{% endtabs %}

![Styling cells using style selector in UWP treegrid](Conditional-Styling_images/Conditional-Styling_img3.jpeg)
![Styling cells using style selector](Conditional-Styling_images/Conditional-Styling_img3.jpeg)

### Add image to cell

Expand Down Expand Up @@ -227,7 +227,7 @@ public object ConvertBack(object value, Type targetType, object parameter, strin
{% endhighlight %}
{% endtabs %}

![Adding images in a cell in UWP treegrid](Conditional-Styling_images/Conditional-Styling_img4.jpeg)
![Adding images in a cell](Conditional-Styling_images/Conditional-Styling_img4.jpeg)

You can download the sample [here](https://github.com/SyncfusionExamples/how-to-load-images-in-a-cell-in-wpf-and-uwp-treegrid/tree/master/UWP).

Expand Down Expand Up @@ -273,7 +273,7 @@ internal class StyleConverter : IValueConverter
{% endhighlight %}
{% endtabs %}

![Styling rows using converter in UWP treegrid](Conditional-Styling_images/Conditional-Styling_img5.jpeg)
![Styling rows using converter](Conditional-Styling_images/Conditional-Styling_img5.jpeg)

### Style rows using style selector

Expand Down Expand Up @@ -307,7 +307,7 @@ public class SelectorClass : StyleSelector
{% endhighlight %}
{% endtabs %}

![Styling rows using style selector in UWP treegrid](Conditional-Styling_images/Conditional-Styling_img6.jpeg)
![Styling rows using style selector](Conditional-Styling_images/Conditional-Styling_img6.jpeg)

## Row Header

Expand Down Expand Up @@ -342,5 +342,5 @@ internal class StyleConverter : IValueConverter
{% endhighlight %}
{% endtabs %}

![Styling row header in UWP treegrid](Conditional-Styling_images/Conditional-Styling_img7.jpeg)
![Styling row header](Conditional-Styling_images/Conditional-Styling_img7.jpeg)

Loading