diff --git a/uwp/TreeGrid/Clipboard-Operations.md b/uwp/TreeGrid/Clipboard-Operations.md index f770fda73..254cb3770 100644 --- a/uwp/TreeGrid/Clipboard-Operations.md +++ b/uwp/TreeGrid/Clipboard-Operations.md @@ -1,13 +1,13 @@ --- layout: post -title: Clipboard Operations in UWP TreeGrid control | Syncfusion® -description: Learn here all about Clipboard Operations support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Clipboard Operations in UWP SfTreeGrid | Syncfusion® +description: Clipboard Operations in UWP SfTreeGrid enable copy, cut, and paste actions with configurable settings, events, and custom clipboard behavior. platform: uwp control: SfTreeGrid documentation: ug --- -# Clipboard Operations in UWP TreeGrid (SfTreeGrid) +# Clipboard Operations in UWP SfTreeGrid SfTreeGrid provides support to the clipboard operations such as cut, copy, and paste the data within control and between other applications such as Notepad and Excel. The clipboard operations of copy and paste are enabled by default. You can copy the selected nodes/cells from tree grid by clicking `Ctrl+C` and can paste the content from [Clipboard](https://msdn.microsoft.com/en-us/library/system.windows.clipboard.aspx) to tree grid by clicking `Ctrl+V`. diff --git a/uwp/TreeGrid/ColumnTypes.md b/uwp/TreeGrid/ColumnTypes.md index abca08c3e..f5c0f9da6 100644 --- a/uwp/TreeGrid/ColumnTypes.md +++ b/uwp/TreeGrid/ColumnTypes.md @@ -1,14 +1,14 @@ --- layout: post -title: ColumnTypes in UWP TreeGrid control | Syncfusion® -description: Learn here all about ColumnTypes support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more features. +title: Column Types in UWP SfTreeGrid | Syncfusion® +description: Column Types in UWP SfTreeGrid support text, numeric, date, checkbox, image, and template columns to display varied data formats. platform: uwp control: SfTreeGrid documentation: ug --- -# ColumnTypes in UWP TreeGrid (SfTreeGrid) +# Column Types in UWP SfTreeGrid SfTreeGrid 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. diff --git a/uwp/TreeGrid/Columns.md b/uwp/TreeGrid/Columns.md index 3410ba894..895390439 100644 --- a/uwp/TreeGrid/Columns.md +++ b/uwp/TreeGrid/Columns.md @@ -1,13 +1,13 @@ --- layout: post -title: Columns in UWP TreeGrid control | Syncfusion® -description: Learn here all about Columns support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Columns in UWP SfTreeGrid | Syncfusion® +description: Columns in UWP SfTreeGrid allow binding, sizing, formatting, sorting, and rendering options to display and manage data effectively. platform: uwp control: SfTreeGrid documentation: ug --- -# Columns in UWP TreeGrid (SfTreeGrid) +# Columns in UWP SfTreeGrid 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`. diff --git a/uwp/TreeGrid/Conditional-Styling.md b/uwp/TreeGrid/Conditional-Styling.md index 1614b253f..aa136b694 100644 --- a/uwp/TreeGrid/Conditional-Styling.md +++ b/uwp/TreeGrid/Conditional-Styling.md @@ -1,12 +1,12 @@ --- layout: post -title: Conditional Styling in UWP TreeGrid control | Syncfusion® -description: Learn here all about Conditional Styling support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Conditional Styling in UWP SfTreeGrid | Syncfusion® +description: Conditional Styling in UWP SfTreeGrid customizes row and cell appearance based on data using converters, triggers, and selectors. platform: uwp control: SfTreeGrid documentation: ug --- -# Conditional Styling in UWP TreeGrid (SfTreeGrid) +# Conditional Styling in UWP SfTreeGrid You can style the treegrid and its inner elements conditionally based on data in three ways, diff --git a/uwp/TreeGrid/Data-Binding.md b/uwp/TreeGrid/Data-Binding.md index c2e86c96d..5021b6019 100644 --- a/uwp/TreeGrid/Data-Binding.md +++ b/uwp/TreeGrid/Data-Binding.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Binding in UWP TreeGrid control | Syncfusion® -description: Learn here all about Data Binding support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Data Binding in UWP SfTreeGrid | Syncfusion® +description: Data Binding in UWP SfTreeGrid supports self-relational and nested collections, enabling dynamic display of hierarchical data seamlessly. platform: uwp control: SfTreeGrid documentation: ug --- -# Data Binding in UWP TreeGrid (SfTreeGrid) +# Data Binding in UWP SfTreeGrid SfTreeGrid is designed to display the self-relational and hierarchical data in tree structure with columns. The data binding can be achieved by assigning the data source to [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property directly through self-relational binding or nested collection or retrieving the parent and child nodes items dynamically with [RequestTreeItems](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_RequestTreeItems). If the data source implements [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-7.0&redirectedfrom=MSDN) interface, then SfTreeGrid control will automatically refresh the UI when item is added, removed or while list cleared. When you add, remove item in [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-7.0&redirectedfrom=MSDN), SfTreeGrid automatically refreshes the UI as `ObservableCollection` implements `INotifyCollectionChanged`. But when you do the same in [List](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.list-1?view=net-7.0&redirectedfrom=MSDN), SfTreeGrid will not refresh the UI automatically. diff --git a/uwp/TreeGrid/Data-Validation.md b/uwp/TreeGrid/Data-Validation.md index e18b19c18..c029ec100 100644 --- a/uwp/TreeGrid/Data-Validation.md +++ b/uwp/TreeGrid/Data-Validation.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Validation in UWP TreeGrid control | Syncfusion® -description: Learn here all about Data Validation support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Data Validation in UWP SfTreeGrid | Syncfusion® +description: Data Validation in UWP SfTreeGrid supports built-in and custom rules with error indicators and tooltips for accurate input. platform: uwp control: SfTreeGrid documentation: ug --- -# Data Validation in UWP TreeGrid (SfTreeGrid) +# Data Validation in UWP SfTreeGrid SfTreeGrid allows you to validate the data and display hints in case of validation is not passed. In case of invalid data, error icon is displayed at the top right corner of [TreeGridCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridCell.html). When mouse over the error icon, error information will be displayed in tooltip. diff --git a/uwp/TreeGrid/Editing.md b/uwp/TreeGrid/Editing.md index 11a1a6d5f..29fc357ce 100644 --- a/uwp/TreeGrid/Editing.md +++ b/uwp/TreeGrid/Editing.md @@ -1,7 +1,7 @@ --- layout: post -title: Editing in UWP TreeGrid control | Syncfusion® -description: Learn here all about Editing support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more features. +title: Editing in UWP SfTreeGrid | Syncfusion® +description: Editing in UWP SfTreeGrid supports entering edit mode with keys or taps and controlling cursor placement using selection behaviors. platform: uwp control: SfTreeGrid documentation: ug @@ -9,7 +9,7 @@ documentation: ug -# Editing in UWP TreeGrid (SfTreeGrid) +# Editing in UWP SfTreeGrid SfTreeGrid provides support for editing and it can be enabled or disabled by setting [SfTreeGrid.AllowEditing](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowEditing) property. @@ -44,7 +44,7 @@ N> `TreeGridColumn.AllowEditing` takes higher priority than `SfTreeGrid.AllowEdi N> It is mandatory to set the NavigationMode to Cell to enable CurrentCell navigation and editing. -### Entering into edit mode +## Entering into edit mode You can enter into edit mode by pressing <kbd>F2</kbd> key or clicking (touch also supported) the cell. You can allow users to edit the cell in single click (OnTap) or double click (OnDoubleTap) by setting [SfTreeGrid.EditTrigger](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_EditTrigger) property. diff --git a/uwp/TreeGrid/Export-To-Excel.md b/uwp/TreeGrid/Export-To-Excel.md index 6cdcd1617..28e906e6c 100644 --- a/uwp/TreeGrid/Export-To-Excel.md +++ b/uwp/TreeGrid/Export-To-Excel.md @@ -1,13 +1,13 @@ --- layout: post -title: Export To Excel in UWP TreeGrid control | Syncfusion® -description: Learn here all about Export To Excel support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Export to Excel in UWP SfTreeGrid | Syncfusion® +description: Export to Excel in UWP SfTreeGrid exports hierarchical data to excel with customization options for headers, cells, and styling. platform: uwp control: SfTreeGrid documentation: ug --- -# Export To Excel in UWP TreeGrid (SfTreeGrid) +# Export to Excel in UWP SfTreeGrid SfTreeGrid provides support to export the data to Excel file. This also provides support to export the headers and stacked headers. This maintains the sorting and filtering process when exporting. diff --git a/uwp/TreeGrid/Export-To-PDF.md b/uwp/TreeGrid/Export-To-PDF.md index 816be9010..be9e683a4 100644 --- a/uwp/TreeGrid/Export-To-PDF.md +++ b/uwp/TreeGrid/Export-To-PDF.md @@ -1,13 +1,13 @@ --- layout: post -title: Export To PDF in UWP TreeGrid control | Syncfusion® -description: Learn here all about Export To PDF support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Export to PDF in UWP SfTreeGrid | Syncfusion® +description: Export to PDF in UWP SfTreeGrid renders hierarchical data into PDF with customizable headers, pagination, and styling options. platform: uwp control: SfTreeGrid documentation: ug --- -# Export To PDF in UWP TreeGrid (SfTreeGrid) +# Export to PDF in UWP SfTreeGrid SfTreeGrid provides support to export the data to PDF file. This also provides support to export the headers and stacked headers. This maintains the sorting and filtering processes when exporting. diff --git a/uwp/TreeGrid/Filtering.md b/uwp/TreeGrid/Filtering.md index cdf455402..bdfa01828 100644 --- a/uwp/TreeGrid/Filtering.md +++ b/uwp/TreeGrid/Filtering.md @@ -1,13 +1,13 @@ --- layout: post -title: Filtering in UWP TreeGrid control | Syncfusion® -description: Learn here all about Filtering support in Syncfusion® Essential UWP TreeGrid (SfTreeGrid) control, its elements, and more. +title: Filtering in UWP SfTreeGrid | Syncfusion® +description: Filtering in UWP SfTreeGrid supports programmatic filtering and customization to refine and display hierarchical node data. platform: uwp control: SfTreeGrid documentation: ug --- -# Filtering in UWP TreeGrid (SfTreeGrid) +# Filtering in UWP SfTreeGrid ## Overview diff --git a/uwp/TreeGrid/Getting-Started.md b/uwp/TreeGrid/Getting-Started.md index aa328e9a8..8bce6457a 100644 --- a/uwp/TreeGrid/Getting-Started.md +++ b/uwp/TreeGrid/Getting-Started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting Started with UWP TreeGrid control | Syncfusion® -description: Learn here about getting started with Syncfusion® UWP TreeGrid (SfTreeGrid) control, its elements and more. +title: Getting Started with UWP SfTreeGrid | Syncfusion® +description: Learn how to get started with the Syncfusion® UWP SfTreeGrid control. Explore setup, features, examples, and customization options. platform: uwp control: SfTreeGrid documentation: ug --- -# Getting Started with UWP TreeGrid (SfTreeGrid) +# Getting Started with UWP SfTreeGrid The SfTreeGrid is a data oriented control that displays the self-relational and hierarchical data in tree structure with columns. The data can be loaded on-demand also. -### Assembly Deployment +## Assembly Deployment The following list of assemblies needs to be added as reference to use SfTreeGrid control in any application, diff --git a/uwp/TreeGrid/Helpers.md b/uwp/TreeGrid/Helpers.md index 4c580caca..ae968b31a 100644 --- a/uwp/TreeGrid/Helpers.md +++ b/uwp/TreeGrid/Helpers.md @@ -1,13 +1,13 @@ --- layout: post -title: Helpers in UWP TreeGrid control | Syncfusion® -description: Learn here all about Helpers support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Helpers in UWP SfTreeGrid | Syncfusion® +description: Helpers in SfTreeGrid provide index resolver methods to identify rows, columns, and nodes, and include dispose support for efficient memory management. platform: uwp control: SfTreeGrid documentation: ug --- -# Helpers in UWP TreeGrid (SfTreeGrid) +# Helpers in UWP SfTreeGrid ## IndexResolver diff --git a/uwp/TreeGrid/Interactive-Features.md b/uwp/TreeGrid/Interactive-Features.md index 18cb5293e..8ded4d949 100644 --- a/uwp/TreeGrid/Interactive-Features.md +++ b/uwp/TreeGrid/Interactive-Features.md @@ -1,13 +1,13 @@ --- layout: post -title: Interactive feature | TreeGrid | UWP | Syncfusion® -description: This section explains about the Interactive Features in SfTreeGrid. +title: Interactive Features in UWP SfTreeGrid | Syncfusion® +description: Interactive Features in UWP SfTreeGrid provide context menus for cells, rows, headers, and expanders with full customization. platform: uwp control: SfTreeGrid documentation: ug --- -# Interactive Features +# Interactive Features in UWP SfTreeGrid ## Context menu @@ -365,436 +365,4 @@ You can change the appearance of the context menu by customizing the style with {% endhighlight %} {% endtabs %} -![ContextMenu for appearance in sfTreeGrid uwp](ContextMenu_images/ContextMenu_img4.png) - - -### Drag and drop rows - -It allows users to drag and drop the rows in SfTreeGrid and between two SfTreeGrid by setting the [SfTreeGrid.AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AllowDraggingRows) property to `true`. It is also possible to drag and drop from any other control. - -{% tabs %} -{% highlight xaml %} - -{% endhighlight %} -{% highlight c# %} -treeGrid.AllowDraggingRows = true; -{% endhighlight %} -{% endtabs %} - -![Drag and drop window while dragging in WPF treegrid](Row-Drag-And-Drop_images/Row-Drag-And-Drop_img1.png) - -When dropping, the dragged node(s) can be added above or below as a child node based on its drop position. For example, if you drop at the bottom of node, it will be added below the node. If you are drop over the node, then it will be added as a child of that node. - -![Drap and drop row as child](Row-Drag-And-Drop_images/Row-Drag-And-Drop_img2.png) - -### Auto expanding the node on drag over - -When drag over the tree node, if drop position is “Drop as child”, then you can auto expand the corresponding tree node by setting the [TreeGridRowDragDropController.CanAutoExpand](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_CanAutoExpand) as `true`. It is also possible to control the delay in expanding the node when drag over using [TreeGridRowDragDropController.AutoExpandDelay](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_AutoExpandDelay) property. Its default value in 3 sec. - -{% tabs %} -{% highlight c# %} -treeGrid.RowDragDropController.CanAutoExpand = true; -treeGrid.RowDragDropController.AutoExpandDelay = new TimeSpan(0, 0, 2); -{% endhighlight %} -{% endtabs %} - -N> When drop position is “Drop as child”, drag indicators will not be shown. - -### Dragging multiple nodes - -SfTreeGrid allows user to drag multiple selected nodes. You can enable multiple selection by setting the [SfTreeGrid.SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property to `Multiple` or `Extended`. - -![Drag and drop multiple rows](Row-Drag-And-Drop_images/Row-Drag-And-Drop_img3.png) - -### Drag and drop between TreeGrids - -SfTreeGrid provides built-in support to drag and drop the nodes between SfTreeGrid. - -### Disabling drag and drop between SfTreeGrid - -If [SfTreeGrid.AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AllowDraggingRows) is set to `true`, you can drag and drop nodes between TreeGrids and within TreeGrid. If you want to disable the drag-and-drop functionality from one TreeGrid to another TreeGrid, override the target TreeGrid’s [GetDropPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_GetDropPosition_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method in [TreeGridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html) class. - -{% tabs %} -{% highlight c# %} -public class TreeGridRowDragDropControllerExt : TreeGridRowDragDropController -{ - - public TreeGridRowDragDropControllerExt(SfTreeGrid treeGrid) : base(treeGrid) - { - } - - protected override DropPosition GetDropPosition(DragEventArgs args, RowColumnIndex rowColumnIndex) - { - SfTreeGrid sourceTreeGrid = null; - - if (args.DataView.Properties.ContainsKey("SourceTreeGrid")) - sourceTreeGrid = args.DataView.Properties["SourceTreeGrid"] as SfTreeGrid; - - // Disable drop operation if source tree grid is different. - - if (sourceTreeGrid != TreeGrid) - return DropPosition.None; - return base.GetDropPosition(args, rowColumnIndex); - } -} -treeGrid.RowDragDropController = new TreeGridRowDragDropControllerExt(treeGrid); -{% endhighlight %} -{% endtabs %} - -If source tree grid and target tree grid are different, drop operation will be disabled. - -### Customizing row drag and drop - -SfTreeGrid processes row drag and drop operations in [TreeGridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html) class. You can customize the row drag and drop operations by overriding `TreeGridRowDragDropController` and set it to[SfTreeGrid.RowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_RowDragDropController). - -#### Disable dragging of certain nodes - -If you want to restrict the dragging for specific node, you need to override the [ProcessOnDragStarting](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_ProcessOnDragStarting_Windows_UI_Xaml_DragStartingEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method in [TreeGridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html) class. - -Here, drag operation is disabled for root nodes. - -{% tabs %} -{% highlight c# %} -public class TreeGridRowDragDropControllerExt : TreeGridRowDragDropController -{ - - public TreeGridRowDragDropControllerExt(SfTreeGrid treeGrid) : base(treeGrid) - { - } - - protected override void ProcessOnDragStarting(DragStartingEventArgs args, RowColumnIndex rowColumnIndex) - { - base.ProcessOnDragStarting(args, rowColumnIndex); - - // Skip dragging of root nodes. - - if (args.Data.Properties.ContainsKey("Nodes")) - { - var nodes = args.Data.Properties["Nodes"] as ObservableCollection; - var node = nodes.FirstOrDefault(n => n.Level == 0); - - if (node != null) - args.Cancel = true; - } - } -} -{% endhighlight %} -{% endtabs %} - -#### Disable drop over specific node - -If you want to restrict the drop for specific nodes, you need to override the [GetDropPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_GetDropPosition_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method in [TreeGridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html) class. - -Here, the drop operation is disabled on leaf nodes. - -{% tabs %} -{% highlight c# %} -public class TreeGridRowDragDropControllerExt : TreeGridRowDragDropController -{ - - public TreeGridRowDragDropControllerExt(SfTreeGrid treeGrid) : base(treeGrid) - { - } - - protected override DropPosition GetDropPosition(DragEventArgs args, RowColumnIndex rowColumnIndex) - { - var nodeIndex = TreeGrid.ResolveToNodeIndex(rowColumnIndex.RowIndex); - var node = TreeGrid.View.GetNodeAt(nodeIndex); - - // Disable drop on leaf nodes. - - if (!node.HasChildNodes) - return DropPosition.None; - return base.GetDropPosition(args, rowColumnIndex); - } -} - -treeGrid.RowDragDropController = new TreeGridRowDragDropControllerExt(treeGrid); -{% endhighlight %} -{% endtabs %} - -#### Customizing drag UI text - -You can customize the drag UI text by overriding the [ProcessOnDragOver](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_ProcessOnDragOver_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method in [TreeGridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html) class. - -Here, the drag UI text is localized based to the German language. - -{% tabs %} -{% highlight c# %} -public class TreeGridRowDragDropControllerExt : TreeGridRowDragDropController -{ - - public TreeGridRowDragDropControllerExt(SfTreeGrid treeGrid) : base(treeGrid) - { - } - - protected override void ProcessOnDragOver(DragEventArgs args, RowColumnIndex rowColumnIndex) - { - base.ProcessOnDragOver(args, rowColumnIndex); - var dropPosition = GetDropPosition(args, rowColumnIndex); - - if (dropPosition == DropPosition.DropAbove) - args.DragUIOverride.Caption = "rube fallen"; - } -} -treeGrid.RowDragDropController = new TreeGridRowDragDropControllerExt(treeGrid); -{% endhighlight %} -{% endtabs %} - -### Customizing dragging nodes - -When dragging, all the selected nodes will be added to the dragging nodes collection. If you want to customize the dragging nodes collection, override the [ProcessOnDragOver](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_ProcessOnDragOver_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method in [TreeGridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html) class. - -{% tabs %} -{% highlight c# %} -public class TreeGridRowDragDropControllerExt : TreeGridRowDragDropController -{ - - public TreeGridRowDragDropControllerExt(SfTreeGrid treeGrid) : base(treeGrid) - { - } - - protected override void ProcessOnDragStarting(DragStartingEventArgs args, RowColumnIndex rowColumnIndex) - { - var nodes = new ObservableCollection(); - var node = this.TreeGrid.GetNodeAtRowIndex(rowColumnIndex.RowIndex); - - if (node == null) - return; - nodes.Add(node); - args.Data.Properties.Add("Nodes", nodes); - args.Data.Properties.Add("SourceTreeGrid", TreeGrid); - args.Data.SetText(StandardDataFormats.Text); - args.DragUI.SetContentFromDataPackage(); - } -} -treeGrid.RowDragDropController = new TreeGridRowDragDropControllerExt(treeGrid); -{% endhighlight %} -{% endtabs %} - -Here, even multiple nodes had been selected, only the dragged node will be added to the dragging nodes collection. - -### Drag and drop between ListView and TreeGrid - -You can drag the item from ListView and drop into TreeGrid by overriding the [GetDropPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_GetDropPosition_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_), [ProcessOnDragOver](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_ProcessOnDragOver_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_), and [ProcessOnDrop](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowDragDropController_ProcessOnDrop_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) methods in the [TreeGridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowDragDropController.html) class. - -In ListView, use the DragItemsStarting event and add dragged item. - -{% tabs %} -{% highlight c# %} -listView.CanDragItems = true; -listView.DragItemsStarting += ListView_DragItemsStarting; -listView.DragItemsCompleted += ListView_DragItemsCompleted; - -private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArgs e) -{ - e.Data.Properties.Add("DraggedItem", listView.SelectedItem); - e.Data.SetText(StandardDataFormats.Text); -} - -private void ListView_DragItemsCompleted(ListViewBase sender, DragItemsCompletedEventArgs args) -{ - - foreach (var item in args.Items) - { - (listView.ItemsSource as ObservableCollection).Remove(item as PersonInfo); - } -} -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight c# %} -public class TreeGridRowDragDropControllerExt : TreeGridRowDragDropController -{ - - public TreeGridRowDragDropControllerExt(SfTreeGrid treeGrid) : base(treeGrid) - { - } - - protected override void ProcessOnDrop(DragEventArgs args, RowColumnIndex rowColumnIndex) - { - this.TreeGrid.AutoScroller.AutoScrolling = AutoScrollOrientation.None; - var dropPosition = GetDropPosition(args, rowColumnIndex); - - if (dropPosition != DropPosition.None && rowColumnIndex.RowIndex != -1) - { - var draggedItem = GetDraggedItem(args); - - if (this.TreeGrid.View is TreeGridNestedView) - { - var treeNode = this.TreeGrid.GetNodeAtRowIndex(rowColumnIndex.RowIndex); - - if (treeNode == null) - return; - var data = treeNode.Item; - TreeGrid.SelectionController.SuspendUpdates(); - var itemIndex = -1; - - TreeNode parentNode = null; - - if (dropPosition == DropPosition.DropBelow || dropPosition == DropPosition.DropAbove) - parentNode = treeNode.ParentNode; - - else if (dropPosition == DropPosition.DropAsChild) - { - - if (!treeNode.IsExpanded) - TreeGrid.ExpandNode(treeNode); - parentNode = treeNode; - } - IList sourceCollection = null; - - if (dropPosition == DropPosition.DropBelow || dropPosition == DropPosition.DropAbove) - { - - if (treeNode.ParentNode != null) - { - var collection = TreeGrid.View.GetPropertyAccessProvider().GetValue(treeNode.ParentNode.Item, TreeGrid.ChildPropertyName) as IEnumerable; - sourceCollection = GetSourceListCollection(collection); - } - - else - { - sourceCollection = GetSourceListCollection(TreeGrid.View.SourceCollection); - } - itemIndex = sourceCollection.IndexOf(data); - - if (dropPosition == DropPosition.DropBelow) - { - itemIndex += 1; - } - } - - else if (dropPosition == DropPosition.DropAsChild) - { - var collection = TreeGrid.View.GetPropertyAccessProvider().GetValue(data, TreeGrid.ChildPropertyName) as IEnumerable; - sourceCollection = GetSourceListCollection(collection); - - if (sourceCollection == null) - { - var list = data.GetType().GetProperty(TreeGrid.ChildPropertyName).PropertyType.CreateNew() as IList; - - if (list != null) - { - TreeGrid.View.GetPropertyAccessProvider().SetValue(treeNode.Item, TreeGrid.ChildPropertyName, list); - sourceCollection = list; - } - } - itemIndex = sourceCollection.Count; - } - sourceCollection.Insert(itemIndex, draggedItem); - TreeGrid.SelectionController.ResumeUpdates(); - (TreeGrid.SelectionController as TreeGridRowSelectionController).RefreshSelection(); - } - } - CloseDragIndicators(); - - } - - protected override DropPosition GetDropPosition(DragEventArgs args, RowColumnIndex rowColumnIndex) - { - bool canDrop = true; - var p = args.GetPosition(this.TreeGrid); - var treeNode = this.TreeGrid.GetNodeAtRowIndex(rowColumnIndex.RowIndex); - ScrollAxisRegion columnRegion = ScrollAxisRegion.Body; - var treeGridPanel = TreeGrid.GetTreePanel(); - - if (treeGridPanel.FrozenColumns > 0) - columnRegion = ScrollAxisRegion.Header; - var rowRect = treeGridPanel.RangeToRect(ScrollAxisRegion.Body, columnRegion, rowColumnIndex, true, false); - var node = treeNode; - - if (!canDrop) - return DropPosition.None; - - else if (p.Y > rowRect.Y + 15 && p.Y < rowRect.Y + 35) - { - return DropPosition.DropAsChild; - } - - else if (p.Y < rowRect.Y + 15) - { - return DropPosition.DropAbove; - } - - else if (p.Y > rowRect.Y + 35) - { - return DropPosition.DropBelow; - } - - else - return DropPosition.Default; - } - - protected override void ProcessOnDragOver(DragEventArgs args, RowColumnIndex rowColumnIndex) - { - autoExpandNode = null; - var node = this.TreeGrid.GetNodeAtRowIndex(rowColumnIndex.RowIndex); - var draggedItem = GetDraggedItem(args); - var dropPosition = GetDropPosition(args, rowColumnIndex); - - if (draggedItem == null) - return; - - if (dropPosition == DropPosition.None || dropPosition == DropPosition.Default) - { - CloseDragIndicators(); - args.AcceptedOperation = DataPackageOperation.None; - args.DragUIOverride.Caption = "Can't drop here"; - return; - } - - else if (dropPosition == DropPosition.DropAbove) - { - args.DragUIOverride.Caption = "Drop above"; - } - - else if (dropPosition == DropPosition.DropAsChild) - { - args.DragUIOverride.Caption = "Drop as child"; - } - - else - { - args.DragUIOverride.Caption = "Drop below"; - } - args.AcceptedOperation = DataPackageOperation.Move; - ShowDragIndicators(dropPosition, rowColumnIndex); - args.Handled = true; - } - - private object GetDraggedItem(DragEventArgs dragEventArgs) - { - - if (dragEventArgs.DataView.Properties.ContainsKey("DraggedItem")) - return dragEventArgs.DataView.Properties["DraggedItem"]; - - else - return null; - } - - internal IList GetSourceListCollection(IEnumerable collection = null) - { - IList list = null; - - if (collection == null) - collection = TreeGrid.View.SourceCollection; - - if ((collection as IList) != null) - { - list = collection as IList; - } - return list; - } -} -{% endhighlight %} -{% endtabs %} - -After dropping in tree grid, the dragged item is added to TreeGrid based on the dropped position. -Sample for dragging the item from ListView and dropping into TreeGrid: [Sample](https://github.com/SyncfusionExamples/how-to-drag-and-drop-rows-in-wpf-and-uwp-between-listview-and-treegrid/tree/master/UWP). - - +![ContextMenu for appearance in sfTreeGrid uwp](ContextMenu_images/ContextMenu_img4.png) \ No newline at end of file diff --git a/uwp/TreeGrid/Localization.md b/uwp/TreeGrid/Localization.md index 4b193b6ab..9a14900fb 100644 --- a/uwp/TreeGrid/Localization.md +++ b/uwp/TreeGrid/Localization.md @@ -1,13 +1,13 @@ --- layout: post -title: Localization in UWP TreeGrid control | Syncfusion® -description: Learn here all about Localization support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Localization in UWP SfTreeGrid | Syncfusion® +description: Localization in UWP SfTreeGrid supports changing culture, language, and resource files to deliver region-specific user experiences. platform: uwp control: SfTreeGrid documentation: ug --- -# Localization in UWP TreeGrid (SfTreeGrid) +# Localization in UWP SfTreeGrid Localization is the process of translating the application resources into different language for the specific cultures. You can localize the treegrid by adding resource file. Application culture can be changed by setting [CurrentUICulture](https://msdn.microsoft.com/en-us/library/system.globalization.cultureinfo.currentuiculture.aspx) before InitializeComponent method. diff --git a/uwp/TreeGrid/MVVM.md b/uwp/TreeGrid/MVVM.md index 4aff3d91a..b2bc36e6e 100644 --- a/uwp/TreeGrid/MVVM.md +++ b/uwp/TreeGrid/MVVM.md @@ -1,13 +1,13 @@ --- layout: post -title: MVVM in UWP TreeGrid control | Syncfusion® -description: Learn here all about MVVM support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more features. +title: MVVM in UWP SfTreeGrid | Syncfusion® +description: MVVM in UWP SfTreeGrid supports data binding, commands, and notifications for structured, maintainable application development. platform: uwp control: SfTreeGrid documentation: ug --- -# MVVM in UWP TreeGrid (SfTreeGrid) +# MVVM in UWP SfTreeGrid This section explains various MVVM requirements using SfTreeGrid. diff --git a/uwp/TreeGrid/Node-CheckBox.md b/uwp/TreeGrid/Node-CheckBox.md index 2de63d834..031552472 100644 --- a/uwp/TreeGrid/Node-CheckBox.md +++ b/uwp/TreeGrid/Node-CheckBox.md @@ -1,12 +1,12 @@ --- layout: post -title: Node CheckBox in UWP TreeGrid control | Syncfusion® -description: Learn here all about Node CheckBox support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Node CheckBox in UWP SfTreeGrid | Syncfusion® +description: Node CheckBox in UWP SfTreeGrid adds checkboxes to nodes for selection, tri-state, and recursive checking. platform: uwp control: SfTreeGrid documentation: ug --- -# Node CheckBox in UWP TreeGrid (SfTreeGrid) +# Node CheckBox in UWP SfTreeGrid SfTreeGrid provides support for loading `CheckBox` in the expander cell of each node, which allows the user to check/uncheck the corresponding node. You can display check box in each node by setting [SfTreeGrid.ShowCheckBox](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ShowCheckBox) property as `true`. It also provides support to process the selection in the context of state of the checkbox based on [SfTreeGrid.CheckBoxSelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CheckBoxSelectionMode) property. diff --git a/uwp/TreeGrid/Row-Drag-And-Drop.md b/uwp/TreeGrid/Row-Drag-And-Drop.md index 8f191b6cf..d4eb8f6b8 100644 --- a/uwp/TreeGrid/Row-Drag-And-Drop.md +++ b/uwp/TreeGrid/Row-Drag-And-Drop.md @@ -1,12 +1,12 @@ --- layout: post -title: Row Drag and Drop in UWP TreeGrid Control | Syncfusion® -description: Learn here all about row drag and drop support in Syncfusion® Essential® UWP TreeGrid control, it's elements and more. +title: Row Drag and Drop in UWP SfTreeGrid | Syncfusion® +description: Row Drag and Drop in UWP SfTreeGrid enables interactive row reordering with customizable drop positions and events. platform: uwp control: SfTreeGrid documentation: ug --- -# Row Drag and Drop in UWP TreeGrid +# Row Drag and Drop in UWP SfTreeGrid You can allow end-users to drag and drop the rows in SfTreeGrid and between two SfTreeGrid by setting [SfTreeGrid.AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AllowDraggingRows) to `true`.It is also possible to drag and drop to and from any other control. diff --git a/uwp/TreeGrid/Rows.md b/uwp/TreeGrid/Rows.md index 66a2aa013..09848bf58 100644 --- a/uwp/TreeGrid/Rows.md +++ b/uwp/TreeGrid/Rows.md @@ -1,13 +1,13 @@ --- layout: post -title: Rows in UWP TreeGrid control | Syncfusion® -description: Learn here all about Rows support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more features. +title: Rows in UWP SfTreeGrid | Syncfusion® +description: Rows in UWP SfTreeGrid manages row headers, indicators, and customization options for different row types. platform: uwp control: SfTreeGrid documentation: ug --- -# Rows in UWP TreeGrid (SfTreeGrid) +# Rows in UWP SfTreeGrid This section explains about various row types in treegrid and its customizations. diff --git a/uwp/TreeGrid/Selection.md b/uwp/TreeGrid/Selection.md index 3ea0ed7b7..b3d7f1310 100644 --- a/uwp/TreeGrid/Selection.md +++ b/uwp/TreeGrid/Selection.md @@ -1,13 +1,13 @@ --- layout: post -title: Selection in UWP TreeGrid control | Syncfusion® -description: Learn here all about Selection support in Syncfusion® UWP TreeGrid (SfTreeGrid) control, its elements, features, and more. +title: Selection in UWP SfTreeGrid | Syncfusion® +description: Selection in UWP SfTreeGrid supports row and cell selection with single, multiple, and extended modes with navigation. platform: uwp control: SfTreeGrid documentation: ug --- -# Selection in UWP TreeGrid (SfTreeGrid) +# Selection in UWP SfTreeGrid SfTreeGrid allows you select one or more rows. diff --git a/uwp/TreeGrid/Sorting.md b/uwp/TreeGrid/Sorting.md index 69d3558d2..aacaffa3d 100644 --- a/uwp/TreeGrid/Sorting.md +++ b/uwp/TreeGrid/Sorting.md @@ -1,14 +1,14 @@ --- layout: post -title: Sorting in UWP TreeGrid control | Syncfusion® -description: Learn here all about Sorting support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: Sorting in UWP SfTreeGrid | Syncfusion® +description: Sorting in UWP SfTreeGrid sorts one or more columns in ascending or descending order with customizable sort behavior. platform: uwp control: SfTreeGrid documentation: ug --- -# Sorting in UWP TreeGrid (SfTreeGrid) +# Sorting in UWP SfTreeGrid SfTreeGrid allows you to sort the data against one or more columns either in ascending or descending order. When sorting is applied, the rows are rearranged based on sort criteria. You can allow users to sort the data by touching or clicking the column header using [SfTreeGrid.AllowSorting](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. @@ -196,7 +196,7 @@ You can implement [ISortDirection](https://help.syncfusion.com/cr/uwp/Syncfusion Follow the below steps to add custom comparer to sort using custom logic, -#### Define custom comparer with custom sort logic +### Define custom comparer with custom sort logic In the below code snippet, `FirstName` property is compared based on its string length, instead of default string comparison. @@ -282,7 +282,7 @@ Sorting `FirstName` column sorts the data using custom sort comparer available i [Action](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_Action) - Gets the action triggered this event. -[Cancel](http://msdn2.microsoft.com/en-us/library/system.componentmodel.canceleventargs.cancel.aspx) - Setting value to `true`, cancels the triggered action. +[Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?view=net-10.0&redirectedfrom=MSDN#System_ComponentModel_CancelEventArgs_Cancel) - Setting value to `true`, cancels the triggered action. [AddedItems](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_AddedItems) - Gets the list of new `SortColumnDescriptions` that are added. @@ -290,7 +290,7 @@ Sorting `FirstName` column sorts the data using custom sort comparer available i [CancelScroll](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_CancelScroll) - Gets or sets a value that indicates, whether scroll and bring SelectedItem in view after sorting takes place. -You can prevent sorting for the particular column through [GridSortColumnsChangingEventArgs.Cancel](http://msdn2.microsoft.com/en-us/library/system.componentmodel.canceleventargs.cancel.aspx) property of `SortColumnChanging` event. +You can prevent sorting for the particular column through [GridSortColumnsChangingEventArgs.Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?view=net-10.0&redirectedfrom=MSDN#System_ComponentModel_CancelEventArgs_Cancel) property of `SortColumnChanging` event. {% tabs %} {% highlight c# %} diff --git a/uwp/TreeGrid/ToolTip.md b/uwp/TreeGrid/ToolTip.md index 0c0876e29..1c4eaa99e 100644 --- a/uwp/TreeGrid/ToolTip.md +++ b/uwp/TreeGrid/ToolTip.md @@ -1,12 +1,13 @@ --- layout: post -title: ToolTip in UWP TreeGrid control | Syncfusion® -description: Learn here all about ToolTip support in Syncfusion® UWP TreeGrid (SfTreeGrid) control and more. +title: ToolTip in UWP SfTreeGrid | Syncfusion® +description: ToolTip in UWP SfTreeGrid displays helpful information on hovering cells with customizable content and styling options. platform: uwp control: SfTreeGrid documentation: ug --- +# ToolTip in UWP SfTreeGrid ## Tooltip