From 2c2484693c3494c4e93ffead3b29bb7e24c19a54 Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Tue, 7 Jul 2026 19:50:28 +0530 Subject: [PATCH 01/15] 1039252_ Updated spelling, grammar and API link issues in DataGrid and TreeGrid --- wpf/DataGrid/Paging.md | 6 +++--- wpf/TreeGrid/Column-Type.md | 10 +++++----- wpf/TreeGrid/Columns.md | 2 +- wpf/TreeGrid/Editing.md | 2 +- wpf/TreeGrid/GridLines.md | 2 +- wpf/TreeGrid/Paging.md | 2 +- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/wpf/DataGrid/Paging.md b/wpf/DataGrid/Paging.md index 7917c540a3..89cf633780 100644 --- a/wpf/DataGrid/Paging.md +++ b/wpf/DataGrid/Paging.md @@ -19,7 +19,7 @@ Follow the below steps to bind SfDataGrid with SfDataPager. 2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of records to be displayed per page. -3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be update based on current page. +3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. {% capture codesnippet1 %} {% tabs %} @@ -123,7 +123,7 @@ public class OrderInfo {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} -![WPF DataGrid diplays Multiple Pages using SfDataPager](paging_images/wpf-datagrid-multiple-page.png) +![WPF DataGrid displays Multiple Pages using SfDataPager](paging_images/wpf-datagrid-multiple-page.png) #### Limitations @@ -483,7 +483,7 @@ private void dataPager_OnDemandLoading(object sender, Syncfusion.UI.Xaml.Control {% endtabs %} -![WPF DataGrid displys Sorting with loaded DataPager](paging_images/wpf-datagrid-sorting.png) +![WPF DataGrid displays Sorting with loaded DataPager](paging_images/wpf-datagrid-sorting.png) ### Loading ItemsSource for page using async and await diff --git a/wpf/TreeGrid/Column-Type.md b/wpf/TreeGrid/Column-Type.md index adfb0c1071..81919845a4 100644 --- a/wpf/TreeGrid/Column-Type.md +++ b/wpf/TreeGrid/Column-Type.md @@ -218,7 +218,7 @@ In the below code snippet, `TreeGridCurrencyColumn` is loaded with `ProgressBar` ![WPF TreeGrid Column with ProgressBar](ColumnTypes_images/wpf-treegrid-with-progressbar.png) -`CellTemplate` is not support by [TreeGridHyperlinkColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridHyperlinkColumn.html) and[TreeGridCheckBoxColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCheckBoxColumn.html) columns. +`CellTemplate` is not support by [TreeGridHyperlinkColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridHyperlinkColumn.html) and [TreeGridCheckBoxColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCheckBoxColumn.html) columns. #### Reusing same DataTemplate for multiple columns @@ -264,7 +264,7 @@ You can use the same [DataTemplate](https://docs.microsoft.com/en-us/uwp/api/Win #### Setting CellTemplate based on custom logic using TemplateSelector -`TreeGridColumn` provides support to choose different[DataTemplate](https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.DataTemplate?redirectedfrom=MSDN&view=winrt-20348) based on underlying data object using [TreeGridColumn.CellTemplateSelector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_CellTemplateSelector) property. +`TreeGridColumn` provides support to choose different [DataTemplate](https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.DataTemplate?redirectedfrom=MSDN&view=winrt-20348) based on underlying data object using [TreeGridColumn.CellTemplateSelector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_CellTemplateSelector) property. For example, two different templates loaded alternatively in `Salary` column. @@ -492,7 +492,7 @@ You can apply format for the column using [StringFormat](https://docs.microsoft. {% endhighlight %} {% endtabs %} -When column is auto-generated, you can set the 'StringFormat' by handling 'AutoGeneratingColumn' event. +When column is auto-generated, you can set the `StringFormat` by handling `AutoGeneratingColumn` event. {% tabs %} {% highlight c# %} @@ -561,7 +561,7 @@ public class CurrencyFormatConverter : IValueConverter {% endhighlight %} {% endtabs %} -When column is auto-generated, you can set the `Converter` by handling [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html) event +When column is auto-generated, you can set the `Converter` by handling [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoGeneratingColumn) event {% tabs %} {% highlight c# %} @@ -784,7 +784,7 @@ TreeGridColumn allows you to change the alignment of `TreeGridCell` and `TreeGri * Text decorations - You can [decorate](https://docs.microsoft.com/en-us/dotnet/api/system.windows.textdecorations?redirectedfrom=MSDN&view=net-5.0) column? data using [TextDecorations](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumnBase.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridTextColumnBase_TextDecorations) property. -* Text trimming - You can [trim]() the column? data using [TextTrimming](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumnBase.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridTextColumnBase_TextTrimming) property. +* Text trimming - You can [trim](https://learn.microsoft.com/en-us/dotnet/api/system.windows.texttrimming?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0) the column? data using [TextTrimming](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumnBase.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridTextColumnBase_TextTrimming) property. * Text wrapping - You can [wrap](https://docs.microsoft.com/en-us/dotnet/api/system.windows.textwrapping?redirectedfrom=MSDN&view=net-5.0) the column? data using [TextWrapping](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumnBase.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridTextColumnBase_TextWrapping) property. diff --git a/wpf/TreeGrid/Columns.md b/wpf/TreeGrid/Columns.md index 02d030c05d..7fcde62d4b 100644 --- a/wpf/TreeGrid/Columns.md +++ b/wpf/TreeGrid/Columns.md @@ -577,7 +577,7 @@ this.treeGrid.Columns.Clear(); {% endhighlight %} {% endtabs %} -You can remove a column using Remove and RemoveAt methods. +You can remove a column using the `Remove` and `RemoveAt` methods. {% tabs %} {% highlight c# %} diff --git a/wpf/TreeGrid/Editing.md b/wpf/TreeGrid/Editing.md index 3d783fc429..e19e570c05 100644 --- a/wpf/TreeGrid/Editing.md +++ b/wpf/TreeGrid/Editing.md @@ -103,7 +103,7 @@ this.treeGrid.EditorSelectionBehavior = EditorSelectionBehavior.SelectAll; ## Support for IEditableObject -SfTreeGrid supports to commit and roll back the changes in row level when underlying data object implements [IEditableObject](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject?redirectedfrom=MSDN&view=net-5.0) interface. +`SfTreeGrid` supports committing and rolling back the changes in row level when underlying data object implements the [IEditableObject](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject?redirectedfrom=MSDN&view=net-5.0) interface. The editing changes in a row will be committed only when user move to next row or pressing enter key in [EndEdit](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject.endedit?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_IEditableObject_EndEdit). Also when user press Esc key, then the changes made in a row will be reverted in [CancelEdit](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject.canceledit?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_IEditableObject_CancelEdit). diff --git a/wpf/TreeGrid/GridLines.md b/wpf/TreeGrid/GridLines.md index 4a01481969..f3b3988b48 100644 --- a/wpf/TreeGrid/GridLines.md +++ b/wpf/TreeGrid/GridLines.md @@ -143,7 +143,7 @@ this.sfTreeGrid.HeaderLinesVisibility = GridLinesVisibility.Horizontal; ## Limitations -* Grid lines customization are not supported for RowHeader. +* Grid lines customization is not supported for RowHeader. N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Paging.md b/wpf/TreeGrid/Paging.md index ca8b06c529..450bd5dfcc 100644 --- a/wpf/TreeGrid/Paging.md +++ b/wpf/TreeGrid/Paging.md @@ -174,7 +174,7 @@ public class EmployeeInfo {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} -![WPF TreeGrid diplays Multiple Pages using SfDataPager](paging_images/wpf-treeGrid-multiple-page.png) +![WPF TreeGrid displays Multiple Pages using SfDataPager](paging_images/wpf-treeGrid-multiple-page.png) ### Limitations From 152e081fe976753550c971e7374b99368348e70a Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Wed, 8 Jul 2026 16:19:44 +0530 Subject: [PATCH 02/15] 1039292_ Updated grammatical and spelling errors --- wpf/DataGrid/Columns.md | 62 ++++++++-------- wpf/DataGrid/Filtering.md | 142 ++++++++++++++++++------------------ wpf/DataGrid/Paging.md | 56 +++++++------- wpf/DataGrid/Selection.md | 14 ++-- wpf/DataGrid/Sorting.md | 54 +++++++------- wpf/TreeGrid/Column-Type.md | 10 +-- wpf/TreeGrid/Columns.md | 64 ++++++++-------- wpf/TreeGrid/Filtering.md | 78 ++++++++++---------- wpf/TreeGrid/Paging.md | 18 ++--- wpf/TreeGrid/Selection.md | 50 ++++++------- wpf/TreeGrid/Sorting.md | 54 +++++++------- 11 files changed, 301 insertions(+), 301 deletions(-) diff --git a/wpf/DataGrid/Columns.md b/wpf/DataGrid/Columns.md index 913ac949a2..01a4f0ef03 100644 --- a/wpf/DataGrid/Columns.md +++ b/wpf/DataGrid/Columns.md @@ -1,7 +1,7 @@ --- layout: post title: Columns in WPF DataGrid control | Syncfusion® -description: Learn here all about Columns support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details. +description: Learn all about columns support in the Syncfusion® WPF DataGrid (SfDataGrid) control, its elements, and more details. platform: wpf control: SfDataGrid documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Columns in WPF DataGrid (SfDataGrid) -[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) allows you to add or remove columns using [SfDataGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_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 `SfDataGrid.Columns`. +[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) allows you to add or remove columns using the [SfDataGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) property. You can choose the columns to be added from the built-in column types, or you can create your own column and add it to the `SfDataGrid.Columns`. -Below are the built-in column types supported in SfDataGrid. Each column has its own properties to handle different types of data. +The following are the built-in column types supported in SfDataGrid. Each column has its own properties to handle different types of data. @@ -138,16 +138,16 @@ Use to display the IEnumerable data using SfMultiColumnDropdownControl. ## Defining columns -You can let the SfDataGrid to create columns or you can manually define columns to be displayed. Below sections explains both ways, +You can let the SfDataGrid create columns, or you can manually define columns to be displayed. The sections below explain both ways: 1. Automatically generating columns -2. Manually define columns +2. Manually defining columns ### Automatically generating columns -The automatic column generation based on properties of data object can be enabled or disabled by setting [SfDataGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns). Default value is `true`. +The automatic column generation based on properties of the data object can be enabled or disabled by setting the [SfDataGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns) property. The default value is `true`. -Columns are generated based on type of property. For example, [GridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridNumericColumn.html) is added for `int` type property. Below are table shows data type and its column type. For remaining types, `GridTextColumn` will be added. +Columns are generated based on the type of the property. For example, a [GridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridNumericColumn.html) is added for an `int` type property. The following table shows the data type and its corresponding column type. For the remaining types, `GridTextColumn` will be added.
@@ -209,11 +209,11 @@ GridTimeSpanColumn
-N> The order of columns in the collection will determine the order of that they will appear in SfDataGrid. +N> The order of columns in the collection will determine the order in which they will appear in SfDataGrid. #### AutoGenerateColumns with different modes -Column auto generation is controlled using [SfDataGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsMode) property. +Column auto generation is controlled using the [SfDataGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsMode) property. The `SfDataGrid.AutoGenerateColumnsMode` includes the following modes. @@ -278,8 +278,8 @@ Keeps old columns in DataGrid.Columns collection. #### Auto generating columns for complex type -Custom type (complex type) properties in data object can be auto-generated by setting [AutoGenerateColumnsForCustomType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsForCustomType) property as true. Default value is false. -Custom type properties will be auto-generated through [AutoGenerateColumnsModeForCustomType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AutoGenerateColumnsModeForCustomType.html) property. +Custom type (complex type) properties in the data object can be auto-generated by setting the [AutoGenerateColumnsForCustomType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsForCustomType) property to `true`. The default value is `false`. +Custom type properties will be auto-generated through the [AutoGenerateColumnsModeForCustomType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AutoGenerateColumnsModeForCustomType.html) property. {% tabs %} {% highlight xaml %} @@ -340,7 +340,7 @@ You can download the sample demo [here](https://github.com/SyncfusionExamples/ho #### Customize auto-generated columns in DataGrid -You can customize or cancel the generated column by handling [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AutoGeneratingColumn) event. `AutoGeneratingColumn` event occurs when the individual column is auto-generated for public and non-static property of underlying data object. +You can customize or cancel the generated column by handling the [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AutoGeneratingColumn) event. The `AutoGeneratingColumn` event occurs when the individual column is auto-generated for a public and non-static property of the underlying data object. {% tabs %} {% highlight c# %} @@ -356,9 +356,9 @@ void dataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e) ##### Cancel column generation for particular property -You can cancel the specific column adding to the DataGrid by handling `AutoGeneratingColumn` event. +You can cancel the specific column adding to the DataGrid by handling the `AutoGeneratingColumn` event. -In the below code, column generation for `OrderID` property is canceled by setting `Cancel` property to `true`. +In the code below, column generation for the `OrderID` property is canceled by setting the `Cancel` property to `true`. {% tabs %} {% highlight c# %} @@ -375,9 +375,9 @@ void dataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e) ##### Changing column type -You can change the type of column adding to SfDataGrid by setting the instance of column you want to add in `AutoGeneratingColumn` event. +You can change the type of column being added to SfDataGrid by setting the instance of the column you want to add in the `AutoGeneratingColumn` event. -In the below code, column type for `UnitPrice` property is changed to `GridTextColumn` by setting instance of GridTextColumn to `Column` property. +In the code below, the column type for the `UnitPrice` property is changed to `GridTextColumn` by setting the instance of `GridTextColumn` to the `Column` property. {% tabs %} {% highlight c# %} @@ -456,11 +456,11 @@ Below screenshot shows the customized header template loaded on the header of Or #### Data Annotations with AutoGenerateColumns -WPF DataGrid (SfDataGrid) support to generate the columns based on built-in [Data Annotation Attributes](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc490428(v=vs.95)). Data Annotations ignored, when the `AutoGenerateColumns` is set to False. +WPF DataGrid (SfDataGrid) supports generating the columns based on built-in [Data Annotation Attributes](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc490428(v=vs.95)). Data Annotations are ignored when the `AutoGenerateColumns` is set to `false`. ##### Exclude column -You can skip the column generation using `AutoGenerateField` property or set the `Bindable` attribute to false. +You can skip the column generation using the `AutoGenerateField` property or set the `Bindable` attribute to `false`. {% tabs %} {% highlight c# %} @@ -476,7 +476,7 @@ public int OrderID ##### Filtering -You can enable filtering automatically for the field using `Display.AutoGenerateFilter` property +You can enable filtering automatically for the field using the `Display.AutoGenerateFilter` property. {% tabs %} {% highlight c# %} @@ -508,7 +508,7 @@ public string Country ##### Change the HeaderText of column -You can customize header text of column using `Display.Name` property. +You can customize the header text of a column using the `Display.Name` property. {% tabs %} {% highlight c# %} @@ -583,7 +583,7 @@ public string Country ##### Format datagrid columns using DisplayFormat attribute -The auto-generated columns will be formatted using the [DataFormatString](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679306%28v%3dvs.95%29) property in the [DisplayFormat](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679253%28v%3dvs.95%29) attribute when the `DisplayFormat` attribute is defined for the properties defined in the view model. If the `DisplayFormat` attribute is defined with the `DataFormatString` property, the DataGrid formats the column only based on `DataFormatString`, without considering other formatting property settings of columns. +The auto-generated columns will be formatted using the [DataFormatString](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679306%28v%3dvs.95%29) property in the [DisplayFormat](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679253%28v%3dvs.95%29) attribute when the `DisplayFormat` attribute is defined for the properties defined in the view model. If the `DisplayFormat` attribute is defined with the `DataFormatString` property, the DataGrid formats the column only based on `DataFormatString`, without considering other formatting property settings of the columns. {% tabs %} {% highlight c# %} @@ -609,7 +609,7 @@ N> The `DataFormatString` attribute will be considered only when the column is a ### Manually defining columns -WPF DataGrid (SfDataGrid) control allows you to define the columns manually by adding desired column to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) collection. +The WPF DataGrid (SfDataGrid) control allows you to define the columns manually by adding the desired column to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) collection. {% tabs %} {% highlight xaml %} @@ -701,7 +701,7 @@ foreach (var name in childColumns) ## DataGrid column resizing -SfDataGrid allows to resize the columns like in excel by resizing column header. This can be enabled or disabled by setting [SfDataGrid.AllowResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [GridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property. +SfDataGrid allows resizing the columns like in Excel by resizing the column header. This can be enabled or disabled by setting the [SfDataGrid.AllowResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [GridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property. N> Resizing considers MinWidth and MaxWidth of column. @@ -726,8 +726,8 @@ SfDataGrid shows indication for hidden columns in column header and also allows ### Disable resizing -You can cancel resizing of particular column by setting [GridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property to `false`. In another way, you can cancel the resizing by handling [SfDataGrid.ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. The `ResizingColumns` event occurs when you start dragging by resizing cursor on headers. -[ResizingColumnsEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html) of `ResizingColumns` provides information about the columns’s index and width. +You can cancel resizing of a particular column by setting the [GridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property to `false`. Alternatively, you can cancel the resizing by handling the [SfDataGrid.ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. The `ResizingColumns` event occurs when you start dragging with the resizing cursor on the headers. +[ResizingColumnsEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html) of `ResizingColumns` provides information about the column's index and width. {% tabs %} {% highlight c# %} @@ -744,7 +744,7 @@ void dataGrid_ResizingColumns(object sender, ResizingColumnsEventArgs e) ### Identify resizing of the column gets completed -SfDataGrid allows you to identify the progress of the resizing of columns through [ResizingColumnsEventArgs.Reason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Reason) property. You can get the width of the column after resizing completed by getting [ResizingColumnsEventArgs.Width](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Width) when `ResizingColumnsEventArgs.Reason` is [ColumnResizingReason.Resized](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnResizingReason.html) in [ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. +SfDataGrid allows you to identify the progress of the resizing of columns through the [ResizingColumnsEventArgs.Reason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Reason) property. You can get the width of the column after resizing is completed by getting [ResizingColumnsEventArgs.Width](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Width) when `ResizingColumnsEventArgs.Reason` is [ColumnResizingReason.Resized](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnResizingReason.html) in the [ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. {% tabs %} {% highlight c# %} @@ -762,7 +762,7 @@ void OnResizingColumns(object sender, ResizingColumnsEventArgs e) ## DataGrid column drag and drop -You can allow end-users to rearrange the columns by drag and drop the column headers by setting [SfDataGrid.AllowDraggingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowDraggingColumns) to `true`. +You can allow end-users to rearrange the columns by dragging and dropping the column headers by setting [SfDataGrid.AllowDraggingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowDraggingColumns) to `true`. {% tabs %} {% highlight xaml %} @@ -787,9 +787,9 @@ You can enable or disable dragging on particular column using [GridColumn.AllowD ### Disable column reordering -You can cancel the particular column dragging by handling [SfDataGrid.QueryColumnDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_QueryColumnDragging). `QueryColumnDragging` event occurs when you start dragging the column header. [QueryColumnDraggingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingEventArgs.html) of `QueryColumnDragging` event provides information about the column triggered this event. +You can cancel the particular column dragging by handling [SfDataGrid.QueryColumnDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html). The `QueryColumnDragging` event occurs when you start dragging the column header. [QueryColumnDraggingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingEventArgs.html) of the `QueryColumnDragging` event provides information about the column that triggered this event. -`QueryColumnDraggingEventArgs.From` property returns the index of column triggered this event. `QueryColumnDraggingEventArgs.To` property returns the index where you try to drop the column. `QueryColumnDraggingEventArgs.Reason` returns column dragging details by [QueryColumnDraggingReason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingReason.html). +The `QueryColumnDraggingEventArgs.From` property returns the index of the column that triggered this event. The `QueryColumnDraggingEventArgs.To` property returns the index where you try to drop the column. The `QueryColumnDraggingEventArgs.Reason` returns the column dragging details through [QueryColumnDraggingReason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingReason.html). {% tabs %} {% highlight c# %} @@ -917,7 +917,7 @@ N> `FrozenColumnCount` and `FooterColumnCount` should be lesser than the number ## DataGrid freeze columns -You can freeze the columns in view at the left and right side like in excel by setting [SfDataGrid.FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount) and [SfDataGrid.FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount) properties. +You can freeze the columns in view at the left and right side like in Excel by setting the [SfDataGrid.FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount) and [SfDataGrid.FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount) properties. {% tabs %} {% highlight xaml %} @@ -932,7 +932,7 @@ You can freeze the columns in view at the left and right side like in excel by s ### Limitations -1. SfDataGrid has support to freeze the number of columns from the left or right. There is no support to freeze a specific column. +1. SfDataGrid supports freezing a number of columns from the left or right. There is no support to freeze a specific column. ## Binding column properties with ViewModel diff --git a/wpf/DataGrid/Filtering.md b/wpf/DataGrid/Filtering.md index 0230eb4e0a..b71937b549 100644 --- a/wpf/DataGrid/Filtering.md +++ b/wpf/DataGrid/Filtering.md @@ -1,26 +1,26 @@ --- layout: post title: Filtering in WPF DataGrid control | Syncfusion® -description: Learn here all about Filtering support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details. +description: Learn all about filtering support in the Syncfusion® WPF DataGrid (SfDataGrid) control, its elements, and more details. platform: wpf control: SfDataGrid documentation: ug --- # Filtering in WPF DataGrid (SfDataGrid) -Filtering is the process of retrieving the values from the collection which satisfy the specified condition. In the [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) the filtering can be applied though the UI as well as the programmatic filters. +Filtering is the process of retrieving values from a collection that satisfy the specified condition. In the [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid), filtering can be applied through the UI as well as through programmatic filters. ## Programmatic filtering -The [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) Filter allows you to filter the data programmatically in below ways, +The [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) filter allows you to filter the data programmatically in the following ways: * Through View Predicate * Through Column Filter ### View Filtering -View filtering can be achieved by setting [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) delegate. You can refresh the view by calling [SfDataGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_RefreshFilter_System_Boolean_) method. +View filtering can be achieved by setting the [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) delegate. You can refresh the view by calling the [SfDataGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_RefreshFilter_System_Boolean_) method. -Here, FilterRecords delegate filters the data based on Country name. FilterRecords delegate is assigned to [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) predicate to filter Country column. After that, [SfDataGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_RefreshFilter_System_Boolean_) method is called to refresh the records. If the record satisfies the filter conditions, true will be returned. Else false is returned. +Here, the `FilterRecords` delegate filters the data based on the country name. The `FilterRecords` delegate is assigned to the [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) predicate to filter the `Country` column. After that, the [SfDataGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_RefreshFilter_System_Boolean_) method is called to refresh the records. If the record satisfies the filter conditions, `true` is returned. Otherwise, `false` is returned. {% tabs %} @@ -52,9 +52,9 @@ N> View filter is not supported when ItemsSource is [DataTable](https://learn.mi ### Column Filtering -Column filtering is achieved by using [GridColumn.FilterPredicates](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPredicates) property and adding [FilterPredicate](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html) to it. +Column filtering is achieved by using the [GridColumn.FilterPredicates](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPredicates) property and adding a [FilterPredicate](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html) to it. -Here, OrderID column is filtered for the data which has OrderID as 1005. +Here, the `OrderID` column is filtered for the data that has `OrderID` as 1005. {% tabs %} @@ -64,16 +64,16 @@ dataGrid.Columns["OrderID"].FilterPredicates.Add(new FilterPredicate() { FilterT {% endtabs %} #### Filter Behavior -The [FilterBehavior](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Data.FilterBehavior.html) property is used to specify whether to consider the [FilterValue](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) as the string or specific data type. +The [FilterBehavior](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Data.FilterBehavior.html) property is used to specify whether to consider the [FilterValue](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) as a string or as a specific data type. -* **StringTyped** - Records are filtered without considering the type and it takes [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) type as string. -* **StronglyTyped** - Records are filtered by considering the FilterValue underlying type. +* **StringTyped** - Records are filtered without considering the type, and the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) type is treated as a string. +* **StronglyTyped** - Records are filtered by considering the underlying type of the FilterValue. N> When you use [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system.data.datatable?view=net-5.0) as items Source, [IsCaseSensitive](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_IsCaseSensitive) property in [FilterPredicate](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html) is not applicable, since DataTable does not support CaseSensitive filtering. #### Improving performance while adding multiple FilterPredicates to the column in loop -You can improve the performance of filtering by suspending the data operation while adding `FilterPredicates` to the column for bulk updates by calling [SfDataGrid.View.BeginInit](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_BeginInit_System_Boolean_) and [SfDataGrid.View.EndInit](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_EndInit) method, before and after the data operation. +You can improve the performance of filtering by suspending the data operation while adding `FilterPredicates` to the column for bulk updates by calling the [SfDataGrid.View.BeginInit](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_BeginInit_System_Boolean_) and [SfDataGrid.View.EndInit](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_EndInit) methods, before and after the data operation. {% tabs %} {% highlight c# %} @@ -101,11 +101,11 @@ private void OnApplyFilterPredicate(object obj) ### Clear Filtering -The WPF DataGrid (SfDataGrid) allows you to clear the filters by clearing the filter predicates. This is achieved by invoking the following methods. +The WPF DataGrid (SfDataGrid) allows you to clear the filters by clearing the filter predicates. This is achieved by invoking the following methods: * [SfDataGrid.ClearFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilters) - Clears filters for all the columns programmatically. -* [SfDataGrid.ClearFilter(String columnName)](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilter_System_String_) - Clears the filter for particular column that has the columnName as `MappingName`. -* [SfDataGrid.ClearFilter(GridColumn column)](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilter_Syncfusion_UI_Xaml_Grid_GridColumn_) - Clears the filter for particular column alone. +* [SfDataGrid.ClearFilter(String columnName)](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilter_System_String_) - Clears the filter for a particular column that has the `columnName` as `MappingName`. +* [SfDataGrid.ClearFilter(GridColumn column)](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilter_Syncfusion_UI_Xaml_Grid_GridColumn_) - Clears the filter for a particular column alone. {% tabs %} {% highlight c# %} @@ -118,7 +118,7 @@ this.dataGrid.ClearFilter(this.dataGrid.Columns[0]); ## Excel like UI Filtering -The WPF DataGrid (SfDataGrid) provides excel like filtering UI and also advanced filter UI to filter the data easily. UI filtering can be enabled by setting [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property to `true` , where you can open filter UI by clicking the Filter icon in column header and filter the records. +The WPF DataGrid (SfDataGrid) provides an Excel-like filtering UI as well as an advanced filter UI to filter the data easily. UI filtering can be enabled by setting the [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property to `true`, where you can open the filter UI by clicking the filter icon in the column header and filter the records. {% tabs %} {% highlight xaml %} @@ -132,7 +132,7 @@ dataGrid.AllowFiltering = true; {% endhighlight %} {% endtabs %} -You can enable/disable filtering for particular column by setting [GridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowFiltering) property. +You can enable or disable filtering for a particular column by setting the [GridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowFiltering) property. {% tabs %} {% highlight xaml %} @@ -146,19 +146,19 @@ dataGrid.Columns["OrderID"].AllowFiltering = true; N> -1. [GridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowFiltering) has higher priority than [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property. +1. [GridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowFiltering) has higher priority than the [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property. 2. UI filtering is not supported when using on-demand paging by setting [UseOnDemandPaging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_UseOnDemandPaging) to `true`. ### Built-in UI Views -SfDataGrid filter UI comprises of two different UIs. +The SfDataGrid filter UI comprises two different UIs. -* **Checkbox Filter UI** - Provides excel like filter interface with list of check box’s. +* **Checkbox Filter UI** - Provides an Excel-like filter interface with a list of check boxes. * **Advanced Filter UI** - Provides advanced filter options to filter the data. -By default, both Checkbox Filter and Advanced Filter are loaded while opening the filter pop-up. You can switch between AdvancedFilter and CheckboxFilter by using AdvancedFilter button in the UI View. +By default, both Checkbox Filter and Advanced Filter are loaded when the filter pop-up is opened. You can switch between AdvancedFilter and CheckboxFilter by using the AdvancedFilter button in the UI View. SfDataGrid with Checkbox Filter View: @@ -170,17 +170,17 @@ SfDataGrid with Advanced Filter View: ## Choose between built-in UI Views -The WPF DataGrid (SfDataGrid) lets you to customize the UI Views displayed for particular column or grid using [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) property in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). +The WPF DataGrid (SfDataGrid) lets you customize the UI Views displayed for a particular column or grid using the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) property in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). -Below are the options, +The following are the options: -1. **CheckboxFilter** – Displays only Checkbox filter View. -2. **AdvancedFilter** – Displays only Advanced filter View. -3. **Both** – Displays both filters Views. +1. **CheckboxFilter** – Displays only the Checkbox filter View. +2. **AdvancedFilter** – Displays only the Advanced filter View. +3. **Both** – Displays both filter Views. ### Changing filter UI View for Grid -Filter UI view can be changed for all the columns in grid by changing [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) by writing style and assign it to [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle). +The filter UI view can be changed for all the columns in the grid by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) by writing a style and assigning it to [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle). {% tabs %} {% highlight xaml %} @@ -199,7 +199,7 @@ Filter UI view can be changed for all the columns in grid by changing [FilterMod ### Changing filter UI View for columns -Filter UI view can be changed for the particular column by changing [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) by writing style and assign it to [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle). +The filter UI view can be changed for a particular column by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) by writing a style and assigning it to [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle). {% tabs %} {% highlight xaml %} @@ -231,7 +231,7 @@ void dataGrid_FilterItemsPopulating(object sender, Syncfusion.UI.Xaml.Grid.GridF ### Setting Default Filter popup style for particular column -You can skip the [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) styling for particular column from [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle) by setting [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) to `null`. +You can skip the [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) styling for a particular column from [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle) by setting [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) to `null`. {% tabs %} {% highlight xaml %} @@ -255,17 +255,17 @@ this.dataGrid.Columns["OrderID"].FilterPopupStyle = null; {% endhighlight %} {% endtabs %} -Here, advanced filter will be loaded for all the columns in grid except OrderID column since [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) is set as `null` for OrderID column. So both checkbox filter and advanced filter (default style) will be loaded for OrderID column. +Here, the advanced filter will be loaded for all the columns in the grid except the `OrderID` column, since [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) is set to `null` for the `OrderID` column. So both the checkbox filter and the advanced filter (default style) will be loaded for the `OrderID` column. ## Advanced Filter UI -Advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on Advanced filter type by automatically detecting the underlying date type. +The advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on the advanced filter type by automatically detecting the underlying data type. -Below are the built-in filter types supported. +The following are the built-in filter types supported: * **Text Filters** – Loads various menu options to filter the display text effectively. -* **Number Filters** – Loads various menu options to filter the numeric data. -* **Date Filters** – Loads various menu options and [DatePicker](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datepicker?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0) to filter DateTime type column. +* **Number Filters** – Loads various menu options to filter numeric data. +* **Date Filters** – Loads various menu options and a [DatePicker](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datepicker?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0) to filter DateTime type columns. @@ -350,15 +350,15 @@ When the DateTime type value is bound to the {{ '[GridColumn](https://help.syncf N> -1. `Null` and `Not Null` options are available only when [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) is set to `True`. +1. `Null` and `Not Null` options are available only when [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) is set to `true`. 2. If the column is [GridUnboundColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridUnBoundColumn.html) or [GridMaskColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridMaskColumn.html), then `Text Filters` will be loaded. ### Changing Advanced Filter type -[FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior) determines the Advanced filter type loaded in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). By using [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior), you can change Advanced filter type. +[FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior) determines the advanced filter type loaded in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). By using [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior), you can change the advanced filter type. * **StringTyped** - `TextFilters` will be loaded in [AdvancedFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html). -* **Strongly Typed** – Advanced filter type is automatically detected based on underlying data type. +* **Strongly Typed** – The advanced filter type is automatically detected based on the underlying data type. {% tabs %} {% highlight xaml %} @@ -371,7 +371,7 @@ dataGrid.Columns["OrderID"].FilterBehavior = FilterBehavior.StringTyped; {% endhighlight %} {% endtabs %} -Advanced filter type can be changed programmatically by using [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event also. +The advanced filter type can be changed programmatically by using the [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event as well. {% tabs %} {% highlight c# %} @@ -392,13 +392,13 @@ void dataGrid_FilterItemsPopulating(object sender, Syncfusion.UI.Xaml.Grid.GridF ### Case Sensitive -By default, casing is not considered while filtering. Because, filter predicates will be created with [IsCaseSensitive](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_IsCaseSensitive) as `false`. If you want to filter the records with `IsCaseSensitive` as `true`, you need to click case sensitive button present in Advanced Filter. +By default, casing is not considered while filtering because filter predicates will be created with [IsCaseSensitive](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_IsCaseSensitive) as `false`. If you want to filter the records with `IsCaseSensitive` as `true`, you need to click the case sensitive button present in the Advanced Filter. -N> When you use [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system.data.datatable?view=net-5.0) as items Source, CaseSensitive button will not be available in Filter popup as `DataTable` does not support CaseSensitive filtering. +N> When you use [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system.data.datatable?view=net-5.0) as the items source, the CaseSensitive button will not be available in the filter popup, as `DataTable` does not support CaseSensitive filtering. ## Performance tips -[GridFilterControl’s](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) loading performance can be increased by setting [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) as `AdvancedFilter` and [CanGenerateUniqueItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) as `False`. Because a textbox is loaded instead of AdvancedFilter ComboBox that allows you to manually enter text for filtering. +The loading performance of [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) can be increased by setting [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) to `AdvancedFilter` and [CanGenerateUniqueItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) to `False`. This is because a text box is loaded instead of the AdvancedFilter ComboBox, allowing you to manually enter text for filtering. {% tabs %} {% highlight xaml %} @@ -420,11 +420,11 @@ N> When you use [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system. ![Improving Performance while Applying Filter in WPF DataGrid](filtering_images/wpf-datagrid-apply-filter.png) -By default, [CanGenerateUniqueItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) is true. So all the unique items in the column are loaded in the AdvancedFilter ComboBox that allows you to select the value easily from the combo box and filter it. +By default, [CanGenerateUniqueItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) is `true`. So all the unique items in the column are loaded in the AdvancedFilter ComboBox, which allows you to select the value easily from the combo box and filter it. ## Filtering null values -To filter the null values, you need to set [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) property as `True`. So `null` values will be included in filter items list. If you want to exclude the null values from filter items list, you need to set [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) as `False`. +To filter the null values, you need to set the [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) property to `true`. So `null` values will be included in the filter items list. If you want to exclude the null values from the filter items list, you need to set [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) to `false`. {% tabs %} {% highlight xaml %} @@ -445,7 +445,7 @@ Advanced Filter with `AllowBlankFilters` as `True` ## Instant Filtering -By default, filters are applied to the columns when OK button is clicked in UI filtering. If you want to update the filters immediately whenever update in filter popup, you need to set [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ImmediateUpdateColumnFilter) as True. +By default, filters are applied to the columns when the OK button is clicked in UI filtering. If you want to update the filters immediately whenever there is an update in the filter pop-up, you need to set [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ImmediateUpdateColumnFilter) to `true`. {% tabs %} {% highlight xaml %} @@ -456,21 +456,21 @@ dataGrid.Columns["OrderID"].ImmediateUpdateColumnFilter = true; {% endhighlight %} {% endtabs %} -Here, the OK and Cancel buttons are unavailable and Done button is available to just close the popup. +Here, the OK and Cancel buttons are unavailable, and the Done button is available to just close the popup. -Checkbox Filter with `ImmediateUpdateColumnFilter` is `True` +Checkbox Filter with `ImmediateUpdateColumnFilter` as `True` ![CheckBox Filter with Immediate Filter in WPF DataGrid](filtering_images/wpf-datagrd-checkbox-immediate-filter.png) -Advanced Filter with `ImmediateUpdateColumnFilter` is `True` +Advanced Filter with `ImmediateUpdateColumnFilter` as `True` ![Advanced Filter with Immediate Filter in WPF DataGrid](filtering_images/wpf-datagrd-advanced-immediate-filter.png) -N> In Checkbox Filter, the `SelectAll` option is not reflected in the filter updates if [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ImmediateUpdateColumnFilter) is true. +N> In Checkbox Filter, the `SelectAll` option is not reflected in the filter updates if [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ImmediateUpdateColumnFilter) is `true`. ## Filtering based on DisplayText -In UI filtering, records are filtered based on actual value by default. If you want to filter the records based on `DisplayText`, you need to set [ColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnFilter) property as `DisplayText`. +In UI filtering, records are filtered based on the actual value by default. If you want to filter the records based on `DisplayText`, you need to set the [ColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnFilter) property to `DisplayText`. {% tabs %} {% highlight xaml %} @@ -481,19 +481,19 @@ dataGrid.Columns["OrderDate"].ColumnFilter = ColumnFilter.DisplayText; {% endhighlight %} {% endtabs %} -Consider in the following dataGrid, first and second records have same display value for OrderDate column but both have different actual value (E.g. 2/10/2010 12:00:00 AM and 2/10/2010 6:30:00 PM). +Consider the following dataGrid: the first and second records have the same display value for the `OrderDate` column, but both have different actual values (e.g., 2/10/2010 12:00:00 AM and 2/10/2010 6:30:00 PM). ![Filter WPF DataGrid using Actual Value instead of Formatted String](filtering_images/wpf-datagrid-filter-formatted-string.png) -By default, based on the actual value only filter will be applied. So it will consider both values as different. And while opening filter popup, both values will be displayed like below. +By default, the filter will be applied based on the actual value only. So both values will be considered different. When opening the filter pop-up, both values will be displayed as shown below. ![Filtering WPF DataGrid based on Formatted String](filtering_images/wpf-datagrid-string-format.png) -If you set [ColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnFilter) as DisplayText, display value only will be considered for filtering. So filter popup will be shown like below. +If you set [ColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnFilter) to `DisplayText`, only the display value will be considered for filtering. The filter pop-up will then be shown as below. ![Filter based on actual value in WPF DataGrid](filtering_images/wpf-datagrid-filter-actual-value.png) -After filtering, both records having the same OrderDate display value will be displayed in view. +After filtering, both records having the same `OrderDate` display value will be displayed in the view. ![Filtered same Record Values in WPF DataGrid](filtering_images/wpf-datagrid-filter-same-records.png) @@ -503,7 +503,7 @@ SfDataGrid provides the following events for filtering. ### FilterChanging event -[FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanging) event is raised while applying filters to a particular column. You can use this event to change the [FilterPredicates](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterEventArgs.html#Syncfusion_UI_Xaml_Grid_GridFilterEventArgs_FilterPredicates), [FilterType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterType) and [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterBehavior). +The [FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanging) event is raised while applying filters to a particular column. You can use this event to change the [FilterPredicates](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterEventArgs.html#Syncfusion_UI_Xaml_Grid_GridFilterEventArgs_FilterPredicates), [FilterType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterType), and [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterBehavior). {% tabs %} {% highlight c# %} @@ -517,7 +517,7 @@ void dataGrid_FilterChanging(object sender, GridFilterEventArgs e) ### FilterChanged event -[FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanged) event is raised after filter is applied. You can use this event to get filtered records. +The [FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanged) event is raised after the filter is applied. You can use this event to get the filtered records. {% tabs %} {% highlight c# %} @@ -531,7 +531,7 @@ void dataGrid_FilterChanged(object sender, GridFilterEventArgs e) ### FilterItemsPopulating event -[FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event is raised while populating the filter list items in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). You can change GridFilterControl properties by using this event. +The [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event is raised while populating the filter list items in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). You can change GridFilterControl properties by using this event. {% tabs %} @@ -546,7 +546,7 @@ void dataGrid_FilterItemsPopulating(object sender, Syncfusion.UI.Xaml.Grid.GridF ### FilterItemsPopulated event -[FilterItemsPopulated](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulated) event is raised after filter list items are populated. You can change GridFilterControl [ItemSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterItemsPopulatingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridFilterItemsPopulatingEventArgs_ItemsSource) by using this event. +The [FilterItemsPopulated](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulated) event is raised after the filter list items are populated. You can change the GridFilterControl [ItemSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterItemsPopulatingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridFilterItemsPopulatingEventArgs_ItemsSource) by using this event. {% tabs %} {% highlight c# %} @@ -560,7 +560,7 @@ void dataGrid_FilterItemsPopulated(object sender, GridFilterItemsPopulatedEventA ## Getting the filtered records -You can get the filtered records from [View](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_View) in [FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. When filter is applied, the filtered records are available in [View.Records](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Records). +You can get the filtered records from [View](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_View) in the [FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. When the filter is applied, the filtered records are available in [View.Records](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Records). {% tabs %} {% highlight c# %} @@ -582,7 +582,7 @@ void dataGrid_FilterChanged(object sender, GridFilterEventArgs e) ## Show image in CheckBoxFilterControl instead of image path -By default, in SfDataGrid image path is shown inside the CheckBoxFilterControl instead of image but you can show the image in CheckBoxFilterControl by setting [CheckBoxFilterControl.ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CheckboxFilterControl.html#Syncfusion_UI_Xaml_Grid_CheckboxFilterControl_ItemTemplate) as like below. +By default, in SfDataGrid the image path is shown inside the CheckBoxFilterControl instead of the image, but you can show the image in the CheckBoxFilterControl by setting the [CheckBoxFilterControl.ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CheckboxFilterControl.html#Syncfusion_UI_Xaml_Grid_CheckboxFilterControl_ItemTemplate) as shown below. {% tabs %} {% highlight xaml %} @@ -653,13 +653,13 @@ public class StringToImageConverter : IValueConverter You can get the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/CheckBoxFilterControlImage1515534249.zip). ## Apply ICollectionView.Filter and DataView.RowFilter on initial loading -By default, the default filter created by [ICollectionView.Filter](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.icollectionview.filter?view=netframework-4.8#System_ComponentModel_ICollectionView_Filter) and [DataView.RowFilter](https://learn.microsoft.com/en-us/dotnet/api/system.data.dataview.rowfilter?view=netframework-4.8) will not be applied to the data on initial loading. These filters can be applied on initial loading by enabling [CanUseViewFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CanUseViewFilter) property. +By default, the default filter created by [ICollectionView.Filter](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.icollectionview.filter?view=netframework-4.8#System_ComponentModel_ICollectionView_Filter) and [DataView.RowFilter](https://learn.microsoft.com/en-us/dotnet/api/system.data.dataview.rowfilter?view=netframework-4.8) will not be applied to the data on initial loading. These filters can be applied on initial loading by enabling the [CanUseViewFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CanUseViewFilter) property. ## Functionality Customization ### Loading the Text Filters for the column having Number or Date value as underlying type -If you want to use the Text Filters for the column that has number or date value as underlying type, you need to set [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior) property of the [GridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html) as `StringTyped`. This loads the Text Filters instead of Number or Date Filters. +If you want to use the Text Filters for a column that has a number or date value as the underlying type, you need to set the [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior) property of the [GridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html) to `StringTyped`. This loads the Text Filters instead of the Number or Date Filters. {% tabs %} {% highlight xaml %} @@ -667,7 +667,7 @@ If you want to use the Text Filters for the column that has number or date value {% endhighlight %} {% endtabs %} -You can achieve this programmatically by using [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event also. +You can achieve this programmatically by using the [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event as well. {% tabs %} {% highlight c# %} @@ -687,7 +687,7 @@ void dataGrid_FilterItemsPopulating(object sender, Syncfusion.UI.Xaml.Grid.GridF ### Changing AdvancedFilter type while loading dynamic ItemsSource -By default, `TextFilters` will be loaded for the columns if `ItemsSource` is [dynamic](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/reference-types). If you want to load Number Filters or Date Filters based on column values, you need to use [ColumnMemberType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnMemberType) property. +By default, `TextFilters` will be loaded for the columns if the `ItemsSource` is [dynamic](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/reference-types). If you want to load Number Filters or Date Filters based on the column values, you need to use the [ColumnMemberType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnMemberType) property. {% tabs %} {% highlight c# %} @@ -722,11 +722,11 @@ void dataGrid_FilterItemsPopulated(object sender, GridFilterItemsPopulatedEventA {% endhighlight %} {% endtabs %} -Likewise,[FilterElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterElement.html) also can be changed. +Likewise, the [FilterElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterElement.html) can also be changed. ### Customizing Filter predicates -If you want to customize the filter predicates, you need to use [FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanging) event. Here, [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) is changed according to some conditions. +If you want to customize the filter predicates, you need to use the [FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanging) event. Here, the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) is changed according to certain conditions. {% tabs %} {% highlight c# %} @@ -746,13 +746,13 @@ void dataGrid_FilterChanging(object sender, GridFilterEventArgs e) ## Appearance customization -[GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) is derived from `ContentControl` and has its own structure. This structure is customized using the properties [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle) and [SfDataGrid.FilterPopupTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupTemplate) for all the columns in grid. +[GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) is derived from `ContentControl` and has its own structure. This structure is customized using the properties [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle) and [SfDataGrid.FilterPopupTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupTemplate) for all the columns in the grid. -When you need to change the appearance of the GridFilterControl for a particular column, [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) and [GridColumn.FilterPopupTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupTemplate) properties are used. +When you need to change the appearance of the GridFilterControl for a particular column, the [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) and [GridColumn.FilterPopupTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupTemplate) properties are used. ### Collapsing Sort Options in GridFilterControl -Sort Options can be collapsed by setting [SortOptionVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_SortOptionVisibility) property in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). +Sort Options can be collapsed by setting the [SortOptionVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_SortOptionVisibility) property in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). {% tabs %} {% highlight xaml %} @@ -772,7 +772,7 @@ Sort Options can be collapsed by setting [SortOptionVisibility](https://help.syn ### Customizing Sort Options text -Sort Options text can be customized by using [AscendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_AscendingSortString) and [DescendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_DescendingSortString) properties in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). +The Sort Options text can be customized by using the [AscendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_AscendingSortString) and [DescendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_DescendingSortString) properties in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). {% tabs %} {% highlight c# %} @@ -792,7 +792,7 @@ void DataGrid_FilterItemsPopulating(object sender, GridFilterItemsPopulatingEven ### Customize the FilterPopup size using GridFilterControl style -You can customize the FilterPopup size using [FilterPopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterPopupHeight) property by writing style of TargetType as GridFilterControl. +You can customize the FilterPopup size using the [FilterPopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterPopupHeight) property by writing a style with the `TargetType` set to `GridFilterControl`. {% tabs %} {% highlight xaml %} @@ -810,7 +810,7 @@ You can customize the FilterPopup size using [FilterPopupHeight](https://help.sy ### Changing filter icon style after applying filters -You can change the filter icon style by editing the [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html) style. In `FilterToggleButton` style, you can see `Filtered` and `UnFiltered` VisualStates. In that, you can change `PathFillColor` for FilterToggleButton. +You can change the filter icon style by editing the [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html) style. In the `FilterToggleButton` style, you can see `Filtered` and `UnFiltered` VisualStates. In those, you can change the `PathFillColor` for the `FilterToggleButton`. {% tabs %} {% highlight xaml %} @@ -915,7 +915,7 @@ You can change the filter icon style by editing the [FilterToggleButton](https:/ {% endhighlight %} {% endtabs %} -When you apply above style to [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html), FilterIcon changes from Default to Gray and to Red when filtering is applied. When you clear it, it changes from Red to Gray and to default style. +When you apply the above style to [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html), the FilterIcon changes from Default to Gray and then to Red when filtering is applied. When you clear it, it changes from Red to Gray and then to the default style. ## See Also [How to display values with underscore in check boxes of the filter control?](https://support.syncfusion.com/kb/article/8938/how-to-display-values-with-underscore-in-check-boxes-of-the-filter-control) diff --git a/wpf/DataGrid/Paging.md b/wpf/DataGrid/Paging.md index 89cf633780..394d23c320 100644 --- a/wpf/DataGrid/Paging.md +++ b/wpf/DataGrid/Paging.md @@ -1,7 +1,7 @@ --- layout: post title: Paging in WPF DataGrid control | Syncfusion® -description: Learn here all about Paging support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details. +description: Learn all about paging support in the Syncfusion® WPF DataGrid (SfDataGrid) control, its elements, and more details. platform: wpf control: SfDataGrid documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Paging in WPF DataGrid (SfDataGrid) -[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) provides support to manipulate the data using SfDataPager control. You can refer [SfDataPager](https://help.syncfusion.com/wpf/datapager/overview) control user guide for more information. +[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) provides support to manipulate the data using the SfDataPager control. You can refer to the [SfDataPager](https://help.syncfusion.com/wpf/datapager/overview) control user guide for more information. ## Getting started -Follow the below steps to bind SfDataGrid with SfDataPager. +Follow the steps below to bind SfDataGrid with SfDataPager. -1. Create `IEnumerable` collection that you want to bind and set it to [SfDataPager.Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property. +1. Create an `IEnumerable` collection that you want to bind and set it to the [SfDataPager.Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property. -2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of records to be displayed per page. +2. Set the [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of records to be displayed per page. -3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. +3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to the [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. {% capture codesnippet1 %} {% tabs %} @@ -127,26 +127,26 @@ public class OrderInfo #### Limitations -1. SfDataPager doesn’t accepts `DataTable` as Source. +1. SfDataPager doesn’t accept `DataTable` as Source. 2. `AddNewRow` is not supported in SfDataPager. 3. `FilterRow` is not supported in SfDataPager. ## Load data in on-demand -SfDataPager allows you to load data for current page alone using `OnDemandPaging` instead of loading data for all pages. +SfDataPager allows you to load data for the current page alone using `OnDemandPaging` instead of loading data for all pages. -Follow the below steps to load the `ItemsSource` for page in on-demand, +Follow the steps below to load the `ItemsSource` for a page in on-demand: -1. Set [SfDataPager.UseOnDemandPaging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_UseOnDemandPaging) as `true`. +1. Set [SfDataPager.UseOnDemandPaging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_UseOnDemandPaging) to `true`. -2. Set [SfDataPager.PageCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageCount) based on total number of records and [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property. +2. Set [SfDataPager.PageCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageCount) based on the total number of records and the [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property. -3. Use [OnDemandLoading](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_OnDemandLoading) event to load the `ItemsSource` for current page using [LoadDynamicItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_LoadDynamicItems_System_Int32_System_Collections_IEnumerable_) method. +3. Use the [OnDemandLoading](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_OnDemandLoading) event to load the `ItemsSource` for the current page using the [LoadDynamicItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_LoadDynamicItems_System_Int32_System_Collections_IEnumerable_) method. -[OnDemandLoading](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_OnDemandLoading) event is raised when SfDataPager moves to another page and you can load the `ItemsSource` for corresponding page through `OnDemandLoading` event. +The [OnDemandLoading](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_OnDemandLoading) event is raised when SfDataPager moves to another page, and you can load the `ItemsSource` for the corresponding page through the `OnDemandLoading` event. -[OnDemandLoadingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.OnDemandLoadingEventArgs.html) has the following members, +[OnDemandLoadingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.OnDemandLoadingEventArgs.html) has the following members: 1. `StartIndex` - returns the start index based on `PageIndex` (Number of previous pages * PageSize). @@ -196,7 +196,7 @@ private void dataPager_OnDemandLoading(object sender, Syncfusion.UI.Xaml.Control ### Resetting cache -While navigating between the pages, records are loaded through `OnDemandLoading` event and the records of navigated pages will be maintained in cache. If you navigate to already navigated page, the records are loaded from cache instead of loading from `OnDemandLoading` event. You can clear the cache by using [PageCollectionView.ResetCache](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.PagedCollectionView.html#Syncfusion_Data_PagedCollectionView_ResetCache) method. Once this method is invoked, the `OnDemandLoading` event will be raised while navigating multiple times to the same page. +While navigating between the pages, records are loaded through the `OnDemandLoading` event, and the records of the navigated pages will be maintained in the cache. If you navigate to an already navigated page, the records are loaded from the cache instead of loading from the `OnDemandLoading` event. You can clear the cache by using the [PageCollectionView.ResetCache](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.PagedCollectionView.html#Syncfusion_Data_PagedCollectionView_ResetCache) method. Once this method is invoked, the `OnDemandLoading` event will be raised while navigating multiple times to the same page. {% tabs %} {% highlight xaml %} It is not possible to select header rows, table summary rows, unbound rows which are above the table summary row when it’s placed in top and the unbound rows which are below table summary rows when it’s placed in bottom of SfDataGrid. +N> It is not possible to select header rows, table summary rows, unbound rows which are above the table summary row when placed at the top, and the unbound rows which are below the table summary rows when placed at the bottom of SfDataGrid. ## Multiple Row or Cell Selection -The WPF DataGrid (SfDataGrid) allows you to select multiple rows or cells by setting [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property as [Extended](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html) or [Multiple](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), where you can select multiple rows or cells by dragging the mouse on SfDataGrid and also using the key modifiers. +The WPF DataGrid (SfDataGrid) allows you to select multiple rows or cells by setting the [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property to [Extended](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html) or [Multiple](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), where you can select multiple rows or cells by dragging the mouse on SfDataGrid and also using the key modifiers. While using `Extended`, you can select multiple rows or cells by pressing the key modifiers Ctrl and Shift. @@ -107,7 +107,7 @@ While using `Extended`, you can select multiple rows or cells by pressing the ke ![Extended Cell Selection in WPF DataGrid](Selection_images/wpf-datagrid-multiple-cell-selection.png) -N> When the [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) as [Multiple](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), you can select or deselect multiple rows and cells by clicking the respective cell or row. Also in multiple selection pressing navigation keys will move only the current cell and you can select or deselect by pressing space key. +N> When the [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) is [Multiple](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), you can select or deselect multiple rows and cells by clicking the respective cell or row. Also, in multiple selection, pressing navigation keys will move only the current cell, and you can select or deselect by pressing the space key. {% tabs %} {% highlight xaml %} diff --git a/wpf/DataGrid/Sorting.md b/wpf/DataGrid/Sorting.md index af4a681151..1a1b867399 100644 --- a/wpf/DataGrid/Sorting.md +++ b/wpf/DataGrid/Sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in WPF DataGrid control | Syncfusion® -description: Learn here all about Sorting support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details. +description: Learn all about sorting support in the Syncfusion® WPF DataGrid (SfDataGrid) control, its elements, and more details. platform: wpf control: SfDataGrid documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Sorting in WPF DataGrid (SfDataGrid) -[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) 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 [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. +[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) allows you to sort the data against one or more columns in either ascending or descending order. When sorting is applied, the rows are rearranged based on the sort criteria. You can allow users to sort the data by touching or clicking the column header by setting the [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. {% tabs %} {% highlight xaml %} @@ -22,7 +22,7 @@ dataGrid.AllowSorting = true; {% endhighlight %} {% endtabs %} -In another way, you can enable or disable the sorting for particular column by setting the [GridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) property. +Alternatively, you can enable or disable sorting for a particular column by setting the [GridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) property. {% tabs %} {% highlight xaml %} @@ -47,16 +47,16 @@ this.dataGrid.Columns["CustomerID"].AllowSorting = false; {% endhighlight %} {% endtabs %} -N> The [GridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) takes higher priority than [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property. +N> The [GridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) takes higher priority than the [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property. -End users can sort the column by clicking column header cell. Once the columns get sorted, the sort indicator will be displayed on the right side of the column header. +End users can sort the column by clicking the column header cell. Once the columns get sorted, the sort indicator will be displayed on the right side of the column header. ![Sorting in WPF DataGrid](Sorting_images/wpf-datagrid-sorting.png) ## Sort column in double click -By default, column gets sorted when column header clicked. You can change this behavior to sort the column in double click action by setting [SfDataGrid.SortClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) property to `DoubleClick`. +By default, the column gets sorted when the column header is clicked. You can change this behavior to sort the column on a double-click action by setting the [SfDataGrid.SortClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) property to `DoubleClick`. {% tabs %} {% highlight xaml %} @@ -74,27 +74,27 @@ this.dataGrid.SortClickAction = SortClickAction.DoubleClick; ## Sorting order -By default, the data is sorted in ascending or descending order when clicking column header. You can rearrange the data to its initial order from descending, when clicking column header by setting [SfDataGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowTriStateSorting) property. +By default, the data is sorted in ascending or descending order when clicking the column header. You can rearrange the data to its initial order from descending when clicking the column header by setting the [SfDataGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowTriStateSorting) property. -Following are the sequence of sorting orders when clicking column header, +The following is the sequence of sorting orders when clicking the column header: -* Sorts the data in ascending order -* Sorts the data in descending order -* Clears the sorting and records displayed in its initial order +* Sorts the data in ascending order. +* Sorts the data in descending order. +* Clears the sorting, and records are displayed in their initial order. ## Multi column sorting -WPF DataGrid (SfDataGrid) control allows you sort more than one column, where sorting is applied one column against other columns. To apply sorting on multiple columns, user have to click the column header by pressing the Ctrl key. +The WPF DataGrid (SfDataGrid) control allows you to sort more than one column, where sorting is applied one column against other columns. To apply sorting on multiple columns, the user has to click the column header while pressing the Ctrl key. -In the below screen shot, the OrderID column sorted. Then the CustomerName column is sorted against the OrderID data by clicking column header by pressing Ctrl key. The sorting state of OrderID column is preserved and CustomerName column sorted against OrderID column. +In the screenshot below, the `OrderID` column is sorted. Then the `CustomerName` column is sorted against the `OrderID` data by clicking the column header while pressing the Ctrl key. The sorting state of the `OrderID` column is preserved, and the `CustomerName` column is sorted against the `OrderID` column. ![Multi Column Sorting in WPF DataGrid](Sorting_images/wpf-datagrid-multi-column-sorting.png) ### Display sort order -It is also possible to display sorted order of columns in header by setting [SfDataGrid.ShowSortNumbers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowSortNumbers) property to `true`. +It is also possible to display the sorted order of columns in the header by setting the [SfDataGrid.ShowSortNumbers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowSortNumbers) property to `true`. {% tabs %} {% highlight xaml %} @@ -115,7 +115,7 @@ this.dataGrid.ShowSortNumbers = true; You can sort the data programmatically by adding or removing the [SortColumnDescription](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SortColumnDescription.html) in [SfDataGrid.SortColumnDescriptions](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortColumnDescriptions) property. -N> [SfDataGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanging) and [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) events are not raised when the data sorted programmatically through `SfDataGrid.SortColumnDescriptions`. +N> The [SfDataGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanging) and [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) events are not raised when the data is sorted programmatically through `SfDataGrid.SortColumnDescriptions`. ### Adding sort columns @@ -172,21 +172,21 @@ this.dataGrid.SortColumnDescriptions.Clear(); ## Custom sorting -SfDataGrid allows you to sort the columns based on the custom logic. The custom sorting can be applied by adding the [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) instance to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers). +SfDataGrid allows you to sort the columns based on custom logic. The custom sorting can be applied by adding the [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) instance to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers). -The [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) have the following properties, +The [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) has the following properties: [PropertyName](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html#Syncfusion_Data_SortComparer_PropertyName) - Gets or sets the name of the column to apply custom sorting. [Comparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html#Syncfusion_Data_SortComparer_Comparer) - Gets or sets the custom comparer in which you can code to compare the data using custom logic. -You can implement [ISortDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.ISortDirection.html) interface in comparer to get the sort direction. So you can apply different custom logics for ascending and descending. +You can implement the [ISortDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.ISortDirection.html) interface in the comparer to get the sort direction. So you can apply different custom logic for ascending and descending. -Follow the below steps to add custom comparer to sort using custom logic, +Follow the steps below to add a custom comparer to sort using custom logic: ### Define custom comparer with custom sort logic -In the below code snippet, `CustomerName` property is compared based on its string length, instead of default string comparison. +In the code snippet below, the `CustomerName` property is compared based on its string length, instead of the default string comparison. {% tabs %} {% highlight c# %} @@ -255,7 +255,7 @@ Public class CustomComparer:IComparer,ISortDirection ### Adding custom comparer to SfDataGrid -Custom comparer can be added to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers) property. `SortComparers` maintains custom comparers and the custom comparer gets called when corresponding column gets sorted by clicking column header or programmatically. +A custom comparer can be added to the [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers) property. `SortComparers` maintains custom comparers, and the custom comparer is called when the corresponding column gets sorted by clicking the column header or programmatically. {% tabs %} {% highlight xaml %} @@ -275,18 +275,18 @@ this.dataGrid.SortComparers.Add(new SortComparer() { Comparer = new CustomCompar {% endhighlight %} {% endtabs %} -Sorting CustomerName column sorts the data using custom comparer available in `SfDataGrid.SortComparers`. +Sorting the `CustomerName` column sorts the data using the custom comparer available in `SfDataGrid.SortComparers`. ![Custom Sorting in WPF DataGrid](Sorting_images/wpf-datagrid-custom-sorting.png) ## Sorting the underlying collection -SfDataGrid sorts the records in UI and maintains in its internal CollectionView and it will not change the order of data in underlying collection. +SfDataGrid sorts the records in the UI and maintains them in its internal `CollectionView`, and it will not change the order of the data in the underlying collection. -You can get sorted data from `SfDataGrid.View.Records` when groups is not in place and `SfDataGrid.View.TopLevelGroup.DisplayElements` when grouping in place. +You can get the sorted data from `SfDataGrid.View.Records` when groups are not in place, and from `SfDataGrid.View.TopLevelGroup.DisplayElements` when grouping is in place. -If you want to sort the underlying collection when sorting takes place, then this can be achieved by handling [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event. +If you want to sort the underlying collection when sorting takes place, this can be achieved by handling the [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event. {% tabs %} {% highlight c# %} @@ -361,8 +361,8 @@ void dataGrid_SortColumnsChanging(object sender, Syncfusion.UI.Xaml.Grid.GridSor ### SortColumnsChanged event -[SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. -[GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for `SortColumnsChanged` event. +The [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. +[GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for the `SortColumnsChanged` event. ## See Also [How to sort a column in WPF DataGrid?](https://support.syncfusion.com/kb/article/9555/how-to-sort-a-column-in-wpf-datagrid-sfdatagrid) diff --git a/wpf/TreeGrid/Column-Type.md b/wpf/TreeGrid/Column-Type.md index 81919845a4..54ed9b25b0 100644 --- a/wpf/TreeGrid/Column-Type.md +++ b/wpf/TreeGrid/Column-Type.md @@ -1366,7 +1366,7 @@ In this case SfTreeGrid handles the below key operations and other keys are hand ### Setting focus to particular element inside Template when cell gets activated or edited -You can allow logical focus to specific UIElement loaded inside `EditTemplate` or `CellTemplate` by setting `[FocusManagerHelper.FocusedElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FocusManagerHelper.html#Syncfusion_UI_Xaml_Grid_FocusManagerHelper_FocusedElementProperty)` attached property. +You can allow logical focus to specific UIElement loaded inside `EditTemplate` or `CellTemplate` by setting [FocusManagerHelper.FocusedElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FocusManagerHelper.html#Syncfusion_UI_Xaml_Grid_FocusManagerHelper_FocusedElementProperty) attached property. You can use this property to start editing the template column value as like normal column when the user gets into edit mode. @@ -1586,11 +1586,11 @@ treeGrid.Columns.Add(new TreeGridComboBoxColumn() { MappingName = "City", ItemsS {% endhighlight %} {% endtabs %} -SfTreeGrid triggers, [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event, when the SelectedValue is changed. [CurrentCellDropDownSelectionChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellDropDownSelectionChangedEventArgs.html) of [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event provides the information about the changed cell value. +SfTreeGrid triggers, [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellDropDownSelectionChanged) event, when the SelectedValue is changed. [CurrentCellDropDownSelectionChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellDropDownSelectionChangedEventArgs.html) of [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellDropDownSelectionChanged) event provides the information about the changed cell value. `SelectedIndex` property returns the index of selected item. -`SelectedItem**`** property returns the selected item from drop down list. +`SelectedItem**` property returns the selected item from drop down list. ![WPF TreeGrid Column with ComboBox](ColumnTypes_images/wpf-treegrid-combobox.png) @@ -1750,9 +1750,9 @@ this.treeGrid.Columns.Add(new TreeGridHyperlinkColumn() { MappingName = "CityDes ![WPF TreeGrid Column with Hyperlink](ColumnTypes_images/wpf-treegrid-hyperlink.png) -You can allow end-user to navigate the `Uri` when the cell value contains valid `Uri` address or using [CurrentCellRequestNavigate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. The `CurrentCellRequestNavigate` occurs when the current cell in `TreeGridHyperLinkColumn` is clicked for navigation. +You can allow end-user to navigate the `Uri` when the cell value contains valid `Uri` address or using [CurrentCellRequestNavigate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellRequestNavigate) event. The `CurrentCellRequestNavigate` occurs when the current cell in `TreeGridHyperLinkColumn` is clicked for navigation. -[CurrentCellRequestNavigateEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html) of `CurrentCellRequestNavigate` event provide information about the hyperlink triggered this event. [CurrentCellRequestNavigateEventArgs.NavigateText](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellRequestNavigateEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellRequestNavigateEventArgs_NavigateText) returns the value using `ValueBinding` or `MappingName` to navigate. +[CurrentCellRequestNavigateEventArgs]https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellRequestNavigateEventArgs.html) of `CurrentCellRequestNavigate` event provide information about the hyperlink triggered this event. [CurrentCellRequestNavigateEventArgs.NavigateText](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellRequestNavigateEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellRequestNavigateEventArgs_NavigateText) returns the value using `ValueBinding` or `MappingName` to navigate. {% tabs %} {% highlight c# %} diff --git a/wpf/TreeGrid/Columns.md b/wpf/TreeGrid/Columns.md index 7fcde62d4b..8f91b685d1 100644 --- a/wpf/TreeGrid/Columns.md +++ b/wpf/TreeGrid/Columns.md @@ -1,7 +1,7 @@ --- layout: post title: Columns in WPF TreeGrid control | Syncfusion® -description: Learn here all about Columns support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn all about columns support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Columns in WPF TreeGrid (SfTreeGrid) -SfTreeGrid allows you to add or remove columns using [SfTreeGrid.Columns](https://help.syncfusion.com/cr/wpf/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`. +SfTreeGrid allows you to add or remove columns using the [SfTreeGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) property. You can choose the columns to be added from the built-in column types, or you can create your own column and add it 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. +The following are the built-in column types supported in SfTreeGrid. Each column has its own properties to handle different types of data.
@@ -106,16 +106,16 @@ 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 the SfTreeGrid create columns, or you can manually define columns to be displayed. The sections below explain both ways: 1. Automatically generating columns -2. Manually define columns +2. Manually defining columns ### Automatically generating columns -The automatic column generation based on properties of data object can be enabled or disabled by setting [SfTreeGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns). Default value is `true`. +The automatic column generation based on properties of the data object can be enabled or disabled by setting the [SfTreeGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns) property. The default value is `true`. -Columns are generated based on type of property. For example, [TreeGridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridNumericColumn.html) is added for `int` type property. Below are table shows data type and its column type. For remaining types, [TreeGridTextColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumn.html) will be added. +Columns are generated based on the type of the property. For example, a [TreeGridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridNumericColumn.html) is added for an `int` type property. The following table shows the data type and its corresponding column type. For the remaining types, [TreeGridTextColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumn.html) will be added.
@@ -169,11 +169,11 @@ TreeGridCheckBoxColumn
-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 in which they will appear in SfTreeGrid. #### AutoGenerateColumns with different modes -Column auto generation is controlled using [SfTreeGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsMode) property. +Column auto generation is controlled using the [SfTreeGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsMode) property. The `SfTreeGrid.AutoGenerateColumnsMode` includes the following modes. @@ -240,7 +240,7 @@ Keeps old columns in TreeGrid.Columns collection. ### Customize auto-generated columns -You can customize or cancel the generated column by handling [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoGeneratingColumn) event. `AutoGeneratingColumn` event occurs when the individual column is auto-generated for public and non-static property of underlying data object. +You can customize or cancel the generated column by handling the [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoGeneratingColumn) event. The `AutoGeneratingColumn` event occurs when the individual column is auto-generated for a public and non-static property of the underlying data object. {% tabs %} {% highlight c# %} @@ -257,9 +257,9 @@ private void TreeGrid_AutoGeneratingColumn(object sender, TreeGridAutoGenerating #### Cancel column generation for particular property -You can cancel the specific column adding to the TreeGrid by handling `AutoGeneratingColumn` event. +You can cancel the specific column adding to the TreeGrid by handling the `AutoGeneratingColumn` event. -In the below code, column generation for `ReportsTo` property is canceled by setting `Cancel` property to `true`. +In the code below, column generation for the `ReportsTo` property is canceled by setting the `Cancel` property to `true`. {% tabs %} {% highlight c# %} @@ -277,8 +277,8 @@ 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. -In the below code, column type for `Salary` property is changed to `TreeGridTextColumn` by setting instance of TreeGridTextColumn to `Column` property. +You can change the type of column being added to SfTreeGrid by setting the instance of the column you want to add in the `AutoGeneratingColumn` event. +In the code below, the column type for the `Salary` property is changed to `TreeGridTextColumn` by setting the instance of `TreeGridTextColumn` to the `Column` property. {% tabs %} {% highlight c# %} @@ -360,11 +360,11 @@ 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://learn.microsoft.com/en-us/dotnet/api/system.componentmodel?view=dotnet-uwp-10.0&redirectedfrom=MSDN). Data Annotations ignored, when the `AutoGenerateColumns` is set to False. +SfTreeGrid supports generating the columns based on built-in [Data Annotation Attributes](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel?view=dotnet-uwp-10.0&redirectedfrom=MSDN). Data Annotations are ignored when the `AutoGenerateColumns` is set to `false`. #### Exclude column -You can skip the column generation using `AutoGenerateField` property or set the `Bindable` attribute to false. +You can skip the column generation using the `AutoGenerateField` property or set the `Bindable` attribute to `false`. {% tabs %} {% highlight c# %} @@ -414,7 +414,7 @@ public string FirstName #### Change the HeaderText of column -You can customize header text of column using `Display.Name` property. +You can customize the header text of a column using the `Display.Name` property. {% tabs %} {% highlight c# %} @@ -501,7 +501,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/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) collection. +The SfTreeGrid control allows you to define the columns manually by adding the desired column to the [SfTreeGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) collection. {% tabs %} {% highlight xaml %} @@ -543,7 +543,7 @@ You can get the columns (added or auto-generated) from [SfTreeGrid.Columns](http ### Adding column -You can add column at runtime by adding instance of column to `SfTreeGrid.Columns` property. +You can add a column at runtime by adding the instance of a column to the `SfTreeGrid.Columns` property. {% tabs %} {% highlight c# %} @@ -591,9 +591,9 @@ 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/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property. +SfTreeGrid allows resizing the columns like in Excel by resizing the column header. This can be enabled or disabled by setting the [SfTreeGrid.AllowResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property. -N> Resizing considers MinWidth and MaxWidth of column. +N> Resizing considers the `MinWidth` and `MaxWidth` of the column. {% tabs %} {% highlight xaml %} @@ -621,8 +621,8 @@ SfTreeGrid shows indication for hidden columns in column header and also allows ### Disable resizing -You can cancel resizing of particular column by setting [TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property to `false`. In another way, you can cancel the resizing by handling [SfTreeGrid.ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ResizingColumns) event. The `ResizingColumns` event occurs when you start dragging by resizing cursor on headers. -[ResizingColumnsEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html) of `ResizingColumns` provides information about the columns’s index and width. +You can cancel resizing of a particular column by setting the [TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property to `false`. Alternatively, you can cancel the resizing by handling the [SfTreeGrid.ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ResizingColumns) event. The `ResizingColumns` event occurs when you start dragging with the resizing cursor on the headers. +[ResizingColumnsEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html) of `ResizingColumns` provides information about the column's index and width. {% tabs %} {% highlight c# %} @@ -640,7 +640,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. +SfTreeGrid allows you to identify the progress of the resizing of columns through the `ResizingColumnsEventArgs.Reason` property. You can get the width of the column after resizing is completed by getting `ResizingColumnsEventArgs.Width` when `ResizingColumnsEventArgs.Reason` is `ColumnResizingReason.Resized` in the `ResizingColumns` event. {% tabs %} {% highlight c# %} @@ -658,7 +658,7 @@ void OnResizingColumns(object sender, ResizingColumnsEventArgs e) ## Column drag and drop -You can allow end-users to rearrange the columns by drag and drop the column headers by setting [SfTreeGrid.AllowDraggingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowDraggingColumns) to `true`. +You can allow end-users to rearrange the columns by dragging and dropping the column headers by setting [SfTreeGrid.AllowDraggingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowDraggingColumns) to `true`. {% tabs %} {% highlight xaml %} @@ -676,7 +676,7 @@ You can allow end-users to rearrange the columns by drag and drop the column hea ![Drag and Drop Column in WPF TreeGrid](Columns_images/wpf-treegrid-drag-and-drop.jpg) -You can enable or disable dragging on particular column using [TreeGridColumn.AllowDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowDragging) property. +You can enable or disable dragging on a particular column using the [TreeGridColumn.AllowDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowDragging) property. {% tabs %} {% highlight xaml %} @@ -688,15 +688,15 @@ You can enable or disable dragging on particular column using [TreeGridColumn.Al {% endtabs %} ### Disable column reordering -You can cancel the particular column dragging by handling [SfTreeGrid.ColumnDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ColumnDragging). `ColumnDragging` event occurs when you start dragging the column header. +You can cancel the particular column dragging by handling [SfTreeGrid.ColumnDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ColumnDragging). The `ColumnDragging` event occurs when you start dragging the column header. -[TreeGridColumnDraggingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html) of `ColumnDragging` event provides information about the column triggered this event. +[TreeGridColumnDraggingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html) of the `ColumnDragging` event provides information about the column that triggered this event. -[TreeGridColumnDraggingEventArgs.From](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_From) - It returns the index of column triggered this event. +[TreeGridColumnDraggingEventArgs.From](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_From) - It returns the index of the column that triggered this event. [TreeGridColumnDraggingEventArgs.To](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_To) - It returns the index where you try to drop the column. -[TreeGridColumnDraggingEventArgs.Reason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_Reason) - It returns column dragging details by [QueryColumnDraggingReason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingReason.html). +[TreeGridColumnDraggingEventArgs.Reason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_Reason) - It returns the column dragging details through [QueryColumnDraggingReason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingReason.html). {% tabs %} @@ -719,7 +719,7 @@ private void TreeGrid_ColumnDragging(object sender, TreeGridColumnDraggingEventA ## Freezing Columns -You can freeze the columns in view at the left and right side like in excel by setting [SfTreeGrid.FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount) and [SfTreeGrid.FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount) properties. +You can freeze the columns in view at the left and right side like in Excel by setting the [SfTreeGrid.FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount) and [SfTreeGrid.FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount) properties. {% tabs %} {% highlight xaml %} @@ -889,4 +889,4 @@ Below code, binds the `ViewModel.AllowEditing` property to `TreeGridColumn.Allow {% endtabs %} -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Filtering.md b/wpf/TreeGrid/Filtering.md index b20d9d6504..64b6594513 100644 --- a/wpf/TreeGrid/Filtering.md +++ b/wpf/TreeGrid/Filtering.md @@ -1,7 +1,7 @@ --- layout: post title: Filtering in WPF TreeGrid control | Syncfusion® -description: Learn here all about Filtering support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn all about filtering support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Filtering in WPF TreeGrid (SfTreeGrid) -Filtering is the process of retrieving the values from a collection that satisfies the specified condition. In SfTreeGrid, filtering can be applied through the UI as well as the programmatic filters. +Filtering is the process of retrieving values from a collection that satisfy the specified condition. In SfTreeGrid, filtering can be applied through the UI as well as through programmatic filters. ## FilterLevel @@ -35,7 +35,7 @@ Filter will be applied to root nodes only in SfTreeGrid. For other nodes, `IsFil **All** -Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not match the filter condition, filter will not be applied for child nodes. Else, filter will be applied to its child nodes also. +Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not match the filter condition, the filter will not be applied to its child nodes. Otherwise, the filter will also be applied to its child nodes. **Extended** @@ -76,13 +76,13 @@ private void Button_Click(object sender, RoutedEventArgs e) {% endhighlight %} {% endtabs %} -Here, `FilterNodes` delegate filters the data based on Salary. `FilterNodes` delegate is assigned to [SfTreeGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridView_Filter) predicate to filter the tree grid. After that, [SfTreeGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridView_RefreshFilter) method is called to refresh the nodes. If the node satisfies the filter conditions, true will be returned. Else false will be returned. +Here, the `FilterNodes` delegate filters the data based on the `Salary` property. The `FilterNodes` delegate is assigned to the [SfTreeGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridView_Filter) predicate to filter the tree grid. After that, the [SfTreeGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridView_RefreshFilter) method is called to refresh the nodes. If the node satisfies the filter conditions, `true` is returned. Otherwise, `false` is returned. ![WPF TreeGrid with Filtering](Filtering_images/wpf-treegrid-filtering.png) -While filtering, if the node satisfies filter condition, [IsFiltered](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeNode.html#Syncfusion_UI_Xaml_TreeGrid_TreeNode_IsFiltered) property of [TreeNode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeNode.html) will be set as false. Else, it will be true. If `IsFiltered` value is True, the node will not be displayed in view, else it will be displayed in view. +While filtering, if the node satisfies the filter condition, the [IsFiltered](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeNode.html#Syncfusion_UI_Xaml_TreeGrid_TreeNode_IsFiltered) property of [TreeNode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeNode.html) will be set to `false`. Otherwise, it will be set to `true`. If the `IsFiltered` value is `true`, the node will not be displayed in the view; otherwise, it will be displayed in the view. -N> SfTreeGrid refreshes the filtering on property change if [SfTreeGrid.LiveNodeUpdateMode ](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_LiveNodeUpdateMode)property is set as `AllowDataShaping`. +N> SfTreeGrid refreshes the filtering on property change if the [SfTreeGrid.LiveNodeUpdateMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_LiveNodeUpdateMode) property is set to `AllowDataShaping`. You can download the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/FilteringDemo-587565594). @@ -130,10 +130,10 @@ this.sfTreeGrid.Columns["FirstName"].FilterPredicates.Add( {% endtabs %} #### Filter behavior -The [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterBehavior) property is used to specify whether to consider the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) as string or specific data type. +The [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterBehavior) property is used to specify whether to consider the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) as a string or as a specific data type. -* StringTyped - Records are filtered without considering the type and it takes FilterValue type as string. -* StronglyTyped - Records are filtered by considering the FilterValue underlying type. +* StringTyped - Records are filtered without considering the type, and the FilterValue type is treated as a string. +* StronglyTyped - Records are filtered by considering the underlying type of the FilterValue. #### Clear filtering @@ -158,10 +158,10 @@ this.sfTreeGrid.ClearFilter(this.sfTreeGrid.Columns["FirstName"]); The [PredicateType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_PredicateType) property is used to apply multiple FilterPredicates for a column. -* And: Performs And operation in filters. -* AndAlso: Performs AndAlso operation in filters. -* Or: Performs Or operation in filters. -* OrElse: Performs OrElse operation in filters. +* And: Performs an And operation in filters. +* AndAlso: Performs an AndAlso operation in filters. +* Or: Performs an Or operation in filters. +* OrElse: Performs an OrElse operation in filters. {% tabs %} {% highlight c# %} @@ -189,11 +189,11 @@ this.sfTreeGrid.Columns["FirstName"].FilterPredicates.Add( #### Filter DateColumn with range between two dates -A [TreeGridDateTimeColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDateTimeColumn.html) can be filtered with a range between two dates by applying two FilterPredicate for the same column. The [FilterType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterType) for the FilterPredicate with start date should be `GreaterThanOrEqual` and end date should be `LessThanOrEqual`. +A [TreeGridDateTimeColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDateTimeColumn.html) can be filtered with a range between two dates by applying two FilterPredicates for the same column. The [FilterType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterType) for the FilterPredicate with the start date should be `GreaterThanOrEqual`, and the end date should be `LessThanOrEqual`. ## UI filtering -SfTreeGrid provides Excel-like filtering UI and advanced filter UI to filter the data easily. UI filtering can be enabled by setting the [SfTreeGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AllowFiltering) property to `true`. This allows to open the filter UI by clicking the filter icon on the column header to filter the nodes. +SfTreeGrid provides Excel-like filtering UI and an advanced filter UI to filter the data easily. UI filtering can be enabled by setting the [SfTreeGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AllowFiltering) property to `true`. This allows you to open the filter UI by clicking the filter icon on the column header to filter the nodes. The filtering can be enabled or disabled for a specific column by setting the [TreeGridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowFiltering) property. @@ -214,15 +214,15 @@ N> `TreeGridColumn.AllowFiltering` has higher priority than the `SfTreeGrid.Allo ### Built-in UI views -The SfTreeGrid provides the following types of filter pop-up modes: +SfTreeGrid provides the following types of filter pop-up modes: -* Check box filter: Provides Excel-like filter interface with a list of check boxes. +* Check box filter: Provides an Excel-like filter interface with a list of check boxes. * Advanced filter: Provides advanced filter options to filter the data. -* Both: Both check box filter and advanced filter are loaded while opening the filter pop-up. +* Both: Both the check box filter and the advanced filter are loaded when the filter pop-up is opened. -By default, the filter pop-up mode of the column is set to Both. The check box and the advanced filters can be switched using the Advanced Filter button. +By default, the filter pop-up mode of the column is set to `Both`. The check box and the advanced filters can be switched using the Advanced Filter button. #### Checkbox filtering UI @@ -234,7 +234,7 @@ By default, the filter pop-up mode of the column is set to Both. The check box a ## Changing filter UI for grid -Filter UI view can be changed for all the columns in grid by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterMode) in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) by writing style and assign it to [SfTreeGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterPopupStyle). +The filter UI view can be changed for all the columns in the grid by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterMode) in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) by writing a style and assigning it to [SfTreeGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterPopupStyle). {% tabs %} {% highlight xaml %} @@ -253,7 +253,7 @@ Filter UI view can be changed for all the columns in grid by changing the [Filte ## Changing filter UI for a column -Filter UI view can be changed for a specific column by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterMode) in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) by writing style and assigning it to [TreeGridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_FilterPopupStyle). +The filter UI view can be changed for a specific column by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterMode) in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) by writing a style and assigning it to [TreeGridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_FilterPopupStyle). {% tabs %} {% highlight xaml %} @@ -291,23 +291,23 @@ You can skip the [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Sync ## Check box filtering -The check box filtering is the same as Excel-like filter popup, which displays a search text box and a list of check boxes with unique items from the expanded tree nodes. +The check box filtering is the same as the Excel-like filter popup, which displays a search text box and a list of check boxes with unique items from the expanded tree nodes. The items in the checked state will be visible in the view, and the other items will be filtered out of the view. -This filtering operation is performed based on the value of [SfTreeGrid.FilterLevel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterLevel) property. +This filtering operation is performed based on the value of the [SfTreeGrid.FilterLevel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterLevel) property. ## Advanced filtering -Advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on advanced filter type by automatically detecting the underlying date type. +The advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on the advanced filter type by automatically detecting the underlying data type. The following built-in filter types are supported in SfTreeGrid: * Text filter: Loads various menu options to filter the display text effectively. -* Number filter: Loads various menu options to filter the numeric data. +* Number filter: Loads various menu options to filter numeric data. -* Date filter: Loads various menu options and [DatePicker](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datepicker?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0&redirectedfrom=MSDN) to filter date-time type columns. +* Date filter: Loads various menu options and a [DatePicker](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datepicker?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0&redirectedfrom=MSDN) to filter date-time type columns. @@ -334,7 +334,7 @@ When the DateTime type value is bound to the {{'[TreeGridColumn](https://help.sy
-Displays Text Filter in WPF TreeGrid/> +<img src= Displays Number Filter in WPF TreeGrid @@ -393,7 +393,7 @@ N> The `Null` and `Not Null` options are available only when `AllowBlankFilters` ## Instant filtering -By default, filters are applied to the columns when OK button is clicked in UI filtering. To update the filters immediately whenever update in filter popup, set [TreeGridColumn.ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ImmediateUpdateColumnFilter) to `true`. +By default, filters are applied to the columns when the OK button is clicked in UI filtering. To update the filters immediately whenever there is an update in the filter pop-up, set [TreeGridColumn.ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ImmediateUpdateColumnFilter) to `true`. {% tabs %} {% highlight xaml %} @@ -409,7 +409,7 @@ this.sfTreeGrid.Columns["EmployeeID"].ImmediateUpdateColumnFilter = true; {% endhighlight %} {% endtabs %} -Here, the OK and Cancel buttons are unavailable and Done button is available to just close the popup. +Here, the OK and Cancel buttons are unavailable, and the Done button is available to just close the popup. The following screenshot illustrates the check box filter when `ImmediateUpdateColumnFilter` is set to `true`. @@ -419,7 +419,7 @@ The following screenshot illustrates the advanced filter when `ImmediateUpdateCo ![Advanced Filter with Immediate Filter in WPF TreeGrid](Filtering_images/wpf-treegrid-immediate-advanced-filter.png) -N> In check box filter, the `SelectAll` option is not reflected in the filter updates if [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ImmediateUpdateColumnFilter) is true. +N> In the check box filter, the `SelectAll` option is not reflected in the filter updates if [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ImmediateUpdateColumnFilter) is `true`. ## Filtering null values @@ -442,13 +442,13 @@ The following screenshot illustrates the check box filter when `AllowBlankFilter ![Filter Null Values using CheckBox Filter in WPF TreeGrid](Filtering_images/wpf-treegrid-filter-null-values.png) -The following screenshot illustrates advanced filter when `AllowBlankFilters` is set to `true`. +The following screenshot illustrates the advanced filter when `AllowBlankFilters` is set to `true`. ![Filter Null Values using Advanced Filter in WPF TreeGrid](Filtering_images/wpf-treegrid-null-values.png) ## Changing AdvancedFilter type when loading dynamic ItemsSource -By default, the text filters will be loaded for the columns if `ItemsSource` is [dynamic](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/reference-types#the-dynamic-type). The [TreeGridColumn.ColumnMemberType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ColumnMemberType) property loads number filters or date filters based on the column values. +By default, the text filters will be loaded for the columns if the `ItemsSource` is [dynamic](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/reference-types#the-dynamic-type). The [TreeGridColumn.ColumnMemberType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ColumnMemberType) property loads number filters or date filters based on the column values. {% tabs %} {% highlight c# %} @@ -462,7 +462,7 @@ this.sfTreeGrid.Columns["EmployeeID"].ColumnMemberType = typeof(double); ### Loading text filter for number or date column -The [SfTreeGrid.FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulating) event is used to load text filters for the columns that have number or date value as underlying type by setting value of the `TreeGridFilterItemsPopulatingEventArgs.FilterControl.AdvancedFilterType` property to `AdvancedFilterType.TextFilter`. +The [SfTreeGrid.FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulating) event is used to load text filters for the columns that have a number or date value as the underlying type by setting the value of the `TreeGridFilterItemsPopulatingEventArgs.FilterControl.AdvancedFilterType` property to `AdvancedFilterType.TextFilter`. {% tabs %} {% highlight c# %} @@ -480,7 +480,7 @@ private void OnSfTreeGridFilterItemsPopulating(object sender, TreeGridFilterItem ### Customizing filter predicates -The filter predicates can be customized using the [SfTreeGrid.FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterChanging) event. This event occurs when applying filter using the filter control. Here, [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) is changed based on some conditions. +The filter predicates can be customized using the [SfTreeGrid.FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterChanging) event. This event occurs when applying a filter using the filter control. Here, the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) is changed based on certain conditions. {% tabs %} {% highlight c# %} @@ -501,7 +501,7 @@ private void OnSfTreeGridFilterChanging(object sender, TreeGridFilterChangingEve ### Customizing Excel-like filter ItemsSource -The [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) `ItemsSource` can be customized to restrict some data from filtering using the [SfTreeGrid.FilterItemsPopulated](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulated) event. Here, the [FilterElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterElement.html) that has actual value as 0 is removed from `ItemsSource`. +The `ItemsSource` of [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) can be customized to restrict some data from filtering using the [SfTreeGrid.FilterItemsPopulated](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulated) event. Here, the [FilterElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterElement.html) that has an actual value of 0 is removed from the `ItemsSource`. {% tabs %} {% highlight c# %} @@ -547,7 +547,7 @@ private void SfTreeGrid_FilterItemsPopulating(object sender, TreeGridFilterItems ### Customizing sort options text -Sort options text can be customized by changing the value of [AscendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_AscendingSortString) and [DescendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_DescendingSortString) properties in the [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) using the [SfTreeGrid.FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulating) event. +The sort options text can be customized by changing the value of the [AscendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_AscendingSortString) and [DescendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_DescendingSortString) properties in the [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) using the [SfTreeGrid.FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulating) event. {% tabs %} {% highlight c# %} @@ -593,7 +593,7 @@ Sort options can be collapsed by setting the [SortOptionVisibility](https://help ### Customizing the filter popup size -The size of the filter popup can be changed using the [FilterPopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterPopupHeight) and [FilterPopupWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterPopupWidth) properties in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html). +The size of the filter popup can be changed using the [FilterPopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterPopupHeight) and [FilterPopupWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterPopupWidth) properties in the [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html). {% tabs %} {% highlight xaml %} @@ -612,7 +612,7 @@ The size of the filter popup can be changed using the [FilterPopupHeight](https: ### Changing filter icon style after applying filters -The filter icon style can be changed by writing style with TargetType as [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html). +The filter icon style can be changed by writing a style with the `TargetType` set to [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html). {% tabs %} {% highlight c# %} @@ -722,4 +722,4 @@ The filter icon style can be changed by writing style with TargetType as [Filter ![Customizing Filter Icon in WPF TreeGrid](Filtering_images/wpf-treegrid-filter-icon.png) -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Paging.md b/wpf/TreeGrid/Paging.md index 450bd5dfcc..f88c33d7d0 100644 --- a/wpf/TreeGrid/Paging.md +++ b/wpf/TreeGrid/Paging.md @@ -1,7 +1,7 @@ --- layout: post title: Paging in WPF TreeGrid control | Syncfusion® -description: Learn here all about Paging support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more details. +description: Learn all about paging support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more details. platform: wpf control: SfTreeGrid documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Paging in WPF TreeGrid (SfTreeGrid) -SfTreeGrid provides support to manipulate the nodes using SfDataPager control. You can refer [SfDataPager](https://help.syncfusion.com/wpf/datapager/overview) control user guide for more information. +SfTreeGrid provides support to manipulate the nodes using the SfDataPager control. You can refer to the [SfDataPager](https://help.syncfusion.com/wpf/datapager/overview) control user guide for more information. ## Getting started -Follow the below steps to bind SfTreeGrid with SfDataPager. +Follow the steps below to bind SfTreeGrid with SfDataPager. -1. Create `IEnumerable` collection that you want to bind and set it to [SfDataPager.Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property. +1. Create an `IEnumerable` collection that you want to bind and set it to the [SfDataPager.Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property. -2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of `RootNodes` to be displayed per page. +2. Set the [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of `RootNodes` to be displayed per page. -3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be update based on current page. +3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to the [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. N> Paging supports all types of [TreeGridView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html), except when using `SfTreeGrid` in unbound mode ([TreeGridUnBoundView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridUnboundView.html)). The following code snippet demonstrates the [TreeGridSelfRelationalView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSelfRelationalView.html) type. Similarly, paging support can be implemented for [TreeGridNestedView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridNestedView.html). @@ -178,9 +178,9 @@ public class EmployeeInfo ### Limitations -1. Paging is not supported when using `SfTreeGrid` in unbound mode (TreeGridUnBoundView). -2. `SfDataPager`’s on‑demand loading functionality is not supported. +1. Paging is not supported when using `SfTreeGrid` in unbound mode (`TreeGridUnBoundView`). +2. The on-demand loading functionality of `SfDataPager` is not supported. 3. **Child nodes** are not considered in page size calculation. 4. Selection should not be maintained when moving from one page to another. 5. **Sorting and Filtering** are applied across all pages. However, node reordering occurs only within each individual page. -6. The **data operations** such as Add, Replace, Remove, Insert, and Move are not supported. \ No newline at end of file +6. **Data operations** such as Add, Replace, Remove, Insert, and Move are not supported. \ No newline at end of file diff --git a/wpf/TreeGrid/Selection.md b/wpf/TreeGrid/Selection.md index 3149927444..94df7e9fbf 100644 --- a/wpf/TreeGrid/Selection.md +++ b/wpf/TreeGrid/Selection.md @@ -1,7 +1,7 @@ --- layout: post title: Selection in WPF TreeGrid control | Syncfusion® -description: Learn here all about Selection support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn all about selection support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Selection in WPF TreeGrid (SfTreeGrid) -[WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) (SfTreeGrid) allows you to select one or more rows or cells. For selecting specific row or group of rows you have to set [SelectionUnit](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionUnit) as [Row](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) and for selecting a specific cell or group of cells you have to set `SelectionUnit` as [Cell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) or [Any](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html). In [SelectionUnit.Any](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) option you can select the row by clicking on row header. +[WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) (SfTreeGrid) allows you to select one or more rows or cells. To select a specific row or group of rows, you have to set the [SelectionUnit](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionUnit) to [Row](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html), and to select a specific cell or group of cells, you have to set `SelectionUnit` to [Cell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) or [Any](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html). With the [SelectionUnit.Any](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) option, you can select the row by clicking on the row header. ## Current cell navigation -Keyboard navigation through the cells and rows is determined based on the [NavigationMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_NavigationMode) property. [NavigationMode.Cell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.NavigationMode.html) allows you to navigate between the cells in a row as well as between rows. [NavigationMode.Row](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.NavigationMode.html) allows you to navigate only between rows. It is not possible to set `NavigationMode.Row` when cell selection is enabled (`SelectionUnit` is Cell or Any). +Keyboard navigation through the cells and rows is determined based on the [NavigationMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_NavigationMode) property. [NavigationMode.Cell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.NavigationMode.html) allows you to navigate between the cells in a row as well as between rows. [NavigationMode.Row](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.NavigationMode.html) allows you to navigate only between rows. It is not possible to set `NavigationMode.Row` when cell selection is enabled (`SelectionUnit` is `Cell` or `Any`). ## Selection modes @@ -88,7 +88,7 @@ Allows selecting multiple rows or cells. You can select multiple rows or cells i ## Disable selection for rows and columns -You can disable selection and navigation on particular column by setting the [GridColumn.AllowFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowFocus) property. You can disable selection on particular row or cell or column by handling the [CurrentCellActivating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellActivating) event. +You can disable selection and navigation on a particular column by setting the [GridColumn.AllowFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowFocus) property. You can disable selection on a particular row, cell, or column by handling the [CurrentCellActivating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellActivating) event. ## Multiple row or cell selection @@ -154,7 +154,7 @@ The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.Sf The [CurrentItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentItemProperty) returns the data object that currently has focus, and the [CurrentColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentColumnProperty) denotes the [TreeGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html) that currently has focus. -The [CurrentCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellInfo) returns an instance [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html), which contains information about the cell that currently has focus. +The [CurrentCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellInfo) returns an instance of [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html), which contains information about the cell that currently has focus. ### Row selection @@ -162,7 +162,7 @@ You can get all the selected records using the [SelectedItems](https://help.sync ### Cell Selection -You can get the selected cells as [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html) collection by using [GetSelectedCells](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_GetSelectedCells) method. +You can get the selected cells as a [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html) collection by using the [GetSelectedCells](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_GetSelectedCells) method. {% tabs %} {% highlight c# %} @@ -175,7 +175,7 @@ List selectedCells = this.treeGrid.GetSelectedCells(); ### CurrentItem vs SelectedItem -Both [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) and [CurrentItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentItem) returns the same data object when there is single cell or row is selected in SfTreeGrid. When you have selected more than one rows or cells, the record that had been selected initially is maintained in `SelectedItem` and the record that currently have focus is maintained in `CurrentItem`. +Both [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) and [CurrentItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentItem) return the same data object when a single cell or row is selected in SfTreeGrid. When you have selected more than one row or cell, the record that was selected initially is maintained in `SelectedItem`, and the record that currently has focus is maintained in `CurrentItem`. ## Programmatic selection @@ -296,7 +296,7 @@ this.treeGrid.MoveCurrentCell(new RowColumnIndex(3, 2), false); ### Clear selection -You can clear the selection using the [ClearSelections](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ClearSelections_System_Boolean_) method. In row selection, you can remove the selection by setting null to the [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) or clearing the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItems) property. +You can clear the selection using the [ClearSelections](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ClearSelections_System_Boolean_) method. In row selection, you can remove the selection by setting `null` to the [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) or by clearing the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItems) property. {% tabs %} {% highlight c# %} @@ -306,7 +306,7 @@ this.treeGrid.SelectionController.ClearSelections(true); {% endhighlight %} {% endtabs %} -You can clear selection on group of cells by using the [UnselectCells](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_UnselectCells_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method in cell selection. +You can clear selection on a group of cells by using the [UnselectCells](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_UnselectCells_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method in cell selection. {% tabs %} {% highlight c# %} @@ -320,7 +320,7 @@ this.treeGrid.UnselectCells(firstRecord, firstColumn, lastRecord, lastColumn); {% endhighlight %} {% endtabs %} -You can clear the selection on particular cell by using the [UnselectCell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_UnselectCell_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method in cell selection. +You can clear the selection on a particular cell by using the [UnselectCell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_UnselectCell_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method in cell selection. {% tabs %} {% highlight c# %} @@ -339,7 +339,7 @@ this.treeGrid.UnselectCell(removeRecord, removeColumn); ### Automatic scrolling on drag selection -SfTreeGrid scrolls rows and columns automatically when you try to perform the drag selection like in Excel. You can enable or disable AutoScrolling by setting the [AutoScroller.AutoScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoScroller) property. +SfTreeGrid scrolls rows and columns automatically when you try to perform the drag selection like in Excel. You can enable or disable auto-scrolling by setting the [AutoScroller.AutoScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoScroller) property. {% tabs %} {% highlight c# %} @@ -351,7 +351,7 @@ this.treeGrid.AutoScroller.AutoScrolling = AutoScrollOrientation.Both; ### Scroll to a particular row or column index -You can scroll programmatically to particular cell using the [ScrollInView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ScrollInView_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method by passing row and column index. +You can scroll programmatically to a particular cell using the [ScrollInView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ScrollInView_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method by passing the row and column index. {% tabs %} {% highlight c# %} @@ -670,7 +670,7 @@ You can customize the mouse and keyboard behaviors by overriding the selection c ### CurrentCellActivating -The [CurrentCellActivating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellActivating) event will occurs before moving the current cell to particular cell. [CurrentCellActivatingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellActivatingEventArgs.html) has following members which provides information for `CurrentCellActivatingEvent`. +The [CurrentCellActivating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellActivating) event occurs before moving the current cell to a particular cell. [CurrentCellActivatingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellActivatingEventArgs.html) has the following members, which provide information for `CurrentCellActivatingEvent`. [ActivationTrigger](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.CellGrid.Helpers.CurrentCellActivatingEventArgs.html#Syncfusion_UI_Xaml_CellGrid_Helpers_CurrentCellActivatingEventArgs_ActivationTrigger): Returns the reason for moving the current cell. @@ -702,7 +702,7 @@ private void TreeGrid_CurrentCellActivating(object sender, Syncfusion.UI.Xaml.Gr {% endhighlight %} {% endtabs %} -You can cancel the current cell moving process within this event by setting [GridCurrentCellActivatingEventArgs.Cancel](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.ComponentModel.SyncfusionCancelRoutedEventArgs.html#Syncfusion_Windows_ComponentModel_SyncfusionCancelRoutedEventArgs_Cancel) to true. +You can cancel the current cell moving process within this event by setting the [GridCurrentCellActivatingEventArgs.Cancel](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.ComponentModel.SyncfusionCancelRoutedEventArgs.html#Syncfusion_Windows_ComponentModel_SyncfusionCancelRoutedEventArgs_Cancel) to `true`. {% tabs %} {% highlight c# %} @@ -759,7 +759,7 @@ private void TreeGrid_CurrentCellActivated(object sender, Syncfusion.UI.Xaml.Gri ### SelectionChanging -The [SelectionChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionChanging) event occurs before processing the selection to a particular row or cell. This event is triggered only to the keyboard and mouse interactions. [GridSelectionChangingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionChangingEventArgs.html) has the following members, which provide information to the SelectionChanging event. +The [SelectionChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionChanging) event occurs before processing the selection to a particular row or cell. This event is triggered only by the keyboard and mouse interactions. [GridSelectionChangingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionChangingEventArgs.html) has the following members, which provide information to the SelectionChanging event. [AddedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSelectionChangingEventArgs_AddedItems): Collection of [TreeGridRowInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowInfo.html) or [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html) where the selection is going to be processed. @@ -826,7 +826,7 @@ private void TreeGrid_SelectionChanged(object sender, Syncfusion.UI.Xaml.Grid.Gr ### Change selection background and foreground -You can change the selection background and foreground using the [SelectionBackGround](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionBackgroundProperty) and [SelectionForeGround](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionForegroundProperty) properties. +You can change the selection background and foreground using the [SelectionBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionBackgroundProperty) and [SelectionForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionForegroundProperty) properties. {% tabs %} {% highlight xaml %} @@ -1031,13 +1031,13 @@ You can customize the cell selection by editing the control template of the corr ## Customize selection behaviors -The SfTreeGrid process the selection operations in selection controller. Below are the built-in selection controllers, +The SfTreeGrid processes the selection operations in the selection controller. The following are the built-in selection controllers: -* [TreeGridRowSelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html) – Process selection operations when `selection unit` as `row`. +* [TreeGridRowSelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html) – Processes selection operations when the `SelectionUnit` is `Row`. -* [TreeGridCellSelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellSelectionController.html) – process selection operations when `selection unit` as `cell` or `Any`. +* [TreeGridCellSelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellSelectionController.html) – Processes selection operations when the `SelectionUnit` is `Cell` or `Any`. -You can customize the default row selection behaviors by overriding the `TreeGridRowSelectionController` class or customize the cell selection behaviors by overriding the `TreeGridCellSelectionController` class and set it to `SfTreeGrid.SelectionController`. +You can customize the default row selection behaviors by overriding the `TreeGridRowSelectionController` class, or customize the cell selection behaviors by overriding the `TreeGridCellSelectionController` class and setting it to `SfTreeGrid.SelectionController`. {% tabs %} {% highlight c# %} @@ -1053,7 +1053,7 @@ public class GridSelectionControllerExt : TreeGridRowSelectionController ### Change enter key behavior -By default, when pressing the `Enter` key, the current cell will be moved to the next focused cell in the same column. You can change the `Enter` key behavior by overriding the [ProcessKeyDown](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_ProcessKeyDown_System_Windows_Input_KeyEventArgs_) method in selection controller. In this method, you have to create a new [KeyEventArgs](https://learn.microsoft.com/en-us/dotnet/api/system.windows.input.keyeventargs?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0&redirectedfrom=MSDN), which refers to the `Tab` key and processes the `Tab` key action. +By default, when pressing the `Enter` key, the current cell will be moved to the next focused cell in the same column. You can change the `Enter` key behavior by overriding the [ProcessKeyDown](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_ProcessKeyDown_System_Windows_Input_KeyEventArgs_) method in the selection controller. In this method, you have to create a new [KeyEventArgs](https://learn.microsoft.com/en-us/dotnet/api/system.windows.input.keyeventargs?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0&redirectedfrom=MSDN), which refers to the `Tab` key and processes the `Tab` key action. {% tabs %} @@ -1107,7 +1107,7 @@ You can [download]( https://github.com/SyncfusionExamples/how-to-scroll-and-sele ### Prevent the selection when right-click -You can prevent the selection when right-clicking in tree grid by customizing the [SelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionController) and overriding the [ProcessPointerPressed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_ProcessPointerPressed_System_Windows_Input_MouseButtonEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_). +You can prevent the selection when right-clicking in the tree grid by customizing the [SelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionController) and overriding the [ProcessPointerPressed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_ProcessPointerPressed_System_Windows_Input_MouseButtonEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_). {% tabs %} {% highlight c# %} @@ -1285,7 +1285,7 @@ private void Button_Click(object sender, RoutedEventArgs e) ### Show the selection of row/cell when setting the background -The `Row`/`Cell` selection border is behind the grid cell content. So, when you apply the background for a row, the selection is not displayed in `UI`. You can overcome this by setting opacity in `TreeGridCell`. +The `Row`/`Cell` selection border is behind the grid cell content. So, when you apply the background for a row, the selection is not displayed in the `UI`. You can overcome this by setting the opacity in `TreeGridCell`. {% tabs %} {% highlight xaml %} @@ -1301,7 +1301,7 @@ The `Row`/`Cell` selection border is behind the grid cell content. So, when you ### Set the current cell on a particular row when tree grid is loaded -You can set the current cell in tree grid using the [treeGrid.SelectionController.MoveCurrentCell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_MoveCurrentCell_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_System_Boolean_) method. +You can set the current cell in the tree grid using the [treeGrid.SelectionController.MoveCurrentCell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_MoveCurrentCell_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_System_Boolean_) method. {% tabs %} {% highlight c# %} @@ -1320,4 +1320,4 @@ private void TreeGrid_Loaded(object sender, RoutedEventArgs e) {% endtabs %} -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Sorting.md b/wpf/TreeGrid/Sorting.md index 15c305924a..dc9953baa4 100644 --- a/wpf/TreeGrid/Sorting.md +++ b/wpf/TreeGrid/Sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in WPF TreeGrid control | Syncfusion® -description: Learn here all about Sorting support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn all about sorting support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -10,7 +10,7 @@ documentation: ug # Sorting in WPF TreeGrid (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/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. +SfTreeGrid allows you to sort the data against one or more columns in either ascending or descending order. When sorting is applied, the rows are rearranged based on the sort criteria. You can allow users to sort the data by touching or clicking the column header by setting the [SfTreeGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. {% tabs %} {% highlight xaml %} @@ -28,7 +28,7 @@ this.treeGrid.AllowSorting = true; {% endhighlight %} {% endtabs %} -In another way, you can enable or disable the sorting for particular column by setting the [TreeGridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) property. +Alternatively, you can enable or disable sorting for a particular column by setting the [TreeGridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) property. {% tabs %} {% highlight xaml %} @@ -56,15 +56,15 @@ this.treeGrid.Columns["LastName"].AllowSorting = false; {% endhighlight %} {% endtabs %} -N> The[TreeGridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) takes higher priority than [SfTreeGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property. +N> The [TreeGridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) takes higher priority than the [SfTreeGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property. -End users can sort the column by clicking column header cell. Once the columns get sorted, the sort indicator will be displayed on the right side of the column header. +End users can sort the column by clicking the column header cell. Once the columns get sorted, the sort indicator will be displayed on the right side of the column header. ![WPF TreeGrid with Sorting](Sorting_images/wpf-treegrid-sorting.png) ## Sort column in double click -By default, column gets sorted when column header clicked. You can change this behavior to sort the column in double click action by setting [SfTreeGrid.SortClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) property to `DoubleClick`. +By default, the column gets sorted when the column header is clicked. You can change this behavior to sort the column on a double click action by setting the [SfTreeGrid.SortClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) property to `DoubleClick`. {% tabs %} {% highlight xaml %} @@ -87,24 +87,24 @@ this.treeGrid.SortClickAction = SortClickAction.DoubleClick; ## Sorting order -By default, the data is sorted in ascending or descending order when clicking column header. You can rearrange the data to its initial order from descending, when clicking column header by setting [SfTreeGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowTriStateSorting) property. +By default, the data is sorted in ascending or descending order when clicking the column header. You can rearrange the data to its initial order from descending when clicking the column header by setting the [SfTreeGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowTriStateSorting) property. -Following are the sequence of sorting orders when clicking column header, +The following is the sequence of sorting orders when clicking the column header: -* Sorts the data in ascending order -* Sorts the data in descending order -* Clears the sorting and records displayed in its initial order +* Sorts the data in ascending order. +* Sorts the data in descending order. +* Clears the sorting, and records are displayed in their initial order. ## Multi column sorting -SfTreeGrid control allows you sort more than one column, where sorting is applied one column against other columns. To apply sorting on multiple columns, user have to click the column header by pressing the Ctrl key. -In the below screen shot, the `First Name` column sorted. Then the `Employee ID` column is sorted against the `First Name` data by clicking column header by pressing Ctrl key. The sorting state of `First Name` column is preserved and `Employee ID` column sorted against `First Name` column. +The SfTreeGrid control allows you to sort more than one column, where sorting is applied one column against other columns. To apply sorting on multiple columns, the user has to click the column header while pressing the Ctrl key. +In the screenshot below, the `First Name` column is sorted. Then the `Employee ID` column is sorted against the `First Name` data by clicking the column header while pressing the Ctrl key. The sorting state of the `First Name` column is preserved, and the `Employee ID` column is sorted against the `First Name` column. ![Multi Column Sorting in WPF TreeGrid](Sorting_images/wpf-treegrid-multi-column-sorting.png) ### Display sort order -It is also possible to display sorted order of columns in header by setting [SfTreeGrid.ShowSortNumbers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowSortNumbers) property to `true`. +It is also possible to display the sorted order of columns in the header by setting the [SfTreeGrid.ShowSortNumbers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowSortNumbers) property to `true`. {% tabs %} {% highlight xaml %} @@ -186,21 +186,21 @@ this.treeGrid.SortColumnDescriptions.Clear(); ## Custom sorting -SfTreeGrid allows you to sort the columns based on the custom logic. The custom sorting can be applied by adding the [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) instance to [SfTreeGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortComparers). +SfTreeGrid allows you to sort the columns based on custom logic. The custom sorting can be applied by adding the [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) instance to [SfTreeGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortComparers). -The [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) have the following properties, +The [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) has the following properties: [PropertyName](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html#Syncfusion_Data_SortComparer_PropertyName) - Gets or sets the name of the column to apply custom sorting. [Comparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html#Syncfusion_Data_SortComparer_Comparer) - Gets or sets the custom comparer in which you can code to compare the data using custom logic. -You can implement [ISortDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.ISortDirection.html) interface in comparer to get the sort direction. So you can apply different custom logics for ascending and descending. +You can implement the [ISortDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.ISortDirection.html) interface in the comparer to get the sort direction. So you can apply different custom logic for ascending and descending. -Follow the below steps to add custom comparer to sort using custom logic, +Follow the steps below to add a custom comparer to sort using custom 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. +In the code snippet below, the `FirstName` property is compared based on its string length, instead of the default string comparison. {% tabs %} {% highlight c# %} @@ -249,7 +249,7 @@ public class CustomSortComparer : IComparer, ISortDirection #### Adding custom comparer to SfTreeGrid -Custom comparer can be added to [SfTreeGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortComparers) property. `SortComparers` maintains custom comparers and the custom comparer gets called when corresponding column gets sorted by clicking column header or programmatically. +A custom comparer can be added to the [SfTreeGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortComparers) property. `SortComparers` maintains custom comparers, and the custom comparer is called when the corresponding column gets sorted by clicking the column header or programmatically. {% tabs %} {% highlight xaml %} @@ -268,7 +268,7 @@ this.treeGrid.SortComparers.Add(new SortComparer() { Comparer = new CustomSortCo {% endhighlight %} {% endtabs %} -Sorting `First Name` column sorts the data using custom sort comparer available in `SfTreeGrid.SortComparers`. +Sorting the `First Name` column sorts the data using the custom sort comparer available in `SfTreeGrid.SortComparers`. ![WPF TreeGrid with Custom Sorting](Sorting_images/wpf-treegrid-custom-sorting.png) @@ -276,19 +276,19 @@ Sorting `First Name` column sorts the data using custom sort comparer available ### SortColumnsChanging event -[SfTreeGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanging) event occurs while sorting the columns by clicking column header. [GridSortColumnsChangingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html) has following members which provides information for `SortColumnsChanging` event. +The [SfTreeGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanging) event occurs while sorting the columns by clicking the column header. [GridSortColumnsChangingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html) has the following members, which provide information for the `SortColumnsChanging` event. [Action](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_Action) - Gets the action triggered this event. -[Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_CancelEventArgs_Cancel) - Setting value to `true`, cancels the triggered action. +[Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_CancelEventArgs_Cancel) - Setting the value to `true` cancels the triggered action. [AddedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_AddedItems) - Gets the list of new `SortColumnDescriptions` that are added. [RemovedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_RemovedItems) - Gets the list of `SortColumnDescriptions` that are removed. -[CancelScroll](https://help.syncfusion.com/cr/wpf/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. +[CancelScroll](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_CancelScroll) - Gets or sets a value that indicates whether to scroll and bring the `SelectedItem` into view after sorting takes place. -You can prevent sorting for the particular column through [GridSortColumnsChangingEventArgs.Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_CancelEventArgs_Cancel) property of `SortColumnsChanging` event. +You can prevent sorting for a particular column through the [GridSortColumnsChangingEventArgs.Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_CancelEventArgs_Cancel) property of the `SortColumnsChanging` event. {% tabs %} {% highlight c# %} @@ -308,7 +308,7 @@ private void TreeGrid_SortColumnsChanging(object sender, GridSortColumnsChanging ### SortColumnsChanged event -[SfTreeGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. [GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for `SortColumnsChanged` event. +The [SfTreeGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. [GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for the `SortColumnsChanged` event. -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file From 24985a9e4c7a9a58b97e26c171d3a0be4f836f6e Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Wed, 8 Jul 2026 16:49:12 +0530 Subject: [PATCH 03/15] Revert "1039292_ Updated grammatical and spelling errors" This reverts commit 152e081fe976753550c971e7374b99368348e70a. --- wpf/DataGrid/Columns.md | 62 ++++++++-------- wpf/DataGrid/Filtering.md | 142 ++++++++++++++++++------------------ wpf/DataGrid/Paging.md | 56 +++++++------- wpf/DataGrid/Selection.md | 14 ++-- wpf/DataGrid/Sorting.md | 54 +++++++------- wpf/TreeGrid/Column-Type.md | 10 +-- wpf/TreeGrid/Columns.md | 64 ++++++++-------- wpf/TreeGrid/Filtering.md | 78 ++++++++++---------- wpf/TreeGrid/Paging.md | 18 ++--- wpf/TreeGrid/Selection.md | 50 ++++++------- wpf/TreeGrid/Sorting.md | 54 +++++++------- 11 files changed, 301 insertions(+), 301 deletions(-) diff --git a/wpf/DataGrid/Columns.md b/wpf/DataGrid/Columns.md index 01a4f0ef03..913ac949a2 100644 --- a/wpf/DataGrid/Columns.md +++ b/wpf/DataGrid/Columns.md @@ -1,7 +1,7 @@ --- layout: post title: Columns in WPF DataGrid control | Syncfusion® -description: Learn all about columns support in the Syncfusion® WPF DataGrid (SfDataGrid) control, its elements, and more details. +description: Learn here all about Columns support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details. platform: wpf control: SfDataGrid documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Columns in WPF DataGrid (SfDataGrid) -[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) allows you to add or remove columns using the [SfDataGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) property. You can choose the columns to be added from the built-in column types, or you can create your own column and add it to the `SfDataGrid.Columns`. +[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) allows you to add or remove columns using [SfDataGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_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 `SfDataGrid.Columns`. -The following are the built-in column types supported in SfDataGrid. Each column has its own properties to handle different types of data. +Below are the built-in column types supported in SfDataGrid. Each column has its own properties to handle different types of data. @@ -138,16 +138,16 @@ Use to display the IEnumerable data using SfMultiColumnDropdownControl. ## Defining columns -You can let the SfDataGrid create columns, or you can manually define columns to be displayed. The sections below explain both ways: +You can let the SfDataGrid to create columns or you can manually define columns to be displayed. Below sections explains both ways, 1. Automatically generating columns -2. Manually defining columns +2. Manually define columns ### Automatically generating columns -The automatic column generation based on properties of the data object can be enabled or disabled by setting the [SfDataGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns) property. The default value is `true`. +The automatic column generation based on properties of data object can be enabled or disabled by setting [SfDataGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns). Default value is `true`. -Columns are generated based on the type of the property. For example, a [GridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridNumericColumn.html) is added for an `int` type property. The following table shows the data type and its corresponding column type. For the remaining types, `GridTextColumn` will be added. +Columns are generated based on type of property. For example, [GridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridNumericColumn.html) is added for `int` type property. Below are table shows data type and its column type. For remaining types, `GridTextColumn` will be added.
@@ -209,11 +209,11 @@ GridTimeSpanColumn
-N> The order of columns in the collection will determine the order in which they will appear in SfDataGrid. +N> The order of columns in the collection will determine the order of that they will appear in SfDataGrid. #### AutoGenerateColumns with different modes -Column auto generation is controlled using the [SfDataGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsMode) property. +Column auto generation is controlled using [SfDataGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsMode) property. The `SfDataGrid.AutoGenerateColumnsMode` includes the following modes. @@ -278,8 +278,8 @@ Keeps old columns in DataGrid.Columns collection. #### Auto generating columns for complex type -Custom type (complex type) properties in the data object can be auto-generated by setting the [AutoGenerateColumnsForCustomType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsForCustomType) property to `true`. The default value is `false`. -Custom type properties will be auto-generated through the [AutoGenerateColumnsModeForCustomType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AutoGenerateColumnsModeForCustomType.html) property. +Custom type (complex type) properties in data object can be auto-generated by setting [AutoGenerateColumnsForCustomType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsForCustomType) property as true. Default value is false. +Custom type properties will be auto-generated through [AutoGenerateColumnsModeForCustomType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AutoGenerateColumnsModeForCustomType.html) property. {% tabs %} {% highlight xaml %} @@ -340,7 +340,7 @@ You can download the sample demo [here](https://github.com/SyncfusionExamples/ho #### Customize auto-generated columns in DataGrid -You can customize or cancel the generated column by handling the [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AutoGeneratingColumn) event. The `AutoGeneratingColumn` event occurs when the individual column is auto-generated for a public and non-static property of the underlying data object. +You can customize or cancel the generated column by handling [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AutoGeneratingColumn) event. `AutoGeneratingColumn` event occurs when the individual column is auto-generated for public and non-static property of underlying data object. {% tabs %} {% highlight c# %} @@ -356,9 +356,9 @@ void dataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e) ##### Cancel column generation for particular property -You can cancel the specific column adding to the DataGrid by handling the `AutoGeneratingColumn` event. +You can cancel the specific column adding to the DataGrid by handling `AutoGeneratingColumn` event. -In the code below, column generation for the `OrderID` property is canceled by setting the `Cancel` property to `true`. +In the below code, column generation for `OrderID` property is canceled by setting `Cancel` property to `true`. {% tabs %} {% highlight c# %} @@ -375,9 +375,9 @@ void dataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnArgs e) ##### Changing column type -You can change the type of column being added to SfDataGrid by setting the instance of the column you want to add in the `AutoGeneratingColumn` event. +You can change the type of column adding to SfDataGrid by setting the instance of column you want to add in `AutoGeneratingColumn` event. -In the code below, the column type for the `UnitPrice` property is changed to `GridTextColumn` by setting the instance of `GridTextColumn` to the `Column` property. +In the below code, column type for `UnitPrice` property is changed to `GridTextColumn` by setting instance of GridTextColumn to `Column` property. {% tabs %} {% highlight c# %} @@ -456,11 +456,11 @@ Below screenshot shows the customized header template loaded on the header of Or #### Data Annotations with AutoGenerateColumns -WPF DataGrid (SfDataGrid) supports generating the columns based on built-in [Data Annotation Attributes](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc490428(v=vs.95)). Data Annotations are ignored when the `AutoGenerateColumns` is set to `false`. +WPF DataGrid (SfDataGrid) support to generate the columns based on built-in [Data Annotation Attributes](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc490428(v=vs.95)). Data Annotations ignored, when the `AutoGenerateColumns` is set to False. ##### Exclude column -You can skip the column generation using the `AutoGenerateField` property or set the `Bindable` attribute to `false`. +You can skip the column generation using `AutoGenerateField` property or set the `Bindable` attribute to false. {% tabs %} {% highlight c# %} @@ -476,7 +476,7 @@ public int OrderID ##### Filtering -You can enable filtering automatically for the field using the `Display.AutoGenerateFilter` property. +You can enable filtering automatically for the field using `Display.AutoGenerateFilter` property {% tabs %} {% highlight c# %} @@ -508,7 +508,7 @@ public string Country ##### Change the HeaderText of column -You can customize the header text of a column using the `Display.Name` property. +You can customize header text of column using `Display.Name` property. {% tabs %} {% highlight c# %} @@ -583,7 +583,7 @@ public string Country ##### Format datagrid columns using DisplayFormat attribute -The auto-generated columns will be formatted using the [DataFormatString](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679306%28v%3dvs.95%29) property in the [DisplayFormat](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679253%28v%3dvs.95%29) attribute when the `DisplayFormat` attribute is defined for the properties defined in the view model. If the `DisplayFormat` attribute is defined with the `DataFormatString` property, the DataGrid formats the column only based on `DataFormatString`, without considering other formatting property settings of the columns. +The auto-generated columns will be formatted using the [DataFormatString](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679306%28v%3dvs.95%29) property in the [DisplayFormat](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679253%28v%3dvs.95%29) attribute when the `DisplayFormat` attribute is defined for the properties defined in the view model. If the `DisplayFormat` attribute is defined with the `DataFormatString` property, the DataGrid formats the column only based on `DataFormatString`, without considering other formatting property settings of columns. {% tabs %} {% highlight c# %} @@ -609,7 +609,7 @@ N> The `DataFormatString` attribute will be considered only when the column is a ### Manually defining columns -The WPF DataGrid (SfDataGrid) control allows you to define the columns manually by adding the desired column to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) collection. +WPF DataGrid (SfDataGrid) control allows you to define the columns manually by adding desired column to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) collection. {% tabs %} {% highlight xaml %} @@ -701,7 +701,7 @@ foreach (var name in childColumns) ## DataGrid column resizing -SfDataGrid allows resizing the columns like in Excel by resizing the column header. This can be enabled or disabled by setting the [SfDataGrid.AllowResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [GridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property. +SfDataGrid allows to resize the columns like in excel by resizing column header. This can be enabled or disabled by setting [SfDataGrid.AllowResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [GridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property. N> Resizing considers MinWidth and MaxWidth of column. @@ -726,8 +726,8 @@ SfDataGrid shows indication for hidden columns in column header and also allows ### Disable resizing -You can cancel resizing of a particular column by setting the [GridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property to `false`. Alternatively, you can cancel the resizing by handling the [SfDataGrid.ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. The `ResizingColumns` event occurs when you start dragging with the resizing cursor on the headers. -[ResizingColumnsEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html) of `ResizingColumns` provides information about the column's index and width. +You can cancel resizing of particular column by setting [GridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property to `false`. In another way, you can cancel the resizing by handling [SfDataGrid.ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. The `ResizingColumns` event occurs when you start dragging by resizing cursor on headers. +[ResizingColumnsEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html) of `ResizingColumns` provides information about the columns’s index and width. {% tabs %} {% highlight c# %} @@ -744,7 +744,7 @@ void dataGrid_ResizingColumns(object sender, ResizingColumnsEventArgs e) ### Identify resizing of the column gets completed -SfDataGrid allows you to identify the progress of the resizing of columns through the [ResizingColumnsEventArgs.Reason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Reason) property. You can get the width of the column after resizing is completed by getting [ResizingColumnsEventArgs.Width](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Width) when `ResizingColumnsEventArgs.Reason` is [ColumnResizingReason.Resized](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnResizingReason.html) in the [ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. +SfDataGrid allows you to identify the progress of the resizing of columns through [ResizingColumnsEventArgs.Reason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Reason) property. You can get the width of the column after resizing completed by getting [ResizingColumnsEventArgs.Width](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Width) when `ResizingColumnsEventArgs.Reason` is [ColumnResizingReason.Resized](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnResizingReason.html) in [ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. {% tabs %} {% highlight c# %} @@ -762,7 +762,7 @@ void OnResizingColumns(object sender, ResizingColumnsEventArgs e) ## DataGrid column drag and drop -You can allow end-users to rearrange the columns by dragging and dropping the column headers by setting [SfDataGrid.AllowDraggingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowDraggingColumns) to `true`. +You can allow end-users to rearrange the columns by drag and drop the column headers by setting [SfDataGrid.AllowDraggingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowDraggingColumns) to `true`. {% tabs %} {% highlight xaml %} @@ -787,9 +787,9 @@ You can enable or disable dragging on particular column using [GridColumn.AllowD ### Disable column reordering -You can cancel the particular column dragging by handling [SfDataGrid.QueryColumnDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html). The `QueryColumnDragging` event occurs when you start dragging the column header. [QueryColumnDraggingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingEventArgs.html) of the `QueryColumnDragging` event provides information about the column that triggered this event. +You can cancel the particular column dragging by handling [SfDataGrid.QueryColumnDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_QueryColumnDragging). `QueryColumnDragging` event occurs when you start dragging the column header. [QueryColumnDraggingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingEventArgs.html) of `QueryColumnDragging` event provides information about the column triggered this event. -The `QueryColumnDraggingEventArgs.From` property returns the index of the column that triggered this event. The `QueryColumnDraggingEventArgs.To` property returns the index where you try to drop the column. The `QueryColumnDraggingEventArgs.Reason` returns the column dragging details through [QueryColumnDraggingReason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingReason.html). +`QueryColumnDraggingEventArgs.From` property returns the index of column triggered this event. `QueryColumnDraggingEventArgs.To` property returns the index where you try to drop the column. `QueryColumnDraggingEventArgs.Reason` returns column dragging details by [QueryColumnDraggingReason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingReason.html). {% tabs %} {% highlight c# %} @@ -917,7 +917,7 @@ N> `FrozenColumnCount` and `FooterColumnCount` should be lesser than the number ## DataGrid freeze columns -You can freeze the columns in view at the left and right side like in Excel by setting the [SfDataGrid.FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount) and [SfDataGrid.FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount) properties. +You can freeze the columns in view at the left and right side like in excel by setting [SfDataGrid.FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount) and [SfDataGrid.FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount) properties. {% tabs %} {% highlight xaml %} @@ -932,7 +932,7 @@ You can freeze the columns in view at the left and right side like in Excel by s ### Limitations -1. SfDataGrid supports freezing a number of columns from the left or right. There is no support to freeze a specific column. +1. SfDataGrid has support to freeze the number of columns from the left or right. There is no support to freeze a specific column. ## Binding column properties with ViewModel diff --git a/wpf/DataGrid/Filtering.md b/wpf/DataGrid/Filtering.md index b71937b549..0230eb4e0a 100644 --- a/wpf/DataGrid/Filtering.md +++ b/wpf/DataGrid/Filtering.md @@ -1,26 +1,26 @@ --- layout: post title: Filtering in WPF DataGrid control | Syncfusion® -description: Learn all about filtering support in the Syncfusion® WPF DataGrid (SfDataGrid) control, its elements, and more details. +description: Learn here all about Filtering support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details. platform: wpf control: SfDataGrid documentation: ug --- # Filtering in WPF DataGrid (SfDataGrid) -Filtering is the process of retrieving values from a collection that satisfy the specified condition. In the [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid), filtering can be applied through the UI as well as through programmatic filters. +Filtering is the process of retrieving the values from the collection which satisfy the specified condition. In the [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) the filtering can be applied though the UI as well as the programmatic filters. ## Programmatic filtering -The [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) filter allows you to filter the data programmatically in the following ways: +The [WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) Filter allows you to filter the data programmatically in below ways, * Through View Predicate * Through Column Filter ### View Filtering -View filtering can be achieved by setting the [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) delegate. You can refresh the view by calling the [SfDataGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_RefreshFilter_System_Boolean_) method. +View filtering can be achieved by setting [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) delegate. You can refresh the view by calling [SfDataGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_RefreshFilter_System_Boolean_) method. -Here, the `FilterRecords` delegate filters the data based on the country name. The `FilterRecords` delegate is assigned to the [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) predicate to filter the `Country` column. After that, the [SfDataGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_RefreshFilter_System_Boolean_) method is called to refresh the records. If the record satisfies the filter conditions, `true` is returned. Otherwise, `false` is returned. +Here, FilterRecords delegate filters the data based on Country name. FilterRecords delegate is assigned to [SfDataGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Filter) predicate to filter Country column. After that, [SfDataGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_RefreshFilter_System_Boolean_) method is called to refresh the records. If the record satisfies the filter conditions, true will be returned. Else false is returned. {% tabs %} @@ -52,9 +52,9 @@ N> View filter is not supported when ItemsSource is [DataTable](https://learn.mi ### Column Filtering -Column filtering is achieved by using the [GridColumn.FilterPredicates](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPredicates) property and adding a [FilterPredicate](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html) to it. +Column filtering is achieved by using [GridColumn.FilterPredicates](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPredicates) property and adding [FilterPredicate](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html) to it. -Here, the `OrderID` column is filtered for the data that has `OrderID` as 1005. +Here, OrderID column is filtered for the data which has OrderID as 1005. {% tabs %} @@ -64,16 +64,16 @@ dataGrid.Columns["OrderID"].FilterPredicates.Add(new FilterPredicate() { FilterT {% endtabs %} #### Filter Behavior -The [FilterBehavior](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Data.FilterBehavior.html) property is used to specify whether to consider the [FilterValue](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) as a string or as a specific data type. +The [FilterBehavior](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Data.FilterBehavior.html) property is used to specify whether to consider the [FilterValue](https://help.syncfusion.com/cr/windowsforms/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) as the string or specific data type. -* **StringTyped** - Records are filtered without considering the type, and the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) type is treated as a string. -* **StronglyTyped** - Records are filtered by considering the underlying type of the FilterValue. +* **StringTyped** - Records are filtered without considering the type and it takes [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) type as string. +* **StronglyTyped** - Records are filtered by considering the FilterValue underlying type. N> When you use [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system.data.datatable?view=net-5.0) as items Source, [IsCaseSensitive](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_IsCaseSensitive) property in [FilterPredicate](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html) is not applicable, since DataTable does not support CaseSensitive filtering. #### Improving performance while adding multiple FilterPredicates to the column in loop -You can improve the performance of filtering by suspending the data operation while adding `FilterPredicates` to the column for bulk updates by calling the [SfDataGrid.View.BeginInit](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_BeginInit_System_Boolean_) and [SfDataGrid.View.EndInit](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_EndInit) methods, before and after the data operation. +You can improve the performance of filtering by suspending the data operation while adding `FilterPredicates` to the column for bulk updates by calling [SfDataGrid.View.BeginInit](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_BeginInit_System_Boolean_) and [SfDataGrid.View.EndInit](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_EndInit) method, before and after the data operation. {% tabs %} {% highlight c# %} @@ -101,11 +101,11 @@ private void OnApplyFilterPredicate(object obj) ### Clear Filtering -The WPF DataGrid (SfDataGrid) allows you to clear the filters by clearing the filter predicates. This is achieved by invoking the following methods: +The WPF DataGrid (SfDataGrid) allows you to clear the filters by clearing the filter predicates. This is achieved by invoking the following methods. * [SfDataGrid.ClearFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilters) - Clears filters for all the columns programmatically. -* [SfDataGrid.ClearFilter(String columnName)](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilter_System_String_) - Clears the filter for a particular column that has the `columnName` as `MappingName`. -* [SfDataGrid.ClearFilter(GridColumn column)](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilter_Syncfusion_UI_Xaml_Grid_GridColumn_) - Clears the filter for a particular column alone. +* [SfDataGrid.ClearFilter(String columnName)](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilter_System_String_) - Clears the filter for particular column that has the columnName as `MappingName`. +* [SfDataGrid.ClearFilter(GridColumn column)](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilter_Syncfusion_UI_Xaml_Grid_GridColumn_) - Clears the filter for particular column alone. {% tabs %} {% highlight c# %} @@ -118,7 +118,7 @@ this.dataGrid.ClearFilter(this.dataGrid.Columns[0]); ## Excel like UI Filtering -The WPF DataGrid (SfDataGrid) provides an Excel-like filtering UI as well as an advanced filter UI to filter the data easily. UI filtering can be enabled by setting the [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property to `true`, where you can open the filter UI by clicking the filter icon in the column header and filter the records. +The WPF DataGrid (SfDataGrid) provides excel like filtering UI and also advanced filter UI to filter the data easily. UI filtering can be enabled by setting [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property to `true` , where you can open filter UI by clicking the Filter icon in column header and filter the records. {% tabs %} {% highlight xaml %} @@ -132,7 +132,7 @@ dataGrid.AllowFiltering = true; {% endhighlight %} {% endtabs %} -You can enable or disable filtering for a particular column by setting the [GridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowFiltering) property. +You can enable/disable filtering for particular column by setting [GridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowFiltering) property. {% tabs %} {% highlight xaml %} @@ -146,19 +146,19 @@ dataGrid.Columns["OrderID"].AllowFiltering = true; N> -1. [GridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowFiltering) has higher priority than the [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property. +1. [GridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowFiltering) has higher priority than [SfDataGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowFiltering) property. 2. UI filtering is not supported when using on-demand paging by setting [UseOnDemandPaging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_UseOnDemandPaging) to `true`. ### Built-in UI Views -The SfDataGrid filter UI comprises two different UIs. +SfDataGrid filter UI comprises of two different UIs. -* **Checkbox Filter UI** - Provides an Excel-like filter interface with a list of check boxes. +* **Checkbox Filter UI** - Provides excel like filter interface with list of check box’s. * **Advanced Filter UI** - Provides advanced filter options to filter the data. -By default, both Checkbox Filter and Advanced Filter are loaded when the filter pop-up is opened. You can switch between AdvancedFilter and CheckboxFilter by using the AdvancedFilter button in the UI View. +By default, both Checkbox Filter and Advanced Filter are loaded while opening the filter pop-up. You can switch between AdvancedFilter and CheckboxFilter by using AdvancedFilter button in the UI View. SfDataGrid with Checkbox Filter View: @@ -170,17 +170,17 @@ SfDataGrid with Advanced Filter View: ## Choose between built-in UI Views -The WPF DataGrid (SfDataGrid) lets you customize the UI Views displayed for a particular column or grid using the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) property in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). +The WPF DataGrid (SfDataGrid) lets you to customize the UI Views displayed for particular column or grid using [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) property in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). -The following are the options: +Below are the options, -1. **CheckboxFilter** – Displays only the Checkbox filter View. -2. **AdvancedFilter** – Displays only the Advanced filter View. -3. **Both** – Displays both filter Views. +1. **CheckboxFilter** – Displays only Checkbox filter View. +2. **AdvancedFilter** – Displays only Advanced filter View. +3. **Both** – Displays both filters Views. ### Changing filter UI View for Grid -The filter UI view can be changed for all the columns in the grid by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) by writing a style and assigning it to [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle). +Filter UI view can be changed for all the columns in grid by changing [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) by writing style and assign it to [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle). {% tabs %} {% highlight xaml %} @@ -199,7 +199,7 @@ The filter UI view can be changed for all the columns in the grid by changing th ### Changing filter UI View for columns -The filter UI view can be changed for a particular column by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) by writing a style and assigning it to [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle). +Filter UI view can be changed for the particular column by changing [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) by writing style and assign it to [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle). {% tabs %} {% highlight xaml %} @@ -231,7 +231,7 @@ void dataGrid_FilterItemsPopulating(object sender, Syncfusion.UI.Xaml.Grid.GridF ### Setting Default Filter popup style for particular column -You can skip the [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) styling for a particular column from [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle) by setting [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) to `null`. +You can skip the [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) styling for particular column from [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle) by setting [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) to `null`. {% tabs %} {% highlight xaml %} @@ -255,17 +255,17 @@ this.dataGrid.Columns["OrderID"].FilterPopupStyle = null; {% endhighlight %} {% endtabs %} -Here, the advanced filter will be loaded for all the columns in the grid except the `OrderID` column, since [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) is set to `null` for the `OrderID` column. So both the checkbox filter and the advanced filter (default style) will be loaded for the `OrderID` column. +Here, advanced filter will be loaded for all the columns in grid except OrderID column since [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) is set as `null` for OrderID column. So both checkbox filter and advanced filter (default style) will be loaded for OrderID column. ## Advanced Filter UI -The advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on the advanced filter type by automatically detecting the underlying data type. +Advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on Advanced filter type by automatically detecting the underlying date type. -The following are the built-in filter types supported: +Below are the built-in filter types supported. * **Text Filters** – Loads various menu options to filter the display text effectively. -* **Number Filters** – Loads various menu options to filter numeric data. -* **Date Filters** – Loads various menu options and a [DatePicker](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datepicker?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0) to filter DateTime type columns. +* **Number Filters** – Loads various menu options to filter the numeric data. +* **Date Filters** – Loads various menu options and [DatePicker](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datepicker?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0) to filter DateTime type column. @@ -350,15 +350,15 @@ When the DateTime type value is bound to the {{ '[GridColumn](https://help.syncf N> -1. `Null` and `Not Null` options are available only when [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) is set to `true`. +1. `Null` and `Not Null` options are available only when [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) is set to `True`. 2. If the column is [GridUnboundColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridUnBoundColumn.html) or [GridMaskColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridMaskColumn.html), then `Text Filters` will be loaded. ### Changing Advanced Filter type -[FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior) determines the advanced filter type loaded in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). By using [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior), you can change the advanced filter type. +[FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior) determines the Advanced filter type loaded in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). By using [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior), you can change Advanced filter type. * **StringTyped** - `TextFilters` will be loaded in [AdvancedFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html). -* **Strongly Typed** – The advanced filter type is automatically detected based on the underlying data type. +* **Strongly Typed** – Advanced filter type is automatically detected based on underlying data type. {% tabs %} {% highlight xaml %} @@ -371,7 +371,7 @@ dataGrid.Columns["OrderID"].FilterBehavior = FilterBehavior.StringTyped; {% endhighlight %} {% endtabs %} -The advanced filter type can be changed programmatically by using the [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event as well. +Advanced filter type can be changed programmatically by using [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event also. {% tabs %} {% highlight c# %} @@ -392,13 +392,13 @@ void dataGrid_FilterItemsPopulating(object sender, Syncfusion.UI.Xaml.Grid.GridF ### Case Sensitive -By default, casing is not considered while filtering because filter predicates will be created with [IsCaseSensitive](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_IsCaseSensitive) as `false`. If you want to filter the records with `IsCaseSensitive` as `true`, you need to click the case sensitive button present in the Advanced Filter. +By default, casing is not considered while filtering. Because, filter predicates will be created with [IsCaseSensitive](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_IsCaseSensitive) as `false`. If you want to filter the records with `IsCaseSensitive` as `true`, you need to click case sensitive button present in Advanced Filter. -N> When you use [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system.data.datatable?view=net-5.0) as the items source, the CaseSensitive button will not be available in the filter popup, as `DataTable` does not support CaseSensitive filtering. +N> When you use [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system.data.datatable?view=net-5.0) as items Source, CaseSensitive button will not be available in Filter popup as `DataTable` does not support CaseSensitive filtering. ## Performance tips -The loading performance of [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) can be increased by setting [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) to `AdvancedFilter` and [CanGenerateUniqueItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) to `False`. This is because a text box is loaded instead of the AdvancedFilter ComboBox, allowing you to manually enter text for filtering. +[GridFilterControl’s](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) loading performance can be increased by setting [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) as `AdvancedFilter` and [CanGenerateUniqueItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) as `False`. Because a textbox is loaded instead of AdvancedFilter ComboBox that allows you to manually enter text for filtering. {% tabs %} {% highlight xaml %} @@ -420,11 +420,11 @@ The loading performance of [GridFilterControl](https://help.syncfusion.com/cr/wp ![Improving Performance while Applying Filter in WPF DataGrid](filtering_images/wpf-datagrid-apply-filter.png) -By default, [CanGenerateUniqueItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) is `true`. So all the unique items in the column are loaded in the AdvancedFilter ComboBox, which allows you to select the value easily from the combo box and filter it. +By default, [CanGenerateUniqueItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) is true. So all the unique items in the column are loaded in the AdvancedFilter ComboBox that allows you to select the value easily from the combo box and filter it. ## Filtering null values -To filter the null values, you need to set the [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) property to `true`. So `null` values will be included in the filter items list. If you want to exclude the null values from the filter items list, you need to set [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) to `false`. +To filter the null values, you need to set [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) property as `True`. So `null` values will be included in filter items list. If you want to exclude the null values from filter items list, you need to set [AllowBlankFilters](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowBlankFilters) as `False`. {% tabs %} {% highlight xaml %} @@ -445,7 +445,7 @@ Advanced Filter with `AllowBlankFilters` as `True` ## Instant Filtering -By default, filters are applied to the columns when the OK button is clicked in UI filtering. If you want to update the filters immediately whenever there is an update in the filter pop-up, you need to set [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ImmediateUpdateColumnFilter) to `true`. +By default, filters are applied to the columns when OK button is clicked in UI filtering. If you want to update the filters immediately whenever update in filter popup, you need to set [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ImmediateUpdateColumnFilter) as True. {% tabs %} {% highlight xaml %} @@ -456,21 +456,21 @@ dataGrid.Columns["OrderID"].ImmediateUpdateColumnFilter = true; {% endhighlight %} {% endtabs %} -Here, the OK and Cancel buttons are unavailable, and the Done button is available to just close the popup. +Here, the OK and Cancel buttons are unavailable and Done button is available to just close the popup. -Checkbox Filter with `ImmediateUpdateColumnFilter` as `True` +Checkbox Filter with `ImmediateUpdateColumnFilter` is `True` ![CheckBox Filter with Immediate Filter in WPF DataGrid](filtering_images/wpf-datagrd-checkbox-immediate-filter.png) -Advanced Filter with `ImmediateUpdateColumnFilter` as `True` +Advanced Filter with `ImmediateUpdateColumnFilter` is `True` ![Advanced Filter with Immediate Filter in WPF DataGrid](filtering_images/wpf-datagrd-advanced-immediate-filter.png) -N> In Checkbox Filter, the `SelectAll` option is not reflected in the filter updates if [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ImmediateUpdateColumnFilter) is `true`. +N> In Checkbox Filter, the `SelectAll` option is not reflected in the filter updates if [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ImmediateUpdateColumnFilter) is true. ## Filtering based on DisplayText -In UI filtering, records are filtered based on the actual value by default. If you want to filter the records based on `DisplayText`, you need to set the [ColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnFilter) property to `DisplayText`. +In UI filtering, records are filtered based on actual value by default. If you want to filter the records based on `DisplayText`, you need to set [ColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnFilter) property as `DisplayText`. {% tabs %} {% highlight xaml %} @@ -481,19 +481,19 @@ dataGrid.Columns["OrderDate"].ColumnFilter = ColumnFilter.DisplayText; {% endhighlight %} {% endtabs %} -Consider the following dataGrid: the first and second records have the same display value for the `OrderDate` column, but both have different actual values (e.g., 2/10/2010 12:00:00 AM and 2/10/2010 6:30:00 PM). +Consider in the following dataGrid, first and second records have same display value for OrderDate column but both have different actual value (E.g. 2/10/2010 12:00:00 AM and 2/10/2010 6:30:00 PM). ![Filter WPF DataGrid using Actual Value instead of Formatted String](filtering_images/wpf-datagrid-filter-formatted-string.png) -By default, the filter will be applied based on the actual value only. So both values will be considered different. When opening the filter pop-up, both values will be displayed as shown below. +By default, based on the actual value only filter will be applied. So it will consider both values as different. And while opening filter popup, both values will be displayed like below. ![Filtering WPF DataGrid based on Formatted String](filtering_images/wpf-datagrid-string-format.png) -If you set [ColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnFilter) to `DisplayText`, only the display value will be considered for filtering. The filter pop-up will then be shown as below. +If you set [ColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnFilter) as DisplayText, display value only will be considered for filtering. So filter popup will be shown like below. ![Filter based on actual value in WPF DataGrid](filtering_images/wpf-datagrid-filter-actual-value.png) -After filtering, both records having the same `OrderDate` display value will be displayed in the view. +After filtering, both records having the same OrderDate display value will be displayed in view. ![Filtered same Record Values in WPF DataGrid](filtering_images/wpf-datagrid-filter-same-records.png) @@ -503,7 +503,7 @@ SfDataGrid provides the following events for filtering. ### FilterChanging event -The [FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanging) event is raised while applying filters to a particular column. You can use this event to change the [FilterPredicates](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterEventArgs.html#Syncfusion_UI_Xaml_Grid_GridFilterEventArgs_FilterPredicates), [FilterType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterType), and [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterBehavior). +[FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanging) event is raised while applying filters to a particular column. You can use this event to change the [FilterPredicates](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterEventArgs.html#Syncfusion_UI_Xaml_Grid_GridFilterEventArgs_FilterPredicates), [FilterType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterType) and [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterBehavior). {% tabs %} {% highlight c# %} @@ -517,7 +517,7 @@ void dataGrid_FilterChanging(object sender, GridFilterEventArgs e) ### FilterChanged event -The [FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanged) event is raised after the filter is applied. You can use this event to get the filtered records. +[FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanged) event is raised after filter is applied. You can use this event to get filtered records. {% tabs %} {% highlight c# %} @@ -531,7 +531,7 @@ void dataGrid_FilterChanged(object sender, GridFilterEventArgs e) ### FilterItemsPopulating event -The [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event is raised while populating the filter list items in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). You can change GridFilterControl properties by using this event. +[FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event is raised while populating the filter list items in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). You can change GridFilterControl properties by using this event. {% tabs %} @@ -546,7 +546,7 @@ void dataGrid_FilterItemsPopulating(object sender, Syncfusion.UI.Xaml.Grid.GridF ### FilterItemsPopulated event -The [FilterItemsPopulated](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulated) event is raised after the filter list items are populated. You can change the GridFilterControl [ItemSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterItemsPopulatingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridFilterItemsPopulatingEventArgs_ItemsSource) by using this event. +[FilterItemsPopulated](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulated) event is raised after filter list items are populated. You can change GridFilterControl [ItemSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterItemsPopulatingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridFilterItemsPopulatingEventArgs_ItemsSource) by using this event. {% tabs %} {% highlight c# %} @@ -560,7 +560,7 @@ void dataGrid_FilterItemsPopulated(object sender, GridFilterItemsPopulatedEventA ## Getting the filtered records -You can get the filtered records from [View](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_View) in the [FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. When the filter is applied, the filtered records are available in [View.Records](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Records). +You can get the filtered records from [View](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_View) in [FilterChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. When filter is applied, the filtered records are available in [View.Records](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_Records). {% tabs %} {% highlight c# %} @@ -582,7 +582,7 @@ void dataGrid_FilterChanged(object sender, GridFilterEventArgs e) ## Show image in CheckBoxFilterControl instead of image path -By default, in SfDataGrid the image path is shown inside the CheckBoxFilterControl instead of the image, but you can show the image in the CheckBoxFilterControl by setting the [CheckBoxFilterControl.ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CheckboxFilterControl.html#Syncfusion_UI_Xaml_Grid_CheckboxFilterControl_ItemTemplate) as shown below. +By default, in SfDataGrid image path is shown inside the CheckBoxFilterControl instead of image but you can show the image in CheckBoxFilterControl by setting [CheckBoxFilterControl.ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CheckboxFilterControl.html#Syncfusion_UI_Xaml_Grid_CheckboxFilterControl_ItemTemplate) as like below. {% tabs %} {% highlight xaml %} @@ -653,13 +653,13 @@ public class StringToImageConverter : IValueConverter You can get the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/CheckBoxFilterControlImage1515534249.zip). ## Apply ICollectionView.Filter and DataView.RowFilter on initial loading -By default, the default filter created by [ICollectionView.Filter](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.icollectionview.filter?view=netframework-4.8#System_ComponentModel_ICollectionView_Filter) and [DataView.RowFilter](https://learn.microsoft.com/en-us/dotnet/api/system.data.dataview.rowfilter?view=netframework-4.8) will not be applied to the data on initial loading. These filters can be applied on initial loading by enabling the [CanUseViewFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CanUseViewFilter) property. +By default, the default filter created by [ICollectionView.Filter](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.icollectionview.filter?view=netframework-4.8#System_ComponentModel_ICollectionView_Filter) and [DataView.RowFilter](https://learn.microsoft.com/en-us/dotnet/api/system.data.dataview.rowfilter?view=netframework-4.8) will not be applied to the data on initial loading. These filters can be applied on initial loading by enabling [CanUseViewFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CanUseViewFilter) property. ## Functionality Customization ### Loading the Text Filters for the column having Number or Date value as underlying type -If you want to use the Text Filters for a column that has a number or date value as the underlying type, you need to set the [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior) property of the [GridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html) to `StringTyped`. This loads the Text Filters instead of the Number or Date Filters. +If you want to use the Text Filters for the column that has number or date value as underlying type, you need to set [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterBehavior) property of the [GridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html) as `StringTyped`. This loads the Text Filters instead of Number or Date Filters. {% tabs %} {% highlight xaml %} @@ -667,7 +667,7 @@ If you want to use the Text Filters for a column that has a number or date value {% endhighlight %} {% endtabs %} -You can achieve this programmatically by using the [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event as well. +You can achieve this programmatically by using [FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterItemsPopulating) event also. {% tabs %} {% highlight c# %} @@ -687,7 +687,7 @@ void dataGrid_FilterItemsPopulating(object sender, Syncfusion.UI.Xaml.Grid.GridF ### Changing AdvancedFilter type while loading dynamic ItemsSource -By default, `TextFilters` will be loaded for the columns if the `ItemsSource` is [dynamic](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/reference-types). If you want to load Number Filters or Date Filters based on the column values, you need to use the [ColumnMemberType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnMemberType) property. +By default, `TextFilters` will be loaded for the columns if `ItemsSource` is [dynamic](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/reference-types). If you want to load Number Filters or Date Filters based on column values, you need to use [ColumnMemberType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnMemberType) property. {% tabs %} {% highlight c# %} @@ -722,11 +722,11 @@ void dataGrid_FilterItemsPopulated(object sender, GridFilterItemsPopulatedEventA {% endhighlight %} {% endtabs %} -Likewise, the [FilterElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterElement.html) can also be changed. +Likewise,[FilterElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterElement.html) also can be changed. ### Customizing Filter predicates -If you want to customize the filter predicates, you need to use the [FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanging) event. Here, the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) is changed according to certain conditions. +If you want to customize the filter predicates, you need to use [FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterChanging) event. Here, [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) is changed according to some conditions. {% tabs %} {% highlight c# %} @@ -746,13 +746,13 @@ void dataGrid_FilterChanging(object sender, GridFilterEventArgs e) ## Appearance customization -[GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) is derived from `ContentControl` and has its own structure. This structure is customized using the properties [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle) and [SfDataGrid.FilterPopupTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupTemplate) for all the columns in the grid. +[GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html) is derived from `ContentControl` and has its own structure. This structure is customized using the properties [SfDataGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupStyle) and [SfDataGrid.FilterPopupTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterPopupTemplate) for all the columns in grid. -When you need to change the appearance of the GridFilterControl for a particular column, the [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) and [GridColumn.FilterPopupTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupTemplate) properties are used. +When you need to change the appearance of the GridFilterControl for a particular column, [GridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupStyle) and [GridColumn.FilterPopupTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_FilterPopupTemplate) properties are used. ### Collapsing Sort Options in GridFilterControl -Sort Options can be collapsed by setting the [SortOptionVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_SortOptionVisibility) property in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). +Sort Options can be collapsed by setting [SortOptionVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_SortOptionVisibility) property in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). {% tabs %} {% highlight xaml %} @@ -772,7 +772,7 @@ Sort Options can be collapsed by setting the [SortOptionVisibility](https://help ### Customizing Sort Options text -The Sort Options text can be customized by using the [AscendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_AscendingSortString) and [DescendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_DescendingSortString) properties in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). +Sort Options text can be customized by using [AscendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_AscendingSortString) and [DescendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_DescendingSortString) properties in [GridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). {% tabs %} {% highlight c# %} @@ -792,7 +792,7 @@ void DataGrid_FilterItemsPopulating(object sender, GridFilterItemsPopulatingEven ### Customize the FilterPopup size using GridFilterControl style -You can customize the FilterPopup size using the [FilterPopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterPopupHeight) property by writing a style with the `TargetType` set to `GridFilterControl`. +You can customize the FilterPopup size using [FilterPopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterPopupHeight) property by writing style of TargetType as GridFilterControl. {% tabs %} {% highlight xaml %} @@ -810,7 +810,7 @@ You can customize the FilterPopup size using the [FilterPopupHeight](https://hel ### Changing filter icon style after applying filters -You can change the filter icon style by editing the [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html) style. In the `FilterToggleButton` style, you can see `Filtered` and `UnFiltered` VisualStates. In those, you can change the `PathFillColor` for the `FilterToggleButton`. +You can change the filter icon style by editing the [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html) style. In `FilterToggleButton` style, you can see `Filtered` and `UnFiltered` VisualStates. In that, you can change `PathFillColor` for FilterToggleButton. {% tabs %} {% highlight xaml %} @@ -915,7 +915,7 @@ You can change the filter icon style by editing the [FilterToggleButton](https:/ {% endhighlight %} {% endtabs %} -When you apply the above style to [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html), the FilterIcon changes from Default to Gray and then to Red when filtering is applied. When you clear it, it changes from Red to Gray and then to the default style. +When you apply above style to [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html), FilterIcon changes from Default to Gray and to Red when filtering is applied. When you clear it, it changes from Red to Gray and to default style. ## See Also [How to display values with underscore in check boxes of the filter control?](https://support.syncfusion.com/kb/article/8938/how-to-display-values-with-underscore-in-check-boxes-of-the-filter-control) diff --git a/wpf/DataGrid/Paging.md b/wpf/DataGrid/Paging.md index 394d23c320..89cf633780 100644 --- a/wpf/DataGrid/Paging.md +++ b/wpf/DataGrid/Paging.md @@ -1,7 +1,7 @@ --- layout: post title: Paging in WPF DataGrid control | Syncfusion® -description: Learn all about paging support in the Syncfusion® WPF DataGrid (SfDataGrid) control, its elements, and more details. +description: Learn here all about Paging support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details. platform: wpf control: SfDataGrid documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Paging in WPF DataGrid (SfDataGrid) -[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) provides support to manipulate the data using the SfDataPager control. You can refer to the [SfDataPager](https://help.syncfusion.com/wpf/datapager/overview) control user guide for more information. +[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) provides support to manipulate the data using SfDataPager control. You can refer [SfDataPager](https://help.syncfusion.com/wpf/datapager/overview) control user guide for more information. ## Getting started -Follow the steps below to bind SfDataGrid with SfDataPager. +Follow the below steps to bind SfDataGrid with SfDataPager. -1. Create an `IEnumerable` collection that you want to bind and set it to the [SfDataPager.Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property. +1. Create `IEnumerable` collection that you want to bind and set it to [SfDataPager.Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property. -2. Set the [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of records to be displayed per page. +2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of records to be displayed per page. -3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to the [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. +3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. {% capture codesnippet1 %} {% tabs %} @@ -127,26 +127,26 @@ public class OrderInfo #### Limitations -1. SfDataPager doesn’t accept `DataTable` as Source. +1. SfDataPager doesn’t accepts `DataTable` as Source. 2. `AddNewRow` is not supported in SfDataPager. 3. `FilterRow` is not supported in SfDataPager. ## Load data in on-demand -SfDataPager allows you to load data for the current page alone using `OnDemandPaging` instead of loading data for all pages. +SfDataPager allows you to load data for current page alone using `OnDemandPaging` instead of loading data for all pages. -Follow the steps below to load the `ItemsSource` for a page in on-demand: +Follow the below steps to load the `ItemsSource` for page in on-demand, -1. Set [SfDataPager.UseOnDemandPaging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_UseOnDemandPaging) to `true`. +1. Set [SfDataPager.UseOnDemandPaging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_UseOnDemandPaging) as `true`. -2. Set [SfDataPager.PageCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageCount) based on the total number of records and the [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property. +2. Set [SfDataPager.PageCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageCount) based on total number of records and [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property. -3. Use the [OnDemandLoading](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_OnDemandLoading) event to load the `ItemsSource` for the current page using the [LoadDynamicItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_LoadDynamicItems_System_Int32_System_Collections_IEnumerable_) method. +3. Use [OnDemandLoading](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_OnDemandLoading) event to load the `ItemsSource` for current page using [LoadDynamicItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_LoadDynamicItems_System_Int32_System_Collections_IEnumerable_) method. -The [OnDemandLoading](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_OnDemandLoading) event is raised when SfDataPager moves to another page, and you can load the `ItemsSource` for the corresponding page through the `OnDemandLoading` event. +[OnDemandLoading](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_OnDemandLoading) event is raised when SfDataPager moves to another page and you can load the `ItemsSource` for corresponding page through `OnDemandLoading` event. -[OnDemandLoadingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.OnDemandLoadingEventArgs.html) has the following members: +[OnDemandLoadingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.OnDemandLoadingEventArgs.html) has the following members, 1. `StartIndex` - returns the start index based on `PageIndex` (Number of previous pages * PageSize). @@ -196,7 +196,7 @@ private void dataPager_OnDemandLoading(object sender, Syncfusion.UI.Xaml.Control ### Resetting cache -While navigating between the pages, records are loaded through the `OnDemandLoading` event, and the records of the navigated pages will be maintained in the cache. If you navigate to an already navigated page, the records are loaded from the cache instead of loading from the `OnDemandLoading` event. You can clear the cache by using the [PageCollectionView.ResetCache](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.PagedCollectionView.html#Syncfusion_Data_PagedCollectionView_ResetCache) method. Once this method is invoked, the `OnDemandLoading` event will be raised while navigating multiple times to the same page. +While navigating between the pages, records are loaded through `OnDemandLoading` event and the records of navigated pages will be maintained in cache. If you navigate to already navigated page, the records are loaded from cache instead of loading from `OnDemandLoading` event. You can clear the cache by using [PageCollectionView.ResetCache](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.PagedCollectionView.html#Syncfusion_Data_PagedCollectionView_ResetCache) method. Once this method is invoked, the `OnDemandLoading` event will be raised while navigating multiple times to the same page. {% tabs %} {% highlight xaml %} It is not possible to select header rows, table summary rows, unbound rows which are above the table summary row when placed at the top, and the unbound rows which are below the table summary rows when placed at the bottom of SfDataGrid. +N> It is not possible to select header rows, table summary rows, unbound rows which are above the table summary row when it’s placed in top and the unbound rows which are below table summary rows when it’s placed in bottom of SfDataGrid. ## Multiple Row or Cell Selection -The WPF DataGrid (SfDataGrid) allows you to select multiple rows or cells by setting the [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property to [Extended](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html) or [Multiple](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), where you can select multiple rows or cells by dragging the mouse on SfDataGrid and also using the key modifiers. +The WPF DataGrid (SfDataGrid) allows you to select multiple rows or cells by setting [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property as [Extended](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html) or [Multiple](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), where you can select multiple rows or cells by dragging the mouse on SfDataGrid and also using the key modifiers. While using `Extended`, you can select multiple rows or cells by pressing the key modifiers Ctrl and Shift. @@ -107,7 +107,7 @@ While using `Extended`, you can select multiple rows or cells by pressing the ke ![Extended Cell Selection in WPF DataGrid](Selection_images/wpf-datagrid-multiple-cell-selection.png) -N> When the [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) is [Multiple](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), you can select or deselect multiple rows and cells by clicking the respective cell or row. Also, in multiple selection, pressing navigation keys will move only the current cell, and you can select or deselect by pressing the space key. +N> When the [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) as [Multiple](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), you can select or deselect multiple rows and cells by clicking the respective cell or row. Also in multiple selection pressing navigation keys will move only the current cell and you can select or deselect by pressing space key. {% tabs %} {% highlight xaml %} diff --git a/wpf/DataGrid/Sorting.md b/wpf/DataGrid/Sorting.md index 1a1b867399..af4a681151 100644 --- a/wpf/DataGrid/Sorting.md +++ b/wpf/DataGrid/Sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in WPF DataGrid control | Syncfusion® -description: Learn all about sorting support in the Syncfusion® WPF DataGrid (SfDataGrid) control, its elements, and more details. +description: Learn here all about Sorting support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details. platform: wpf control: SfDataGrid documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Sorting in WPF DataGrid (SfDataGrid) -[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) allows you to sort the data against one or more columns in either ascending or descending order. When sorting is applied, the rows are rearranged based on the sort criteria. You can allow users to sort the data by touching or clicking the column header by setting the [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. +[WPF DataGrid](https://www.syncfusion.com/wpf-controls/datagrid) (SfDataGrid) 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 [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. {% tabs %} {% highlight xaml %} @@ -22,7 +22,7 @@ dataGrid.AllowSorting = true; {% endhighlight %} {% endtabs %} -Alternatively, you can enable or disable sorting for a particular column by setting the [GridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) property. +In another way, you can enable or disable the sorting for particular column by setting the [GridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) property. {% tabs %} {% highlight xaml %} @@ -47,16 +47,16 @@ this.dataGrid.Columns["CustomerID"].AllowSorting = false; {% endhighlight %} {% endtabs %} -N> The [GridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) takes higher priority than the [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property. +N> The [GridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) takes higher priority than [SfDataGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property. -End users can sort the column by clicking the column header cell. Once the columns get sorted, the sort indicator will be displayed on the right side of the column header. +End users can sort the column by clicking column header cell. Once the columns get sorted, the sort indicator will be displayed on the right side of the column header. ![Sorting in WPF DataGrid](Sorting_images/wpf-datagrid-sorting.png) ## Sort column in double click -By default, the column gets sorted when the column header is clicked. You can change this behavior to sort the column on a double-click action by setting the [SfDataGrid.SortClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) property to `DoubleClick`. +By default, column gets sorted when column header clicked. You can change this behavior to sort the column in double click action by setting [SfDataGrid.SortClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) property to `DoubleClick`. {% tabs %} {% highlight xaml %} @@ -74,27 +74,27 @@ this.dataGrid.SortClickAction = SortClickAction.DoubleClick; ## Sorting order -By default, the data is sorted in ascending or descending order when clicking the column header. You can rearrange the data to its initial order from descending when clicking the column header by setting the [SfDataGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowTriStateSorting) property. +By default, the data is sorted in ascending or descending order when clicking column header. You can rearrange the data to its initial order from descending, when clicking column header by setting [SfDataGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowTriStateSorting) property. -The following is the sequence of sorting orders when clicking the column header: +Following are the sequence of sorting orders when clicking column header, -* Sorts the data in ascending order. -* Sorts the data in descending order. -* Clears the sorting, and records are displayed in their initial order. +* Sorts the data in ascending order +* Sorts the data in descending order +* Clears the sorting and records displayed in its initial order ## Multi column sorting -The WPF DataGrid (SfDataGrid) control allows you to sort more than one column, where sorting is applied one column against other columns. To apply sorting on multiple columns, the user has to click the column header while pressing the Ctrl key. +WPF DataGrid (SfDataGrid) control allows you sort more than one column, where sorting is applied one column against other columns. To apply sorting on multiple columns, user have to click the column header by pressing the Ctrl key. -In the screenshot below, the `OrderID` column is sorted. Then the `CustomerName` column is sorted against the `OrderID` data by clicking the column header while pressing the Ctrl key. The sorting state of the `OrderID` column is preserved, and the `CustomerName` column is sorted against the `OrderID` column. +In the below screen shot, the OrderID column sorted. Then the CustomerName column is sorted against the OrderID data by clicking column header by pressing Ctrl key. The sorting state of OrderID column is preserved and CustomerName column sorted against OrderID column. ![Multi Column Sorting in WPF DataGrid](Sorting_images/wpf-datagrid-multi-column-sorting.png) ### Display sort order -It is also possible to display the sorted order of columns in the header by setting the [SfDataGrid.ShowSortNumbers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowSortNumbers) property to `true`. +It is also possible to display sorted order of columns in header by setting [SfDataGrid.ShowSortNumbers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowSortNumbers) property to `true`. {% tabs %} {% highlight xaml %} @@ -115,7 +115,7 @@ this.dataGrid.ShowSortNumbers = true; You can sort the data programmatically by adding or removing the [SortColumnDescription](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SortColumnDescription.html) in [SfDataGrid.SortColumnDescriptions](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortColumnDescriptions) property. -N> The [SfDataGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanging) and [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) events are not raised when the data is sorted programmatically through `SfDataGrid.SortColumnDescriptions`. +N> [SfDataGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanging) and [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) events are not raised when the data sorted programmatically through `SfDataGrid.SortColumnDescriptions`. ### Adding sort columns @@ -172,21 +172,21 @@ this.dataGrid.SortColumnDescriptions.Clear(); ## Custom sorting -SfDataGrid allows you to sort the columns based on custom logic. The custom sorting can be applied by adding the [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) instance to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers). +SfDataGrid allows you to sort the columns based on the custom logic. The custom sorting can be applied by adding the [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) instance to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers). -The [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) has the following properties: +The [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) have the following properties, [PropertyName](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html#Syncfusion_Data_SortComparer_PropertyName) - Gets or sets the name of the column to apply custom sorting. [Comparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html#Syncfusion_Data_SortComparer_Comparer) - Gets or sets the custom comparer in which you can code to compare the data using custom logic. -You can implement the [ISortDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.ISortDirection.html) interface in the comparer to get the sort direction. So you can apply different custom logic for ascending and descending. +You can implement [ISortDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.ISortDirection.html) interface in comparer to get the sort direction. So you can apply different custom logics for ascending and descending. -Follow the steps below to add a custom comparer to sort using custom logic: +Follow the below steps to add custom comparer to sort using custom logic, ### Define custom comparer with custom sort logic -In the code snippet below, the `CustomerName` property is compared based on its string length, instead of the default string comparison. +In the below code snippet, `CustomerName` property is compared based on its string length, instead of default string comparison. {% tabs %} {% highlight c# %} @@ -255,7 +255,7 @@ Public class CustomComparer:IComparer,ISortDirection ### Adding custom comparer to SfDataGrid -A custom comparer can be added to the [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers) property. `SortComparers` maintains custom comparers, and the custom comparer is called when the corresponding column gets sorted by clicking the column header or programmatically. +Custom comparer can be added to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers) property. `SortComparers` maintains custom comparers and the custom comparer gets called when corresponding column gets sorted by clicking column header or programmatically. {% tabs %} {% highlight xaml %} @@ -275,18 +275,18 @@ this.dataGrid.SortComparers.Add(new SortComparer() { Comparer = new CustomCompar {% endhighlight %} {% endtabs %} -Sorting the `CustomerName` column sorts the data using the custom comparer available in `SfDataGrid.SortComparers`. +Sorting CustomerName column sorts the data using custom comparer available in `SfDataGrid.SortComparers`. ![Custom Sorting in WPF DataGrid](Sorting_images/wpf-datagrid-custom-sorting.png) ## Sorting the underlying collection -SfDataGrid sorts the records in the UI and maintains them in its internal `CollectionView`, and it will not change the order of the data in the underlying collection. +SfDataGrid sorts the records in UI and maintains in its internal CollectionView and it will not change the order of data in underlying collection. -You can get the sorted data from `SfDataGrid.View.Records` when groups are not in place, and from `SfDataGrid.View.TopLevelGroup.DisplayElements` when grouping is in place. +You can get sorted data from `SfDataGrid.View.Records` when groups is not in place and `SfDataGrid.View.TopLevelGroup.DisplayElements` when grouping in place. -If you want to sort the underlying collection when sorting takes place, this can be achieved by handling the [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event. +If you want to sort the underlying collection when sorting takes place, then this can be achieved by handling [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event. {% tabs %} {% highlight c# %} @@ -361,8 +361,8 @@ void dataGrid_SortColumnsChanging(object sender, Syncfusion.UI.Xaml.Grid.GridSor ### SortColumnsChanged event -The [SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. -[GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for the `SortColumnsChanged` event. +[SfDataGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. +[GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for `SortColumnsChanged` event. ## See Also [How to sort a column in WPF DataGrid?](https://support.syncfusion.com/kb/article/9555/how-to-sort-a-column-in-wpf-datagrid-sfdatagrid) diff --git a/wpf/TreeGrid/Column-Type.md b/wpf/TreeGrid/Column-Type.md index 54ed9b25b0..81919845a4 100644 --- a/wpf/TreeGrid/Column-Type.md +++ b/wpf/TreeGrid/Column-Type.md @@ -1366,7 +1366,7 @@ In this case SfTreeGrid handles the below key operations and other keys are hand ### Setting focus to particular element inside Template when cell gets activated or edited -You can allow logical focus to specific UIElement loaded inside `EditTemplate` or `CellTemplate` by setting [FocusManagerHelper.FocusedElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FocusManagerHelper.html#Syncfusion_UI_Xaml_Grid_FocusManagerHelper_FocusedElementProperty) attached property. +You can allow logical focus to specific UIElement loaded inside `EditTemplate` or `CellTemplate` by setting `[FocusManagerHelper.FocusedElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FocusManagerHelper.html#Syncfusion_UI_Xaml_Grid_FocusManagerHelper_FocusedElementProperty)` attached property. You can use this property to start editing the template column value as like normal column when the user gets into edit mode. @@ -1586,11 +1586,11 @@ treeGrid.Columns.Add(new TreeGridComboBoxColumn() { MappingName = "City", ItemsS {% endhighlight %} {% endtabs %} -SfTreeGrid triggers, [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellDropDownSelectionChanged) event, when the SelectedValue is changed. [CurrentCellDropDownSelectionChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellDropDownSelectionChangedEventArgs.html) of [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellDropDownSelectionChanged) event provides the information about the changed cell value. +SfTreeGrid triggers, [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event, when the SelectedValue is changed. [CurrentCellDropDownSelectionChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellDropDownSelectionChangedEventArgs.html) of [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event provides the information about the changed cell value. `SelectedIndex` property returns the index of selected item. -`SelectedItem**` property returns the selected item from drop down list. +`SelectedItem**`** property returns the selected item from drop down list. ![WPF TreeGrid Column with ComboBox](ColumnTypes_images/wpf-treegrid-combobox.png) @@ -1750,9 +1750,9 @@ this.treeGrid.Columns.Add(new TreeGridHyperlinkColumn() { MappingName = "CityDes ![WPF TreeGrid Column with Hyperlink](ColumnTypes_images/wpf-treegrid-hyperlink.png) -You can allow end-user to navigate the `Uri` when the cell value contains valid `Uri` address or using [CurrentCellRequestNavigate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellRequestNavigate) event. The `CurrentCellRequestNavigate` occurs when the current cell in `TreeGridHyperLinkColumn` is clicked for navigation. +You can allow end-user to navigate the `Uri` when the cell value contains valid `Uri` address or using [CurrentCellRequestNavigate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. The `CurrentCellRequestNavigate` occurs when the current cell in `TreeGridHyperLinkColumn` is clicked for navigation. -[CurrentCellRequestNavigateEventArgs]https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellRequestNavigateEventArgs.html) of `CurrentCellRequestNavigate` event provide information about the hyperlink triggered this event. [CurrentCellRequestNavigateEventArgs.NavigateText](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellRequestNavigateEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellRequestNavigateEventArgs_NavigateText) returns the value using `ValueBinding` or `MappingName` to navigate. +[CurrentCellRequestNavigateEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html) of `CurrentCellRequestNavigate` event provide information about the hyperlink triggered this event. [CurrentCellRequestNavigateEventArgs.NavigateText](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellRequestNavigateEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellRequestNavigateEventArgs_NavigateText) returns the value using `ValueBinding` or `MappingName` to navigate. {% tabs %} {% highlight c# %} diff --git a/wpf/TreeGrid/Columns.md b/wpf/TreeGrid/Columns.md index 8f91b685d1..7fcde62d4b 100644 --- a/wpf/TreeGrid/Columns.md +++ b/wpf/TreeGrid/Columns.md @@ -1,7 +1,7 @@ --- layout: post title: Columns in WPF TreeGrid control | Syncfusion® -description: Learn all about columns support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. +description: Learn here all about Columns support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. platform: wpf control: SfTreeGrid documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Columns in WPF TreeGrid (SfTreeGrid) -SfTreeGrid allows you to add or remove columns using the [SfTreeGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) property. You can choose the columns to be added from the built-in column types, or you can create your own column and add it to the `SfTreeGrid.Columns`. +SfTreeGrid allows you to add or remove columns using [SfTreeGrid.Columns](https://help.syncfusion.com/cr/wpf/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`. -The following 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 SfTreeGrid. Each column has its own properties to handle different types of data.
@@ -106,16 +106,16 @@ Use to display the custom template-specified content. ## Defining Columns -You can let the SfTreeGrid create columns, or you can manually define columns to be displayed. The sections below explain both ways: +You can let the SfTreeGrid to create columns or you can manually defined columns to de displayed. Below sections explains both ways, 1. Automatically generating columns -2. Manually defining columns +2. Manually define columns ### Automatically generating columns -The automatic column generation based on properties of the data object can be enabled or disabled by setting the [SfTreeGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns) property. The default value is `true`. +The automatic column generation based on properties of data object can be enabled or disabled by setting [SfTreeGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns). Default value is `true`. -Columns are generated based on the type of the property. For example, a [TreeGridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridNumericColumn.html) is added for an `int` type property. The following table shows the data type and its corresponding column type. For the remaining types, [TreeGridTextColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumn.html) will be added. +Columns are generated based on type of property. For example, [TreeGridNumericColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridNumericColumn.html) is added for `int` type property. Below are table shows data type and its column type. For remaining types, [TreeGridTextColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumn.html) will be added.
@@ -169,11 +169,11 @@ TreeGridCheckBoxColumn
-N> The order of columns in the collection will determine the order in which they will appear in SfTreeGrid. +N> The order of columns in the collection will determine the order of that they will appear in SfTreeGrid. #### AutoGenerateColumns with different modes -Column auto generation is controlled using the [SfTreeGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsMode) property. +Column auto generation is controlled using [SfTreeGrid.AutoGenerateColumnsMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumnsMode) property. The `SfTreeGrid.AutoGenerateColumnsMode` includes the following modes. @@ -240,7 +240,7 @@ Keeps old columns in TreeGrid.Columns collection. ### Customize auto-generated columns -You can customize or cancel the generated column by handling the [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoGeneratingColumn) event. The `AutoGeneratingColumn` event occurs when the individual column is auto-generated for a public and non-static property of the underlying data object. +You can customize or cancel the generated column by handling [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoGeneratingColumn) event. `AutoGeneratingColumn` event occurs when the individual column is auto-generated for public and non-static property of underlying data object. {% tabs %} {% highlight c# %} @@ -257,9 +257,9 @@ private void TreeGrid_AutoGeneratingColumn(object sender, TreeGridAutoGenerating #### Cancel column generation for particular property -You can cancel the specific column adding to the TreeGrid by handling the `AutoGeneratingColumn` event. +You can cancel the specific column adding to the TreeGrid by handling `AutoGeneratingColumn` event. -In the code below, column generation for the `ReportsTo` property is canceled by setting the `Cancel` property to `true`. +In the below code, column generation for `ReportsTo` property is canceled by setting `Cancel` property to `true`. {% tabs %} {% highlight c# %} @@ -277,8 +277,8 @@ private void TreeGrid_AutoGeneratingColumn(object sender, TreeGridAutoGenerating #### Changing column type -You can change the type of column being added to SfTreeGrid by setting the instance of the column you want to add in the `AutoGeneratingColumn` event. -In the code below, the column type for the `Salary` property is changed to `TreeGridTextColumn` by setting the instance of `TreeGridTextColumn` to the `Column` property. +You can change the type of column adding to SfTreeGrid 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 %} {% highlight c# %} @@ -360,11 +360,11 @@ Below screenshot shows the customized header template loaded on the header of Fi ### Data Annotations with AutoGenerateColumns -SfTreeGrid supports generating the columns based on built-in [Data Annotation Attributes](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel?view=dotnet-uwp-10.0&redirectedfrom=MSDN). Data Annotations are ignored when the `AutoGenerateColumns` is set to `false`. +SfTreeGrid support to generate the columns based on built-in [Data Annotation Attributes](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel?view=dotnet-uwp-10.0&redirectedfrom=MSDN). Data Annotations ignored, when the `AutoGenerateColumns` is set to False. #### Exclude column -You can skip the column generation using the `AutoGenerateField` property or set the `Bindable` attribute to `false`. +You can skip the column generation using `AutoGenerateField` property or set the `Bindable` attribute to false. {% tabs %} {% highlight c# %} @@ -414,7 +414,7 @@ public string FirstName #### Change the HeaderText of column -You can customize the header text of a column using the `Display.Name` property. +You can customize header text of column using `Display.Name` property. {% tabs %} {% highlight c# %} @@ -501,7 +501,7 @@ public double? Salary ### Manually defining columns -The SfTreeGrid control allows you to define the columns manually by adding the desired column to the [SfTreeGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) collection. +SfTreeGrid control allows you to define the columns manually by adding desired column to the [SfTreeGrid.Columns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Columns) collection. {% tabs %} {% highlight xaml %} @@ -543,7 +543,7 @@ You can get the columns (added or auto-generated) from [SfTreeGrid.Columns](http ### Adding column -You can add a column at runtime by adding the instance of a column to the `SfTreeGrid.Columns` property. +You can add column at runtime by adding instance of column to `SfTreeGrid.Columns` property. {% tabs %} {% highlight c# %} @@ -591,9 +591,9 @@ treeGrid.Columns.RemoveAt(1); ## Resizing Columns -SfTreeGrid allows resizing the columns like in Excel by resizing the column header. This can be enabled or disabled by setting the [SfTreeGrid.AllowResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property. +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/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property. -N> Resizing considers the `MinWidth` and `MaxWidth` of the column. +N> Resizing considers MinWidth and MaxWidth of column. {% tabs %} {% highlight xaml %} @@ -621,8 +621,8 @@ SfTreeGrid shows indication for hidden columns in column header and also allows ### Disable resizing -You can cancel resizing of a particular column by setting the [TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property to `false`. Alternatively, you can cancel the resizing by handling the [SfTreeGrid.ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ResizingColumns) event. The `ResizingColumns` event occurs when you start dragging with the resizing cursor on the headers. -[ResizingColumnsEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html) of `ResizingColumns` provides information about the column's index and width. +You can cancel resizing of particular column by setting [TreeGridColumn.AllowResizing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowResizing) property to `false`. In another way, you can cancel the resizing by handling [SfTreeGrid.ResizingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ResizingColumns) event. The `ResizingColumns` event occurs when you start dragging by resizing cursor on headers. +[ResizingColumnsEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html) of `ResizingColumns` provides information about the columns’s index and width. {% tabs %} {% highlight c# %} @@ -640,7 +640,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 the `ResizingColumnsEventArgs.Reason` property. You can get the width of the column after resizing is completed by getting `ResizingColumnsEventArgs.Width` when `ResizingColumnsEventArgs.Reason` is `ColumnResizingReason.Resized` in the `ResizingColumns` event. +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. {% tabs %} {% highlight c# %} @@ -658,7 +658,7 @@ void OnResizingColumns(object sender, ResizingColumnsEventArgs e) ## Column drag and drop -You can allow end-users to rearrange the columns by dragging and dropping the column headers by setting [SfTreeGrid.AllowDraggingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowDraggingColumns) to `true`. +You can allow end-users to rearrange the columns by drag and drop the column headers by setting [SfTreeGrid.AllowDraggingColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowDraggingColumns) to `true`. {% tabs %} {% highlight xaml %} @@ -676,7 +676,7 @@ You can allow end-users to rearrange the columns by dragging and dropping the co ![Drag and Drop Column in WPF TreeGrid](Columns_images/wpf-treegrid-drag-and-drop.jpg) -You can enable or disable dragging on a particular column using the [TreeGridColumn.AllowDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowDragging) property. +You can enable or disable dragging on particular column using [TreeGridColumn.AllowDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowDragging) property. {% tabs %} {% highlight xaml %} @@ -688,15 +688,15 @@ You can enable or disable dragging on a particular column using the [TreeGridCol {% endtabs %} ### Disable column reordering -You can cancel the particular column dragging by handling [SfTreeGrid.ColumnDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ColumnDragging). The `ColumnDragging` event occurs when you start dragging the column header. +You can cancel the particular column dragging by handling [SfTreeGrid.ColumnDragging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ColumnDragging). `ColumnDragging` event occurs when you start dragging the column header. -[TreeGridColumnDraggingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html) of the `ColumnDragging` event provides information about the column that triggered this event. +[TreeGridColumnDraggingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html) of `ColumnDragging` event provides information about the column triggered this event. -[TreeGridColumnDraggingEventArgs.From](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_From) - It returns the index of the column that triggered this event. +[TreeGridColumnDraggingEventArgs.From](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_From) - It returns the index of column triggered this event. [TreeGridColumnDraggingEventArgs.To](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_To) - It returns the index where you try to drop the column. -[TreeGridColumnDraggingEventArgs.Reason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_Reason) - It returns the column dragging details through [QueryColumnDraggingReason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingReason.html). +[TreeGridColumnDraggingEventArgs.Reason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumnDraggingEventArgs.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumnDraggingEventArgs_Reason) - It returns column dragging details by [QueryColumnDraggingReason](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.QueryColumnDraggingReason.html). {% tabs %} @@ -719,7 +719,7 @@ private void TreeGrid_ColumnDragging(object sender, TreeGridColumnDraggingEventA ## Freezing Columns -You can freeze the columns in view at the left and right side like in Excel by setting the [SfTreeGrid.FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount) and [SfTreeGrid.FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount) properties. +You can freeze the columns in view at the left and right side like in excel by setting [SfTreeGrid.FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount) and [SfTreeGrid.FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount) properties. {% tabs %} {% highlight xaml %} @@ -889,4 +889,4 @@ Below code, binds the `ViewModel.AllowEditing` property to `TreeGridColumn.Allow {% endtabs %} -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Filtering.md b/wpf/TreeGrid/Filtering.md index 64b6594513..b20d9d6504 100644 --- a/wpf/TreeGrid/Filtering.md +++ b/wpf/TreeGrid/Filtering.md @@ -1,7 +1,7 @@ --- layout: post title: Filtering in WPF TreeGrid control | Syncfusion® -description: Learn all about filtering support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. +description: Learn here all about Filtering support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. platform: wpf control: SfTreeGrid documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Filtering in WPF TreeGrid (SfTreeGrid) -Filtering is the process of retrieving values from a collection that satisfy the specified condition. In SfTreeGrid, filtering can be applied through the UI as well as through programmatic filters. +Filtering is the process of retrieving the values from a collection that satisfies the specified condition. In SfTreeGrid, filtering can be applied through the UI as well as the programmatic filters. ## FilterLevel @@ -35,7 +35,7 @@ Filter will be applied to root nodes only in SfTreeGrid. For other nodes, `IsFil **All** -Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not match the filter condition, the filter will not be applied to its child nodes. Otherwise, the filter will also be applied to its child nodes. +Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not match the filter condition, filter will not be applied for child nodes. Else, filter will be applied to its child nodes also. **Extended** @@ -76,13 +76,13 @@ private void Button_Click(object sender, RoutedEventArgs e) {% endhighlight %} {% endtabs %} -Here, the `FilterNodes` delegate filters the data based on the `Salary` property. The `FilterNodes` delegate is assigned to the [SfTreeGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridView_Filter) predicate to filter the tree grid. After that, the [SfTreeGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridView_RefreshFilter) method is called to refresh the nodes. If the node satisfies the filter conditions, `true` is returned. Otherwise, `false` is returned. +Here, `FilterNodes` delegate filters the data based on Salary. `FilterNodes` delegate is assigned to [SfTreeGrid.View.Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridView_Filter) predicate to filter the tree grid. After that, [SfTreeGrid.View.RefreshFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridView_RefreshFilter) method is called to refresh the nodes. If the node satisfies the filter conditions, true will be returned. Else false will be returned. ![WPF TreeGrid with Filtering](Filtering_images/wpf-treegrid-filtering.png) -While filtering, if the node satisfies the filter condition, the [IsFiltered](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeNode.html#Syncfusion_UI_Xaml_TreeGrid_TreeNode_IsFiltered) property of [TreeNode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeNode.html) will be set to `false`. Otherwise, it will be set to `true`. If the `IsFiltered` value is `true`, the node will not be displayed in the view; otherwise, it will be displayed in the view. +While filtering, if the node satisfies filter condition, [IsFiltered](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeNode.html#Syncfusion_UI_Xaml_TreeGrid_TreeNode_IsFiltered) property of [TreeNode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeNode.html) will be set as false. Else, it will be true. If `IsFiltered` value is True, the node will not be displayed in view, else it will be displayed in view. -N> SfTreeGrid refreshes the filtering on property change if the [SfTreeGrid.LiveNodeUpdateMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_LiveNodeUpdateMode) property is set to `AllowDataShaping`. +N> SfTreeGrid refreshes the filtering on property change if [SfTreeGrid.LiveNodeUpdateMode ](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_LiveNodeUpdateMode)property is set as `AllowDataShaping`. You can download the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/FilteringDemo-587565594). @@ -130,10 +130,10 @@ this.sfTreeGrid.Columns["FirstName"].FilterPredicates.Add( {% endtabs %} #### Filter behavior -The [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterBehavior) property is used to specify whether to consider the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) as a string or as a specific data type. +The [FilterBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterBehavior) property is used to specify whether to consider the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) as string or specific data type. -* StringTyped - Records are filtered without considering the type, and the FilterValue type is treated as a string. -* StronglyTyped - Records are filtered by considering the underlying type of the FilterValue. +* StringTyped - Records are filtered without considering the type and it takes FilterValue type as string. +* StronglyTyped - Records are filtered by considering the FilterValue underlying type. #### Clear filtering @@ -158,10 +158,10 @@ this.sfTreeGrid.ClearFilter(this.sfTreeGrid.Columns["FirstName"]); The [PredicateType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_PredicateType) property is used to apply multiple FilterPredicates for a column. -* And: Performs an And operation in filters. -* AndAlso: Performs an AndAlso operation in filters. -* Or: Performs an Or operation in filters. -* OrElse: Performs an OrElse operation in filters. +* And: Performs And operation in filters. +* AndAlso: Performs AndAlso operation in filters. +* Or: Performs Or operation in filters. +* OrElse: Performs OrElse operation in filters. {% tabs %} {% highlight c# %} @@ -189,11 +189,11 @@ this.sfTreeGrid.Columns["FirstName"].FilterPredicates.Add( #### Filter DateColumn with range between two dates -A [TreeGridDateTimeColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDateTimeColumn.html) can be filtered with a range between two dates by applying two FilterPredicates for the same column. The [FilterType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterType) for the FilterPredicate with the start date should be `GreaterThanOrEqual`, and the end date should be `LessThanOrEqual`. +A [TreeGridDateTimeColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDateTimeColumn.html) can be filtered with a range between two dates by applying two FilterPredicate for the same column. The [FilterType](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterType) for the FilterPredicate with start date should be `GreaterThanOrEqual` and end date should be `LessThanOrEqual`. ## UI filtering -SfTreeGrid provides Excel-like filtering UI and an advanced filter UI to filter the data easily. UI filtering can be enabled by setting the [SfTreeGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AllowFiltering) property to `true`. This allows you to open the filter UI by clicking the filter icon on the column header to filter the nodes. +SfTreeGrid provides Excel-like filtering UI and advanced filter UI to filter the data easily. UI filtering can be enabled by setting the [SfTreeGrid.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AllowFiltering) property to `true`. This allows to open the filter UI by clicking the filter icon on the column header to filter the nodes. The filtering can be enabled or disabled for a specific column by setting the [TreeGridColumn.AllowFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_AllowFiltering) property. @@ -214,15 +214,15 @@ N> `TreeGridColumn.AllowFiltering` has higher priority than the `SfTreeGrid.Allo ### Built-in UI views -SfTreeGrid provides the following types of filter pop-up modes: +The SfTreeGrid provides the following types of filter pop-up modes: -* Check box filter: Provides an Excel-like filter interface with a list of check boxes. +* Check box filter: Provides Excel-like filter interface with a list of check boxes. * Advanced filter: Provides advanced filter options to filter the data. -* Both: Both the check box filter and the advanced filter are loaded when the filter pop-up is opened. +* Both: Both check box filter and advanced filter are loaded while opening the filter pop-up. -By default, the filter pop-up mode of the column is set to `Both`. The check box and the advanced filters can be switched using the Advanced Filter button. +By default, the filter pop-up mode of the column is set to Both. The check box and the advanced filters can be switched using the Advanced Filter button. #### Checkbox filtering UI @@ -234,7 +234,7 @@ By default, the filter pop-up mode of the column is set to `Both`. The check box ## Changing filter UI for grid -The filter UI view can be changed for all the columns in the grid by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterMode) in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) by writing a style and assigning it to [SfTreeGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterPopupStyle). +Filter UI view can be changed for all the columns in grid by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterMode) in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) by writing style and assign it to [SfTreeGrid.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterPopupStyle). {% tabs %} {% highlight xaml %} @@ -253,7 +253,7 @@ The filter UI view can be changed for all the columns in the grid by changing th ## Changing filter UI for a column -The filter UI view can be changed for a specific column by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterMode) in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) by writing a style and assigning it to [TreeGridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_FilterPopupStyle). +Filter UI view can be changed for a specific column by changing the [FilterMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterMode) in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) by writing style and assigning it to [TreeGridColumn.FilterPopupStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_FilterPopupStyle). {% tabs %} {% highlight xaml %} @@ -291,23 +291,23 @@ You can skip the [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Sync ## Check box filtering -The check box filtering is the same as the Excel-like filter popup, which displays a search text box and a list of check boxes with unique items from the expanded tree nodes. +The check box filtering is the same as Excel-like filter popup, which displays a search text box and a list of check boxes with unique items from the expanded tree nodes. The items in the checked state will be visible in the view, and the other items will be filtered out of the view. -This filtering operation is performed based on the value of the [SfTreeGrid.FilterLevel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterLevel) property. +This filtering operation is performed based on the value of [SfTreeGrid.FilterLevel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterLevel) property. ## Advanced filtering -The advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on the advanced filter type by automatically detecting the underlying data type. +Advanced filter UI provides multiple filter options to filter the data easily. Filter menu options are loaded based on advanced filter type by automatically detecting the underlying date type. The following built-in filter types are supported in SfTreeGrid: * Text filter: Loads various menu options to filter the display text effectively. -* Number filter: Loads various menu options to filter numeric data. +* Number filter: Loads various menu options to filter the numeric data. -* Date filter: Loads various menu options and a [DatePicker](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datepicker?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0&redirectedfrom=MSDN) to filter date-time type columns. +* Date filter: Loads various menu options and [DatePicker](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datepicker?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0&redirectedfrom=MSDN) to filter date-time type columns. @@ -334,7 +334,7 @@ When the DateTime type value is bound to the {{'[TreeGridColumn](https://help.sy
-Displays Text Filter in WPF TreeGrid +Displays Text Filter in WPF TreeGrid/> </td> <td> <img src= @@ -393,7 +393,7 @@ N> The `Null` and `Not Null` options are available only when `AllowBlankFilters` ## Instant filtering -By default, filters are applied to the columns when the OK button is clicked in UI filtering. To update the filters immediately whenever there is an update in the filter pop-up, set [TreeGridColumn.ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ImmediateUpdateColumnFilter) to `true`. +By default, filters are applied to the columns when OK button is clicked in UI filtering. To update the filters immediately whenever update in filter popup, set [TreeGridColumn.ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ImmediateUpdateColumnFilter) to `true`. {% tabs %} {% highlight xaml %} @@ -409,7 +409,7 @@ this.sfTreeGrid.Columns["EmployeeID"].ImmediateUpdateColumnFilter = true; {% endhighlight %} {% endtabs %} -Here, the OK and Cancel buttons are unavailable, and the Done button is available to just close the popup. +Here, the OK and Cancel buttons are unavailable and Done button is available to just close the popup. The following screenshot illustrates the check box filter when `ImmediateUpdateColumnFilter` is set to `true`. @@ -419,7 +419,7 @@ The following screenshot illustrates the advanced filter when `ImmediateUpdateCo ![Advanced Filter with Immediate Filter in WPF TreeGrid](Filtering_images/wpf-treegrid-immediate-advanced-filter.png) -N> In the check box filter, the `SelectAll` option is not reflected in the filter updates if [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ImmediateUpdateColumnFilter) is `true`. +N> In check box filter, the `SelectAll` option is not reflected in the filter updates if [ImmediateUpdateColumnFilter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ImmediateUpdateColumnFilter) is true. ## Filtering null values @@ -442,13 +442,13 @@ The following screenshot illustrates the check box filter when `AllowBlankFilter ![Filter Null Values using CheckBox Filter in WPF TreeGrid](Filtering_images/wpf-treegrid-filter-null-values.png) -The following screenshot illustrates the advanced filter when `AllowBlankFilters` is set to `true`. +The following screenshot illustrates advanced filter when `AllowBlankFilters` is set to `true`. ![Filter Null Values using Advanced Filter in WPF TreeGrid](Filtering_images/wpf-treegrid-null-values.png) ## Changing AdvancedFilter type when loading dynamic ItemsSource -By default, the text filters will be loaded for the columns if the `ItemsSource` is [dynamic](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/reference-types#the-dynamic-type). The [TreeGridColumn.ColumnMemberType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ColumnMemberType) property loads number filters or date filters based on the column values. +By default, the text filters will be loaded for the columns if `ItemsSource` is [dynamic](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/reference-types#the-dynamic-type). The [TreeGridColumn.ColumnMemberType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_ColumnMemberType) property loads number filters or date filters based on the column values. {% tabs %} {% highlight c# %} @@ -462,7 +462,7 @@ this.sfTreeGrid.Columns["EmployeeID"].ColumnMemberType = typeof(double); ### Loading text filter for number or date column -The [SfTreeGrid.FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulating) event is used to load text filters for the columns that have a number or date value as the underlying type by setting the value of the `TreeGridFilterItemsPopulatingEventArgs.FilterControl.AdvancedFilterType` property to `AdvancedFilterType.TextFilter`. +The [SfTreeGrid.FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulating) event is used to load text filters for the columns that have number or date value as underlying type by setting value of the `TreeGridFilterItemsPopulatingEventArgs.FilterControl.AdvancedFilterType` property to `AdvancedFilterType.TextFilter`. {% tabs %} {% highlight c# %} @@ -480,7 +480,7 @@ private void OnSfTreeGridFilterItemsPopulating(object sender, TreeGridFilterItem ### Customizing filter predicates -The filter predicates can be customized using the [SfTreeGrid.FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterChanging) event. This event occurs when applying a filter using the filter control. Here, the [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) is changed based on certain conditions. +The filter predicates can be customized using the [SfTreeGrid.FilterChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterChanging) event. This event occurs when applying filter using the filter control. Here, [FilterValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.FilterPredicate.html#Syncfusion_Data_FilterPredicate_FilterValue) is changed based on some conditions. {% tabs %} {% highlight c# %} @@ -501,7 +501,7 @@ private void OnSfTreeGridFilterChanging(object sender, TreeGridFilterChangingEve ### Customizing Excel-like filter ItemsSource -The `ItemsSource` of [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) can be customized to restrict some data from filtering using the [SfTreeGrid.FilterItemsPopulated](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulated) event. Here, the [FilterElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterElement.html) that has an actual value of 0 is removed from the `ItemsSource`. +The [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) `ItemsSource` can be customized to restrict some data from filtering using the [SfTreeGrid.FilterItemsPopulated](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulated) event. Here, the [FilterElement](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterElement.html) that has actual value as 0 is removed from `ItemsSource`. {% tabs %} {% highlight c# %} @@ -547,7 +547,7 @@ private void SfTreeGrid_FilterItemsPopulating(object sender, TreeGridFilterItems ### Customizing sort options text -The sort options text can be customized by changing the value of the [AscendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_AscendingSortString) and [DescendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_DescendingSortString) properties in the [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) using the [SfTreeGrid.FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulating) event. +Sort options text can be customized by changing the value of [AscendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_AscendingSortString) and [DescendingSortString](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_DescendingSortString) properties in the [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html) using the [SfTreeGrid.FilterItemsPopulating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_FilterItemsPopulating) event. {% tabs %} {% highlight c# %} @@ -593,7 +593,7 @@ Sort options can be collapsed by setting the [SortOptionVisibility](https://help ### Customizing the filter popup size -The size of the filter popup can be changed using the [FilterPopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterPopupHeight) and [FilterPopupWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterPopupWidth) properties in the [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html). +The size of the filter popup can be changed using the [FilterPopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterPopupHeight) and [FilterPopupWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html#Syncfusion_UI_Xaml_TreeGrid_Filtering_TreeGridFilterControl_FilterPopupWidth) properties in [TreeGridFilterControl](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.Filtering.TreeGridFilterControl.html). {% tabs %} {% highlight xaml %} @@ -612,7 +612,7 @@ The size of the filter popup can be changed using the [FilterPopupHeight](https: ### Changing filter icon style after applying filters -The filter icon style can be changed by writing a style with the `TargetType` set to [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html). +The filter icon style can be changed by writing style with TargetType as [FilterToggleButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.FilterToggleButton.html). {% tabs %} {% highlight c# %} @@ -722,4 +722,4 @@ The filter icon style can be changed by writing a style with the `TargetType` se ![Customizing Filter Icon in WPF TreeGrid](Filtering_images/wpf-treegrid-filter-icon.png) -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Paging.md b/wpf/TreeGrid/Paging.md index f88c33d7d0..450bd5dfcc 100644 --- a/wpf/TreeGrid/Paging.md +++ b/wpf/TreeGrid/Paging.md @@ -1,7 +1,7 @@ --- layout: post title: Paging in WPF TreeGrid control | Syncfusion® -description: Learn all about paging support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more details. +description: Learn here all about Paging support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more details. platform: wpf control: SfTreeGrid documentation: ug @@ -9,17 +9,17 @@ documentation: ug # Paging in WPF TreeGrid (SfTreeGrid) -SfTreeGrid provides support to manipulate the nodes using the SfDataPager control. You can refer to the [SfDataPager](https://help.syncfusion.com/wpf/datapager/overview) control user guide for more information. +SfTreeGrid provides support to manipulate the nodes using SfDataPager control. You can refer [SfDataPager](https://help.syncfusion.com/wpf/datapager/overview) control user guide for more information. ## Getting started -Follow the steps below to bind SfTreeGrid with SfDataPager. +Follow the below steps to bind SfTreeGrid with SfDataPager. -1. Create an `IEnumerable` collection that you want to bind and set it to the [SfDataPager.Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property. +1. Create `IEnumerable` collection that you want to bind and set it to [SfDataPager.Source](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_Source) property. -2. Set the [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of `RootNodes` to be displayed per page. +2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of `RootNodes` to be displayed per page. -3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to the [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. +3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be update based on current page. N> Paging supports all types of [TreeGridView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html), except when using `SfTreeGrid` in unbound mode ([TreeGridUnBoundView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridUnboundView.html)). The following code snippet demonstrates the [TreeGridSelfRelationalView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSelfRelationalView.html) type. Similarly, paging support can be implemented for [TreeGridNestedView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridNestedView.html). @@ -178,9 +178,9 @@ public class EmployeeInfo ### Limitations -1. Paging is not supported when using `SfTreeGrid` in unbound mode (`TreeGridUnBoundView`). -2. The on-demand loading functionality of `SfDataPager` is not supported. +1. Paging is not supported when using `SfTreeGrid` in unbound mode (TreeGridUnBoundView). +2. `SfDataPager`’s on‑demand loading functionality is not supported. 3. **Child nodes** are not considered in page size calculation. 4. Selection should not be maintained when moving from one page to another. 5. **Sorting and Filtering** are applied across all pages. However, node reordering occurs only within each individual page. -6. **Data operations** such as Add, Replace, Remove, Insert, and Move are not supported. \ No newline at end of file +6. The **data operations** such as Add, Replace, Remove, Insert, and Move are not supported. \ No newline at end of file diff --git a/wpf/TreeGrid/Selection.md b/wpf/TreeGrid/Selection.md index 94df7e9fbf..3149927444 100644 --- a/wpf/TreeGrid/Selection.md +++ b/wpf/TreeGrid/Selection.md @@ -1,7 +1,7 @@ --- layout: post title: Selection in WPF TreeGrid control | Syncfusion® -description: Learn all about selection support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. +description: Learn here all about Selection support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. platform: wpf control: SfTreeGrid documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Selection in WPF TreeGrid (SfTreeGrid) -[WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) (SfTreeGrid) allows you to select one or more rows or cells. To select a specific row or group of rows, you have to set the [SelectionUnit](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionUnit) to [Row](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html), and to select a specific cell or group of cells, you have to set `SelectionUnit` to [Cell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) or [Any](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html). With the [SelectionUnit.Any](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) option, you can select the row by clicking on the row header. +[WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) (SfTreeGrid) allows you to select one or more rows or cells. For selecting specific row or group of rows you have to set [SelectionUnit](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionUnit) as [Row](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) and for selecting a specific cell or group of cells you have to set `SelectionUnit` as [Cell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) or [Any](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html). In [SelectionUnit.Any](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) option you can select the row by clicking on row header. ## Current cell navigation -Keyboard navigation through the cells and rows is determined based on the [NavigationMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_NavigationMode) property. [NavigationMode.Cell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.NavigationMode.html) allows you to navigate between the cells in a row as well as between rows. [NavigationMode.Row](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.NavigationMode.html) allows you to navigate only between rows. It is not possible to set `NavigationMode.Row` when cell selection is enabled (`SelectionUnit` is `Cell` or `Any`). +Keyboard navigation through the cells and rows is determined based on the [NavigationMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_NavigationMode) property. [NavigationMode.Cell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.NavigationMode.html) allows you to navigate between the cells in a row as well as between rows. [NavigationMode.Row](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.NavigationMode.html) allows you to navigate only between rows. It is not possible to set `NavigationMode.Row` when cell selection is enabled (`SelectionUnit` is Cell or Any). ## Selection modes @@ -88,7 +88,7 @@ Allows selecting multiple rows or cells. You can select multiple rows or cells i ## Disable selection for rows and columns -You can disable selection and navigation on a particular column by setting the [GridColumn.AllowFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowFocus) property. You can disable selection on a particular row, cell, or column by handling the [CurrentCellActivating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellActivating) event. +You can disable selection and navigation on particular column by setting the [GridColumn.AllowFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowFocus) property. You can disable selection on particular row or cell or column by handling the [CurrentCellActivating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellActivating) event. ## Multiple row or cell selection @@ -154,7 +154,7 @@ The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.Sf The [CurrentItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentItemProperty) returns the data object that currently has focus, and the [CurrentColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentColumnProperty) denotes the [TreeGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridColumn.html) that currently has focus. -The [CurrentCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellInfo) returns an instance of [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html), which contains information about the cell that currently has focus. +The [CurrentCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellInfo) returns an instance [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html), which contains information about the cell that currently has focus. ### Row selection @@ -162,7 +162,7 @@ You can get all the selected records using the [SelectedItems](https://help.sync ### Cell Selection -You can get the selected cells as a [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html) collection by using the [GetSelectedCells](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_GetSelectedCells) method. +You can get the selected cells as [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html) collection by using [GetSelectedCells](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_GetSelectedCells) method. {% tabs %} {% highlight c# %} @@ -175,7 +175,7 @@ List selectedCells = this.treeGrid.GetSelectedCells(); ### CurrentItem vs SelectedItem -Both [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) and [CurrentItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentItem) return the same data object when a single cell or row is selected in SfTreeGrid. When you have selected more than one row or cell, the record that was selected initially is maintained in `SelectedItem`, and the record that currently has focus is maintained in `CurrentItem`. +Both [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) and [CurrentItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentItem) returns the same data object when there is single cell or row is selected in SfTreeGrid. When you have selected more than one rows or cells, the record that had been selected initially is maintained in `SelectedItem` and the record that currently have focus is maintained in `CurrentItem`. ## Programmatic selection @@ -296,7 +296,7 @@ this.treeGrid.MoveCurrentCell(new RowColumnIndex(3, 2), false); ### Clear selection -You can clear the selection using the [ClearSelections](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ClearSelections_System_Boolean_) method. In row selection, you can remove the selection by setting `null` to the [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) or by clearing the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItems) property. +You can clear the selection using the [ClearSelections](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ClearSelections_System_Boolean_) method. In row selection, you can remove the selection by setting null to the [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) or clearing the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItems) property. {% tabs %} {% highlight c# %} @@ -306,7 +306,7 @@ this.treeGrid.SelectionController.ClearSelections(true); {% endhighlight %} {% endtabs %} -You can clear selection on a group of cells by using the [UnselectCells](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_UnselectCells_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method in cell selection. +You can clear selection on group of cells by using the [UnselectCells](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_UnselectCells_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method in cell selection. {% tabs %} {% highlight c# %} @@ -320,7 +320,7 @@ this.treeGrid.UnselectCells(firstRecord, firstColumn, lastRecord, lastColumn); {% endhighlight %} {% endtabs %} -You can clear the selection on a particular cell by using the [UnselectCell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_UnselectCell_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method in cell selection. +You can clear the selection on particular cell by using the [UnselectCell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_UnselectCell_System_Object_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method in cell selection. {% tabs %} {% highlight c# %} @@ -339,7 +339,7 @@ this.treeGrid.UnselectCell(removeRecord, removeColumn); ### Automatic scrolling on drag selection -SfTreeGrid scrolls rows and columns automatically when you try to perform the drag selection like in Excel. You can enable or disable auto-scrolling by setting the [AutoScroller.AutoScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoScroller) property. +SfTreeGrid scrolls rows and columns automatically when you try to perform the drag selection like in Excel. You can enable or disable AutoScrolling by setting the [AutoScroller.AutoScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoScroller) property. {% tabs %} {% highlight c# %} @@ -351,7 +351,7 @@ this.treeGrid.AutoScroller.AutoScrolling = AutoScrollOrientation.Both; ### Scroll to a particular row or column index -You can scroll programmatically to a particular cell using the [ScrollInView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ScrollInView_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method by passing the row and column index. +You can scroll programmatically to particular cell using the [ScrollInView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ScrollInView_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) method by passing row and column index. {% tabs %} {% highlight c# %} @@ -670,7 +670,7 @@ You can customize the mouse and keyboard behaviors by overriding the selection c ### CurrentCellActivating -The [CurrentCellActivating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellActivating) event occurs before moving the current cell to a particular cell. [CurrentCellActivatingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellActivatingEventArgs.html) has the following members, which provide information for `CurrentCellActivatingEvent`. +The [CurrentCellActivating](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_CurrentCellActivating) event will occurs before moving the current cell to particular cell. [CurrentCellActivatingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CurrentCellActivatingEventArgs.html) has following members which provides information for `CurrentCellActivatingEvent`. [ActivationTrigger](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.CellGrid.Helpers.CurrentCellActivatingEventArgs.html#Syncfusion_UI_Xaml_CellGrid_Helpers_CurrentCellActivatingEventArgs_ActivationTrigger): Returns the reason for moving the current cell. @@ -702,7 +702,7 @@ private void TreeGrid_CurrentCellActivating(object sender, Syncfusion.UI.Xaml.Gr {% endhighlight %} {% endtabs %} -You can cancel the current cell moving process within this event by setting the [GridCurrentCellActivatingEventArgs.Cancel](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.ComponentModel.SyncfusionCancelRoutedEventArgs.html#Syncfusion_Windows_ComponentModel_SyncfusionCancelRoutedEventArgs_Cancel) to `true`. +You can cancel the current cell moving process within this event by setting [GridCurrentCellActivatingEventArgs.Cancel](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.ComponentModel.SyncfusionCancelRoutedEventArgs.html#Syncfusion_Windows_ComponentModel_SyncfusionCancelRoutedEventArgs_Cancel) to true. {% tabs %} {% highlight c# %} @@ -759,7 +759,7 @@ private void TreeGrid_CurrentCellActivated(object sender, Syncfusion.UI.Xaml.Gri ### SelectionChanging -The [SelectionChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionChanging) event occurs before processing the selection to a particular row or cell. This event is triggered only by the keyboard and mouse interactions. [GridSelectionChangingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionChangingEventArgs.html) has the following members, which provide information to the SelectionChanging event. +The [SelectionChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionChanging) event occurs before processing the selection to a particular row or cell. This event is triggered only to the keyboard and mouse interactions. [GridSelectionChangingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionChangingEventArgs.html) has the following members, which provide information to the SelectionChanging event. [AddedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSelectionChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSelectionChangingEventArgs_AddedItems): Collection of [TreeGridRowInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowInfo.html) or [TreeGridCellInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellInfo.html) where the selection is going to be processed. @@ -826,7 +826,7 @@ private void TreeGrid_SelectionChanged(object sender, Syncfusion.UI.Xaml.Grid.Gr ### Change selection background and foreground -You can change the selection background and foreground using the [SelectionBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionBackgroundProperty) and [SelectionForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionForegroundProperty) properties. +You can change the selection background and foreground using the [SelectionBackGround](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionBackgroundProperty) and [SelectionForeGround](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionForegroundProperty) properties. {% tabs %} {% highlight xaml %} @@ -1031,13 +1031,13 @@ You can customize the cell selection by editing the control template of the corr ## Customize selection behaviors -The SfTreeGrid processes the selection operations in the selection controller. The following are the built-in selection controllers: +The SfTreeGrid process the selection operations in selection controller. Below are the built-in selection controllers, -* [TreeGridRowSelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html) – Processes selection operations when the `SelectionUnit` is `Row`. +* [TreeGridRowSelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html) – Process selection operations when `selection unit` as `row`. -* [TreeGridCellSelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellSelectionController.html) – Processes selection operations when the `SelectionUnit` is `Cell` or `Any`. +* [TreeGridCellSelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCellSelectionController.html) – process selection operations when `selection unit` as `cell` or `Any`. -You can customize the default row selection behaviors by overriding the `TreeGridRowSelectionController` class, or customize the cell selection behaviors by overriding the `TreeGridCellSelectionController` class and setting it to `SfTreeGrid.SelectionController`. +You can customize the default row selection behaviors by overriding the `TreeGridRowSelectionController` class or customize the cell selection behaviors by overriding the `TreeGridCellSelectionController` class and set it to `SfTreeGrid.SelectionController`. {% tabs %} {% highlight c# %} @@ -1053,7 +1053,7 @@ public class GridSelectionControllerExt : TreeGridRowSelectionController ### Change enter key behavior -By default, when pressing the `Enter` key, the current cell will be moved to the next focused cell in the same column. You can change the `Enter` key behavior by overriding the [ProcessKeyDown](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_ProcessKeyDown_System_Windows_Input_KeyEventArgs_) method in the selection controller. In this method, you have to create a new [KeyEventArgs](https://learn.microsoft.com/en-us/dotnet/api/system.windows.input.keyeventargs?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0&redirectedfrom=MSDN), which refers to the `Tab` key and processes the `Tab` key action. +By default, when pressing the `Enter` key, the current cell will be moved to the next focused cell in the same column. You can change the `Enter` key behavior by overriding the [ProcessKeyDown](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_ProcessKeyDown_System_Windows_Input_KeyEventArgs_) method in selection controller. In this method, you have to create a new [KeyEventArgs](https://learn.microsoft.com/en-us/dotnet/api/system.windows.input.keyeventargs?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0&redirectedfrom=MSDN), which refers to the `Tab` key and processes the `Tab` key action. {% tabs %} @@ -1107,7 +1107,7 @@ You can [download]( https://github.com/SyncfusionExamples/how-to-scroll-and-sele ### Prevent the selection when right-click -You can prevent the selection when right-clicking in the tree grid by customizing the [SelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionController) and overriding the [ProcessPointerPressed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_ProcessPointerPressed_System_Windows_Input_MouseButtonEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_). +You can prevent the selection when right-clicking in tree grid by customizing the [SelectionController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SelectionController) and overriding the [ProcessPointerPressed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_ProcessPointerPressed_System_Windows_Input_MouseButtonEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_). {% tabs %} {% highlight c# %} @@ -1285,7 +1285,7 @@ private void Button_Click(object sender, RoutedEventArgs e) ### Show the selection of row/cell when setting the background -The `Row`/`Cell` selection border is behind the grid cell content. So, when you apply the background for a row, the selection is not displayed in the `UI`. You can overcome this by setting the opacity in `TreeGridCell`. +The `Row`/`Cell` selection border is behind the grid cell content. So, when you apply the background for a row, the selection is not displayed in `UI`. You can overcome this by setting opacity in `TreeGridCell`. {% tabs %} {% highlight xaml %} @@ -1301,7 +1301,7 @@ The `Row`/`Cell` selection border is behind the grid cell content. So, when you ### Set the current cell on a particular row when tree grid is loaded -You can set the current cell in the tree grid using the [treeGrid.SelectionController.MoveCurrentCell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_MoveCurrentCell_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_System_Boolean_) method. +You can set the current cell in tree grid using the [treeGrid.SelectionController.MoveCurrentCell](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridRowSelectionController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridRowSelectionController_MoveCurrentCell_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_System_Boolean_) method. {% tabs %} {% highlight c# %} @@ -1320,4 +1320,4 @@ private void TreeGrid_Loaded(object sender, RoutedEventArgs e) {% endtabs %} -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Sorting.md b/wpf/TreeGrid/Sorting.md index dc9953baa4..15c305924a 100644 --- a/wpf/TreeGrid/Sorting.md +++ b/wpf/TreeGrid/Sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in WPF TreeGrid control | Syncfusion® -description: Learn all about sorting support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. +description: Learn here all about Sorting support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. platform: wpf control: SfTreeGrid documentation: ug @@ -10,7 +10,7 @@ documentation: ug # Sorting in WPF TreeGrid (SfTreeGrid) -SfTreeGrid allows you to sort the data against one or more columns in either ascending or descending order. When sorting is applied, the rows are rearranged based on the sort criteria. You can allow users to sort the data by touching or clicking the column header by setting the [SfTreeGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. +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/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. {% tabs %} {% highlight xaml %} @@ -28,7 +28,7 @@ this.treeGrid.AllowSorting = true; {% endhighlight %} {% endtabs %} -Alternatively, you can enable or disable sorting for a particular column by setting the [TreeGridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) property. +In another way, you can enable or disable the sorting for particular column by setting the [TreeGridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) property. {% tabs %} {% highlight xaml %} @@ -56,15 +56,15 @@ this.treeGrid.Columns["LastName"].AllowSorting = false; {% endhighlight %} {% endtabs %} -N> The [TreeGridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) takes higher priority than the [SfTreeGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property. +N> The[TreeGridColumn.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowSorting) takes higher priority than [SfTreeGrid.AllowSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property. -End users can sort the column by clicking the column header cell. Once the columns get sorted, the sort indicator will be displayed on the right side of the column header. +End users can sort the column by clicking column header cell. Once the columns get sorted, the sort indicator will be displayed on the right side of the column header. ![WPF TreeGrid with Sorting](Sorting_images/wpf-treegrid-sorting.png) ## Sort column in double click -By default, the column gets sorted when the column header is clicked. You can change this behavior to sort the column on a double click action by setting the [SfTreeGrid.SortClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) property to `DoubleClick`. +By default, column gets sorted when column header clicked. You can change this behavior to sort the column in double click action by setting [SfTreeGrid.SortClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) property to `DoubleClick`. {% tabs %} {% highlight xaml %} @@ -87,24 +87,24 @@ this.treeGrid.SortClickAction = SortClickAction.DoubleClick; ## Sorting order -By default, the data is sorted in ascending or descending order when clicking the column header. You can rearrange the data to its initial order from descending when clicking the column header by setting the [SfTreeGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowTriStateSorting) property. +By default, the data is sorted in ascending or descending order when clicking column header. You can rearrange the data to its initial order from descending, when clicking column header by setting [SfTreeGrid.AllowTriStateSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowTriStateSorting) property. -The following is the sequence of sorting orders when clicking the column header: +Following are the sequence of sorting orders when clicking column header, -* Sorts the data in ascending order. -* Sorts the data in descending order. -* Clears the sorting, and records are displayed in their initial order. +* Sorts the data in ascending order +* Sorts the data in descending order +* Clears the sorting and records displayed in its initial order ## Multi column sorting -The SfTreeGrid control allows you to sort more than one column, where sorting is applied one column against other columns. To apply sorting on multiple columns, the user has to click the column header while pressing the Ctrl key. -In the screenshot below, the `First Name` column is sorted. Then the `Employee ID` column is sorted against the `First Name` data by clicking the column header while pressing the Ctrl key. The sorting state of the `First Name` column is preserved, and the `Employee ID` column is sorted against the `First Name` column. +SfTreeGrid control allows you sort more than one column, where sorting is applied one column against other columns. To apply sorting on multiple columns, user have to click the column header by pressing the Ctrl key. +In the below screen shot, the `First Name` column sorted. Then the `Employee ID` column is sorted against the `First Name` data by clicking column header by pressing Ctrl key. The sorting state of `First Name` column is preserved and `Employee ID` column sorted against `First Name` column. ![Multi Column Sorting in WPF TreeGrid](Sorting_images/wpf-treegrid-multi-column-sorting.png) ### Display sort order -It is also possible to display the sorted order of columns in the header by setting the [SfTreeGrid.ShowSortNumbers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowSortNumbers) property to `true`. +It is also possible to display sorted order of columns in header by setting [SfTreeGrid.ShowSortNumbers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_ShowSortNumbers) property to `true`. {% tabs %} {% highlight xaml %} @@ -186,21 +186,21 @@ this.treeGrid.SortColumnDescriptions.Clear(); ## Custom sorting -SfTreeGrid allows you to sort the columns based on custom logic. The custom sorting can be applied by adding the [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) instance to [SfTreeGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortComparers). +SfTreeGrid allows you to sort the columns based on the custom logic. The custom sorting can be applied by adding the [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) instance to [SfTreeGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortComparers). -The [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) has the following properties: +The [SortComparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html) have the following properties, [PropertyName](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html#Syncfusion_Data_SortComparer_PropertyName) - Gets or sets the name of the column to apply custom sorting. [Comparer](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SortComparer.html#Syncfusion_Data_SortComparer_Comparer) - Gets or sets the custom comparer in which you can code to compare the data using custom logic. -You can implement the [ISortDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.ISortDirection.html) interface in the comparer to get the sort direction. So you can apply different custom logic for ascending and descending. +You can implement [ISortDirection](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.ISortDirection.html) interface in comparer to get the sort direction. So you can apply different custom logics for ascending and descending. -Follow the steps below to add a custom comparer to sort using custom logic: +Follow the below steps to add custom comparer to sort using custom logic, #### Define custom comparer with custom sort logic -In the code snippet below, the `FirstName` property is compared based on its string length, instead of the default string comparison. +In the below code snippet, `FirstName` property is compared based on its string length, instead of default string comparison. {% tabs %} {% highlight c# %} @@ -249,7 +249,7 @@ public class CustomSortComparer : IComparer, ISortDirection #### Adding custom comparer to SfTreeGrid -A custom comparer can be added to the [SfTreeGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortComparers) property. `SortComparers` maintains custom comparers, and the custom comparer is called when the corresponding column gets sorted by clicking the column header or programmatically. +Custom comparer can be added to [SfTreeGrid.SortComparers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortComparers) property. `SortComparers` maintains custom comparers and the custom comparer gets called when corresponding column gets sorted by clicking column header or programmatically. {% tabs %} {% highlight xaml %} @@ -268,7 +268,7 @@ this.treeGrid.SortComparers.Add(new SortComparer() { Comparer = new CustomSortCo {% endhighlight %} {% endtabs %} -Sorting the `First Name` column sorts the data using the custom sort comparer available in `SfTreeGrid.SortComparers`. +Sorting `First Name` column sorts the data using custom sort comparer available in `SfTreeGrid.SortComparers`. ![WPF TreeGrid with Custom Sorting](Sorting_images/wpf-treegrid-custom-sorting.png) @@ -276,19 +276,19 @@ Sorting the `First Name` column sorts the data using the custom sort comparer av ### SortColumnsChanging event -The [SfTreeGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanging) event occurs while sorting the columns by clicking the column header. [GridSortColumnsChangingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html) has the following members, which provide information for the `SortColumnsChanging` event. +[SfTreeGrid.SortColumnsChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanging) event occurs while sorting the columns by clicking column header. [GridSortColumnsChangingEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html) has following members which provides information for `SortColumnsChanging` event. [Action](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_Action) - Gets the action triggered this event. -[Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_CancelEventArgs_Cancel) - Setting the value to `true` cancels the triggered action. +[Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_CancelEventArgs_Cancel) - Setting value to `true`, cancels the triggered action. [AddedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_AddedItems) - Gets the list of new `SortColumnDescriptions` that are added. [RemovedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_RemovedItems) - Gets the list of `SortColumnDescriptions` that are removed. -[CancelScroll](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangingEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSortColumnsChangingEventArgs_CancelScroll) - Gets or sets a value that indicates whether to scroll and bring the `SelectedItem` into view after sorting takes place. +[CancelScroll](https://help.syncfusion.com/cr/wpf/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 a particular column through the [GridSortColumnsChangingEventArgs.Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_CancelEventArgs_Cancel) property of the `SortColumnsChanging` event. +You can prevent sorting for the particular column through [GridSortColumnsChangingEventArgs.Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_CancelEventArgs_Cancel) property of `SortColumnsChanging` event. {% tabs %} {% highlight c# %} @@ -308,7 +308,7 @@ private void TreeGrid_SortColumnsChanging(object sender, GridSortColumnsChanging ### SortColumnsChanged event -The [SfTreeGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. [GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for the `SortColumnsChanged` event. +[SfTreeGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. [GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for `SortColumnsChanged` event. -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file From 3b80a90585a04d2a0d5abdb19fa9017933b8f334 Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Wed, 8 Jul 2026 19:04:01 +0530 Subject: [PATCH 04/15] 1039292_Resolved UG issues for TreeGrid and DataGrid --- wpf/DataGrid/Columns.md | 6 +++--- wpf/DataGrid/Filtering.md | 2 +- wpf/DataGrid/Paging.md | 8 ++++---- wpf/DataGrid/Sorting.md | 2 +- wpf/TreeGrid/Data-Binding.md | 12 ++++++------ wpf/TreeGrid/Editing.md | 14 +++++++------- wpf/TreeGrid/Filtering.md | 10 +++++----- wpf/TreeGrid/MergeCell.md | 16 ++++++++-------- wpf/TreeGrid/Paging.md | 2 +- wpf/TreeGrid/Row-Height-Customization.md | 10 +++++----- wpf/TreeGrid/Rows.md | 9 +++++---- wpf/TreeGrid/Search.md | 10 +++++----- wpf/TreeGrid/Selection.md | 6 +++--- wpf/TreeGrid/Sorting.md | 8 ++++---- 14 files changed, 58 insertions(+), 57 deletions(-) diff --git a/wpf/DataGrid/Columns.md b/wpf/DataGrid/Columns.md index 913ac949a2..73a1544633 100644 --- a/wpf/DataGrid/Columns.md +++ b/wpf/DataGrid/Columns.md @@ -597,8 +597,8 @@ public string Country [DisplayFormat(DataFormatString = "yyyy")] public DateTime OrderDate { - get { return _orderDate; } - set { orderDate = value; } + get { return _orderDate; } + set { _orderDate = value; } } {% endhighlight %} {% endtabs %} @@ -928,7 +928,7 @@ You can freeze the columns in view at the left and right side like in excel by s {% endhighlight %} {% endtabs %} -![Frezzing Columns in WPF DataGrid](columns_images/wpf-datagrid-freezing.png) +![Freezing Columns in WPF DataGrid](columns_images/wpf-datagrid-freezing.png) ### Limitations diff --git a/wpf/DataGrid/Filtering.md b/wpf/DataGrid/Filtering.md index 0230eb4e0a..328e3eb0a5 100644 --- a/wpf/DataGrid/Filtering.md +++ b/wpf/DataGrid/Filtering.md @@ -710,7 +710,7 @@ void dataGrid_FilterItemsPopulated(object sender, GridFilterItemsPopulatedEventA if (e.Column.MappingName == "OrderID") { - var itemsSource = e.ItemsSource as List<FilterElement>; + var itemsSource = e.ItemsSource as List; //Get the FilterElement to Remove from itemsSource. var filterElement = itemsSource.FirstOrDefault(items => items.ActualValue.Equals(1005)); diff --git a/wpf/DataGrid/Paging.md b/wpf/DataGrid/Paging.md index 89cf633780..6722125066 100644 --- a/wpf/DataGrid/Paging.md +++ b/wpf/DataGrid/Paging.md @@ -565,7 +565,7 @@ public class EmployeeInfoRepository ### Limitations -1. UI Filtering is not supported. You can code in application level to filter the data. -2. Data processing operations (Sorting, Grouping) are done only in the current page. -3. Deleting is not supported. You can code to delete row in application level. -4. Only the navigated pages are exported when `OnDemandPaging’ is enabled, if the navigated page cache is cleared then the corresponding page will not be exported. +1. UI Filtering is not supported. You can code at the application level to filter the data. +2. Data processing operations (Sorting, Grouping) are done only on the current page. +3. Deleting is not supported. You can code to delete a row at the application level. +4. Only the navigated pages are exported when `OnDemandPaging` is enabled, if the navigated page cache is cleared then the corresponding page will not be exported. diff --git a/wpf/DataGrid/Sorting.md b/wpf/DataGrid/Sorting.md index af4a681151..cfa591be91 100644 --- a/wpf/DataGrid/Sorting.md +++ b/wpf/DataGrid/Sorting.md @@ -190,7 +190,7 @@ In the below code snippet, `CustomerName` property is compared based on its stri {% tabs %} {% highlight c# %} -Public class CustomComparer:IComparer,ISortDirection +public class CustomComparer : IComparer, ISortDirection { public int Compare(object x, object y) { diff --git a/wpf/TreeGrid/Data-Binding.md b/wpf/TreeGrid/Data-Binding.md index 607db9033f..8b3334246f 100644 --- a/wpf/TreeGrid/Data-Binding.md +++ b/wpf/TreeGrid/Data-Binding.md @@ -1,7 +1,7 @@ ---- +--- layout: post title: Data Binding in WPF TreeGrid control | Syncfusion® -description: Learn here all about Data Binding support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn here all about Data Binding support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -76,7 +76,7 @@ this.treeGrid.Columns.Add(new TreeGridTextColumn() {MappingName="Marks[0]"}); {% endhighlight %} {% endtabs %} -**Limitations when binding complex property:** +**Limitations when binding indexer property:** SfTreeGrid doesn’t support [LiveNodeUpdateMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_LiveNodeUpdateMode) - `AllowDataShaping`. @@ -111,7 +111,7 @@ None defines the node is not expanded when loading. By default, root nodes only
-RootNodeExpanded +RootNodesExpanded Root nodes only will be expanded at the time of loading. @@ -239,7 +239,7 @@ treeGrid.ExpandNode(node); {% endhighlight %} {% endtabs %} -### Expand all the nodes +### Expand the specific node and all its child nodes You can expand the specific node and all its child nodes by using [SfTreeGrid.ExpandAllNodes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ExpandAllNodes_Syncfusion_UI_Xaml_TreeGrid_TreeNode_) methods. @@ -569,4 +569,4 @@ treeGrid.View.EndInit(); N> View has properties (`EnableRecursiveChecking`, `LiveNodeUpdateMode` , `RecursiveCheckingMode`,..)that already defined in SfTreeGrid. It is recommended to set those properties via SfTreeGrid. -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Editing.md b/wpf/TreeGrid/Editing.md index e19e570c05..97a1975c0a 100644 --- a/wpf/TreeGrid/Editing.md +++ b/wpf/TreeGrid/Editing.md @@ -1,7 +1,7 @@ ---- +--- layout: post title: Editing in WPF TreeGrid control | Syncfusion® -description: Learn here all about Editing support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn here all about Editing support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -27,7 +27,7 @@ SfTreeGrid provides support for editing and it can be enabled or disabled by set {% endhighlight %} {% endtabs %} -You can enable or disable editing for particular column by setting [TreeGridColumn.AllowEditing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowEditing) property. +You can enable or disable editing for a particular column by setting the [TreeGridColumn.AllowEditing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowEditing) property. {% tabs %} {% highlight xaml %} @@ -48,7 +48,7 @@ N> `TreeGridColumn.AllowEditing` takes higher priority than `SfTreeGrid.AllowEdi ![Editing in WPF TreeGrid](Editing_images/wpf-treegrid-editing.png) -N> It is mandatory to set the NavigationMode to Cell to enable CurrentCell navigation and editing. +N> It is mandatory to set the `NavigationMode` to `Cell` to enable `CurrentCell` navigation and editing. ## Entering into edit mode @@ -77,9 +77,9 @@ this.treeGrid.EditTrigger = EditTrigger.OnTap; When the cell enters into edit mode, cursor is placed based on [SfTreeGrid.EditorSelectionBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_EditorSelectionBehavior) property. -SelectAll ֠selects the text of edit element loaded inside cell. +`SelectAll` — selects the text of the edit element loaded inside the cell. -MoveLast ֠places the cursor at the last of edit element loaded inside cell. +`MoveLast` — places the cursor at the last position of the edit element loaded inside the cell. {% tabs %} {% highlight xaml %} @@ -569,4 +569,4 @@ You can allow `UIElement` loaded inside template to handle mouse interaction in {% endtabs %} -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Filtering.md b/wpf/TreeGrid/Filtering.md index b20d9d6504..0408e112e8 100644 --- a/wpf/TreeGrid/Filtering.md +++ b/wpf/TreeGrid/Filtering.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Filtering in WPF TreeGrid control | Syncfusion® description: Learn here all about Filtering support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. @@ -58,7 +58,7 @@ View filtering can be achieved by setting the [SfTreeGrid.View.Filter](https://h {% tabs %} {% highlight c# %} -public bool FilerNodes(object o) +public bool FilterNodes(object o) { var data = o as Employee; @@ -69,7 +69,7 @@ public bool FilerNodes(object o) private void Button_Click(object sender, RoutedEventArgs e) { - treeGrid.View.Filter = FilerNodes; + treeGrid.View.Filter = FilterNodes; treeGrid.View.RefreshFilter(); } @@ -334,7 +334,7 @@ When the DateTime type value is bound to the {{'[TreeGridColumn](https://help.sy
-Displays Text Filter in WPF TreeGrid/> +<img src= Displays Number Filter in WPF TreeGrid @@ -722,4 +722,4 @@ The filter icon style can be changed by writing style with TargetType as [Filter ![Customizing Filter Icon in WPF TreeGrid](Filtering_images/wpf-treegrid-filter-icon.png) -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/MergeCell.md b/wpf/TreeGrid/MergeCell.md index 305a73db58..907452c255 100644 --- a/wpf/TreeGrid/MergeCell.md +++ b/wpf/TreeGrid/MergeCell.md @@ -1,7 +1,7 @@ ---- +--- layout: post title: Merge Cells in WPF TreeGrid control | Syncfusion® -description: Learn here all about Merge Cells support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn here all about Merge Cells support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -11,9 +11,9 @@ documentation: ug SfTreeGrid allows you to merge a range of adjacent cells in a row across columns using the [QueryCoveredRange](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html) event. -The `QueryCoveredRange` event occurs when each cell is arranged. When scrolling, the merged range will be added for newly added columns through this event and will also be removed for the columns that are out of view. +The `QueryCoveredRange` event occurs when each cell is arranged. While scrolling, the merged range will be added for newly added columns through this event and will also be removed for the columns that are out of view. -[TreeGridQueryCoveredRangeEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridQueryCoveredRangeEventArgs.html) of the `QueryCoveredRange` event provides information about the cell triggered in this event. GridQueryCoveredRangeEventArgs.OriginalSender returns the TreeGrid fired in this event using the TreeGridQueryCoveredRangeEventArgs.Range property. The adjacent cells can be merged. +[TreeGridQueryCoveredRangeEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridQueryCoveredRangeEventArgs.html) of the `QueryCoveredRange` event provides information about the cell that triggered the event. `GridQueryCoveredRangeEventArgs.OriginalSender` returns the TreeGrid that fired this event, and you can access the cell range through the `TreeGridQueryCoveredRangeEventArgs.Range` property. The adjacent cells can be merged. {% tabs %} {% highlight xaml %} @@ -41,7 +41,7 @@ void TreeGrid_QueryCoveredRange(object sender, TreeGridQueryCoveredRangeEventArg ## Column wise merging cells by fixed range -You can merge the columns by setting the range using the Left and Right properties of `TreeGridCoveredCellInfo`. +You can merge the columns by setting the range using the `Left` and `Right` properties of `TreeGridCoveredCellInfo`. {% tabs %} {% highlight c# %} @@ -64,9 +64,9 @@ void treeGrid_QueryCoveredRange(object sender, Syncfusion.UI.Xaml.TreeGrid.TreeG ![WPF TreeGrid with Merged Cells](MergeCells_images/wpf-treegrid-merge-cells.png) -## Merge all cells in an entire parent node +## Merge all cells in a parent node -You can merge the entire column parent node using `TreeGridCoveredCellInfo`. +You can merge all the cells in an entire parent node using `TreeGridCoveredCellInfo`. {% tabs %} {% highlight xaml %} @@ -173,4 +173,4 @@ class RequestTreeItemsBehavior : Behavior Refer to [Sample](https://github.com/SyncfusionExamples/how-to-merge-cells-in-a-row-in-wpf-treegrid). -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Paging.md b/wpf/TreeGrid/Paging.md index 450bd5dfcc..12aeca6ff7 100644 --- a/wpf/TreeGrid/Paging.md +++ b/wpf/TreeGrid/Paging.md @@ -19,7 +19,7 @@ Follow the below steps to bind SfTreeGrid with SfDataPager. 2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of `RootNodes` to be displayed per page. -3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be update based on current page. +3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. N> Paging supports all types of [TreeGridView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html), except when using `SfTreeGrid` in unbound mode ([TreeGridUnBoundView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridUnboundView.html)). The following code snippet demonstrates the [TreeGridSelfRelationalView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSelfRelationalView.html) type. Similarly, paging support can be implemented for [TreeGridNestedView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridNestedView.html). diff --git a/wpf/TreeGrid/Row-Height-Customization.md b/wpf/TreeGrid/Row-Height-Customization.md index aa7f4722a9..ae447beebf 100644 --- a/wpf/TreeGrid/Row-Height-Customization.md +++ b/wpf/TreeGrid/Row-Height-Customization.md @@ -1,7 +1,7 @@ --- layout: post title: Row Height Customization in WPF TreeGrid control | Syncfusion® -description: Learn here all about Row Height Customization support in Syncfusion® WPF TreeGrid (SfTreeGrid) control and more. +description: Learn here all about Row Height Customization support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control and more. platform: wpf control: SfTreeGrid documentation: ug @@ -27,7 +27,7 @@ this.treeGrid.RowHeight = 30; {% endhighlight %} {% endtabs %} -You can also change the particular row height using **TreeGridPanel.RowHeights** property. +You can also change a particular row height using the **TreeGridPanel.RowHeights** property. {% tabs %} @@ -47,7 +47,7 @@ void treeGrid_Loaded(object sender, RoutedEventArgs e) {% endtabs %} -You can also change the row height of particular row using **QueryRowHeight** event. +You can also change the row height of a particular row using the **QueryRowHeight** event. {% tabs %} @@ -71,13 +71,13 @@ void TreeGrid_QueryRowHeight(object sender, TreeGridQueryRowHeightEventArgs e) You can change the row height in on-demand based on the row index or row data using **SfTreeGrid.QueryRowHeight** event. -**QueryRowHeight** event triggered for each row when it becomes visible. **TreeGridQueryRowHeightEventArgs** provides information to **QueryRowHeight** event with following members, +The **QueryRowHeight** event is triggered for each row when it becomes visible. **TreeGridQueryRowHeightEventArgs** provides information to the **QueryRowHeight** event with the following members: * **RowIndex** – denotes index of the row in SfTreeGrid. * **Height** – Gets or sets the height of the row. -* **Handled** – Gets or sets a value indicating whether the **QueryRowHeight** event handled to change height of the row. Its default value is `false`. +* **Handled** – Gets or sets a value indicating whether the **QueryRowHeight** event is handled to change the height of the row. Its default value is `false`. diff --git a/wpf/TreeGrid/Rows.md b/wpf/TreeGrid/Rows.md index c35d970292..59c10dcccc 100644 --- a/wpf/TreeGrid/Rows.md +++ b/wpf/TreeGrid/Rows.md @@ -1,7 +1,8 @@ ---- +--- layout: post title: Rows in WPF TreeGrid control | Syncfusion® -description: Learn here all about Rows support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn here all about Rows support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. + platform: wpf control: SfTreeGrid documentation: ug @@ -67,7 +68,7 @@ Denotes the row has errors. WPF TreeGrid row has errors -Denotes that the current row which has errors. +Denotes that the current row has errors.
@@ -397,4 +398,4 @@ You can change the style of the particular column header by using the [HeaderSty -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Search.md b/wpf/TreeGrid/Search.md index a6d160dac0..672021822b 100644 --- a/wpf/TreeGrid/Search.md +++ b/wpf/TreeGrid/Search.md @@ -1,7 +1,7 @@ --- layout: post title: Search in WPF TreeGrid control | Syncfusion® -description: Learn here all about Search support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more details. +description: Learn here all about Search support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more details. platform: wpf control: SfTreeGrid documentation: ug @@ -23,13 +23,13 @@ this.treeGrid.SearchController.Search(TextBox.Text); ## SearchScope -You can control where the search is applied in the SfTreeGrid using the `SearchController.SearchScope` property. By default SearchScope value set as Both. +You can control where the search is applied in the SfTreeGrid using the `SearchController.SearchScope` property. By default, the `SearchScope` value is set to `Both`. -* Both – Search will be applied to both RootNodes and ChildNodes in the SfTreeGrid. +* `Both` – Search will be applied to both RootNodes and ChildNodes in the SfTreeGrid. -* RootNodes – Search will be applied only to the RootNodes in the SfTreeGrid. +* `RootNodes` – Search will be applied only to the RootNodes in the SfTreeGrid. -* ChildNodes – Search will be applied only to the ChildNodes in the SfTreeGrid. +* `ChildNodes` – Search will be applied only to the ChildNodes in the SfTreeGrid. {% tabs %} {% highlight c# %} diff --git a/wpf/TreeGrid/Selection.md b/wpf/TreeGrid/Selection.md index 3149927444..2ecf48ae13 100644 --- a/wpf/TreeGrid/Selection.md +++ b/wpf/TreeGrid/Selection.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Selection in WPF TreeGrid control | Syncfusion® description: Learn here all about Selection support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. @@ -991,7 +991,7 @@ You can customize the cell selection by editing the control template of the corr BorderThickness="0.5" IsHitTestVisible="False" Visibility="Collapsed"/> - + You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Sorting.md b/wpf/TreeGrid/Sorting.md index 15c305924a..416868d357 100644 --- a/wpf/TreeGrid/Sorting.md +++ b/wpf/TreeGrid/Sorting.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Sorting in WPF TreeGrid control | Syncfusion® description: Learn here all about Sorting support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. @@ -143,8 +143,8 @@ N> [SfTreeGrid.SortColumnChanging](https://help.syncfusion.com/cr/wpf/Syncfusion ChildPropertyName="Children" ItemsSource="{Binding EmployeeDetails}"> - - + + @@ -311,4 +311,4 @@ private void TreeGrid_SortColumnsChanging(object sender, GridSortColumnsChanging [SfTreeGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. [GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for `SortColumnsChanged` event. -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file From 74acfee6e9e176030185430c3f25629b8bf5fa56 Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Thu, 9 Jul 2026 10:52:02 +0530 Subject: [PATCH 05/15] Resolved conflicts --- wpf/TreeGrid/Row-Height-Customization.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/wpf/TreeGrid/Row-Height-Customization.md b/wpf/TreeGrid/Row-Height-Customization.md index 33762edbb0..e0bb3a7bb6 100644 --- a/wpf/TreeGrid/Row-Height-Customization.md +++ b/wpf/TreeGrid/Row-Height-Customization.md @@ -27,11 +27,7 @@ this.treeGrid.RowHeight = 30; {% endhighlight %} {% endtabs %} -<<<<<<< Wpf_Grid_UG_Updates -You can also change a particular row height using the **TreeGridPanel.RowHeights** property. -======= You can also change the particular row height using [TreeGridPanel.RowHeights](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridPanel.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridPanel_RowHeights) property. ->>>>>>> hotfix/hotfix-v34.1.29 {% tabs %} @@ -51,11 +47,7 @@ void treeGrid_Loaded(object sender, RoutedEventArgs e) {% endtabs %} -<<<<<<< Wpf_Grid_UG_Updates -You can also change the row height of a particular row using the **QueryRowHeight** event. -======= You can also change the row height of particular row using [QueryRowHeight](#_QueryRowHeight) event. ->>>>>>> hotfix/hotfix-v34.1.29 {% tabs %} @@ -79,21 +71,13 @@ void TreeGrid_QueryRowHeight(object sender, TreeGridQueryRowHeightEventArgs e) You can change the row height in on-demand based on the row index or row data using [SfTreeGrid.QueryRowHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_QueryRowHeight) event. -<<<<<<< Wpf_Grid_UG_Updates -The **QueryRowHeight** event is triggered for each row when it becomes visible. **TreeGridQueryRowHeightEventArgs** provides information to the **QueryRowHeight** event with the following members: -======= `QueryRowHeight` event triggered for each row when it becomes visible. [TreeGridQueryRowHeightEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridQueryRowHeightEventArgs.html) provides information to `QueryRowHeight` event with following members, ->>>>>>> hotfix/hotfix-v34.1.29 * `RowIndex` – denotes index of the row in SfTreeGrid. * `Height` – Gets or sets the height of the row. -<<<<<<< Wpf_Grid_UG_Updates -* **Handled** – Gets or sets a value indicating whether the **QueryRowHeight** event is handled to change the height of the row. Its default value is `false`. -======= * `Handled` – Gets or sets a value indicating whether the `QueryRowHeight` event handled to change height of the row. Its default value is `false`. ->>>>>>> hotfix/hotfix-v34.1.29 From 3f79ac3c3df7de2ef01631e38659e192395823c8 Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Thu, 9 Jul 2026 10:58:09 +0530 Subject: [PATCH 06/15] resolved conflicts --- wpf/TreeGrid/Search.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/wpf/TreeGrid/Search.md b/wpf/TreeGrid/Search.md index f55da00d4f..a21beb369b 100644 --- a/wpf/TreeGrid/Search.md +++ b/wpf/TreeGrid/Search.md @@ -23,11 +23,7 @@ this.treeGrid.SearchController.Search(TextBox.Text); ## SearchScope -<<<<<<< Wpf_Grid_UG_Updates -You can control where the search is applied in the SfTreeGrid using the `SearchController.SearchScope` property. By default, the `SearchScope` value is set to `Both`. -======= You can control where the search is applied in the SfTreeGrid using the [SearchController.SearchScope](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSearchController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSearchController_SearchScope) property. By default SearchScope value set as Both. ->>>>>>> hotfix/hotfix-v34.1.29 * `Both` – Search will be applied to both RootNodes and ChildNodes in the SfTreeGrid. From f4b93fd0b8e1b6011305c95dad1937bae8e8876e Mon Sep 17 00:00:00 2001 From: DhanarajRajendran Date: Thu, 9 Jul 2026 14:05:55 +0530 Subject: [PATCH 07/15] Done comprehensive User guide document update. --- wpf/Barcode/Barcode-Customization.md | 26 +- wpf/Barcode/Getting-Started.md | 35 ++- wpf/Barcode/Overview.md | 10 +- wpf/Barcode/Supported-Barcode-types.md | 8 +- wpf/Barcode/Symbology-Settings.md | 60 ++--- wpf/Bullet-Graph/Caption.md | 28 +-- wpf/Bullet-Graph/Flow-Direction.md | 110 ++++----- wpf/Bullet-Graph/Getting-Started.md | 230 +++++++++--------- wpf/Bullet-Graph/Key-features.md | 40 +-- wpf/Bullet-Graph/Labels.md | 6 +- wpf/Bullet-Graph/Measures.md | 14 +- wpf/Bullet-Graph/Orientation.md | 4 +- wpf/Bullet-Graph/Overview.md | 10 +- wpf/Bullet-Graph/Quantitative-scale.md | 4 +- wpf/Bullet-Graph/Ranges.md | 10 +- wpf/Bullet-Graph/Ticks.md | 40 ++- wpf/Bullet-Graph/Tooltip.md | 14 +- wpf/Digital-Gauge/Digital-Characters.md | 14 +- wpf/Digital-Gauge/Getting-Started.md | 24 +- wpf/Digital-Gauge/Key-features.md | 22 +- wpf/Digital-Gauge/Overview.md | 4 +- wpf/Digital-Gauge/Settings.md | 18 +- .../Transformation-of-Characters.md | 6 +- wpf/Linear-Gauge/Getting-Started.md | 30 +-- wpf/Linear-Gauge/Labels.md | 18 +- wpf/Linear-Gauge/Orientation.md | 6 +- wpf/Linear-Gauge/Overview.md | 8 +- wpf/Linear-Gauge/Pointers.md | 12 +- wpf/Linear-Gauge/Ranges.md | 16 +- wpf/Linear-Gauge/Scale.md | 24 +- wpf/Linear-Gauge/Ticks.md | 8 +- wpf/Radial-Gauge/Annotations.md | 8 +- wpf/Radial-Gauge/Getting-Started.md | 14 +- wpf/Radial-Gauge/Header.md | 23 +- wpf/Radial-Gauge/Labels.md | 62 ++--- wpf/Radial-Gauge/Overview.md | 12 +- wpf/Radial-Gauge/Pointers.md | 108 ++++---- wpf/Radial-Gauge/Ranges.md | 44 ++-- wpf/Radial-Gauge/Rim.md | 24 +- wpf/Radial-Gauge/Scales.md | 20 +- wpf/Radial-Gauge/Ticks.md | 42 ++-- 41 files changed, 609 insertions(+), 607 deletions(-) diff --git a/wpf/Barcode/Barcode-Customization.md b/wpf/Barcode/Barcode-Customization.md index aa68908299..cb834ec4d3 100644 --- a/wpf/Barcode/Barcode-Customization.md +++ b/wpf/Barcode/Barcode-Customization.md @@ -1,7 +1,7 @@ --- layout: post title: Barcode Customization in WPF Barcode control | Syncfusion -description: Learn here all about Barcode Customization support in Syncfusion WPF Barcode (SfBarcode) control and more. +description: Learn about Barcode Customization support in Syncfusion WPF Barcode (SfBarcode) control. platform: wpf control: SfBarcode documentation: ug @@ -9,26 +9,32 @@ documentation: ug # Barcode Customization in WPF Barcode (SfBarcode) -The color of the barcode can be customized by modifying the DarkBarBrush and LightBarBrush properties of the barcode control. +## Overview -{% highlight html %} +The color of the barcode can be customized by modifying the `DarkBarBrush` and `LightBarBrush` properties of the barcode control. The `DarkBarBrush` represents the color of the dark bar (Black color usually) and the `LightBarBrush` represents the color of the gap between two adjacent dark bars (White color usually). - +## Customizing the barcode colors -{% endhighlight %} +The following code example shows how to set the dark and light bar colors. +{% highlight xml %} -The DarkBarBrush represents the color of the dark bar (Black color usually) and the LightBarBrush represents the color of the gap between two adjacent black bars (White color usually). + + +{% endhighlight %} + +The following images illustrate the barcode rendered with different color combinations. ![WPF-Barcode-Red-Color-Combination](Barcode-Customization_images/wpf-barcode-red-color-combination.png) -Barcode color combinations- Red +Barcode color combinations – Red {:.caption} - ![WPF-Barcode-Blue-Color-Combination](Barcode-Customization_images/wpf-barcode-blue-color-combination.png) -Barcode color combinations- Blue +Barcode color combinations – Blue {:.caption} -N> The DarkBarBrush and LightBarBrush customizations are applicable only for one dimensional barcodes. In order for a barcode symbol to be recognized by a scanner, there must be an adequate contrast between the dark bars and the light spaces and not all the barcode scanners have support for colored barcodes. +## Limitations + +N> The `DarkBarBrush` and `LightBarBrush` customizations are applicable only for one-dimensional barcodes. For a barcode symbol to be recognized by a scanner, there must be adequate contrast between the dark bars and the light spaces. Additionally, not all barcode scanners support colored barcodes. diff --git a/wpf/Barcode/Getting-Started.md b/wpf/Barcode/Getting-Started.md index 9f9705c99b..9da0cb25fb 100644 --- a/wpf/Barcode/Getting-Started.md +++ b/wpf/Barcode/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with WPF Barcode control | Syncfusion -description: Learn here about getting started with Syncfusion WPF Barcode (SfBarcode) control, its elements and more details. +description: Learn about getting started with the Syncfusion WPF Barcode (SfBarcode) control and its elements. platform: wpf control: SfBarcode documentation: ug @@ -9,30 +9,25 @@ documentation: ug # Getting Started with WPF Barcode (SfBarcode) -## Add Barcode control to an Application +## Add the Barcode control to an application -The following assembly reference is required for deploying Barcode. +The following assembly reference is required for deploying the Barcode control. -{% highlight c# %} +* **Namespace**: `Syncfusion.UI.Xaml.Controls.Barcode` +* **Assembly**: `Syncfusion.SfBarcode.WPF` -Namespace: Syncfusion.UI.Xaml.Controls.Barcode +To create the `SfBarcode` control in Visual Studio: -Assembly: Syncfusion.SfBarcode.WPF +1. Create a new WPF project. -{% endhighlight %} +2. Drag the `SfBarcode` control from the **Toolbox** window to the Design view to create an instance of the control. -To create the SfBarcode control in Visual Studio: +![WPF Barcode Control](Getting-Started_images/wpf-barcode-control.png) -1. Create a new WPF project. +The SfBarcode control after being dragged to the Design view +{:.caption} -2. Drag the SfBarcode control from the Toolbox window to the Design View. An instance of the SfBarcode control is created in the Design view. - - ![WPF Barcode Control](Getting-Started_images/wpf-barcode-control.png) - - SfBarcode Control after Dragging to Design View - {:.caption} - -The following code example shows how to create the Barcode control from XAML: +The following code example shows how to create the Barcode control using XAML: {% highlight xaml %} @@ -58,14 +53,14 @@ The following code example shows how to create the Barcode control from XAML: ## Text -The text to be encoded can be set using the Text property. By default, this original text will be displayed at the bottom of the bar code. The location of the text can be toggled between top and bottom using TextLocation property. The horizontal alignment of the text can be set using TextAlignment. The text brush and other various font customization can also be done using the built-in font properties. Optionally, the user can hide the barcode text by setting the DisplayText property to false. +The text to be encoded can be set using the `Text` property. By default, this text is displayed at the bottom of the barcode. The location of the text can be toggled between **Top** and **Bottom** using the `TextLocation` property, and its horizontal alignment can be set using the `TextAlignment` property. The text color and font can also be customized using the built-in font properties. To hide the barcode text, set the `DisplayText` property to `false`. {% highlight xaml %} - + {% endhighlight %} ## Rotation -Barcode control can be rotated to save space by using the Rotation property. The barcode can be rotated to 90, 180 and 270 degrees. \ No newline at end of file +The Barcode control can be rotated to save space using the `Rotation` property. The barcode can be rotated to 90, 180, and 270 degrees. \ No newline at end of file diff --git a/wpf/Barcode/Overview.md b/wpf/Barcode/Overview.md index 0f27b6d4d4..f9d2a651bc 100644 --- a/wpf/Barcode/Overview.md +++ b/wpf/Barcode/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About WPF Barcode control | Syncfusion -description: Learn here all about introduction of Syncfusion WPF Barcode (SfBarcode) control, its elements and more details. +description: Learn about the introduction to the Syncfusion WPF Barcode (SfBarcode) control, its elements, and more details. platform: wpf control: SfBarcode documentation: ug @@ -9,21 +9,21 @@ documentation: ug # WPF Barcode (SfBarcode) Overview -The Barcode control helps rendering bar codes in desktop (WPF) application. The control can be merged with into any desktop application and easy to encode text using the supported symbol types. The basic structure of a bar code consists of a leading and trailing quiet zone, a start pattern, one or more data characters, optionally one or two check characters, and a stop pattern. +The Barcode control helps render barcodes in desktop (WPF) applications. The control can be merged into any desktop application and makes it easy to encode text using the supported symbol types. The basic structure of a barcode consists of a leading and trailing quiet zone, a start pattern, one or more data characters, optionally one or two check characters, and a stop pattern. ![WPF One Dimensional Barcode](Overview_images/wpf-one-dimensional-barcode.png) -Barcode control rendering 1D bar code +Barcode control rendering a 1D barcode {:.caption} ![WPF Two Dimensional Barcode](Overview_images/wpf-two-dimensional-barcode.png) -Barcode control rendering 2D bar code +Barcode control rendering a 2D barcode {:.caption} -## Structure of the Control +## Structure of the control ![WPF Barcode Structure](Overview_images/wpf-barcode-structure.png) diff --git a/wpf/Barcode/Supported-Barcode-types.md b/wpf/Barcode/Supported-Barcode-types.md index 32da796d8e..906f249e62 100644 --- a/wpf/Barcode/Supported-Barcode-types.md +++ b/wpf/Barcode/Supported-Barcode-types.md @@ -1,7 +1,7 @@ --- layout: post title: Supported Barcode types in WPF Barcode control | Syncfusion -description: Learn here all about Supported Barcode types support in Syncfusion WPF Barcode (SfBarcode) control and more. +description: Learn about the supported Barcode types in the Syncfusion WPF Barcode (SfBarcode) control. platform: wpf control: SfBarcode documentation: ug @@ -9,12 +9,12 @@ documentation: ug # Supported Barcode types in WPF Barcode (SfBarcode) -The following table contains the supported types and associated valid characters. +The following table lists the supported barcode types and their associated valid characters. - + @@ -82,7 +82,7 @@ variable
SymbolEnum ValueEnum value Supported characters Length
{{'[Code 128B](https://en.wikipedia.org/wiki/Code_128)'| markdownify }} Code128B -[0-9]; [A-Z]; [a-z]; [SPACE (0x20) ! " # $ % & ' ( ) * + , - . / :; < = > ? @ [ / ]^ _ ` { | } ~ DEL (•) ] +[0-9]; [A-Z]; [a-z]; [SPACE (0x20) ! " # $ % & ' ( ) * + , - . / : < = > ? @ [ / ]^ _ ` { | } ~ DEL (•) ] variable
diff --git a/wpf/Barcode/Symbology-Settings.md b/wpf/Barcode/Symbology-Settings.md index 9ff96d58fe..46726d8cfd 100644 --- a/wpf/Barcode/Symbology-Settings.md +++ b/wpf/Barcode/Symbology-Settings.md @@ -1,7 +1,7 @@ --- layout: post title: Symbology Settings in WPF Barcode control | Syncfusion -description: Learn here all about Symbology Settings support in Syncfusion WPF Barcode (SfBarcode) control and more. +description: Learn about the Symbology Settings support in the Syncfusion WPF Barcode (SfBarcode) control. platform: wpf control: SfBarcode documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Symbology Settings in WPF Barcode (SfBarcode) -Each Barcode symbol can be associated with optional settings that may affect that specific bar code. The code sample below shows the settings of a code39 Barcode. +Each Barcode symbol can be associated with optional settings that may affect that specific barcode. The code sample below shows the settings of a Code39 barcode. -{% highlight html %} +{% highlight xaml %} @@ -19,13 +19,13 @@ Each Barcode symbol can be associated with optional settings that may affect tha -{% endhighlight %} +{% endhighlight %} ## 1D Barcode settings -The one dimensional barcodes have some of the settings in common, such as BarHeight which modifies the height of the bars and NarrowBarWidth which modifies the width ratio of the wide and narrow bars. +The one-dimensional barcodes share some common settings, such as `BarHeight`, which modifies the height of the bars, and `NarrowBarWidth`, which modifies the width ratio of the wide and narrow bars. -{% highlight html %} +{% highlight xaml %} @@ -34,13 +34,13 @@ The one dimensional barcodes have some of the settings in common, such as BarHei -{% endhighlight %} +{% endhighlight %} -The one dimensional barcodes also has the error detection settings. The EnableCheckDigit property enables the redundancy check using a check digit, the decimal equivalent of a binary parity bit. It consists of a single digit computed from the other digits in the message. The check digit can be shown in the barcode or kept hidden by using the ShowCheckDigit property. +The one-dimensional barcodes also have error detection settings. The `EnableCheckDigit` property enables the redundancy check using a check digit, the decimal equivalent of a binary parity bit. It consists of a single digit computed from the other digits in the message. The check digit can be shown in the barcode or kept hidden by using the `ShowCheckDigit` property. -The EncodeStartStopSymbols property adds Start and Stop symbols to signal a bar code reader that a bar code has been scanned. +The `EncodeStartStopSymbols` property adds Start and Stop symbols to signal a barcode reader that a barcode has been scanned. -{% highlight html %} +{% highlight xaml %} @@ -52,25 +52,25 @@ The EncodeStartStopSymbols property adds Start and Stop symbols to signal a bar ## 2D Barcode Settings -The two dimensional barcodes have a common XDimension property which modifies the block size of a two dimensional barcode. +The two-dimensional barcodes share a common `XDimension` property, which modifies the block size of a two-dimensional barcode. ### DataMatrix Barcode settings -The DataMatrix barcode settings has the properties to modify the encoding and size of the DataMatrix barcode. +The DataMatrix barcode settings include properties to modify the encoding and size of the DataMatrix barcode. -{% highlight html %} +{% highlight xaml %} - + -{% endhighlight %} +{% endhighlight %} ### Encoding -The encoding of the DataMatrix barcode can be modified using the ‘Encoding’ property. The DataMatrixEncoding enumeration has the following four encoding schemes. +The encoding of the DataMatrix barcode can be modified using the `Encoding` property. The `DataMatrixEncoding` enumeration has the following four encoding schemes. * ASCII * ASCIINumeric @@ -79,9 +79,9 @@ The encoding of the DataMatrix barcode can be modified using the ‘Encoding’ ### Size -The DataMatrix Barcode settings allow the user to specify the size of the barcode from a set of predefined sizes available in the DataMatrixSize enumeration. +The DataMatrix barcode settings allow the user to specify the size of the barcode from a set of predefined sizes available in the `DataMatrixSize` enumeration. -Data Matrix size Table +Data Matrix size table @@ -217,28 +217,28 @@ Rectangular matrix with 16 rows and 48 columns. ### QRBarcode settings -The QRBarcode settings has properties to modify the version, error correction level and Input mode of the QRBarcode. +The QRBarcode settings include properties to modify the version, error correction level, and input mode of the QRBarcode. -{% highlight html %} +{% highlight xaml %} - + -{% endhighlight %} +{% endhighlight %} ## Version -The QR Barcode uses version from 1 to 40.Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules and so on increasing in steps of 4 modules per side up to Version 40 which measures 177 modules x 177 modules. Each version has its own capacity. By default the QR Version is Auto, which will automatically set the version according to the input text length. +The QR Barcode uses versions from 1 to 40. Version 1 measures 21 modules × 21 modules, Version 2 measures 25 modules × 25 modules, and so on, increasing in steps of 4 modules per side up to Version 40, which measures 177 modules × 177 modules. Each version has its own capacity. By default, the QR Version is `Auto`, which automatically sets the version according to the input text length. ## Error correction level -The QR Barcode employs error correction to generate a series of error correction codewords which are added to the data code word sequence in order to enable the symbol to withstand damage without loss of data. There are four user–selectable levels of error correction, as shown in the table, offering the capability of recovery from the following amounts of damage. By default the Error correction level is Low. +The QR Barcode employs error correction to generate a series of error correction codewords that are added to the data codeword sequence to enable the symbol to withstand damage without loss of data. There are four user-selectable levels of error correction, as shown in the table, offering the capability of recovery from the following amounts of damage. By default, the error correction level is **Low**. -Error Correction Level Table +Error correction level table
@@ -265,23 +265,23 @@ H +Customizes the label style using the LabelBarStyle property. This property can be applied to the {{'[`HigherLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_HigherLevelBarStyle)'| markdownify }} or {{'[`LowerLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_LowerLevelBarStyle)'| markdownify }}.
## Input mode -There are three modes for the input as defined in the table. Each mode supports the specific set of Input characters. User may select the most suitable input mode. By default the Input mode is Binary Mode. +There are three input modes, as defined in the table. Each mode supports a specific set of input characters. The user may select the most suitable input mode. By default, the input mode is **Binary Mode**. -Input Mode Table +Input mode table +0, 1, 2, 3, 4, 5, 6, 7, 8, 9 +0–9, A–Z (upper-case only), space, $, %, *, +, -, ., /, : +Gets or sets the maximum height and width of the bubble. +Gets or sets the border thickness of the bubbles. +Gets or sets colors to the bubble shape. ## Adding Bubbles to a Map -To add bubbles to a map, the bubble marker setting has to be added to the shape file layer. Set the [`AutoFillColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) as true and set the [`Fill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_Fill) property. Create the Model and ViewModel as illustrated in the [`Data Binding`](https://help.syncfusion.com/wpf/maps/custom-data-binding) topic and add the following code. +To add bubbles to a map, the bubble marker setting has to be added to the shape file layer. Set the [`AutoFillColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) to true and set the [`Fill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_Fill) property. Create the Model and ViewModel as illustrated in the [`Data Binding`](https://help.syncfusion.com/wpf/maps/custom-data-binding) topic and add the following code. Also set the [`MaxSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MaxSize), [`MinSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MinSize), and [`ValuePath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) properties as illustrated in the following code example. @@ -233,7 +233,7 @@ Gets or sets the template to customize the bubble. {% endhighlight %} -{% highlight C# %} +{% highlight c# %} ViewModel viewModel = new ViewModel(); @@ -351,7 +351,7 @@ The fill color of a particular bubble fill can be determined by its under-bound {% endhighlight %} -{% highlight C# %} +{% highlight c# %} RangeColorMapping rangeColorMapping = new RangeColorMapping(); rangeColorMapping.From = 314623001; @@ -395,9 +395,10 @@ The fill color of a particular bubble fill can be determined by its under-bound When the under-bound object value is 22789702, the fill color of the corresponding bubble is set to `#7FEB737C`. As mentioned earlier, the under-bound value of the bubble is set using the [`ValuePath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) in the BubbleMarkerSetting. -When the under-bound value is under any of the given sorted range or above the sorted range, then the fill is set as `Black`. +When the under-bound value is under any of the given sorted ranges or above the sorted range, the fill is set to `Black`. + +[`AutoFillColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) must be set to `false` to enable range color mapping. -[`AutoFillColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) must be set as `false` to enable range color mapping. ![RangeColorMapping](Bubbles_images/Bubbles_img3.png) N> You can also explore our [WPF Map example](https://github.com/syncfusion/wpf-demos/tree/master/map) to know how to render and configure the map. \ No newline at end of file diff --git a/wpf/Maps/Commands-for-Zooming-and-Panning.md b/wpf/Maps/Commands-for-Zooming-and-Panning.md index 208047c9b3..1addee66fe 100644 --- a/wpf/Maps/Commands-for-Zooming-and-Panning.md +++ b/wpf/Maps/Commands-for-Zooming-and-Panning.md @@ -19,11 +19,11 @@ The [WPF Map](https://www.syncfusion.com/wpf-controls/map) control contains the ## ZoomIn Command -[`ZoomIn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomInCommand) command zooms in the map. +The [`ZoomIn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomInCommand) command zooms in the map. ## ZoomOut Command -[`ZoomOut`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomOutCommand) command zooms out the map. +The [`ZoomOut`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomOutCommand) command zooms out the map. ## Pan Command @@ -59,17 +59,17 @@ The [`PanResetCommand`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ma - +Gets or sets the margin value for the X-axis. +Gets or sets the margin value for the Y-axis.
-Input Mode +Input mode Possible characters
Numeric Mode -0,1,2,3,4,5,6,7,8,9
Alphanumeric Mode -0–9, A–Z (upper-case only), space, $, %, *, +, -,., /, :
Binary Mode diff --git a/wpf/Bullet-Graph/Caption.md b/wpf/Bullet-Graph/Caption.md index f104216533..d82b87258a 100644 --- a/wpf/Bullet-Graph/Caption.md +++ b/wpf/Bullet-Graph/Caption.md @@ -1,7 +1,7 @@ --- layout: post title: Caption in WPF Bullet Graph control | Syncfusion -description: Learn here all about Caption support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Caption support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Caption in WPF Bullet Graph (SfBulletGraph) -The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) for a bullet graph is used to specify a unique label describing the value represented in the bullet graph. +The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) property of the bullet graph is used to specify a unique label describing the value represented in the bullet graph. {% tabs %} {% highlight xaml %} - - + + @@ -23,20 +23,20 @@ The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGrap FontSize="13" HorizontalAlignment="Center"/> - + {% endhighlight %} {% highlight c# %} - SfBulletGraph bulletgraph = new SfBulletGraph(); - TextBlock textBlock = new TextBlock() { Text = "Revenue YTD" }; - TextBlock textBlock1 = new TextBlock() { Text = "$ in Thousands" }; - StackPanel stackPanel = new StackPanel(); - stackPanel.Children.Add(textBlock); - stackPanel.Children.Add(textBlock1); - bulletgraph.Caption = stackPanel; - grid.Children.Add(bulletgraph); + SfBulletGraph bulletgraph = new SfBulletGraph(); + TextBlock textBlock = new TextBlock() { Text = "Revenue YTD" }; + TextBlock textBlock1 = new TextBlock() { Text = "$ in Thousands" }; + StackPanel stackPanel = new StackPanel(); + stackPanel.Children.Add(textBlock); + stackPanel.Children.Add(textBlock1); + bulletgraph.Caption = stackPanel; + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} @@ -45,7 +45,7 @@ The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGrap ## Caption Position -The caption in the bullet graph can be placed in the start or end of the quantitative scale by choosing from one of the two options available in the [`CaptionPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_CaptionPosition) property. They are: +The caption in the bullet graph can be placed at the start or end of the quantitative scale using the [`CaptionPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_CaptionPosition) property, which supports the following options: 1. Near (Default) 2. Far diff --git a/wpf/Bullet-Graph/Flow-Direction.md b/wpf/Bullet-Graph/Flow-Direction.md index cae96af7ad..02198ec0c9 100644 --- a/wpf/Bullet-Graph/Flow-Direction.md +++ b/wpf/Bullet-Graph/Flow-Direction.md @@ -1,7 +1,7 @@ --- layout: post title: Flow Direction in WPF Bullet Graph control | Syncfusion -description: Learn here all about Flow Direction support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Flow Direction support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,51 +9,50 @@ documentation: ug # Flow Direction in WPF Bullet Graph (SfBulletGraph) -By default the flow direction of SfBulletGraph is Left to Right. It can be customized by using **FlowDirection** property respectively. +By default, the flow direction of `SfBulletGraph` is Left to Right. It can be customized by using the **FlowDirection** property. ->Note: When the orientation of [`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) is **Horizontal**, the default flow direction will be left to right and when the orientation of is **Vertical**, the default flow direction will be top to bottom. +>**Note:** When the orientation of [`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) is **Horizontal**, the default flow direction is left to right, and when the orientation is **Vertical**, the default flow direction is top to bottom. {% tabs %} {% highlight xaml %} - - + + - - + + {% endhighlight %} {% highlight c# %} SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.Interval = 2; - bulletgraph.FlowDirection = FlowDirection.LeftToRight; - bulletgraph.Orientation = Orientation.Vertical; - QualitativeRange range1 = new QualitativeRange(); - range1.RangeEnd = 3; - range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); - QualitativeRange range2 = new QualitativeRange(); - range2.RangeEnd = 7; - range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); - - QualitativeRange range3 = new QualitativeRange(); - range3.RangeEnd = 10; - range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); - - bulletgraph.QualitativeRanges.Add(range1); - bulletgraph.QualitativeRanges.Add(range2); - bulletgraph.QualitativeRanges.Add(range3); - grid.Children.Add(bulletgraph); + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.Interval = 2; + bulletgraph.FlowDirection = FlowDirection.LeftToRight; + bulletgraph.Orientation = Orientation.Horizontal; + QualitativeRange range1 = new QualitativeRange(); + range1.RangeEnd = 3; + range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); + QualitativeRange range2 = new QualitativeRange(); + range2.RangeEnd = 7; + range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); + + QualitativeRange range3 = new QualitativeRange(); + range3.RangeEnd = 10; + range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); + + bulletgraph.QualitativeRanges.Add(range1); + bulletgraph.QualitativeRanges.Add(range2); + bulletgraph.QualitativeRanges.Add(range3); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} -Refer below screenshot for flow direction `LeftToRight`. +Refer to the following screenshot for flow direction `LeftToRight`. ![Flow-Direction_images1](Flow-Direction_images/Flow-Direction_img1.jpeg) ![Flow-Direction_images2](Flow-Direction_images/Flow-Direction_img2.jpeg) @@ -63,46 +62,45 @@ Refer below screenshot for flow direction `LeftToRight`. {% highlight xaml %} - - + + - - + + {% endhighlight %} {% highlight c# %} - SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.Interval = 2; - bulletgraph.FlowDirection = FlowDirection.RightToLeft; - bulletgraph.Orientation = Orientation.Vertical; - QualitativeRange range1 = new QualitativeRange(); - range1.RangeEnd = 3; - range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); - QualitativeRange range2 = new QualitativeRange(); - range2.RangeEnd = 7; - range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); - - QualitativeRange range3 = new QualitativeRange(); - range3.RangeEnd = 10; - range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); - - bulletgraph.QualitativeRanges.Add(range1); - bulletgraph.QualitativeRanges.Add(range2); - bulletgraph.QualitativeRanges.Add(range3); - grid.Children.Add(bulletgraph); + SfBulletGraph bulletgraph = new SfBulletGraph(); + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.Interval = 2; + bulletgraph.FlowDirection = FlowDirection.RightToLeft; + bulletgraph.Orientation = Orientation.Horizontal; + QualitativeRange range1 = new QualitativeRange(); + range1.RangeEnd = 3; + range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); + QualitativeRange range2 = new QualitativeRange(); + range2.RangeEnd = 7; + range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); + + QualitativeRange range3 = new QualitativeRange(); + range3.RangeEnd = 10; + range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); + + bulletgraph.QualitativeRanges.Add(range1); + bulletgraph.QualitativeRanges.Add(range2); + bulletgraph.QualitativeRanges.Add(range3); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} -Refer the following screenshot for flow direction `RightToLeft`. +Refer to the following screenshot for flow direction `RightToLeft`. ![Flow-Direction_images2](Flow-Direction_images/RTL_Vertical.png) ![Flow-Direction_images1](Flow-Direction_images/RTL_Horizontal.png) diff --git a/wpf/Bullet-Graph/Getting-Started.md b/wpf/Bullet-Graph/Getting-Started.md index f1e2303a4a..1298d2879d 100644 --- a/wpf/Bullet-Graph/Getting-Started.md +++ b/wpf/Bullet-Graph/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with WPF Bullet Graph control | Syncfusion -description: Learn here about getting started with Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements and more details. +description: Learn about getting started with the Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements, and more details. platform: wpf control: SfBulletGraph documentation: ug @@ -9,44 +9,43 @@ documentation: ug # Getting Started with WPF Bullet Graph (SfBulletGraph) -This section explains you the steps required to configure the [`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) and also explains the steps to add basic elements of `SfBulletGraph` using the various API’s available within it. +This section explains the steps required to configure the [`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) and to add the basic elements of `SfBulletGraph` using the various APIs available within it. ## Configuring SfBulletGraph using Syncfusion Reference Manager -Syncfusion Reference Manager is used to add Syncfusion Tools. +The Syncfusion Reference Manager is used to add Syncfusion tools. -Follow these steps to add `SfBulletGraph` Control using the Syncfusion Reference Manager. +Follow these steps to add the `SfBulletGraph` control using the Syncfusion Reference Manager. Create a simple WPF application using Visual Studio. ![Create new WPF Project in Visual Studio](Getting-Started_images/Getting-Started_img1.jpeg) -Right Click on the Project and select Syncfusion Reference Manager. +Right-click the project and select the Syncfusion Reference Manager. ![selecting Syncfusion Reference Manager](Getting-Started_images/Getting-Started_img2.jpeg) -The Syncfusion Reference Manager Wizard will be opened as shown in the figure below. +The Syncfusion Reference Manager wizard opens as shown in the figure below. ![Opening Syncfusion Reference Manager Wizard](Getting-Started_images/Getting-Started_img3.jpeg) -Search for `SfBulletGraph` using SearchBox and select the `SfBulletGraph` Control. Click `Done` to add selected SfBulletGraph control. +Search for `SfBulletGraph` using the search box and select the `SfBulletGraph` control. Click `Done` to add the selected SfBulletGraph control. ![Selecting SfBulletGraph Control in Syncfusion Reference Manager](Getting-Started_images/Getting-Started_img4.jpeg) -The `SfBulletGraph` assemblies will be automatically added to the project after clicking `OK`. +The `SfBulletGraph` assemblies will be automatically added to the project after clicking `Done`. ![Adding SfBulletGraph assemblies in WPF application](Getting-Started_images/Getting-Started_img5.jpeg) ![Added SfBulletGraph assemblies in WPF application](Getting-Started_images/Getting-Started_img6.jpeg) -Create a namespace reference to the SfBulletGraph control using Syncfusion’s global namespace reference **schemas.Syncfusion.com** or the SfBulletGraph control’s namespace reference using **Syncfusion.UI.Xaml.BulletGraph** available in the **Syncfusion.SfBulletGraph.WPF** assembly. +Create a namespace reference to the SfBulletGraph control using Syncfusion's global namespace reference **schemas.Syncfusion.com** or the SfBulletGraph control's namespace reference using **Syncfusion.UI.Xaml.BulletGraph** available in the **Syncfusion.SfBulletGraph.WPF** assembly. {% highlight xaml %} xmlns:bulletgraph="http://schemas.syncfusion.com/wpf" (or) - xmlns:bulletgraph ="clr- - namespace:Syncfusion.UI.Xaml.BulletGraph;assembly=Syncfusion.SfBulletGraph. WPF" + xmlns:bulletgraph ="clr-namespace:Syncfusion.UI.Xaml.BulletGraph;assembly=Syncfusion.SfBulletGraph.WPF" {% endhighlight %} @@ -79,7 +78,7 @@ The SfBulletGraph control will be created as shown in the figure below. ![Displaying SfBulletGraph control](Getting-Started_images/Getting-Started_img7.jpg) ->**Note:- The Syncfusion Reference Manager is available in versions 11.3.0.30 and later. It supports referencing assemblies from version 10.4.0.71 version to the current version and Syncfusion Reference Manager can be used only in Visual Studio 2015.** +>**Note:** The Syncfusion Reference Manager is available in versions 11.3.0.30 and later. It supports referencing assemblies from version 10.4.0.71 to the current version, and the Syncfusion Reference Manager can be used only in Visual Studio 2015. ## Configuring SfBulletGraph @@ -89,14 +88,13 @@ The SfBulletGraph control will be created as shown in the figure below. **Namespace**: Syncfusion.UI.Xaml.BulletGraph -Create a namespace reference to the SfBulletGraph control using Syncfusion’s global namespace reference **schemas.Syncfusion.com** or the SfBulletGraph control’s namespace reference using **Syncfusion.UI.Xaml.BulletGraph** available in the **Syncfusion.SfBulletGraph.WPF** assembly. +Create a namespace reference to the SfBulletGraph control using Syncfusion's global namespace reference **schemas.Syncfusion.com** or the SfBulletGraph control's namespace reference using **Syncfusion.UI.Xaml.BulletGraph** available in the **Syncfusion.SfBulletGraph.WPF** assembly. {% highlight xaml %} xmlns:bulletgraph="http://schemas.syncfusion.com/wpf" (or) - xmlns:bulletgraph ="clr- - namespace:Syncfusion.UI.Xaml.BulletGraph;assembly=Syncfusion.SfBulletGraph. WPF" + xmlns:bulletgraph ="clr-namespace:Syncfusion.UI.Xaml.BulletGraph;assembly=Syncfusion.SfBulletGraph.WPF" {% endhighlight %} @@ -110,46 +108,46 @@ Create a namespace reference to the SfBulletGraph control using Syncfusion’s g {% highlight c# %} SfBulletGraph bulletgraph = new SfBulletGraph(); - this.Grid.Children.Add(bulletgraph); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} ![Displaying SfBulletGraph control](Getting-Started_images/Getting-Started_img7.jpg) -As you can see now in the above image, the SfBulletGraph displays its default elements. To customize its element, you have to add respective elements to SfBulletGraph, following section contains the steps to add the basic elements to SfBulletGraph. +As shown in the above image, the SfBulletGraph displays its default elements. To customize the elements, add the respective elements to SfBulletGraph. The following section contains the steps to add the basic elements to SfBulletGraph. ## Adding Caption -You can assign a caption to bullet graph by making use of [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) property and also you can position it either near or far using the [`CaptionPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_CaptionPosition) property. +You can assign a caption to the bullet graph by using the [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) property, and you can position it either near or far using the [`CaptionPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_CaptionPosition) property. {% tabs %} {% highlight xaml %} - - - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.CaptionPosition = BulletGraphCaptionPosition.Far; - TextBlock textBlock = new TextBlock() { Text = "Revenue YTD" }; - TextBlock textBlock1 = new TextBlock() { Text = "$ in Thousands" }; - StackPanel stackPanel = new StackPanel(); - stackPanel.Children.Add(textBlock); - stackPanel.Children.Add(textBlock1); - bulletgraph.Caption = stackPanel; - grid.Children.Add(bulletgraph); + bulletgraph.CaptionPosition = BulletGraphCaptionPosition.Far; + TextBlock textBlock = new TextBlock() { Text = "Revenue YTD" }; + TextBlock textBlock1 = new TextBlock() { Text = "$ in Thousands" }; + StackPanel stackPanel = new StackPanel(); + stackPanel.Children.Add(textBlock); + stackPanel.Children.Add(textBlock1); + bulletgraph.Caption = stackPanel; + grid.Children.Add(bulletgraph); {% endhighlight %} @@ -157,9 +155,9 @@ You can assign a caption to bullet graph by making use of [`Caption`](https://he ![Adding Caption to SfBulletGraph control](Caption_images/CaptionPosition.png) -## Configuring Ticks and Labels +## Configuring Ticks and Labels -You can configure Ticks and Labels of Quantitative Scale by making use of following API’s available in SfBulletGraph. +You can configure the ticks and labels of the quantitative scale by using the following APIs available in SfBulletGraph: They are: @@ -180,45 +178,45 @@ They are: ComparativeMeasure="7" FeaturedMeasure="5" FeaturedMeasureBarStroke="Black" MajorTickStroke="Red" MinorTickStroke="Green" MinorTicksPerInterval="3" MajorTickSize="15" MinorTickSize="10"> - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.Interval = 2; - bulletgraph.FeaturedMeasure = 5; - bulletgraph.ComparativeMeasure = 7; - bulletgraph.MajorTickStroke = new SolidColorBrush(Colors.Red); - bulletgraph.MinorTickStroke = new SolidColorBrush(Colors.Green); - bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); - bulletgraph.MinorTicksPerInterval = 3; - bulletgraph.MinorTickSize = 10; - bulletgraph.MajorTickSize = 15; - bulletgraph.Orientation = Orientation.Horizontal; - QualitativeRange range1 = new QualitativeRange(); - range1.RangeEnd = 4.5; - range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); - QualitativeRange range2 = new QualitativeRange(); - range2.RangeEnd = 10; - range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); - - QualitativeRange range3 = new QualitativeRange(); - range3.RangeEnd = 7.5; - range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); - - bulletgraph.QualitativeRanges.Add(range1); - bulletgraph.QualitativeRanges.Add(range2); - bulletgraph.QualitativeRanges.Add(range3); - grid.Children.Add(bulletgraph); + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.Interval = 2; + bulletgraph.FeaturedMeasure = 5; + bulletgraph.ComparativeMeasure = 7; + bulletgraph.MajorTickStroke = new SolidColorBrush(Colors.Red); + bulletgraph.MinorTickStroke = new SolidColorBrush(Colors.Green); + bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); + bulletgraph.MinorTicksPerInterval = 3; + bulletgraph.MinorTickSize = 10; + bulletgraph.MajorTickSize = 15; + bulletgraph.Orientation = Orientation.Horizontal; + QualitativeRange range1 = new QualitativeRange(); + range1.RangeEnd = 4.5; + range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); + QualitativeRange range2 = new QualitativeRange(); + range2.RangeEnd = 10; + range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); + + QualitativeRange range3 = new QualitativeRange(); + range3.RangeEnd = 7.5; + range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); + + bulletgraph.QualitativeRanges.Add(range1); + bulletgraph.QualitativeRanges.Add(range2); + bulletgraph.QualitativeRanges.Add(range3); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} @@ -233,60 +231,60 @@ You can add ranges to bullet graph by creating ranges collection using [`Qualita {% tabs %} {% highlight xaml %} - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.FeaturedMeasure = 5; - bulletgraph.ComparativeMeasure = 7; - bulletgraph.Interval = 2; - bulletgraph.MinorTickSize = 8; - bulletgraph.MinorTicksPerInterval = 3; - bulletgraph.QualitativeRangesSize = 30; - bulletgraph.QuantitativeScaleLength = 300; - bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); - bulletgraph.QualitativeRanges.Add(new QualitativeRange() - { - RangeEnd = 4.5, - RangeOpacity = 1, - RangeStroke = new SolidColorBrush(Colors.Red) - }); - bulletgraph.QualitativeRanges.Add(new QualitativeRange() - { - RangeEnd = 7.5, - RangeOpacity = 1, - RangeStroke = new SolidColorBrush(Colors.Yellow) - }); - bulletgraph.QualitativeRanges.Add(new QualitativeRange() - { - RangeEnd = 10, - RangeOpacity = 1, - RangeStroke = new SolidColorBrush(Colors.Green) - }); - grid.Children.Add(bulletgraph); + SfBulletGraph bulletgraph = new SfBulletGraph(); + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.FeaturedMeasure = 5; + bulletgraph.ComparativeMeasure = 7; + bulletgraph.Interval = 2; + bulletgraph.MinorTickSize = 8; + bulletgraph.MinorTicksPerInterval = 3; + bulletgraph.QualitativeRangesSize = 30; + bulletgraph.QuantitativeScaleLength = 300; + bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); + bulletgraph.QualitativeRanges.Add(new QualitativeRange() + { + RangeEnd = 4.5, + RangeOpacity = 1, + RangeStroke = new SolidColorBrush(Colors.Red) + }); + bulletgraph.QualitativeRanges.Add(new QualitativeRange() + { + RangeEnd = 7.5, + RangeOpacity = 1, + RangeStroke = new SolidColorBrush(Colors.Yellow) + }); + bulletgraph.QualitativeRanges.Add(new QualitativeRange() + { + RangeEnd = 10, + RangeOpacity = 1, + RangeStroke = new SolidColorBrush(Colors.Green) + }); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} diff --git a/wpf/Bullet-Graph/Key-features.md b/wpf/Bullet-Graph/Key-features.md index fbdcc97e62..3f948fcec1 100644 --- a/wpf/Bullet-Graph/Key-features.md +++ b/wpf/Bullet-Graph/Key-features.md @@ -1,7 +1,7 @@ --- layout: post title: Key Features in WPF Bullet Graph control | Syncfusion -description: Learn here all about Key Features support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Key Features in the Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,31 +9,31 @@ documentation: ug # Key Features in WPF Bullet Graph (SfBulletGraph) -[`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) is Composite UI element with following sub-parts: +[`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) is a composite UI element with the following sub-parts: * Ticks -* Label +* Labels * Caption -* Range -* Feature Measure +* Ranges +* Featured Measure ## Ticks -Ticks are scale indicator which is used to specify the values on quantitative scale. +Ticks are scale indicators used to specify the values on the quantitative scale. -## Label +## Labels A quantitative scale label specifies the numeric value according to the major ticks in the range of the scale. ## Caption -The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) for a bullet graph is used to specify a unique label describing the value represented in the bullet graph. +The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) property of the bullet graph is used to specify a unique label describing the value represented in the bullet graph. -## Range +## Ranges -A qualitative range is a visual element that ends at a specified RangeEnd at the beginning of the previous range’s RangeEnd. The qualitative ranges are arranged according to each [`RangeEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeEnd) value. +A qualitative range is a visual element that ends at a specified RangeEnd at the beginning of the previous range's RangeEnd. The qualitative ranges are arranged according to each [`RangeEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeEnd) value. -## Performance measure +## Performance measures ### Featured measure @@ -43,22 +43,22 @@ A qualitative range is a visual element that ends at a specified RangeEnd at the [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) should be less visually dominant than the featured measure. It should always be encoded as a short line that runs perpendicular to the orientation of the graph. A good example would be a target for YTD revenue. Whenever the featured measure intersects a comparative measure, the comparative measure should appear behind the featured measure. -## Bullet graphs type +## Bullet graph types -The Bullet Graph types can be differed by its orientation of the control, the control direction may be **horizontal** or **vertical**. +The bullet graph types can be differentiated by their orientation. The control direction may be **horizontal** or **vertical**. -### Easy to use ### +### Easy to use -SfBulletGraph is available in Visual Studio toolbox itself, you can easily drag and drop the control from toolbox. +SfBulletGraph is available in the Visual Studio toolbox itself, so you can easily drag and drop the control from the toolbox. -## Data Binding Support ## +## Data Binding Support -The control can be bound to your application data from a variety of data sources in the form of binding declaration or by setting its properties directly. +The control can be bound to your application data from a variety of data sources in the form of a binding declaration or by setting its properties directly. -## MVVM support ## +## MVVM support -The Model-View-ViewModel (MVVM) pattern is to be followed to get better control customization. +The Model-View-ViewModel (MVVM) pattern should be followed to get better control customization. -## SfBulletGraph Elements ## +## SfBulletGraph Elements ![Key-features_img1](Key-features_images/Key-features_img1.jpeg) diff --git a/wpf/Bullet-Graph/Labels.md b/wpf/Bullet-Graph/Labels.md index a7282ff9b2..af28fcec68 100644 --- a/wpf/Bullet-Graph/Labels.md +++ b/wpf/Bullet-Graph/Labels.md @@ -1,7 +1,7 @@ --- layout: post title: Labels in WPF Bullet Graph control | Syncfusion -description: Learn here all about Labels support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Labels support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -13,7 +13,7 @@ A quantitative scale label specifies the numeric value according to the major ti ## Customizing Labels -The labels can be positioned far away from the quantitative scale by using the [`LabelOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelOffset) property and the default value of this is 0. The foreground of the label is customized by setting [`LabelStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelStroke). By setting [`LabelSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelSize), the font size of the labels is modified. The label content can be formatted by using [`LabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelSize) property. +The labels can be positioned far away from the quantitative scale by using the [`LabelOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelOffset) property, and the default value is 0. The foreground of the label is customized by setting the [`LabelStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelStroke) property. By setting the [`LabelSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelSize) property, the font size of the labels is modified. The label content can be formatted by using the [`LabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelFormat) property. {% tabs %} {% highlight xaml %} @@ -46,7 +46,7 @@ The labels can be positioned far away from the quantitative scale by using the [ ## Label Position -The labels in the scale can be placed above or below the qualitative ranges by choosing the following options available in the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelPosition) property. +The labels in the scale can be placed above or below the qualitative ranges using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelPosition) property, which supports the following options: 1. Below (Default) 2. Above diff --git a/wpf/Bullet-Graph/Measures.md b/wpf/Bullet-Graph/Measures.md index 52934d4a70..f5585c6a6e 100644 --- a/wpf/Bullet-Graph/Measures.md +++ b/wpf/Bullet-Graph/Measures.md @@ -1,7 +1,7 @@ --- layout: post title: Measures in WPF Bullet Graph control | Syncfusion -description: Learn here all about Measures support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Measures support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -11,11 +11,11 @@ documentation: ug ## Featured Measure -Featured measure is used to display the primary data, or the current value of the data that you are measuring. It should usually be encoded as a bar. +The featured measure is used to display the primary data, or the current value of the data that you are measuring. It should usually be encoded as a bar. -### Customizing featured measure +### Customizing the featured measure -The value of the featured measure of the bullet graph is set by the [`FeaturedMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasure) property. By setting the [`FeaturedMeasureBarStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureBarStroke) property, the stroke of the feature measure bar can be customized. The thickness of the featured measure bar is modified by using [`FeaturedMeasureBarStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureBarStrokeThickness). +The value of the featured measure of the bullet graph is set by the [`FeaturedMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasure) property. By setting the [`FeaturedMeasureBarStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureBarStroke) property, the stroke of the featured measure bar can be customized. The thickness of the featured measure bar is modified by using the [`FeaturedMeasureBarStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureBarStrokeThickness) property. {% tabs %} {% highlight xaml %} @@ -69,11 +69,11 @@ The value of the featured measure of the bullet graph is set by the [`FeaturedMe ## Comparative Measure -Comparative measure should be less visually dominant than the featured measure. It should always be encoded as a short line that runs perpendicular to the orientation of the graph. A good example would be a target for YTD revenue. Whenever the featured measure intersects a comparative measure, the comparative measure should appear behind the featured measure. +The comparative measure should be less visually dominant than the featured measure. It should always be encoded as a short line that runs perpendicular to the orientation of the graph. A good example would be a target for YTD revenue. Whenever the featured measure intersects a comparative measure, the comparative measure should appear behind the featured measure. -### Customizing comparative measure +### Customizing the comparative measure -The value of the comparative measure is set by using the [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) property. By setting the [`ComparativeMeasureSymbolStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureSymbolStroke) property, the stroke of the comparative measure symbol is customized. The thickness of the comparative measure symbol is modified by using [`ComparativeMeasureSymbolStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureSymbolStrokeThickness). +The value of the comparative measure is set by using the [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) property. By setting the [`ComparativeMeasureSymbolStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureSymbolStroke) property, the stroke of the comparative measure symbol is customized. The thickness of the comparative measure symbol is modified by using the [`ComparativeMeasureSymbolStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureSymbolStrokeThickness) property. {% tabs %} {% highlight xaml %} diff --git a/wpf/Bullet-Graph/Orientation.md b/wpf/Bullet-Graph/Orientation.md index fb321845a5..632c71d468 100644 --- a/wpf/Bullet-Graph/Orientation.md +++ b/wpf/Bullet-Graph/Orientation.md @@ -1,7 +1,7 @@ --- layout: post title: Orientation in WPF Bullet Graph control | Syncfusion -description: Learn here all about Orientation support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Orientation support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Orientation in WPF Bullet Graph (SfBulletGraph) -By default, orientation of SfBulletGraph is horizontal. It can be customized by using [`Orientation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Orientation) property, respectively. +By default, the orientation of SfBulletGraph is horizontal. It can be customized by using the [`Orientation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Orientation) property. {% tabs %} {% highlight xaml %} diff --git a/wpf/Bullet-Graph/Overview.md b/wpf/Bullet-Graph/Overview.md index bc9e41ec34..41811260f7 100644 --- a/wpf/Bullet-Graph/Overview.md +++ b/wpf/Bullet-Graph/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About WPF Bullet Graph control | Syncfusion -description: Learn here all about introduction of Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements and more details. +description: Learn all about the introduction of the Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements, and more details. platform: wpf control: SfBulletGraph documentation: ug @@ -9,12 +9,12 @@ documentation: ug # WPF Bullet Graph (SfBulletGraph) Overview -Bullet Graph is a variation of the bar graph, which is developed as a replacement for the dashboard gauges and meters. The bullet graph features a single, primary measure (for example, current year-to-date revenue), and compares that measure to one or more other measures to enrich its meaning (for example, compared to a target). It displays the measures in the context of the qualitative range of performance, such as poor, satisfactory, and good. +The Bullet Graph is a variation of the bar graph that was developed as a replacement for the dashboard gauges and meters. The bullet graph features a single, primary measure (for example, current year-to-date revenue) and compares that measure to one or more other measures to enrich its meaning (for example, compared to a target). It displays the measures in the context of a qualitative range of performance, such as poor, satisfactory, and good. ## Use cases -* It is used in the dashboard environment where the screen real-estate really counts. -* Bullet graph shows a ton of data in a very compact space. +* It is used in dashboard environments where screen real estate really counts. +* The bullet graph shows a large amount of data in a very compact space. * It is handy to visualize data. -* It is used in the revenue analysis and expense analysis. +* It is used in revenue analysis and expense analysis. diff --git a/wpf/Bullet-Graph/Quantitative-scale.md b/wpf/Bullet-Graph/Quantitative-scale.md index 439e0fb737..e692dfba06 100644 --- a/wpf/Bullet-Graph/Quantitative-scale.md +++ b/wpf/Bullet-Graph/Quantitative-scale.md @@ -1,7 +1,7 @@ --- layout: post title: Quantitative Scale in WPF Bullet Graph control | Syncfusion -description: Learn here all about Quantitative Scale support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Quantitative Scale support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Quantitative Scale in WPF Bullet Graph (SfBulletGraph) -Quantitative scale contains two major components such as ticks and labels which gives the looks of bar graph. It defines the frequency of labels and tick marks with overall [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Maximum) values for declared [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Interval). The length of the quantitative scale can be customized by using the [`QuantitativeScaleLength`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QuantitativeScaleLength) property. +The quantitative scale contains two major components: ticks and labels, which give the look of a bar graph. It defines the frequency of labels and tick marks with overall [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Maximum) values for the declared [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Interval). The length of the quantitative scale can be customized by using the [`QuantitativeScaleLength`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QuantitativeScaleLength) property. {% tabs %} {% highlight xaml %} diff --git a/wpf/Bullet-Graph/Ranges.md b/wpf/Bullet-Graph/Ranges.md index 305c5dd1ce..48a31ccfc6 100644 --- a/wpf/Bullet-Graph/Ranges.md +++ b/wpf/Bullet-Graph/Ranges.md @@ -1,7 +1,7 @@ --- layout: post title: Ranges in WPF Bullet Graph control | Syncfusion -description: Learn here all about Ranges support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Ranges support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Ranges in WPF Bullet Graph (SfBulletGraph) -Ranges for a bullet graph are a collection of qualitative ranges. A qualitative range is a visual element that begins at [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeStart) and ends at a specified [`RangeEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeEnd) at the beginning of the previous range’s RangeEnd. The qualitative ranges are arranged according to each RangeEnd value. +Ranges for a bullet graph are a collection of qualitative ranges. A qualitative range is a visual element that begins at [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeStart) and ends at a specified [`RangeEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeEnd), continuing from the previous range's RangeEnd. The qualitative ranges are arranged according to each RangeEnd value. -## Customizing Range +## Customizing Ranges -The width of the ranges can be customized by setting the [`QualitativeRangesSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QualitativeRangesSize) property. By changing [`RangeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeStroke) of the qualitative range, the stroke of the range can be personalized. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeOpacity) of the qualitative range, the opacity of the range is modified. +The width of the ranges can be customized by setting the [`QualitativeRangesSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QualitativeRangesSize) property. By changing the [`RangeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeStroke) of the qualitative range, the stroke of the range can be personalized. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeOpacity) of the qualitative range, the opacity of the range is modified. {% tabs %} {% highlight xaml %} @@ -78,7 +78,7 @@ The width of the ranges can be customized by setting the [`QualitativeRangesSize ## Binding RangeStroke to Ticks and Labels -By setting [`BindWithRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_BindRangeStrokeToLabels), the stroke of the labels is set related to the stroke of the specified ranges. Similarly, by setting [`BindWithRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_BindRangeStrokeToTicks), the stroke of the ticks is set related to the stroke of the specified ranges. +By setting the [`BindRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_BindRangeStrokeToLabels) property, the stroke of the labels is set to match the stroke of the specified ranges. Similarly, by setting the [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_BindRangeStrokeToTicks) property, the stroke of the ticks is set to match the stroke of the specified ranges. {% tabs %} {% highlight xaml %} diff --git a/wpf/Bullet-Graph/Ticks.md b/wpf/Bullet-Graph/Ticks.md index 0e6c06b56e..8a0833c54e 100644 --- a/wpf/Bullet-Graph/Ticks.md +++ b/wpf/Bullet-Graph/Ticks.md @@ -1,7 +1,7 @@ --- layout: post title: Ticks in WPF Bullet Graph control | Syncfusion -description: Learn here all about Ticks support in Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements and more details. +description: Learn all about the Ticks support in Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements, and more details. platform: wpf control: SfBulletGraph documentation: ug @@ -9,16 +9,16 @@ documentation: ug # Ticks in WPF Bullet Graph (SfBulletGraph) -Quantitative scale is displayed with two types of ticks: +The quantitative scale is displayed with two types of ticks: -* Major ticks, the primary scale indicators. -* Minor ticks, the secondary scale indicators that fall in between the major ticks. +* Major ticks: the primary scale indicators. +* Minor ticks: the secondary scale indicators that fall in between the major ticks. ## Customizing Ticks -The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Interval) property is used to calculate the Major tick count for a SfBulletGraph. Like ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTicksPerInterval) property. +The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Interval) property is used to calculate the major tick count of a SfBulletGraph. Like ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTicksPerInterval) property. -The stroke of the major and minor ticks is customized by setting the [`MajorTickStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStroke) and [`MinorTickStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickStroke) properties. The size can be modified by using the [`MajorTickSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickSize) and [`MinorTickSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickSize) properties. By setting [`MajorTickStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStrokeThickness) and [`MinorTickStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStrokeThickness), the stroke’s thickness can be customized. +The stroke of the major and minor ticks is customized by setting the [`MajorTickStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStroke) and [`MinorTickStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickStroke) properties. The size can be modified by using the [`MajorTickSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickSize) and [`MinorTickSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickSize) properties. By setting the [`MajorTickStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStrokeThickness) and [`MinorTickStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickStrokeThickness) properties, the stroke's thickness can be customized. {% tabs %} {% highlight xaml %} @@ -29,31 +29,29 @@ The stroke of the major and minor ticks is customized by setting the [`MajorTick MinorTickSize="10" MajorTickStroke="Red" MinorTickStroke="Green"> - + {% endhighlight %} {% highlight c# %} - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.MinorTicksPerInterval = 3; - bulletgraph.MajorTickSize = 15; - bulletgraph.MinorTickSize = 10; - bulletgraph.MajorTickStroke = new SolidColorBrush(Colors.Red); - bulletgraph.MinorTickStroke = new SolidColorBrush(Colors.Green); - grid.Children.Add(bulletgraph); + SfBulletGraph bulletgraph = new SfBulletGraph(); + bulletgraph.Interval = 2; + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.MinorTicksPerInterval = 3; + bulletgraph.MajorTickSize = 15; + bulletgraph.MinorTickSize = 10; + bulletgraph.MajorTickStroke = new SolidColorBrush(Colors.Red); + bulletgraph.MinorTickStroke = new SolidColorBrush(Colors.Green); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} ![Ticks_img](Ticks_images/Ticks_img.png) -## TickPosition - -The ticks in the scale can be placed above or below the ranges of the quantitative scale by choosing the options available in the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_TickPosition) property. - -They are: +## TickPosition, below, or across the ranges of the quantitative scale using the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_TickPosition) property, which supports the following options: 1. Below (Default) 2. Above @@ -63,7 +61,7 @@ They are: {% tabs %} {% highlight xaml %} - + {% endhighlight %} diff --git a/wpf/Bullet-Graph/Tooltip.md b/wpf/Bullet-Graph/Tooltip.md index d93427e93d..e201f2597d 100644 --- a/wpf/Bullet-Graph/Tooltip.md +++ b/wpf/Bullet-Graph/Tooltip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in WPF Bullet Graph control | Syncfusion -description: Learn here all about Tooltip support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Tooltip support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Tooltip in WPF Bullet Graph (SfBulletGraph) -Tooltip in `SfBulletGraph` is used to view the values of FeaturedMeasure, ComparativeMeasure and QualitativeRange in required design. +The tooltip in `SfBulletGraph` is used to view the values of FeaturedMeasure, ComparativeMeasure, and QualitativeRange in a required design. -This tooltip is displayed when the mouse is over the FeaturedMeasure, ComparativeMeasure or QualitativeRange. Whereas, in touch device it is displayed on holding over the FeaturedMeasure, ComparativeMeasure and QualitativeRange of SfBulletGraph. +The tooltip is displayed when the mouse is over the FeaturedMeasure, ComparativeMeasure, or QualitativeRange. On a touch device, it is displayed on holding over the FeaturedMeasure, ComparativeMeasure, or QualitativeRange of SfBulletGraph. The SfBulletGraph tooltip is displayed only when the [`ShowToolTip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ShowToolTip) property is set to true. @@ -81,7 +81,7 @@ The SfBulletGraph tooltip is displayed only when the [`ShowToolTip`](https://hel ## Customizing FeaturedMeasureToolTip -You can display the value of [`FeaturedMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasure) of SfBulletGraph in ToolTip that is used to view the FeaturedMeasure value .The [`FeaturedMeasureToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureToolTipTemplate) is DataTemplate type by using this property, the default appearance of the FeaturedMeasure tooltip can be customized. +You can display the value of [`FeaturedMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasure) of SfBulletGraph in a tooltip to view the FeaturedMeasure value. The [`FeaturedMeasureToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureToolTipTemplate) is a DataTemplate type. By using this property, the default appearance of the FeaturedMeasure tooltip can be customized. {% tabs %} {% highlight xaml %} @@ -163,7 +163,7 @@ You can display the value of [`FeaturedMeasure`](https://help.syncfusion.com/cr/ ## Customizing ComparativeMeasureToolTip -You can display the value of [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) of SfBulletGraph in ToolTip that is used to view the ComparativeMeasure value. The [`ComparativeMeasureToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureToolTipTemplate) is DataTemplate type by using this property, the default appearance of the ComparativeMeasure tooltip can be customized. +You can display the value of [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) of SfBulletGraph in a tooltip to view the ComparativeMeasure value. The [`ComparativeMeasureToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureToolTipTemplate) is a DataTemplate type. By using this property, the default appearance of the ComparativeMeasure tooltip can be customized. {% tabs %} {% highlight xaml %} @@ -245,7 +245,7 @@ You can display the value of [`ComparativeMeasure`](https://help.syncfusion.com/ ## Customizing QualitativeRangeToolTip -You can display the value of QualitativeRange of SfBulletGraph in ToolTip that is used to view the Start and End value of QualitativeRange. The [`QualitativeRangeToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QualitativeRangeToolTipTemplate) is DataTemplate type by using this property, the default appearance of the QualitativeRange tooltip can be customized. +You can display the value of QualitativeRange of SfBulletGraph in a tooltip to view the Start and End values of the QualitativeRange. The [`QualitativeRangeToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QualitativeRangeToolTipTemplate) is a DataTemplate type. By using this property, the default appearance of the QualitativeRange tooltip can be customized. {% tabs %} {% highlight xaml %} @@ -295,13 +295,13 @@ You can display the value of QualitativeRange of SfBulletGraph in ToolTip that i bulletgraph.Minimum = 0; bulletgraph.Maximum = 10; bulletgraph.FeaturedMeasure = 5; - bulletgraph.ShowToolTip = "True"; bulletgraph.ComparativeMeasure = 4; bulletgraph.Interval = 2; bulletgraph.MinorTickSize = 8; bulletgraph.MinorTicksPerInterval = 3; bulletgraph.QualitativeRangesSize = 30; bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); + bulletgraph.ShowToolTip = true; bulletgraph.QualitativeRangeToolTipTemplate = grid.Resources["tooltipTemplate"] as DataTemplate; bulletgraph.QualitativeRanges.Add(new QualitativeRange() { diff --git a/wpf/Digital-Gauge/Digital-Characters.md b/wpf/Digital-Gauge/Digital-Characters.md index 372fff36e3..82570d3566 100644 --- a/wpf/Digital-Gauge/Digital-Characters.md +++ b/wpf/Digital-Gauge/Digital-Characters.md @@ -9,7 +9,7 @@ documentation: ug # Digital Characters in WPF Digital Gauge (SfDigitalGauge) -The digital characters in the digital gauge can be viewed in different types of segments. These digital characters are set to the digital gauge through the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property of type string. +The digital characters in the digital gauge can be viewed in different types of segments. These digital characters are set to the digital gauge through the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property of type string. The type of segment used to display the characters is determined by the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property. {% tabs %} {% highlight xaml %} @@ -32,7 +32,7 @@ The digital characters in the digital gauge can be viewed in different types of ## 7-Segments -The digital characters which are set as the value property of the digital gauge are displayed by default 7-segments. Rather than using the alphabets, these are mainly used to display numbers. The type of segments can be set by the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property. +By default, the digital characters set as the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property are displayed using 7-segments. These are mainly used to display numbers rather than letters. The type of segments can be set by the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property. {% tabs %} {% highlight xaml %} @@ -55,7 +55,7 @@ The digital characters which are set as the value property of the digital gauge ## 14-Segments -The digital characters which are set as the value property of the digital gauge are displayed by 14 segments. These type of characters are used to display both alphabets and numbers. +The digital characters set as the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property can be displayed using 14 segments. This type of character is used to display both alphabets and numbers. Set the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property to `SegmentFourteen` to display characters in this format. {% tabs %} {% highlight xaml %} @@ -78,7 +78,7 @@ The digital characters which are set as the value property of the digital gauge ## 16-Segments -The digital characters which are set as the value property of the digital gauge are displayed by 16 segments. These type of characters are also used to display both alphabets and numbers. +The digital characters set as the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property can be displayed using 16 segments. Like 14-segment characters, this type is also used to display both alphabets and numbers, with finer segment detail. Set the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property to `SegmentSixteen` to display characters in this format. {% tabs %} {% highlight xaml %} @@ -99,9 +99,9 @@ The digital characters which are set as the value property of the digital gauge ![Digital Gauge with SegmentSixteen CharacterType](Digital-Characters_images/Digital-Characters_img4.png) -## 8*8 Dot Matrix Segments +## 8×8 Dot Matrix Segments -The digital characters which are set as the value property of the digital gauge are displayed by eight cross eight dot matrix segments. These type of characters are used to display special characters along with the alphabets and numbers. +The digital characters set as the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property can be displayed using 8×8 dot matrix segments. This type of character is used to display special characters along with alphabets and numbers. Set the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property to `EightCrossEightDotMatrix` to display characters in this format. {% tabs %} {% highlight xaml %} @@ -118,7 +118,7 @@ The digital characters which are set as the value property of the digital gauge this.Grid.Children.Add(digitalgauge); {% endhighlight %} -{% endtabs%} +{% endtabs %} ![Digital Gauge with EightCrossEightDotMatrix CharacterType](Digital-Characters_images/Digital-Characters_img5.png) diff --git a/wpf/Digital-Gauge/Getting-Started.md b/wpf/Digital-Gauge/Getting-Started.md index 0393eb383b..ee4e553987 100644 --- a/wpf/Digital-Gauge/Getting-Started.md +++ b/wpf/Digital-Gauge/Getting-Started.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with WPF Digital Gauge (SfDigitalGauge) -This section explains you the steps required to configure the **SfDigitalGauge** and also explains the steps to add basic elements of **SfDigitalGauge** through various API’s available within it. +This section explains the steps required to configure the **SfDigitalGauge** and also explains how to add basic elements of **SfDigitalGauge** through various APIs available within it. ## Adding gauge references -You can add gauge reference using one of the following methods: +You can add gauge references using one of the following methods: **Method 1: Adding gauge reference from nuget.org** @@ -23,11 +23,11 @@ Syncfusion WPF components are available in [`nuget.org`](https://www.nuget.org/) **Method 2: Adding gauge reference from toolbox** -You can drag the digital gauge control from the toolbox and drop it to the designer. It will add the required assembly references automatically, and add the namespace to the page. +You can drag the digital gauge control from the toolbox and drop it onto the designer. It will add the required assembly references automatically and add the namespace to the page. **Method 3: Adding gauge assemblies manually from the installed location** -If you prefer to manually reference the assemblies instead referencing from NuGet, add the following assemblies in respective projects. +If you prefer to manually reference the assemblies instead of referencing them from NuGet, add the following assemblies to the respective projects. Location: {Installed location}/{version}/WPF/Assemblies @@ -41,7 +41,7 @@ You can initialize the [`SfDigitalGauge`](https://help.syncfusion.com/cr/wpf/Syn {% highlight xaml %} - xmlns:gauge ="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf" + xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf" {% endhighlight %} @@ -53,7 +53,7 @@ You can initialize the [`SfDigitalGauge`](https://help.syncfusion.com/cr/wpf/Syn {% endtabs %} -initialize digital gauge control. +Initialize the digital gauge control. {% tabs %} @@ -72,7 +72,7 @@ initialize digital gauge control. {% endtabs %} -Run the above code and now the default **SfDigitalGauge** can be displayed as follows. UI component of the digital gauge can be customized by adding segments and passing Values which will be explained in the next section. +Run the above code, and the default **SfDigitalGauge** will be displayed as follows. The UI of the digital gauge can be customized by adding segments and passing values, which will be explained in the next section. ## Displaying Values @@ -96,7 +96,7 @@ this.Content = digitalgauge; ## Setting character type -By using the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property, you can set the segments for digital gauge. The digital characters can be drawn in the following four different segments: +By using the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property, you can set the segments for the digital gauge. The digital characters can be drawn in the following four different segment types: • EightCrossEightDotMatrix @@ -109,7 +109,7 @@ By using the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% tabs %} {% highlight xaml %} - + {% endhighlight %} @@ -124,13 +124,13 @@ this.Content = digitalgauge; ## Configuring properties -The [`CharacterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight), [`CharacterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth), and [`CharacterStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterStroke) properties are used to display characters, which can be customized as shown in the following code snippets +The [`CharacterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight), [`CharacterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth), and [`CharacterStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterStroke) properties are used to display characters, which can be customized as shown in the following code snippets. {% tabs %} {% highlight xaml %} - {% endhighlight %} @@ -153,7 +153,7 @@ The following code example is the complete code of the previous configurations. {% highlight xaml %} - {% endhighlight %} @@ -95,7 +95,7 @@ Using [`SegmentThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml ## RTL (Right to Left) support -The Characters are aligned using [`EnableRTLFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_EnableRTLFormat) property. The default value of `EnableRTLFormat` is `false`. +The characters are aligned using the [`EnableRTLFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_EnableRTLFormat) property. The default value of `EnableRTLFormat` is `false`. {% tabs %} {% highlight xaml %} @@ -109,7 +109,7 @@ The Characters are aligned using [`EnableRTLFormat`](https://help.syncfusion.com SfDigitalGauge digitalgauge = new SfDigitalGauge(); digitalgauge.Value = "SYNCFUSION"; - digitalgauge.EnableRTLFormat= true; + digitalgauge.EnableRTLFormat = true; digitalgauge.CharacterType = CharacterType.SegmentFourteen; this.Grid.Children.Add(digitalgauge); @@ -120,7 +120,7 @@ The Characters are aligned using [`EnableRTLFormat`](https://help.syncfusion.com ## Dimmed Brush stroke -[`DimmedBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrush) property is used to apply brushes to the dimmed segment. This property is used to suit the background of the Digital gauge +The [`DimmedBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrush) property is used to apply brushes to the dimmed segment. This property is used to suit the background of the digital gauge. {% tabs %} {% highlight xaml %} @@ -145,7 +145,7 @@ The Characters are aligned using [`EnableRTLFormat`](https://help.syncfusion.com ## Dimmed Brush opacity -[`DimmedBrushOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrushOpacity) property is used to set the opacity of the brushes to the dimmed segment. +The [`DimmedBrushOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrushOpacity) property is used to set the opacity of the brushes for the dimmed segment. {% tabs %} {% highlight xaml %} diff --git a/wpf/Digital-Gauge/Transformation-of-Characters.md b/wpf/Digital-Gauge/Transformation-of-Characters.md index 6038c29196..997b9bb06c 100644 --- a/wpf/Digital-Gauge/Transformation-of-Characters.md +++ b/wpf/Digital-Gauge/Transformation-of-Characters.md @@ -9,14 +9,14 @@ documentation: ug # Transformation of Characters in WPF Digital Gauge (SfDigitalGauge) -The digital characters in the digital gauge can be transformed by setting certain properties in the digital gauge. Two kinds of transformations are done using this property. They are: +The digital characters in the digital gauge can be transformed by setting certain properties on the digital gauge. Two kinds of transformations can be done using these properties. They are: * Scaling * Skewing ## Scaling -The value of the digital characters is scaled by altering the height and width of the digital characters. It is achieved by setting the [`CharacterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight) and [`CharacterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth) property in the digital gauge. +The value of the digital characters is scaled by altering the height and width of the digital characters. It is achieved by setting the [`CharacterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight) and [`CharacterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth) properties on the digital gauge. ### CharacterHeight @@ -66,7 +66,7 @@ The value of the digital characters is scaled by altering the height and width o ## Skewing -The digital gauge also performs skew transformation for the digital characters. It can be done on both x-axis and y-axis through [`SkewAngleX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleX) and [`SkewAngleY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleY) properties respectively. +The digital gauge also performs skew transformation for the digital characters. It can be done on both the x-axis and y-axis through the [`SkewAngleX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleX) and [`SkewAngleY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleY) properties, respectively. ### SkewAngleX diff --git a/wpf/Linear-Gauge/Getting-Started.md b/wpf/Linear-Gauge/Getting-Started.md index 40f24ca88d..356572d570 100644 --- a/wpf/Linear-Gauge/Getting-Started.md +++ b/wpf/Linear-Gauge/Getting-Started.md @@ -12,29 +12,29 @@ This section explains the steps required to configure the [`SfLinearGauge`](http ## Adding gauge references -You can add gauge reference using one of the following methods: +You can add the gauge reference using one of the following methods: **Method 1: Adding gauge reference from nuget.org** -Syncfusion WPF components are available in [`nuget.org`](https://www.nuget.org/). To add gauge to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.SfGauge.WPF](https://www.nuget.org/packages/Syncfusion.SfGauge.WPF), and then install it. +Syncfusion WPF components are available in [`nuget.org`](https://www.nuget.org/). To add the gauge to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.SfGauge.WPF](https://www.nuget.org/packages/Syncfusion.SfGauge.WPF), and then install it. ![Adding gauge reference from NuGet](Getting-Started_images/Adding gauge reference.png) **Method 2: Adding gauge reference from toolbox** -You can drag the linear gauge control from the toolbox and drop it to the designer. It will add the required assembly references automatically, and add the namespace to the page. +You can drag the linear gauge control from the toolbox and drop it onto the designer. It will add the required assembly references automatically and add the namespace to the page. **Method 3: Adding gauge assemblies manually from the installed location** -If you prefer to manually reference the assemblies instead referencing from NuGet, add the following assemblies in respective projects. +If you prefer to manually reference the assemblies instead of referencing from NuGet, add the following assemblies in the respective projects. Location: {Installed location}/{version}/WPF/Assemblies -You can refer to [this](https://help.syncfusion.com/wpf/control-dependencies#sfgauge) link to know about the assemblies required for adding gauge to your project. +Refer to [this](https://help.syncfusion.com/wpf/control-dependencies#sfgauge) link to know about the assemblies required for adding the gauge to your project. -## Initialize gauge +## Initializing the gauge -Import the [`SfLinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) namespace to your respective Window as in the following. +Import the [`SfLinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) namespace to your respective Window as in the following. {% tabs %} @@ -71,9 +71,9 @@ this.Content = sfLinearGauge; {% endtabs %} -## Configuring scale +## Configuring the scale -Scales is a collection of [`LinearScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html) which is used to indicate the numeric values. Scale bar, ticks, labels, ranges, and pointers are the sub elements of a scale. +Scales are a collection of [`LinearScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html) which is used to indicate the numeric values. Scale bar, ticks, labels, ranges, and pointers are the sub-elements of a scale. The [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Maximum) properties allow you to set the scale range. @@ -126,7 +126,7 @@ this.Content = sfLinearGauge; ## Adding a symbol pointer -`SymbolPointer` is a shape that can be placed to mark the pointer value in gauge. +`SymbolPointer` is a shape that can be placed to mark the pointer value in the gauge. Add the pointer to the `linearScale` created earlier. {% tabs %} @@ -160,7 +160,7 @@ linearScale.Pointers.Add(linearPointer); ## Adding a bar pointer -`BarPointer` is used to mark the scale values. This starts at the beginning of gauge and ends at the pointer value. +`BarPointer` is used to mark the scale values. This starts at the beginning of the gauge and ends at the pointer value. Add the pointer to the `linearScale` created earlier. {% tabs %} @@ -190,7 +190,7 @@ linearScale.Pointers.Add(linearPointer1); ## Adding ranges -You can categorize the scale values using the start and end values properties in [`LinearRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html). You can add multiple ranges for a scale using the [`Ranges`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Ranges) property. +You can categorize the scale values using the start and end value properties in [`LinearRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html). You can add multiple ranges for a scale using the [`Ranges`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Ranges) property. Add the ranges to the `linearScale` created earlier. {% tabs %} @@ -318,7 +318,7 @@ linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Below; linearPointer.SymbolPointerStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#757575"); linearScale.Pointers.Add(linearPointer); -////Adding bar pointer +//Adding bar pointer LinearPointer linearPointer1 = new LinearPointer(); linearPointer1.PointerType = LinearPointerType.BarPointer; linearPointer1.Value = 50; @@ -360,7 +360,7 @@ You can find the complete getting started sample from this [`link`](https://git ## Theme -LinearGauge supports various built-in themes. Refer to the below links to apply themes for the LinearGauge, +LinearGauge supports various built-in themes. Refer to the below links to apply themes for the LinearGauge: * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) @@ -370,4 +370,4 @@ LinearGauge supports various built-in themes. Refer to the below links to apply ## See also -[How to apply themes for SfLinearGauge](https://support.syncfusion.com/kb/article/2841/how-to-apply-themes-for-sflineargauge) \ No newline at end of file +* [How to apply themes for SfLinearGauge](https://support.syncfusion.com/kb/article/2841/how-to-apply-themes-for-sflineargauge) \ No newline at end of file diff --git a/wpf/Linear-Gauge/Labels.md b/wpf/Linear-Gauge/Labels.md index b1256484a4..4582a0ebee 100644 --- a/wpf/Linear-Gauge/Labels.md +++ b/wpf/Linear-Gauge/Labels.md @@ -1,7 +1,7 @@ --- layout: post -title: Labels | SfLinearGauge | Wpf | Syncfusion -description: This section describes Labels support with its customization by using LabelStroke, LabelSize and other properties in WPF SfLinearGauge control. +title: Labels | SfLinearGauge | WPF | Syncfusion +description: This section describes the Labels support with its customization by using LabelStroke, LabelSize, and other properties in the WPF SfLinearGauge control. platform: wpf control: SfLinearGauge documentation: ug @@ -9,13 +9,11 @@ documentation: ug # Labels support in WPF Linear Gauge (SfLinearGauge) -`Labels` of the linear scale provide a numeric value to the major ticks that will be specified according to the range of the scale. +The `Labels` of the linear scale provide a numeric value to the major ticks that will be specified according to the range of the scale. ## Label color customization -The foreground of the label is customized by setting the [`LabelStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelStroke) of the linear scale. - -{% tabs %} +The foreground of the label is customized by setting the [`LabelStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelStroke) of the linear scale.{% tabs %} {% highlight xml %} @@ -120,7 +118,7 @@ The label font can be customized using the [`LabelSize`](https://help.syncfusion ## Setting position for labels -The labels in the scale can be placed above or below the linear scale by choosing the following options available in the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property. The default value of `LabelPosition` property is below. +The labels in the scale can be placed above or below the linear scale by choosing the following options available in the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property. The default value of the `LabelPosition` property is below. 1. Above @@ -180,7 +178,7 @@ You can postfix and prefix values to the scale labels using the [`LabelPostfix`] ### Setting label postfix -The `LabelPostfix` property allows to postfix the values to scale labels. +The `LabelPostfix` property allows you to postfix the values to scale labels. {% tabs %} @@ -237,7 +235,7 @@ The `LabelPostfix` property allows to postfix the values to scale labels. ### Setting label prefix -The `LabelPrefix` property allows to prefix the values to scale labels. +The `LabelPrefix` property allows you to prefix the values to scale labels. {% tabs %} @@ -296,7 +294,7 @@ The `LabelPrefix` property allows to prefix the values to scale labels. ## Labels visibility -Labels visibility can be customized using the [`LabelVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelVisibility) property of linear scale. +Labels visibility can be customized using the [`LabelVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelVisibility) property of the linear scale. {% tabs %} diff --git a/wpf/Linear-Gauge/Orientation.md b/wpf/Linear-Gauge/Orientation.md index d46d4f347b..003e08c149 100644 --- a/wpf/Linear-Gauge/Orientation.md +++ b/wpf/Linear-Gauge/Orientation.md @@ -1,9 +1,9 @@ --- layout: post -title: Orientation | SfLinearGauge | Wpf | Syncfusion -description: This section describes Orientation customization support with Orientation property in WPF SfLinearGauge control. +title: Orientation | SfLinearGauge | WPF | Syncfusion +description: This section describes the orientation customization support with the Orientation property in the WPF SfLinearGauge control. platform: wpf -control: Orientation +control: SfLinearGauge documentation: ug --- diff --git a/wpf/Linear-Gauge/Overview.md b/wpf/Linear-Gauge/Overview.md index 1c99ed24e8..a8f7881226 100644 --- a/wpf/Linear-Gauge/Overview.md +++ b/wpf/Linear-Gauge/Overview.md @@ -8,15 +8,15 @@ documentation: ug --- # WPF LinearGauge (SfLinearGauge) Overview -The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) displays a range of values graphically along the linear scale, which is considered as the linear form of the linear gauge. It measures the values of the scale and presents in the horizontal sliding, vertical sliding, or meter. +The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) displays a range of values graphically along the linear scale, which is considered as the linear form of the linear gauge. It measures the values of the scale and presents them in horizontal sliding, vertical sliding, or meter form. -The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) control is used to visualize numerical values of a scale in linear manner. By using the [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) control, you can render thermometer. +The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) control is used to visualize numerical values of a scale in a linear manner. By using the [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) control, you can render a thermometer. ## Key features ### Scale -The [`Scale`](https://help.syncfusion.com/wpf/linear-gauge/scale) support adding a scale to linear gauge using horizontal and vertical orientations. +The [`Scale`](https://help.syncfusion.com/wpf/linear-gauge/scale) supports adding a scale to the linear gauge using horizontal and vertical orientations. ### Ranges @@ -24,7 +24,7 @@ Highlights the desired [`Ranges`](https://help.syncfusion.com/wpf/linear-gauge/r ### Pointers -The [`Pointers`](https://help.syncfusion.com/wpf/linear-gauge/pointers) supports adding multiple pointers (bar and symbol) to the linear scale. +The [`Pointers`](https://help.syncfusion.com/wpf/linear-gauge/pointers) support adding multiple pointers (bar and symbol) to the linear scale. ![Linear Gauge - Overview](Overview_images/Overview_img1.jpeg) diff --git a/wpf/Linear-Gauge/Pointers.md b/wpf/Linear-Gauge/Pointers.md index 9a80a2f34a..de589f01d9 100644 --- a/wpf/Linear-Gauge/Pointers.md +++ b/wpf/Linear-Gauge/Pointers.md @@ -1,7 +1,7 @@ --- layout: post title: Pointers | Linear Gauge | WPF | Syncfusion -description: Pointers in WPF Linear Gauge are used to indicate the value of an attribute with different pointer types. +description: Pointers in the WPF Linear Gauge are used to indicate the value of an attribute with different pointer types. platform: wpf control: SfLinearGauge documentation: ug @@ -13,7 +13,7 @@ The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges ## Bar pointer -`BarPointer` is used to mark scale values. It starts at the beginning of gauge and ends at the pointer value. You can add bar pointer using the [`PointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_PointerType) property. +`BarPointer` is used to mark scale values. It starts at the beginning of the gauge and ends at the pointer value. You can add a bar pointer using the [`PointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_PointerType) property. {% tabs %} @@ -83,7 +83,7 @@ The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges ### Bar pointer customization -The UI of `Bar pointer` is customized using the [`BarPointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStroke) and [`BarPointerStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStrokeThickness) properties. +The UI of the `BarPointer` is customized using the [`BarPointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStroke) and [`BarPointerStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStrokeThickness) properties. {% tabs %} @@ -231,7 +231,7 @@ In `SymbolPointer`, the value is pointed by a symbol on the scale. ### Symbol pointer customization -You can modify the size of symbol pointer by changing the [`SymbolPointerHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerHeight) and [`SymbolPointerWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerWidth) properties. The stroke of symbol pointer is changed using the [`SymbolPointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerStroke) property. +You can modify the size of the symbol pointer by changing the [`SymbolPointerHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerHeight) and [`SymbolPointerWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerWidth) properties. The stroke of the symbol pointer is changed using the [`SymbolPointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerStroke) property. {% tabs %} @@ -440,7 +440,7 @@ The [`SymbolPointerStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml ### Adding multiple pointers -In addition to the default pointer, you can add "n" number of [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) to a linear scale using the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) property. +In addition to the default pointer, you can add any number of [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) to a linear scale using the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) property. {% tabs %} @@ -528,7 +528,7 @@ In addition to the default pointer, you can add "n" number of [`Pointers`](https ## Setting animation for pointer -The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_EnableAnimationProperty) is a Boolean property, which is used to enable or disable the animation of the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) in linear gauge and the animation speed can be controlled with [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_AnimationDuration) property. +The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_EnableAnimationProperty) is a Boolean property, which is used to enable or disable the animation of the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) in the linear gauge, and the animation speed can be controlled with the [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_AnimationDuration) property. {% tabs %} diff --git a/wpf/Linear-Gauge/Ranges.md b/wpf/Linear-Gauge/Ranges.md index bb3ee5df81..db75715239 100644 --- a/wpf/Linear-Gauge/Ranges.md +++ b/wpf/Linear-Gauge/Ranges.md @@ -1,7 +1,7 @@ --- layout: post -title: Ranges| Linear Gauge | WPF | Syncfusion -description: Ranges in WPF Linear Gauge are used to specify or group the scale values. It specifies a start value and end value in the LinearGauge within a scale. +title: Ranges | Linear Gauge | WPF | Syncfusion +description: Ranges in the WPF Linear Gauge are used to specify or group the scale values. It specifies a start value and end value in the LinearGauge within a scale. platform: wpf control: SfLinearGauge documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Ranges support in WPF Linear Gauge (SfLinearGauge) -Range is a visual element, which begins and ends at specified values within a scale. You can add any number of ranges to a scale using the array of range objects. +A range is a visual element, which begins and ends at specified values within a scale. You can add any number of ranges to a scale using the array of range objects. ## Setting start and end values for range @@ -89,7 +89,7 @@ The start and end values of ranges are set using the [`StartValue`](https://help ## Range customization -The UI element of a range is customized by changing the [`RangeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeStroke) of the linear range, and the appearance of linear range is customized by setting the [`StartWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_EndWidth) properties. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeOpacity) of LinearRange, the opacity of the range can be modified. +The UI element of a range is customized by changing the [`RangeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeStroke) of the linear range, and the appearance of the linear range is customized by setting the [`StartWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_EndWidth) properties. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeOpacity) of the LinearRange, the opacity of the range can be modified. {% tabs %} @@ -165,7 +165,7 @@ The UI element of a range is customized by changing the [`RangeStroke`](https:// ## Binding range stroke to ticks and labels -You can bind the range’s stroke to tick lines and labels within its range by setting the [`BindWithRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToLabels). Stroke of the labels can be set related to stroke of the specified ranges. Similarly, by setting the [`BindWithRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToTicks), stroke of the ticks can be set related to stroke of the specified ranges. +You can bind the range's stroke to tick lines and labels within its range by setting the [`BindRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToLabels). The stroke of the labels can be set related to the stroke of the specified ranges. Similarly, by setting the [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToTicks), the stroke of the ticks can be set related to the stroke of the specified ranges. {% tabs %} @@ -287,7 +287,7 @@ You can bind the range’s stroke to tick lines and labels within its range by s ## Setting range position -The range can be placed above or below the scale by one of the following ways: +The range can be placed above or below the scale in one of the following ways: ### Setting range offset for linear range @@ -371,7 +371,7 @@ Using the [`RangeOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. The range can be placed above or below the scale by choosing one of the following options available in the [`RangePosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_RangePosition) property: -1. Above(Default) +1. Above (Default) 2. Below {% capture codesnippet1 %} @@ -451,7 +451,7 @@ The range can be placed above or below the scale by choosing one of the followin ### Adding multiple ranges -You can add “n” number of ranges to a scale using the `LinearRange` property of range as shown in the following code. +You can add any number of ranges to a scale using the `LinearRange` property of the range as shown in the following code. {% tabs %} diff --git a/wpf/Linear-Gauge/Scale.md b/wpf/Linear-Gauge/Scale.md index 06f73eb845..d3c5252bb1 100644 --- a/wpf/Linear-Gauge/Scale.md +++ b/wpf/Linear-Gauge/Scale.md @@ -1,15 +1,15 @@ --- layout: post -title: Scale | SfLinearGauge | Wpf | Syncfusion -description: Learn how to add scale to the Syncfusion linear gauge and customize the appearance of the scale in WPF platform +title: Scale | SfLinearGauge | WPF | Syncfusion +description: Learn how to add a scale to the Syncfusion linear gauge and customize the appearance of the scale in the WPF platform. platform: wpf control: SfLinearGauge documentation: ug --- -# Scale in SfLinearGauge +# Scale in SfLinearGauge -The [`MainScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_MainScale) is a linear scale integrates ticks, labels, ranges, and pointers to customize the basic look and feel of the linear gauge. +The [`MainScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_MainScale) is a linear scale that integrates ticks, labels, ranges, and pointers to customize the basic look and feel of the linear gauge. {% tabs %} @@ -100,7 +100,7 @@ To change the minimum and maximum values of a linear scale, use the [`Minimum`]( ## Setting interval for a scale -The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Interval) property allows to set intervals for scale. The default value of the `Interval` property is auto interval. Auto interval defines the count of the scale labels as 3 for 100 pixels. +The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Interval) property allows you to set intervals for the scale. The default value of the `Interval` property is auto interval. Auto interval defines the count of the scale labels as 3 for 100 pixels. {% tabs %} @@ -152,7 +152,7 @@ The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Li ## Scale customization -You can customize the color, length, size, and position of the `LinearScale` using the [`ScaleBarStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarStroke), [`ScaleBarBorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarBorderThickness), and [`ScaleBarBorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarBorderBrush) properties, respectively. +You can customize the color, length, size, and position of the `LinearScale` using the [`ScaleBarStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarStroke), [`ScaleBarBorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarBorderThickness), and [`ScaleBarBorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarBorderBrush) properties. {% tabs %} @@ -206,10 +206,10 @@ You can customize the color, length, size, and position of the `LinearScale` usi ### Size customization -Size of the scale can be customized using the following two properties. +The size of the scale can be customized using the following two properties. -* [`ScaleBarSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarSize) - Customizes the size of the scale bar (i.e height in case of landscape orientation). -* [`ScaleBarLength`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarLength) - Customizes the length of the scale bar (i.e width in case of landscape orientation). +* [`ScaleBarSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarSize) - Customizes the size of the scale bar (i.e., height in case of landscape orientation). +* [`ScaleBarLength`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarLength) - Customizes the length of the scale bar (i.e., width in case of landscape orientation). {% tabs %} @@ -241,7 +241,7 @@ Size of the scale can be customized using the following two properties. sfLinearGauge.Height = 300; - sfLinearGauge.Width=500; + sfLinearGauge.Width = 500; LinearScale linearScale = new LinearScale(); @@ -263,7 +263,7 @@ Size of the scale can be customized using the following two properties. ## Setting scale direction -You can set the scale position to its forward and backward using the [`ScaleDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleDirection) property. +You can set the scale direction to forward or backward using the [`ScaleDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleDirection) property. {% tabs %} @@ -313,7 +313,7 @@ You can set the scale position to its forward and backward using the [`ScaleDire ## Setting position for a scale -You can set the scale position using the [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor) property. First, set the [`ElementsPositionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ElementsPositionMode) to custom, and then set [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor). +You can set the scale position using the [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor) property. First, set the [`ElementsPositionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ElementsPositionMode) to Custom, and then set the [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor). {% tabs %} diff --git a/wpf/Linear-Gauge/Ticks.md b/wpf/Linear-Gauge/Ticks.md index 4a4132e827..6a3dc9caad 100644 --- a/wpf/Linear-Gauge/Ticks.md +++ b/wpf/Linear-Gauge/Ticks.md @@ -1,15 +1,15 @@ --- layout: post -title: Ticks | SfCLinearGauge | Wpf | Syncfusion -description: Ticks in WPF Linear Gauge are used to indicate the interval value. And able to customize the tick UI with its properties. +title: Ticks | SfLinearGauge | WPF | Syncfusion +description: Ticks in the WPF Linear Gauge are used to indicate the interval value. You can customize the tick UI with its properties. platform: wpf -control: SfCLinearGauge +control: SfLinearGauge documentation: ug --- # Ticks support in WPF Linear Gauge (SfLinearGauge) with customization -Ticks are used to identify the gauge’s data value by marking the gauge scale in regular increments. +Ticks are used to identify the gauge's data value by marking the gauge scale in regular increments. ## Tick customization diff --git a/wpf/Radial-Gauge/Annotations.md b/wpf/Radial-Gauge/Annotations.md index c49b261682..8fbf277aba 100644 --- a/wpf/Radial-Gauge/Annotations.md +++ b/wpf/Radial-Gauge/Annotations.md @@ -9,15 +9,15 @@ documentation: ug # Annotations in WPF Radial Gauge (SfCircularGauge) -SfCircularGauge supports annotations, which allows you to mark the specific area of interest in circular gauge. You can place custom views as annotations. The text and images can also be added by using `Annotations` property. +SfCircularGauge supports annotations, which allow you to mark a specific area of interest in the circular gauge. You can place custom views as annotations. Text and images can also be added by using the `Annotations` property. ## Setting a view annotation -When the annotation allows you to place the custom elements, a gauge can be initialized to the element, and this can be used to place the annotation in another gauge. The Following properties are used to customize the Annotations: +When the annotation allows you to place custom elements, a gauge can be initialized to the element, and this can be used to place the annotation in another gauge. The following properties are used to customize the annotations: * [`Angle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Angle) : Used to place the view at the given angle. -* [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Offset) : Used to move the view from the center to edge of the circular gauge. The value should be ranges from 0 to 1. -* [`ViewMargin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_ViewMargin) : Used to customize the Annotation x and y position by using the pixel values. +* [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Offset) : Used to move the view from the center to the edge of the circular gauge. The value should range from 0 to 1. +* [`ViewMargin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_ViewMargin) : Used to customize the annotation's x and y position by using pixel values. The following code is used to create the Annotations. diff --git a/wpf/Radial-Gauge/Getting-Started.md b/wpf/Radial-Gauge/Getting-Started.md index 2d412a1d97..8f0ddda687 100644 --- a/wpf/Radial-Gauge/Getting-Started.md +++ b/wpf/Radial-Gauge/Getting-Started.md @@ -32,9 +32,9 @@ Location: {Installed location}/{version}/WPF/Assemblies You can refer to [this](https://help.syncfusion.com/wpf/control-dependencies#sfgauge) link to know about the assemblies required for adding gauge to your project. -## Initialize gauge +## Initialize the gauge -Import the [`SfCircularGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) namespace to your respective Window as follows. +Import the [`SfCircularGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) namespace to your respective Window as follows. {% tabs %} @@ -122,7 +122,7 @@ SfCircularGauge sfCircularGauge = new SfCircularGauge(); ## Configuring scales -You can configure the [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html) elements by using the following APIs: +You can configure the [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html) elements by using the following properties: * StartAngle @@ -144,7 +144,7 @@ You can configure the [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncf - + {% endhighlight %} @@ -199,7 +199,7 @@ SfCircularGauge sfCircularGauge = new SfCircularGauge(); ## Adding a needle pointer -Create a `Needle Pointer`, and associate it with a scale that is to be displayed the current value. +Create a `Needle Pointer`, and associate it with a scale that is to display the current value. {% tabs %} @@ -331,7 +331,7 @@ The `Symbol Pointer` points to the current value in a scale. {% endtabs %} -The following code example is the complete code of the previous configurations. +The following code example combines all of the previous configurations. {% tabs %} @@ -499,4 +499,4 @@ SfCircularGauge supports various built-in themes. Refer to the below links to ap [How to apply themes for SfCircularGauge](https://support.syncfusion.com/kb/article/2832/how-to-apply-themes-for-sfcirculargauge) -[How to create dynamic application driven by excelling formulas using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) +[How to prepare car dashboard demo using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) diff --git a/wpf/Radial-Gauge/Header.md b/wpf/Radial-Gauge/Header.md index 1646dce5ec..e55803d3fc 100644 --- a/wpf/Radial-Gauge/Header.md +++ b/wpf/Radial-Gauge/Header.md @@ -9,11 +9,11 @@ documentation: ug # Header in WPF Radial Gauge (SfCircularGauge) -Header allows you to show text or any UI content inside the gauge control using [`GaugeHeader`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) option. This provides information about the data that is being plotted in the circular gauge. +Header allows you to show text or any UI content inside the gauge control using the [`GaugeHeader`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) option. This provides information about the data that is being plotted in the circular gauge. -## Setting Header for Circular Gauge +## Setting a header for the circular gauge -The [`GaugeHeader`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) is an object that can be used to set a unique header for the circular gauge. You can add text and images as header in the circular gauge. Only one header can be added in a circular gauge. +The [`GaugeHeader`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) is an object that can be used to set a unique header for the circular gauge. You can add text and images as a header in the circular gauge. Only one header can be added to a circular gauge. {% tabs %} @@ -87,7 +87,7 @@ this.Content = sfCircularGauge; ![CircularGauge Header](Header_images/Header_img1.png) -## Setting alignment for header +## Setting alignment for the header The gauge header can be positioned by using the [`HeaderAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_HeaderAlignment) property. The default value of this property is `Left`. @@ -185,9 +185,9 @@ this.Content = sfCircularGauge; ![CircularGauge Header with customization](Header_images/Header_img2.png) -## Setting position for header +## Setting the position for the header -The [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeaderPosition) property is used to place header in the circular gauge. The value for `GaugeHeaderPosition` should be specified in offset value. In the point value, which has been given for the `GaugeHeaderPosition`, the first value represent x-coordinate and the second value represents y-coordinate. First, set the `HeaderAlignment` to custom, then set the position of header. +The [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeaderPosition) property is used to place the header in the circular gauge. The value for `GaugeHeaderPosition` should be specified as an offset value. In the point value given for `GaugeHeaderPosition`, the first value represents the x-coordinate and the second value represents the y-coordinate. First, set the `HeaderAlignment` to custom, then set the position of the header. {% tabs %} @@ -263,9 +263,9 @@ The [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam ![CircularGauge header with custom position](Header_images/Header_img3.png) -## Customization of header font +## Customization of the header font -You can customize the header’s text by using the `FontFamily`, `FontStyle`, `FontSize`, and `Foreground` properties. +You can customize the header's text by using the `FontFamily`, `FontStyle`, `FontSize`, and `Foreground` properties. {% tabs %} @@ -345,9 +345,4 @@ You can customize the header’s text by using the `FontFamily`, `FontStyle`, `F {% endtabs %} -![CircularGauge Header with customization](Header_images/Header_img4.png) - - - - - +![CircularGauge Header with customization](Header_images/Header_img4.png) \ No newline at end of file diff --git a/wpf/Radial-Gauge/Labels.md b/wpf/Radial-Gauge/Labels.md index 453207efc8..0791b9dc3f 100644 --- a/wpf/Radial-Gauge/Labels.md +++ b/wpf/Radial-Gauge/Labels.md @@ -119,11 +119,11 @@ sfCircularGauge.Scales.Add(mainscale); ## Setting a position for labels - The `Labels` can be placed inside the scale, outside the scale, or custom position using the following two ways: +The `Labels` can be placed inside the scale, outside the scale, or at a custom position using the following two ways: -### Inside or Outside label Position +### Inside or outside label position -Placing the labels inside or outside the scale by selecting the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) property is `Inside` or `Outside`. Please find the values available in `LabelPosition` property below. +Placing the labels inside or outside the scale by selecting the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) property as `Inside` or `Outside`. Please find the values available in the `LabelPosition` property below. 1. Inside (Default) @@ -177,9 +177,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Setting position for labels image](Labels_images/Setting_Position_for_labels.png) -### Setting custom position for labels +### Setting a custom position for labels -Positioning the labels far away from the ticks using the [`LabelOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelOffset) property. First, set the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) to custom, and then position the label using the `LabelOffset` property. +Position the labels far away from the ticks using the [`LabelOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelOffset) property. First, set the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) to custom, and then position the label using the `LabelOffset` property. {% tabs %} @@ -231,7 +231,7 @@ sfCircularGauge.Scales.Add(mainscale); ## Label rotation -Circular gauge labels can be rotated based on its corresponding angle. This can be controlled by [`CanRotateLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_CanRotateLabels) property in the scale. +Circular gauge labels can be rotated based on their corresponding angle. This can be controlled by the [`CanRotateLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_CanRotateLabels) property in the scale. Setting false to this property will display all the labels without rotation. @@ -289,27 +289,27 @@ Setting false to this property will display all the labels without rotation. ![Label rotation](Labels_images/RotateLabels.PNG) -## Setting a smart labels +## Setting smart labels The [`EnableSmartLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EnableSmartLabels) property is a Boolean property that enables or disables the smart label feature of the circular gauge. -This property allow to change the `NumericScaleType` of the labels displayed in a gauge scale, and customize the labels by adding prefixes or suffixes to the scale labels. +This property allows you to change the `NumericScaleType` of the labels displayed in a gauge scale, and customize the labels by adding prefixes or suffixes to the scale labels. -The [`NumericScaleType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_NumericScaleType) property allows to set the type of label. The following types can be applied to labels: +The [`NumericScaleType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_NumericScaleType) property allows you to set the type of label. The following types can be applied to labels: -• Auto +* Auto -• Thousands +* Thousands -• Millions +* Millions -• Billions +* Billions -• Trillions +* Trillions -• Quadrillions +* Quadrillions -• Quintillions +* Quintillions {% tabs %} @@ -364,7 +364,7 @@ sfCircularGauge.Scales.Add(mainscale); ![Setting smart labels image](Labels_images/Setting_Smart_labels.png) -## Setting a number of fraction digits for labels +## Setting the number of fractional digits for labels The [`NoOfFractionalDigit`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_NoOfFractionalDigit) property is used to set the number of fractional digits to be displayed in the scale labels. @@ -412,15 +412,15 @@ sfCircularGauge.Scales.Add(mainscale); {% endtabs %} -![Fraction_Digits_fo_lables](Labels_images/Fraction_Digits_for_lables.png) +![Fraction digits for labels](Labels_images/Fraction_Digits_for_lables.png) ## Setting a postfix and prefix for labels You can postfix or prefix values to the scale labels using the [`LabelPostfix`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPostfix) and [`LabelPrefix`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPrefix) properties, respectively. -### Setting postfix value for labels +### Setting a postfix value for labels -The `LabelPostfix` property allows to postfix the values to the scale labels. +The `LabelPostfix` property allows you to postfix the values to the scale labels. {% tabs %} @@ -466,11 +466,11 @@ sfCircularGauge.Scales.Add(mainscale); {% endtabs %} -![Postfix for lables image](Labels_images/Postfix_for_lables.png) +![Postfix for labels image](Labels_images/Postfix_for_lables.png) -### Setting prefix value for labels +### Setting a prefix value for labels -The `LabelPrefix` property allows to prefix the values to the scale labels. +The `LabelPrefix` property allows you to prefix the values to the scale labels. {% tabs %} @@ -510,17 +510,19 @@ circularPointer.NeedlePointerVisibility = Visibility.Hidden; mainscale.Pointers.Add(circularPointer); +sfCircularGauge.Scales.Add(mainscale); + {% endhighlight %} {% endtabs %} -![Prefix for lables image](Labels_images/Prefix_for_lables.png) +![Prefix for labels image](Labels_images/Prefix_for_lables.png) -### Setting scale labels visibility +### Setting the scale labels visibility -The [`ShowLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLabels) property is a Boolean property, which is used to enable or disable the labels in circular gauge. +The [`ShowLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLabels) property is a Boolean property, which is used to enable or disable the labels in the circular gauge. -N> Default value of the ShowLabels property is true. +N> The default value of the `ShowLabels` property is true. {% tabs %} @@ -555,13 +557,13 @@ N> Default value of the ShowLabels property is true. ![WPF Circular Gauge Label Image](Labels_images/Show-labels.png) -### Edge label customization in scale +### Edge label customization in the scale You can customize the edge label by using the [`ShowFirstLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowFirstLabel) and [`ShowLastLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLastLabel) properties, which are Boolean properties. -* `ShowFirstLabel` property is used to enable or disable the first label. Default value of the ShowFirstLabel property is true. +* The `ShowFirstLabel` property is used to enable or disable the first label. The default value of the `ShowFirstLabel` property is true. -* `ShowLastLabel` property is used to enable or disable the last label. Default value of the ShowLastLabel property is true. +* The `ShowLastLabel` property is used to enable or disable the last label. The default value of the `ShowLastLabel` property is true. {% tabs %} diff --git a/wpf/Radial-Gauge/Overview.md b/wpf/Radial-Gauge/Overview.md index 188f82427a..be948ad728 100644 --- a/wpf/Radial-Gauge/Overview.md +++ b/wpf/Radial-Gauge/Overview.md @@ -8,7 +8,7 @@ documentation: ug --- # WPF Radial Gauge (SfCircularGauge) Overview -The circular gauge helps to visualize numeric values on a circular scale. The appearance of the gauge is fully customized to integrate your applications without fault. +The circular gauge helps to visualize numeric values on a circular scale. The appearance of the gauge is fully customizable to integrate with your applications without fault. ## Key features @@ -24,7 +24,7 @@ The [`CircularGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gaug * Header -The circular gauge control is highly customizable with variety of simple APIs to modify its basic look and feel. You can position the ranges, ticks, labels, and range pointers as needed. +The circular gauge control is highly customizable with a variety of simple APIs to modify its basic look and feel. You can position the ranges, ticks, labels, and range pointers as needed. ### Scales @@ -32,7 +32,7 @@ The [`Scales`](https://help.syncfusion.com/wpf/radial-gauge/scales) contain labe ### Ranges -The [`Ranges`](https://help.syncfusion.com/wpf/radial-gauge/ranges) are visual elements that depict the start and end values of inner divisions within the scale’s range. Each scale is capable of displaying one or more ranges, and each range can depict different zones or regions of same metrics, such as high, low, and average temperatures. +The [`Ranges`](https://help.syncfusion.com/wpf/radial-gauge/ranges) are visual elements that depict the start and end values of inner divisions within the scale's range. Each scale is capable of displaying one or more ranges, and each range can depict different zones or regions of the same metrics, such as high, low, and average temperatures. ### Pointers @@ -44,4 +44,10 @@ The [`Header`](https://help.syncfusion.com/wpf/radial-gauge/header) can be used ![Circular Gauge - Overview](Overview_images/Overview_img1.jpeg) +## See also + +[How to apply themes for SfCircularGauge](https://support.syncfusion.com/kb/article/2832/how-to-apply-themes-for-sfcirculargauge) + +[How to prepare car dashboard demo using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) + diff --git a/wpf/Radial-Gauge/Pointers.md b/wpf/Radial-Gauge/Pointers.md index 92e6dc26c5..15efa54d4b 100644 --- a/wpf/Radial-Gauge/Pointers.md +++ b/wpf/Radial-Gauge/Pointers.md @@ -9,13 +9,13 @@ documentation: ug # Pointers in WPF Radial Gauge (SfCircularGauge) -[`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) are used to indicate values on the scale. Pointer value can be modified using the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Value) property. +[`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) are used to indicate values on the scale. The pointer value can be modified using the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Value) property. -There are three types of [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers). You can choose a pointer using the [`PointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerType) property. +There are three types of [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers). You can choose a pointer using the [`PointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerType) property. ## Needle pointer -Indicate a current value by using the highly customizable needle-type element. A needle pointer contains three parts, a needle,knob and tail that can be placed on a gauge to mark values. +Indicate a current value by using the highly customizable needle-type element. A needle pointer contains three parts: a needle, a knob, and a tail that can be placed on a gauge to mark values. {% tabs %} @@ -61,7 +61,7 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img1.png) -### Different types of needle pointer +### Different types of needle pointer The appearance of the needle pointer can be customized using the [`NeedlePointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerType) property. The default value of this property is Rectangle. The `NeedlePointerType` is an `enum` property that includes the following options: @@ -123,7 +123,7 @@ sfCircularGauge.Scales.Add(mainscale); ### Needle pointer customization -The length of a needle is controlled using the [`NeedleLengthFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedleLengthFactor) property. The minimum and maximum bounds of the `NeedleLengthFactor` property is 0 to 1. The needle’s UI is customized using the [`NeedlePointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStroke) and [`NeedlePointerStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStrokeThickness) properties. The size of the pointer cap can be modified by changing the [`PointerCapDiameter`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerCapDiameter) property. +The length of a needle is controlled using the [`NeedleLengthFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedleLengthFactor) property. The minimum and maximum bounds of the `NeedleLengthFactor` property are 0 to 1. The needle's UI is customized using the [`NeedlePointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStroke) and [`NeedlePointerStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStrokeThickness) properties. The size of the pointer cap can be modified by changing the [`PointerCapDiameter`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerCapDiameter) property. {% tabs %} @@ -188,7 +188,7 @@ sfCircularGauge.Scales.Add(mainscale); ### Needle pointer knob customization -You can able to customize the needle pointer knob size, fill, stroke and stroke thickness by using [`KnobRadiusFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobRadiusFactor), [`KnobFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobFill), [`KnobStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobStroke), [`KnobStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobStrokeThickness) properties. +You can customize the needle pointer knob size, fill, stroke, and stroke thickness by using the [`KnobRadiusFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobRadiusFactor), [`KnobFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobFill), [`KnobStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobStroke), and [`KnobStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobStrokeThickness) properties. {% tabs %} @@ -241,7 +241,7 @@ You can able to customize the needle pointer knob size, fill, stroke and stroke ![Pointers - Circular Gauge](Pointers_images/Pointers_needlepointer_knobcustomization.png) -### Setting visibility of needle pointer +### Setting the visibility of the needle pointer The visibility of the needle pointer can be set using the [`NeedlePointerVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerVisibility) property. @@ -288,17 +288,17 @@ sfCircularGauge.Scales.Add(mainscale); {% endtabs %} -### Setting tail for needle pointer +### Setting the tail for the needle pointer -Tail of the needle pointer can be customized by using the [`TailFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailFill), [`TailLengthFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailLengthFactor), [`TailStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailStroke), and [`TailStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailStrokeThickness) properties. +The tail of the needle pointer can be customized by using the [`TailFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailFill), [`TailLengthFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailLengthFactor), [`TailStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailStroke), and [`TailStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailStrokeThickness) properties. -* `TailFill` - Fill color to needle pointer’s tail. +* `TailFill` - Fill color for the needle pointer's tail. -* `TailLengthFactor` - Length factor of needle pointer’s tail. It’s range is 0 to 1. +* `TailLengthFactor` - Length factor of the needle pointer's tail. Its range is 0 to 1. -* `TailStroke` - Stroke to needle pointer’s tail. +* `TailStroke` - Stroke for the needle pointer's tail. -* `TailStrokeThickness` - Set the stroke thickness to needle pointer’s tail. +* `TailStrokeThickness` - Sets the stroke thickness for the needle pointer's tail. {% tabs %} @@ -478,7 +478,7 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img6.png) -### Setting visibility for range pointer +### Setting visibility for the range pointer The [`RangePointerVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangePointerVisibility) property is used to set the visibility of the range pointer. @@ -526,17 +526,17 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img7.png) -### Setting position for range pointer +### Setting the position for the range pointer -The `RangePointer` can be positioned anywhere in the gauge by the following ways: +The `RangePointer` can be positioned anywhere in the gauge in the following ways: -1. Setting direct `RangePointerPosition` property to place pointer inside or outside the gauge. -2. Setting `Offset` and `RangePointerStrokeThickness` properties. This positions is responsive for all the window size. But `RangePointer` width is fixed. -3. Setting `RangeStartOffset` and `RangeEndOffset` properties. This position and width are responsive to all size of the window. +1. Setting the direct `RangePointerPosition` property to place the pointer inside or outside the gauge. +2. Setting the `Offset` and `RangePointerStrokeThickness` properties. This position is responsive for all window sizes, but the `RangePointer` width is fixed. +3. Setting the `RangeStartOffset` and `RangeEndOffset` properties. This position and width are responsive to all window sizes. -#### Setting direct range pointer position +#### Setting the direct range pointer position -You can directly place the range pointer inside, outside or cross the scale by selecting one of the below option available in the [`RangePointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) property. +You can directly place the range pointer inside, outside, or across the scale by selecting one of the below options available in the [`RangePointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) property. 1. Inside (Default) @@ -597,9 +597,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img8.png) -#### Setting offset range pointer position with fixed width +#### Setting the offset range pointer position with fixed width -This ways allows to place the range pointer anywhere inside the gauge. First, set the [`RangePointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) to custom, and then set the [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Offset) property for required position. `Offset` value should be from 0 to 1. This positions is responsive for all the window size. But `RangePointer` width is fixed. +This way allows you to place the range pointer anywhere inside the gauge. First, set the [`RangePointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) to custom, and then set the [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Offset) property for the required position. The `Offset` value should be from 0 to 1. This position is responsive for all window sizes, but the `RangePointer` width is fixed. {% tabs %} @@ -649,9 +649,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img9.png) -#### Setting start and end position of the range pointer with offset +#### Setting the start and end position of the range pointer with offset -[`RangeStartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeStartOffset) and [`RangeEndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeEndOffset) properties with `RangePointerPosition` is custom allows to place the range pointer anywhere inside the gauge. First, set the `RangePointerPosition` to custom, and then set the `RangeStartOffset` and `RangeEndOffset` properties for required position. Offset value should be from 0 to 1. This position and width are responsive to all size of the window. +The [`RangeStartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeStartOffset) and [`RangeEndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeEndOffset) properties with `RangePointerPosition` set to custom allow you to place the range pointer anywhere inside the gauge. First, set the `RangePointerPosition` to custom, and then set the `RangeStartOffset` and `RangeEndOffset` properties for the required position. The offset value should be from 0 to 1. This position and width are responsive to all window sizes. {% tabs %} @@ -703,7 +703,7 @@ sfCircularGauge.Scales.Add(mainscale); ### Range pointer start customization -The [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeStart) property used to customize the range pointer start position in scale. +The [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeStart) property is used to customize the range pointer start position in the scale. {% tabs %} @@ -756,9 +756,9 @@ The [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges. ![Pointers - Circular Gauge](Pointers_images/Pointers_rangepointer_custom_start.png) -### Setting range cap for range pointer +### Setting the range cap for the range pointer -The [`RangeCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeCap) property provides options to position the range cap of the RangePointer, which contains the start, end, both, and none options. The `RangeCap` property is an enum property. +The [`RangeCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeCap) property provides options to position the range cap of the range pointer, which contains the start, end, both, and none options. The `RangeCap` property is an enum property. {% tabs %} @@ -802,7 +802,7 @@ The [`RangeCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Ci ## Symbol pointer -In symbol pointer, the value is pointed out using a symbol on the scale. The symbol is an enum property that provides symbol options for the symbol pointer, which contains several shapes such as rectangle, ellipse, and triangle. +In a symbol pointer, the value is pointed out using a symbol on the scale. The symbol is an enum property that provides symbol options for the symbol pointer, which contains several shapes such as rectangle, ellipse, and triangle. {% tabs %} @@ -852,7 +852,7 @@ sfCircularGauge.Scales.Add(mainscale); ### Symbol pointer types -You can modify the symbol pointer view by choosing available options in [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Symbol.html) property. Please find the types of symbol below. +You can modify the symbol pointer view by choosing from the available options in the [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Symbol.html) property. Please find the types of symbols below. 1. Arrow 2. Cross @@ -919,9 +919,9 @@ You can modify the symbol pointer view by choosing available options in [`Symbol ![Pointers - Circular Gauge](Pointers_images/Pointers_pentagon_symbolpointer.png) -### Setting custom symbol pointer +### Setting a custom symbol pointer -You can customize the `SymbolPointer` by setting [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Symbol) as `Custom` and defining [`SymbolTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerTemplate). Please find the custom template section below. +You can customize the `SymbolPointer` by setting the [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Symbol) as `Custom` and defining the [`SymbolTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerTemplate). Please find the custom template section below. {% highlight xml %} @@ -1038,9 +1038,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img11.png) -### Setting visibility of symbol pointer +### Setting the visibility of the symbol pointer -The visibility of the symbol pointer can be set using the [`SymbolPointerVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerVisibility) Property. +The visibility of the symbol pointer can be set using the [`SymbolPointerVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerVisibility) property. {% tabs %} @@ -1085,9 +1085,9 @@ sfCircularGauge.Scales.Add(mainscale); {% endtabs %} -### Setting offset for SymbolPointers +### Setting the offset for symbol pointers -The [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Offset) property in the CircularPointer can be placed SymbolPointer in desired position of rim. +The [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Offset) property in the CircularPointer can be used to place the symbol pointer at the desired position on the rim. {% tabs %} @@ -1198,8 +1198,6 @@ circularPointer2.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, mainscale.Pointers.Add(circularPointer2); -mainscale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(mainscale); {% endhighlight %} @@ -1208,9 +1206,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img13.png) -## Setting animation for pointer +## Setting animation for the pointer -The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableAnimation) property is a Boolean property that enables or disables the animation of the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) in circular gauge and defining the corresponding animation speed with [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_AnimationDuration) property. +The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableAnimation) property is a Boolean property that enables or disables the animation of the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) in the circular gauge and defines the corresponding animation speed using the [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_AnimationDuration) property. {% tabs %} @@ -1281,8 +1279,6 @@ The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ga mainscale.Pointers.Add(circularPointer1); - mainscale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(mainscale); {% endhighlight %} @@ -1293,7 +1289,7 @@ The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ga ## Circular pointer dragging -Symbol pointer and needle pointer can be dragged over the scale value by setting the [`EnableDragging`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableDragging) property as true. [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) can be moved to the respective position. +The symbol pointer and needle pointer can be dragged over the scale value by setting the [`EnableDragging`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableDragging) property to true. The [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) can be moved to the respective position. {% tabs %} {% highlight xml %} @@ -1382,9 +1378,9 @@ Symbol pointer and needle pointer can be dragged over the scale value by setting ## Events -### Pointer position changed +### Pointer position changed -When the pointer position changes, this event is raised. Event arguments contain the following properties: +When the pointer position changes, this event is raised. The event arguments contain the following properties: [`PointerValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.PointerPosition.html#Syncfusion_UI_Xaml_Gauges_PointerPosition_PointerValue) - Denotes the pointer value. [`PointerValuePosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.PointerPosition.html#Syncfusion_UI_Xaml_Gauges_PointerPosition_PointerValuePosition) - Denotes the position of the pointer value. @@ -1437,7 +1433,7 @@ When the pointer position changes, this event is raised. Event arguments contain ### Value change started -Called when the user starts updating a new value of pointer by initiating the dragging. While dragging the pointer, other events ([`ValueChanging`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanging), [`ValueChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanged) and [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted))) will be followed after this event. +Called when the user starts updating a new value of the pointer by initiating the dragging. While dragging the pointer, other events ([`ValueChanging`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanging), [`ValueChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanged), and [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted)) will be followed after this event. The [`ValueChangeStarted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeStarted) event contains the following arguments. @@ -1478,10 +1474,10 @@ The [`ValueChangeStarted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml ### Value changing event -Called during a drag when the user is updating before a new value for the pointer by dragging. The [`ValueChangingEventArgs`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html) contains [`OldValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_OldValue), [`NewValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_NewValue), and [`Cancel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_Cancel) properties. -[`OldValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): Contains pointer old value. -[`NewValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): Contains pointer new value. -[`Cancel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): To restrict the update of the current drag pointer value, set `ValueChangingArgs.Cancel` is true. +Called during a drag when the user is updating a new value for the pointer by dragging. The [`ValueChangingEventArgs`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html) contains [`OldValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_OldValue), [`NewValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_NewValue), and [`Cancel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_Cancel) properties. +[`OldValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): Contains the pointer's old value. +[`NewValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): Contains the pointer's new value. +[`Cancel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): To restrict the update of the current drag pointer value, set `ValueChangingArgs.Cancel` to true. {% tabs %} {% highlight xaml %} @@ -1534,7 +1530,7 @@ Called during a drag when the user is updating before a new value for the pointe ### Value changed event -Called during a drag when the user is updating a new value for the pointer by dragging. The [`ValueChangedEventArgs`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html) contains [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value) property. +Called during a drag when the user is updating a new value for the pointer by dragging. The [`ValueChangedEventArgs`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html) contains the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value) property. [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value) : Contains the drag pointer value. {% tabs %} @@ -1578,7 +1574,7 @@ Called during a drag when the user is updating a new value for the pointer by dr ### Value change completed -Called after a new value has been updated by terminating the dragging of the pointer. While dragging the pointer, other events (ValueChangeStarted, ValueChanging and ValueChanged) will be called prior to the [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted) event. +Called after a new value has been updated by terminating the dragging of the pointer. While dragging the pointer, other events (ValueChangeStarted, ValueChanging, and ValueChanged) will be called prior to the [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted) event. This event will notify the completion of dragging with a new value being updated. @@ -1622,8 +1618,10 @@ The [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa ## See also -[How to create a WPF SfCircularGauge range pointer with rounded corner edge](https://www.syncfusion.com/kb/11958/how-to-create-a-wpf-circular-gauge-sfcirculargauge-range-pointer-with-rounded-corner-edge) +[How to create a WPF circular gauge (SfCircularGauge) range pointer with rounded corner edge](https://support.syncfusion.com/kb/article/10366/how-to-create-a-wpf-circular-gauge-sfcirculargauge-range-pointer-with-rounded-corner-edge) + +[How to customize a needle pointer knob in WPF radial gauge (SfCircularGauge)](https://support.syncfusion.com/kb/article/10438/how-to-customize-a-needle-pointer-knob-in-wpf-radial-gauge-sfcirculargauge) -[How to customize a needle pointer knob in WPF SfCircularGauge](https://www.syncfusion.com/kb/11929/how-to-customize-a-needle-pointer-knob-in-wpf-radial-gauge-sfcirculargauge) +[How to drag the (symbol & needle) pointers in the WPF circular gauge](https://support.syncfusion.com/kb/article/10540/how-to-drag-the-symbol--needle-pointers-in-the-wpf-circular-gauge) -[How to drag the (symbol & needle) pointers in the WPF SfCircularGauge](https://www.syncfusion.com/kb/11908/how-to-drag-the-symbol-needle-pointers-in-the-wpf-circular-gauge-sfcirculargauge) +[How to prepare car dashboard demo using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) diff --git a/wpf/Radial-Gauge/Ranges.md b/wpf/Radial-Gauge/Ranges.md index 19c488c5ab..60bb9cb827 100644 --- a/wpf/Radial-Gauge/Ranges.md +++ b/wpf/Radial-Gauge/Ranges.md @@ -11,7 +11,7 @@ documentation: ug Range is a visual element, which begins and ends at the specified values within a scale. -## Setting a start and end values for range +## Setting start and end values for a range The start and end values of ranges are set by using the [`StartValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_EndValue) properties. @@ -75,7 +75,7 @@ The start and end values of ranges are set by using the [`StartValue`](https://h ## Range customization -A ranges appearance is customized by using the [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Stroke), [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StrokeThickness), and [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Offset) properties. First, set the `RangePosition` property to custom in scale, and then set the `Offset`. +A range's appearance is customized by using the [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Stroke), [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StrokeThickness), and [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Offset) properties. First, set the `RangePosition` property to custom in the scale, and then set the `Offset`. {% tabs %} @@ -130,7 +130,7 @@ A ranges appearance is customized by using the [`Stroke`](https://help.syncfusi ![Ranges - Circular Gauge](Ranges_images/Ranges_img2.png) -## Setting a width for range +## Setting a width for a range The circular range width is customized by setting the [`StartWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_EndWidth) properties. @@ -209,9 +209,9 @@ The circular range width is customized by setting the [`StartWidth`](https://hel ![Ranges - Circular Gauge](Ranges_images/Ranges_img3.png) -## Binding range color to scale tick and labels +## Binding range color to scale ticks and labels -You can bind the ranges stroke to the tick lines and labels within its range by setting the [`BindRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToLabels) and [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToTicks) properties to true. +You can bind the range's stroke to the tick lines and labels within its range by setting the [`BindRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToLabels) and [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToTicks) properties to true. {% tabs %} @@ -309,11 +309,11 @@ sfCircularGauge.Scales.Add(mainscale); ![Ranges - Circular Gauge](Ranges_images/Ranges_img4.png) -## Setting a position for range +## Setting a position for a range -The range can be placed inside the scale, outside the scale, or on the scale by using the following two ways: +The range can be placed inside the scale, outside the scale, or on the scale using the following two ways: -### By setting direct range position +### By setting a direct range position You can place the range by selecting one of the options available in the [`RangePosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePosition) property. @@ -418,19 +418,19 @@ this.Content = sfCircularGauge; ![Ranges - Circular Gauge](Ranges_images/Ranges_img5.png) -### By setting range offset +### By setting the range offset -The range can be placed inside the scale, outside the scale, or on the scale by using the following two ways: +The range can be placed inside the scale, outside the scale, or on the scale using the following two ways: -1. Setting `Offset` and `StrokeThickness` properties. +1. Setting the `Offset` and `StrokeThickness` properties. -2. Setting `InnerStartOffset`, `InnerEndOffset`, `OuterStartOffset`, and `OuterEndOffset` properties. +2. Setting the `InnerStartOffset`, `InnerEndOffset`, `OuterStartOffset`, and `OuterEndOffset` properties. -N>For using this feature need to set the `RangePosition` as custom in the `Rim`. +N> To use this feature, you need to set the `RangePosition` as custom in the `Rim`. #### By setting Offset and StrokeThickness -For absolute position, you can use `Offset` and `StrokeThickness` properties of Range. For setting the `Offset` and `StrokeThickness` to the range. +For absolute position, you can use the `Offset` and `StrokeThickness` properties of the range. Set the `Offset` and `StrokeThickness` to the range. {% tabs %} @@ -480,7 +480,7 @@ For absolute position, you can use `Offset` and `StrokeThickness` properties of #### By setting InnerStartOffset, InnerEndOffset, OuterStartOffset, and OuterEndOffset -For relative position, you can use `InnerStartOffset`, `InnerEndOffset`, `OuterStartOffset`, and `OuterEndOffset` properties of Range. This positions is responsive for all the window size. +For relative position, you can use the `InnerStartOffset`, `InnerEndOffset`, `OuterStartOffset`, and `OuterEndOffset` properties of the range. This position is responsive for all window sizes. {% tabs %} @@ -533,7 +533,7 @@ For relative position, you can use `InnerStartOffset`, `InnerEndOffset`, `OuterS ![Inner,Outer Offset Image for Range](Ranges_images/Range-Inner-Outer-Offset.png) -## Setting a multiple ranges +## Setting multiple ranges In addition to the default range, you can add n number of ranges to a scale by using the [`Ranges`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Ranges) property. @@ -633,9 +633,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Ranges - Circular Gauge](Ranges_images/Ranges_img7.png) -### Setting gradient color for range +### Setting a gradient color for a range -You can give color transition to range by specifying the different colors using the [`GradientStops`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_GradientStops) property of range. By using the `Value` and `Color` properties of `GradientStops`, you can adjust the color transition range for each color. +You can give a color transition to a range by specifying the different colors using the [`GradientStops`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_GradientStops) property of the range. By using the `Value` and `Color` properties of `GradientStops`, you can adjust the color transition range for each color. {% tabs %} @@ -726,3 +726,11 @@ You can give color transition to range by specifying the different colors using {% endtabs %} ![Ranges - GradientStops](Ranges_images/Gradient-image.png) + +## See also + +[How to apply gradient color for ranges in WPF circular gauge (SfCircularGauge)](https://support.syncfusion.com/kb/article/10343/how-to-apply-gradient-color-for-ranges-in-wpf-circular-gauge-sfcirculargauge) + +[How to create a WPF circular gauge (SfCircularGauge) range pointer with rounded corner edge](https://support.syncfusion.com/kb/article/10366/how-to-create-a-wpf-circular-gauge-sfcirculargauge-range-pointer-with-rounded-corner-edge) + +[How to prepare car dashboard demo using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) diff --git a/wpf/Radial-Gauge/Rim.md b/wpf/Radial-Gauge/Rim.md index 1f325e6711..36349db3ee 100644 --- a/wpf/Radial-Gauge/Rim.md +++ b/wpf/Radial-Gauge/Rim.md @@ -70,7 +70,7 @@ this.Content = sfCircularGauge; {% endtabs %} -![Rim startValue enadValue image](Rim_images/Rim_StartValue_EnadValue.png) +![Rim startValue endValue image](Rim_images/Rim_StartValue_EnadValue.png) ## Rim customization @@ -128,15 +128,15 @@ this.Content = sfCircularGauge; ![Rim customization image](Rim_images/Rim_customization.png) -## Setting a position for rim +## Setting a position for the rim -You can customize the position of [`Scales`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularGauge.html#Syncfusion_Windows_Gauge_CircularGauge_Scales) in the following two ways: -1. [`RadiusFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RadiusFactor) property. -2. [`Radius`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Radius) property. +You can customize the position of the [`Scales`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularGauge.html#Syncfusion_Windows_Gauge_CircularGauge_Scales) in the following two ways: +1. The [`RadiusFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RadiusFactor) property. +2. The [`Radius`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Radius) property. -### Setting a radius factor for rim +### Setting a radius factor for the rim -The value for `RadiusFactor` should be specified in offset value. It value should be 0 to 1. `RadiusFactor` sets the scale responsive with the window. +The value for `RadiusFactor` should be specified as an offset value. The value should be from 0 to 1. `RadiusFactor` sets the scale responsive with the window. {% tabs %} @@ -188,9 +188,9 @@ this.Content = sfCircularGauge; ![Rim with RadiusFactor image](Rim_images/Rim_with_RadiusFactor.png) -### Setting a radius for rim +### Setting a radius for the rim -You can set the `Radius` of rim in pixel value. `Radius` sets the scale fixed with the given pixel value. +You can set the `Radius` of the rim in pixel value. `Radius` sets the scale fixed with the given pixel value. {% tabs %} @@ -242,9 +242,9 @@ this.Content = sfCircularGauge; ### Setting rim visibility -The [`ShowRim`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowRim) property is a Boolean property, which is used to enable or disable the rim in circular gauge. +The [`ShowRim`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowRim) property is a Boolean property, which is used to enable or disable the rim in the circular gauge. -N> Default value of the ShowRim property is true. +N> The default value of the `ShowRim` property is true. {% tabs %} @@ -279,7 +279,7 @@ N> Default value of the ShowRim property is true. ![Show rim support in WPF Circular Gauge](Rim_images/show-rim.png) -### Set offset value for a responsive size in rim +### Setting an offset value for a responsive size in the rim * [`RimStartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RimStartOffset) - Sets the rim start offset position. Its range is from 0 to 1. * [`RimEndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RimEndOffset) - Sets the rim end offset position. Its range is from 0 to 1. diff --git a/wpf/Radial-Gauge/Scales.md b/wpf/Radial-Gauge/Scales.md index 0cd3984868..334e70f3b1 100644 --- a/wpf/Radial-Gauge/Scales.md +++ b/wpf/Radial-Gauge/Scales.md @@ -13,8 +13,8 @@ Scales contain a collection of [`CircularScale`](https://help.syncfusion.com/cr/ ## Scale -The [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html) contains sub elements such as rim, ticks, labels, ranges, and pointers. They define the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, frequency of labels, and tick marks. A scale will have multiple ranges. -A range is a visual element, which begins and ends at the specified values within a [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html). A range will have one or more pointers to point out the values in a scale. +The [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html) contains sub elements such as rim, ticks, labels, ranges, and pointers. They define the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, frequency of labels, and tick marks. A scale can have multiple ranges. +A range is a visual element, which begins and ends at the specified values within a [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html). A range can have one or more pointers to point out the values in a scale. {% tabs %} @@ -46,7 +46,7 @@ A range is a visual element, which begins and ends at the specified values withi ![Circular Gauge Scale Image](Scales_images/Scales_img1.png) -## Setting start and end values for scale +## Setting start and end values for the scale The [`StartValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EndValue) properties allow you to set the start and end values for a scale. @@ -100,7 +100,7 @@ The [`StartValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges. ![Circular Scale With Start And End Value Image](Scales_images/Scales_img2.png) -## Setting start and sweep angles for scale +## Setting start and sweep angles for the scale The [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html#Syncfusion_Windows_Gauge_CircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepAngle) properties allow you to set the start and end angles for a scale. @@ -154,9 +154,9 @@ The [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.C ![Circular Scale With Start And Sweep Angle Image](Scales_images/Scales_img3.png) -## Setting interval for scale +## Setting the interval for the scale -The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Interval) property allows you to set the interval for a scale. The default value of `Interval` is `Auto`, it defines the count of the scale labels based on `StartValue` and `EndValue` of scale. +The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Interval) property allows you to set the interval for a scale. The default value of `Interval` is `Auto`, which defines the count of the scale labels based on the `StartValue` and `EndValue` of the scale. {% tabs %} @@ -210,11 +210,11 @@ The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Ci ![Circular Scale Interval Image](Scales_images/Scales_img4.png) -N> You can specify the interval value upto 5 decimal places while showing the labels of linear scale. +N> You can specify the interval value up to 5 decimal places while showing the labels of the linear scale. -## Setting sweep direction for scale +## Setting the sweep direction for the scale -The [`SweepDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepDirection) property allows you to render the gauge scale in either clockwise or counterclockwise direction. +The [`SweepDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepDirection) property allows you to render the gauge scale in either a clockwise or counterclockwise direction. {% tabs %} @@ -264,7 +264,7 @@ The [`SweepDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gau ![Circular Scale Direction Image](Scales_images/Scales_img5.png) -## Setting multiple scales for circular gauge +## Setting multiple scales for the circular gauge You can add multiple scales to the same circular gauge and customize all the scales in a [`Scales`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularGauge.html#Syncfusion_Windows_Gauge_CircularGauge_Scales) collection. The [`SpacingMargin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_SpacingMargin) property determines the size of the circular gauge, which ranges from 0.1 to 1. diff --git a/wpf/Radial-Gauge/Ticks.md b/wpf/Radial-Gauge/Ticks.md index 53d1355ccc..339c59f3ac 100644 --- a/wpf/Radial-Gauge/Ticks.md +++ b/wpf/Radial-Gauge/Ticks.md @@ -9,15 +9,15 @@ documentation: ug # Ticks in WPF Radial Gauge (SfCircularGauge) -Ticks help you identify the gauge’s data value by marking the gauge scale in regular increments. +Ticks help you identify the gauge's data value by marking the gauge scale in regular increments. ## Tick customization -The Interval property is used to calculate the tick count for a scale. Similar major ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_MinorTicksPerInterval) property. +The `Interval` property is used to calculate the tick count for a scale. Similar to major ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_MinorTicksPerInterval) property. -The length, stroke, and stroke thickness of a major ticks and minor ticks are set by using the [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length), [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Stroke), and [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StrokeThickness) properties, respectively. +The length, stroke, and stroke thickness of major ticks and minor ticks are set by using the [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length), [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Stroke), and [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StrokeThickness) properties, respectively. -### Customize major ticks for scale +### Customizing major ticks for the scale {% tabs %} @@ -66,7 +66,7 @@ The length, stroke, and stroke thickness of a major ticks and minor ticks are se ![Major Ticks image](Ticks_images/Major_Ticks.png) -### Customize minor ticks for scale +### Customizing minor ticks for the scale {% tabs %} @@ -107,9 +107,9 @@ The length, stroke, and stroke thickness of a major ticks and minor ticks are se ![Minor ticks image](Ticks_images/Minor_Ticks.png) -## Setting shape for tick +## Setting a shape for the tick -The [`TickShape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickShape) is an enum property that provides an option to select shape of the circular mark ticks, which contains several shapes such as rectangle, ellipse, and triangle. +The [`TickShape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickShape) is an enum property that provides an option to select the shape of the circular mark ticks, which contains several shapes such as rectangle, ellipse, and triangle. {% tabs %} @@ -162,17 +162,17 @@ The [`TickShape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.C ![Triangle shapes ticks image](Ticks_images/Triangle_Shape_Ticks.png) -## Setting position for tick +## Setting the position for the tick -The major and minor ticks can be positioned far away from the rim using the following ways: +The major and minor ticks can be positioned far away from the rim in the following ways: -* Setting direct [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property. This place the tick inside, outside or cross of the rim. +* Setting the direct [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property. This places the tick inside, outside, or across the rim. -* Setting [`MajorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [`MinorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Offset) and [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length) properties. This tick positions is responsive for all the window size. But tick length is fixed. +* Setting the [`MajorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [`MinorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Offset) and [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length) properties. This tick position is responsive for all window sizes, but the tick length is fixed. -* Setting [`MajorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [`MinorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) [`StartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StartOffset), and [`EndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_EndOffset) properties. This tick position and length are responsive to all size of the window. +* Setting the [`MajorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [`MinorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) [`StartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StartOffset), and [`EndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_EndOffset) properties. This tick position and length are responsive to all window sizes. -### Setting direct tick position +### Setting the direct tick position Placing the ticks inside or outside the scale, or across the scale by selecting one of the options available in the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property. They are: @@ -233,9 +233,9 @@ Placing the ticks inside or outside the scale, or across the scale by selecting ![Outer position ticks image](Ticks_images/Outer_Position_Ticks.png) -### Setting scale tick Offset value +### Setting the scale tick offset value -For relative position you can use [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Offset) and [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length) property. First, set the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to custom, and then set the offset and length of the tick. +For relative position, you can use the [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Offset) and [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length) properties. First, set the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to custom, and then set the offset and length of the tick. {% tabs %} @@ -286,9 +286,9 @@ For relative position you can use [`Offset`](https://help.syncfusion.com/cr/wpf/ ![Tick Offset image](Ticks_images/Custom_Position_Ticks.png) -### Setting start and end Offset value for scale tick +### Setting start and end offset values for the scale tick -For absolute position you can use [`StartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StartOffset), [`EndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_EndOffset) properties of `MajorTickSettings` and `MinorTickSettings`. First, set the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to custom, and then set the `StartOffset` and `EndOffset` of the tick. +For absolute position, you can use the [`StartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StartOffset) and [`EndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_EndOffset) properties of `MajorTickSettings` and `MinorTickSettings`. First, set the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to custom, and then set the `StartOffset` and `EndOffset` of the tick. {% tabs %} @@ -345,11 +345,11 @@ For absolute position you can use [`StartOffset`](https://help.syncfusion.com/cr ![Tick StartOffset EndOffset image](Ticks_images/Tick_Start_End_Offset.png) -### Setting ticks visibility in scale +### Setting ticks visibility in the scale -The [`ShowTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowTicks) property allows you to enable or disable the ticks of circular gauge. +The [`ShowTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowTicks) property allows you to enable or disable the ticks of the circular gauge. -N> Default value of the ShowTicks property is true. +N> The default value of the `ShowTicks` property is true. {% tabs %} @@ -383,4 +383,4 @@ N> Default value of the ShowTicks property is true. {% endtabs %} -![Show tick support in Xamarin.Forms Circular Gauge](Ticks_images/Show-ticks.png) +![Show tick support in WPF Circular Gauge](Ticks_images/Show-ticks.png) From e7788379d05f35f8584db74f429fe967b4a7cf0c Mon Sep 17 00:00:00 2001 From: DhanarajRajendran Date: Thu, 9 Jul 2026 14:28:09 +0530 Subject: [PATCH 08/15] Resolved CI issues. --- wpf/Barcode/Barcode-Customization.md | 2 +- wpf/Barcode/Getting-Started.md | 2 +- wpf/Barcode/Supported-Barcode-types.md | 2 +- wpf/Barcode/Symbology-Settings.md | 2 +- wpf/Bullet-Graph/Labels.md | 2 +- wpf/Bullet-Graph/Ranges.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/wpf/Barcode/Barcode-Customization.md b/wpf/Barcode/Barcode-Customization.md index cb834ec4d3..dfecb9dec9 100644 --- a/wpf/Barcode/Barcode-Customization.md +++ b/wpf/Barcode/Barcode-Customization.md @@ -1,7 +1,7 @@ --- layout: post title: Barcode Customization in WPF Barcode control | Syncfusion -description: Learn about Barcode Customization support in Syncfusion WPF Barcode (SfBarcode) control. +description: Learn how to customize barcodes in the Syncfusion WPF SfBarcode control, including appearance, styling, and configuration options. platform: wpf control: SfBarcode documentation: ug diff --git a/wpf/Barcode/Getting-Started.md b/wpf/Barcode/Getting-Started.md index 9da0cb25fb..c05ff86e25 100644 --- a/wpf/Barcode/Getting-Started.md +++ b/wpf/Barcode/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with WPF Barcode control | Syncfusion -description: Learn about getting started with the Syncfusion WPF Barcode (SfBarcode) control and its elements. +description: Learn how to get started with the Syncfusion WPF SfBarcode control, including setup, basic usage, and key barcode elements. platform: wpf control: SfBarcode documentation: ug diff --git a/wpf/Barcode/Supported-Barcode-types.md b/wpf/Barcode/Supported-Barcode-types.md index 906f249e62..1f25c5306c 100644 --- a/wpf/Barcode/Supported-Barcode-types.md +++ b/wpf/Barcode/Supported-Barcode-types.md @@ -1,7 +1,7 @@ --- layout: post title: Supported Barcode types in WPF Barcode control | Syncfusion -description: Learn about the supported Barcode types in the Syncfusion WPF Barcode (SfBarcode) control. +description: Learn about the barcode types supported in the Syncfusion WPF SfBarcode control, including 1D and 2D barcode symbologies. platform: wpf control: SfBarcode documentation: ug diff --git a/wpf/Barcode/Symbology-Settings.md b/wpf/Barcode/Symbology-Settings.md index 46726d8cfd..e9aa2521c3 100644 --- a/wpf/Barcode/Symbology-Settings.md +++ b/wpf/Barcode/Symbology-Settings.md @@ -1,7 +1,7 @@ --- layout: post title: Symbology Settings in WPF Barcode control | Syncfusion -description: Learn about the Symbology Settings support in the Syncfusion WPF Barcode (SfBarcode) control. +description: Learn about Symbology Settings in the Syncfusion WPF SfBarcode control and configure barcode-specific encoding options. platform: wpf control: SfBarcode documentation: ug diff --git a/wpf/Bullet-Graph/Labels.md b/wpf/Bullet-Graph/Labels.md index af28fcec68..a7ca8a8b93 100644 --- a/wpf/Bullet-Graph/Labels.md +++ b/wpf/Bullet-Graph/Labels.md @@ -1,7 +1,7 @@ --- layout: post title: Labels in WPF Bullet Graph control | Syncfusion -description: Learn all about the Labels support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn about label support in the Syncfusion WPF SfBulletGraph control, including label customization, positioning, and formatting options. platform: wpf control: SfBulletGraph documentation: ug diff --git a/wpf/Bullet-Graph/Ranges.md b/wpf/Bullet-Graph/Ranges.md index 48a31ccfc6..13e44a499d 100644 --- a/wpf/Bullet-Graph/Ranges.md +++ b/wpf/Bullet-Graph/Ranges.md @@ -1,7 +1,7 @@ --- layout: post title: Ranges in WPF Bullet Graph control | Syncfusion -description: Learn all about the Ranges support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn about range support in the Syncfusion WPF SfBulletGraph control, including range customization, styling, and value visualization. platform: wpf control: SfBulletGraph documentation: ug From ea90804e2cd2a8761a21ca54628b4569e5585753 Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Thu, 9 Jul 2026 15:14:26 +0530 Subject: [PATCH 09/15] Updated changes for FilterLevel.Extended --- wpf/TreeGrid/Filtering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wpf/TreeGrid/Filtering.md b/wpf/TreeGrid/Filtering.md index 0408e112e8..2a5a07506b 100644 --- a/wpf/TreeGrid/Filtering.md +++ b/wpf/TreeGrid/Filtering.md @@ -39,7 +39,7 @@ Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not **Extended** -Filter will be applied to all nodes. However, child nodes are filtered only when their parent node is either in an expanded state or matches the filter condition. If a node matches the filter condition, all of its ancestor nodes will be displayed, even if those ancestors do not match the filter condition, and ancestor node’s `IsFiltered` value will be set to false. +In Extended mode, filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. In such cases, the ancestor node's `IsFiltered` property is set to `false`. N> You can change the `FilterLevel` at run time. From 1788fa710e6e32078cf6574eb0dcfd5adf25790d Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Thu, 9 Jul 2026 16:20:12 +0530 Subject: [PATCH 10/15] Updated content --- wpf/TreeGrid/Filtering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wpf/TreeGrid/Filtering.md b/wpf/TreeGrid/Filtering.md index 2a5a07506b..01eb7938c3 100644 --- a/wpf/TreeGrid/Filtering.md +++ b/wpf/TreeGrid/Filtering.md @@ -27,7 +27,7 @@ treeGrid.FilterLevel = FilterLevel.All; * All - Filter will be applied to all the nodes in SfTreeGrid. -* Extended - Filter will be applied to all nodes. However, child nodes are filtered only when their parent node is either in an expanded state or matches the filter condition. If a node matches the filter condition, all of its ancestor nodes will be displayed, even if those ancestors do not match the filter condition. +* Extended - Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. In such cases, the ancestor node's `IsFiltered` property is set to `false`. **Root** @@ -39,7 +39,7 @@ Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not **Extended** -In Extended mode, filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. In such cases, the ancestor node's `IsFiltered` property is set to `false`. +Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. In such cases, the ancestor node's `IsFiltered` property is set to `false`. N> You can change the `FilterLevel` at run time. From 76cbcdaf57288c9f2fa05e40aefe8cbbcdba441b Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Thu, 9 Jul 2026 17:02:47 +0530 Subject: [PATCH 11/15] Updated review changes --- wpf/TreeGrid/Filtering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wpf/TreeGrid/Filtering.md b/wpf/TreeGrid/Filtering.md index 01eb7938c3..ff2e174a43 100644 --- a/wpf/TreeGrid/Filtering.md +++ b/wpf/TreeGrid/Filtering.md @@ -39,7 +39,7 @@ Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not **Extended** -Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. In such cases, the ancestor node's `IsFiltered` property is set to `false`. +Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. N> You can change the `FilterLevel` at run time. From 02fbb6ba32d2110104cb29615eebd2402c1eb9f2 Mon Sep 17 00:00:00 2001 From: ushasundarajan Date: Thu, 9 Jul 2026 17:05:34 +0530 Subject: [PATCH 12/15] Updated review changes --- wpf/TreeGrid/Filtering.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/wpf/TreeGrid/Filtering.md b/wpf/TreeGrid/Filtering.md index ff2e174a43..ad46e7a0a1 100644 --- a/wpf/TreeGrid/Filtering.md +++ b/wpf/TreeGrid/Filtering.md @@ -27,7 +27,7 @@ treeGrid.FilterLevel = FilterLevel.All; * All - Filter will be applied to all the nodes in SfTreeGrid. -* Extended - Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. In such cases, the ancestor node's `IsFiltered` property is set to `false`. +* Extended - Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. **Root** @@ -39,7 +39,7 @@ Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not **Extended** -Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. +Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. In such cases, the ancestor node's `IsFiltered` property is set to `false`. N> You can change the `FilterLevel` at run time. From 625a875dfbb7c82171996bb5e44213df4425658e Mon Sep 17 00:00:00 2001 From: DhanarajRajendran Date: Thu, 9 Jul 2026 17:17:46 +0530 Subject: [PATCH 13/15] Comprehensive User guide document updated for WPF Map controls. --- wpf/Maps/Annotations.md | 8 +- wpf/Maps/Basic-KML-Format.md | 4 +- wpf/Maps/Bubbles.md | 19 ++-- wpf/Maps/Commands-for-Zooming-and-Panning.md | 20 ++-- wpf/Maps/Custom-Data-Binding.md | 12 +- wpf/Maps/Events.md | 22 ++-- wpf/Maps/Getting-Started.md | 104 ++++++++++++------ ...ude-value-to-pixel-value-and-vice-versa.md | 6 +- wpf/Maps/Layers.md | 12 +- wpf/Maps/Legend.md | 12 +- wpf/Maps/Map-Points.md | 6 +- wpf/Maps/Map-Providers.md | 7 +- wpf/Maps/Map-Selection.md | 14 +-- wpf/Maps/Map-Shape-Labels.md | 10 +- wpf/Maps/MapPopup.md | 4 +- wpf/Maps/Markers.md | 32 +++--- wpf/Maps/Multilayer-Support.md | 8 +- wpf/Maps/Overview.md | 6 +- wpf/Maps/PopulateData.md | 12 +- wpf/Maps/ShapeType.md | 40 +++---- wpf/Maps/Shapes-Color-Customization.md | 94 ++++++++-------- wpf/Maps/UserInteraction.md | 64 +++++------ 22 files changed, 276 insertions(+), 240 deletions(-) diff --git a/wpf/Maps/Annotations.md b/wpf/Maps/Annotations.md index 4bfe8d4734..2f9e08a5ed 100644 --- a/wpf/Maps/Annotations.md +++ b/wpf/Maps/Annotations.md @@ -18,13 +18,13 @@ Annotations are notes that are used to leave some message on the map. In Maps, a [`AnnotationSymbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationSymbol) is a `VisualObject` that shows a note symbolically. -1. [`AnnotationLabelForeground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelForeground): Get or sets the foreground color of the annotation label. +1. [`AnnotationLabelForeground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelForeground): Gets or sets the foreground color of the annotation label. 2. [`AnnotationLabelFontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontStyle): Gets or sets the font style of the annotation label. 3. [`AnnotationLabelBackground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelBackground): Gets or sets the background color of the annotation label. 4. [`AnnotationLabelFontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontFamily): Gets or sets the font family for the annotation label. 5. [`AnnotationLabelFontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontSize): Gets or sets the annotation label font size. 6. [`Latitude`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Latitude): Gets or sets the Latitude coordinate of the Annotation. -7. [`Longitude`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Longitude): Gets or set the Longitude coordinate of the Annotation. +7. [`Longitude`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Longitude): Gets or sets the Longitude coordinate of the Annotation. {% tabs %} @@ -46,7 +46,7 @@ Annotations are notes that are used to leave some message on the map. In Maps, a - + diff --git a/wpf/Maps/Bubbles.md b/wpf/Maps/Bubbles.md index 6e167d0c87..c83afa3c73 100644 --- a/wpf/Maps/Bubbles.md +++ b/wpf/Maps/Bubbles.md @@ -9,7 +9,7 @@ documentation: ug # Bubbles in WPF Maps (SfMap) -Bubbles in the [WPF Maps](https://www.syncfusion.com/wpf-controls/map) control represent the under-bound data values of the map. Bubbles are scattered throughout map shapes that contain bound values. +Bubbles in the [WPF Maps](https://www.syncfusion.com/wpf-controls/map) control represent the under-bound data values of the map. Bubbles are scattered throughout the map shapes that contain bound values. Bubbles are included when data binding is set as mentioned above and the BubbleMarkerSetting is set. @@ -30,7 +30,7 @@ Gets or sets whether the colors should be automatically filled.
{{'[MaxSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MaxSize)'| markdownify }} Double -Get or sets the maximum height and width of the bubble.
{{'[MinSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MinSize)'| markdownify }} @@ -40,7 +40,7 @@ Gets or sets the minimum height and width of the bubble.
{{'[StrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_StrokeThickness)'| markdownify }} Double -Get or sets the border thickness of the bubbles.
{{'[ValuePath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath)'| markdownify }} @@ -50,7 +50,7 @@ Gets or sets the name of the under-bound property in ItemsSource.
{{'[ColorValuePath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ColorValuePath)'| markdownify }} String -Gets or sets colors to bubble shape.
{{'[ColorMapping](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ColorMappings)'| markdownify }} @@ -81,7 +81,7 @@ Gets the Size ratio for the bubbles based on the MinSize and MaxSize.
LegendPositionX Double -Gets or sets the margin value for the x axis.
LegendPositionY Double -Gets or sets the margin value for the y axis.
## Legend header @@ -50,17 +50,19 @@ A header for the legend can be added by setting the [`LegendHeader`](https://hel ## Legend categories -Legends are categorized as two types: +Legends are categorized into two types: * Legends for shape layers. * Legends for bubbles. These can be set by using the [`LegendType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_LegendType) property of the type LegendType. -### Shapes +### Bubbles Bubble type legends are always bubbles with varying sizes. The size of the bubbles is obtained from the [`SizeRatio`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_SizeRatio) from the BubbleMarkerSetting. +### Shapes + Layer shape type legends can be different shapes for the legend. The shapes can be set by using the [`LegendIcon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_LegendIcon), of the LegendIcon type. ### Arranging the Legends diff --git a/wpf/Maps/Map-Points.md b/wpf/Maps/Map-Points.md index d25f28b9aa..213e0207c2 100644 --- a/wpf/Maps/Map-Points.md +++ b/wpf/Maps/Map-Points.md @@ -9,7 +9,7 @@ documentation: ug # Map Points in WPF Maps (SfMap) -Points are one of the record type in shape file layer. Points are used to specify the specific point in the map. For example, used to specify the capital of countries. Points in the shape file is given as latitude and longitude coordinates in the shapes file. Those points should be converted as MapPoints. +Points are one of the record types in the shape file layer. Points are used to specify a specific point in the map. For example, used to specify the capital of countries. Points in the shape file are given as latitude and longitude coordinates in the shapes file. Those points should be converted as MapPoints. ## Customizing the MapPoint @@ -61,7 +61,7 @@ SfMap map = new SfMap(); ## MapPointIcon -[`MapPointIcon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointIcon) is used for customizing points shapes.It can be customized by following shapes: +[`MapPointIcon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointIcon) is used for customizing point shapes. It can be customized by the following shapes: * Rectangle @@ -141,7 +141,7 @@ SfMap map = new SfMap(); ## MapPointPopup -MapPointPopup is a popup, displayed when the point is moved to MapPoint. It shows additional information from the object bounded with the MapPoint. You can get the object from dbf file. +MapPointPopup is a popup, displayed when the point is hovered over the MapPoint. It shows additional information from the object bound with the MapPoint. You can get the object from the dbf file. ### MapPointPopupTemplate diff --git a/wpf/Maps/Map-Providers.md b/wpf/Maps/Map-Providers.md index 7010db9446..84ba1cfd13 100644 --- a/wpf/Maps/Map-Providers.md +++ b/wpf/Maps/Map-Providers.md @@ -128,7 +128,7 @@ The default appearance of the Marker can be customized by using the [MarkerTempl Refer to this [link](https://help.syncfusion.com/wpf/maps/markers) for customizing marker icons, labels, marker alignment, marker selection and events. -### Adding a multiple layers in OSM +### Adding multiple layers in OSM Multiple layers can be added within a single [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html). To achieve this, add the required layers to the [SubShapeFileLayers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_SubShapeFileLayers) property of the [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html). @@ -170,8 +170,7 @@ You can enable Bing Maps by setting the [LayerType](https://help.syncfusion.com/ ### Bing Map Key -The [BingMapKey](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapKey) is provided as input to this key property. The Bing Map key can be obtained from -[https://www.microsoft.com/en-us/maps/create-a-bing-maps-key](https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key). +The [BingMapKey](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapKey) is provided as input to this key property. The Bing Map key can be obtained from [https://www.microsoft.com/en-us/maps/create-a-bing-maps-key](https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key). The [Maps](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control supports the following [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV) view styles: @@ -241,7 +240,7 @@ this.Content = map; The following screenshot illustrates the Road view. -'![Bing map Road View image](Map-Providers_images/Bing_map_Road_View_image.jpg) +![Bing map Road View image](Map-Providers_images/Bing_map_Road_View_image.jpg) ### AerialWithLabelView diff --git a/wpf/Maps/Map-Selection.md b/wpf/Maps/Map-Selection.md index 05f9b76fb0..b0fe827fbb 100644 --- a/wpf/Maps/Map-Selection.md +++ b/wpf/Maps/Map-Selection.md @@ -14,13 +14,13 @@ Each shape in the map can be selected and unselected when interacted with shapes 1. Single Selection 2. Multi Selection -The selected map shapes is differentiate by its fill. [`SelectedShapeColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_SelectedShapeColor) of `ShapeSetting` is the API that is used to get or set the selected shape color. +The selected map shapes are differentiated by their fill. [`SelectedShapeColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_SelectedShapeColor) of `ShapeSetting` is the API that is used to get or set the selected shape color. -All selected shapes available in the [`SelectedMapShapes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_SelectedMapShapes) of ShapeFileLayer. +All selected shapes are available in the [`SelectedMapShapes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_SelectedMapShapes) of ShapeFileLayer. ## Single Selection -Single selection allows only one shape to be selected at a time. You can select the shape by clicking or tapping on the shape. Single selection is enabled by the [`EnableSelection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_EnableSelection) property of ShapeFileLayer. When `EnableSelection` is set to true, then the map can be selected. When it is set to false, the shapes cannot be selected. When any other shape or the map area is selected, then the shape that is already selected is unselected. +Single selection allows only one shape to be selected at a time. You can select the shape by clicking or tapping on the shape. Single selection is enabled by the [`EnableSelection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_EnableSelection) property of ShapeFileLayer. When `EnableSelection` is set to true, then the map shape can be selected. When it is set to false, the shapes cannot be selected. When any other shape or the map area is selected, then the shape that is already selected is unselected. {% tabs %} @@ -50,8 +50,8 @@ Single selection allows only one shape to be selected at a time. You can select ShapeSetting setting = new ShapeSetting(); setting.ShapeFill = (SolidColorBrush)(new BrushConverter().ConvertFrom("#E5E5E5")); - setting.ShapeStroke= (SolidColorBrush)(new BrushConverter().ConvertFrom("#C1C1C1")); - setting.SelectedShapeColor= (SolidColorBrush)(new BrushConverter().ConvertFrom("#1196CD")); + setting.ShapeStroke = (SolidColorBrush)(new BrushConverter().ConvertFrom("#C1C1C1")); + setting.SelectedShapeColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#1196CD")); setting.ShapeStrokeThickness = 1; shapeFileLayer.ShapeSettings = setting; @@ -67,7 +67,7 @@ Single selection allows only one shape to be selected at a time. You can select ## Multi Selection -Multiple shapes in the map can be selected when [`EnableMultiSelection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_EnableMultiSelection) of ShapeFileLayer is set to true. When EnableMultiSelection is set to true, a cross-hair cursor appears on the map to guide the selection. When you drag on the map, a rectangle appears. The shapes bound that intersect with the rectangle is selected. When EnableMultiSelection is set to true, the panning does not work through interactions. +Multiple shapes in the map can be selected when [`EnableMultiSelection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_EnableMultiSelection) of ShapeFileLayer is set to true. When EnableMultiSelection is set to true, a cross-hair cursor appears on the map to guide the selection. When you drag on the map, a rectangle appears. The shapes that intersect with the rectangle are selected. When EnableMultiSelection is set to true, the panning does not work through interactions. {% tabs %} @@ -96,7 +96,7 @@ Multiple shapes in the map can be selected when [`EnableMultiSelection`](https:/ shapeFileLayer.EnableMultiSelection = true; shapeFileLayer.EnableSelection = true; shapeFileLayer.CrossCursorStrokeThickness = 0.5; - shapeFileLayer.CrossCursorStroke= (SolidColorBrush)(new BrushConverter().ConvertFrom("#686868")); + shapeFileLayer.CrossCursorStroke = (SolidColorBrush)(new BrushConverter().ConvertFrom("#686868")); shapeFileLayer.Uri = "DataMarkers.ShapeFiles.world1.shp"; map.Layers.Add(shapeFileLayer); this.Content = map; diff --git a/wpf/Maps/Map-Shape-Labels.md b/wpf/Maps/Map-Shape-Labels.md index aca8c94d47..dc999fa40a 100644 --- a/wpf/Maps/Map-Shape-Labels.md +++ b/wpf/Maps/Map-Shape-Labels.md @@ -9,7 +9,7 @@ documentation: ug # Map Shape Labels in WPF Maps (SfMap) -Labels for map shapes can be displayed by using the [`LabelPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_LabelPath) of ShapeFileLayer. The value of LabelPath must be a field name specified in the .dbf file corresponding to the shapefile. +Labels for map shapes can be displayed by using the [`LabelPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_LabelPath) of the ShapeFileLayer. The value of LabelPath must be a field name specified in the .dbf file corresponding to the shapefile. @@ -54,14 +54,14 @@ Gets or sets the field name in the database (.dbf) file. {% endtabs %} -The labels can also be customized by modifying the [`ItemsTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsTemplate) of ShapeFileLayer. The labels can be accessed by using DBFData as follows: +The labels can also be customized by modifying the [`ItemsTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsTemplate) of the ShapeFileLayer. The labels can be accessed by using `DbfData` as follows: {% tabs %} {% highlight xaml %} - + @@ -72,7 +72,7 @@ The labels can also be customized by modifying the [`ItemsTemplate`](https://hel + LabelPath="NAME" ItemsTemplate="{StaticResource itemTemplate}"> @@ -97,4 +97,4 @@ The labels can also be customized by modifying the [`ItemsTemplate`](https://hel ![Maps control Shape labels](Map-Shape-Labels_images/Map-Shape-Labels_img1.png) -N> You can refer to our [WPF Map](https://www.syncfusion.com/wpf-controls/map) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Map example](https://github.com/syncfusion/wpf-demos/tree/master/map) to know how to render and configure the map. +N> You can refer to our [WPF Map](https://www.syncfusion.com/wpf-controls/map) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Map example](https://github.com/syncfusion/wpf-demos/tree/master/map) to know how to render and configure the map. \ No newline at end of file diff --git a/wpf/Maps/MapPopup.md b/wpf/Maps/MapPopup.md index ad8aa9b57d..9f0f18e451 100644 --- a/wpf/Maps/MapPopup.md +++ b/wpf/Maps/MapPopup.md @@ -9,9 +9,9 @@ documentation: ug # MapPopup in WPF Maps (SfMap) -MapPopup is a hanging window, displayed when the shape is tapped. It shows additional information from the object bounded with the shape. By default, it takes the property of the bounded object that is referred in the ShapeValuePath and displays its content when the corresponding shape is tapped. +MapPopup is a hanging window, displayed when the shape is tapped. It shows additional information from the object bound with the shape. By default, it takes the property of the bound object that is referred to in the ShapeValuePath and displays its content when the corresponding shape is tapped. -MapPopup is displayed only when [`MapPopupVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPopupVisibility) set to true in the shape file layer. +MapPopup is displayed only when [`MapPopupVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPopupVisibility) is set to true in the shape file layer. It also customizes the MapPopup template. [`PopupCustomTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_PopupCustomTemplate) is a DataTemplate type API that is used to expose the custom template for the MapPopup. diff --git a/wpf/Maps/Markers.md b/wpf/Maps/Markers.md index 54082f9228..d31dbee73e 100644 --- a/wpf/Maps/Markers.md +++ b/wpf/Maps/Markers.md @@ -15,13 +15,13 @@ Markers are used to show some messages on maps. Any number of markers can be added to the shape file layer or the imagery layer using the [`Markers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_Markers) property. Each marker contains the following properties: -N> You must create a model that contains properties such as Latitude and Longitude to add a marker in maps. If you want to add text with default marker, add Label property with your model. +N> You must create a model that contains properties such as Latitude and Longitude to add a marker in maps. If you want to add text with the default marker, add the Label property to your model. `Label`: Displays some messages on maps. -`Latitude`: Specifies y-axis position of the marker. +`Latitude`: Specifies the y-axis position of the marker. -`Longitude`: Specifies x-axis position of the marker. +`Longitude`: Specifies the x-axis position of the marker. {% tabs %} @@ -44,7 +44,7 @@ N> You must create a model that contains properties such as Latitude and Longitu { InitializeComponent(); ViewModel view = new ViewModel(); - this.DataContext =view; + this.DataContext = view; SfMap maps = new SfMap(); ShapeFileLayer shape = new ShapeFileLayer(); shape.Uri = "Maps.ShapeFiles.world1.shp"; @@ -61,10 +61,10 @@ N> You must create a model that contains properties such as Latitude and Longitu { this.Models = new ObservableCollection(); this.Models.Add(new Model() { Label = "USA", Latitude = "38.8833N", Longitude = "77.0167W" }); - this.Models.Add(new Model() { Label = "Brazil ", Latitude = "15.7833S", Longitude = "47.8667W" }); - this.Models.Add(new Model() { Label = "India ", Latitude = "21.0000N", Longitude = "78.0000E" }); - this.Models.Add(new Model() { Label = "China ", Latitude = "35.0000N", Longitude = "103.0000E" }); - this.Models.Add(new Model() { Label = "Indonesia ", Latitude = "6.1750S", Longitude = "106.8283E" }); + this.Models.Add(new Model() { Label = "Brazil", Latitude = "15.7833S", Longitude = "47.8667W" }); + this.Models.Add(new Model() { Label = "India", Latitude = "21.0000N", Longitude = "78.0000E" }); + this.Models.Add(new Model() { Label = "China", Latitude = "35.0000N", Longitude = "103.0000E" }); + this.Models.Add(new Model() { Label = "Indonesia", Latitude = "6.1750S", Longitude = "106.8283E" }); } } @@ -258,7 +258,7 @@ The size and color of marker icons can be customized using the [`MarkerIconSize` ### Icon types -The shape of a marker icons can be customized using the [`MarkerIconType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconType) property. The maps control supports the following types of marker icons: +The shape of a marker icon can be customized using the [`MarkerIconType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconType) property. The maps control supports the following types of marker icons: * Circle * Diamond @@ -299,7 +299,7 @@ The shape of a marker icons can be customized using the [`MarkerIconType`](https ### Setting an image marker icon -You can set the image as marker icon by setting the icon type as an Image and set [`MarkerIconSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconSource) to get the image from local path. +You can set an image as the marker icon by setting the icon type as Image and set [`MarkerIconSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconSource) to get the image from a local path. {% tabs %} @@ -338,7 +338,7 @@ You can set the image as marker icon by setting the icon type as an Image and se ## Customizing labels -You can customize the marker labels using the [`MarkerLabelFontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontSize), [`MarkerLabelForeground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelForeground), [`MarkerLabelFontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontStyle), and [`MarkerLabelFontWeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontWeight) and [`MarkerLabelFontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontFamily) properties. +You can customize the marker labels using the [`MarkerLabelFontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontSize), [`MarkerLabelForeground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelForeground), [`MarkerLabelFontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontStyle), [`MarkerLabelFontWeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontWeight), and [`MarkerLabelFontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontFamily) properties. {% tabs %} @@ -378,7 +378,7 @@ You can align the maps marker horizontally and vertically using the [`MarkerHori ### Setting a horizontal alignment -The [`MarkerHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerHorizontalAlignment) property is used to position the marker icon horizontally. The marker icon can be positioned using the following ways: +The [`MarkerHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerHorizontalAlignment) property is used to position the marker icon horizontally. The marker icon can be positioned in the following ways: * `Near`: Specifies the near position of the marker icon for the given latitude and longitude values. * `Center`: Specifies the center position of the marker icon for the given latitude and longitude values. @@ -434,7 +434,7 @@ The [`MarkerHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion. ### Setting a vertical alignment -The [`MarkerVerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerVerticalAlignment) property is used to position the marker icon vertically. The marker icon can be positioned using the following ways: +The [`MarkerVerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerVerticalAlignment) property is used to position the marker icon vertically. The marker icon can be positioned in the following ways: * `Near`: Specifies the near position of the marker icon for the given latitude and longitude values. * `Center`: Specifies the center position of the marker icon for the given latitude and longitude values. @@ -493,7 +493,7 @@ N> The default marker icon position for VerticalAlignment and HorizontalAlignmen ## Selection Mode -If you add any view for marker using the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MarkerTemplate) property from [`MarkerSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html) event, then the corresponding view will be applied to the selected marker. Custom view will be added continuously for all the selected marker, but do not have option to reset the old one. Now, you can achieve this using the [`MarkerSelectionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerSelectionMode) property. If set selection mode as `Single`, then it will be removed the old view of marker and load the initially rendered marker. If set selection mode as `Multiple`, then the marker template does not reset. +If you add any view for a marker using the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MarkerTemplate) property from [`MarkerSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html) event, then the corresponding view will be applied to the selected marker. A custom view will be added continuously for all the selected markers, but there is no option to reset the old one. Now, you can achieve this using the [`MarkerSelectionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerSelectionMode) property. If the selection mode is set to `Single`, then the old view of the marker will be removed and the initially rendered marker will be loaded. If the selection mode is set to `Multiple`, then the marker template will not reset. {% tabs %} @@ -545,7 +545,7 @@ If you add any view for marker using the [`MarkerTemplate`](https://help.syncfus ## Events -The [`MarkerSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html) event is fired when a marker is selected. The `MarkerTemplate`, `SelectedMarker`, and `IsSelected` will be passed to MarkerSelectedEventArgs. +The [`MarkerSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html) event is fired when a marker is selected. The `MarkerTemplate`, `SelectedMarker`, and `IsSelected` will be passed to the MarkerSelectedEventArgs. If you set any view for the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MarkerSelectedEventArgs.html#Syncfusion_UI_Xaml_Maps_MarkerSelectedEventArgs_MarkerTemplate) property of MarkerSelectedEventArgs, the corresponding view will be applied to the selected marker. @@ -597,7 +597,7 @@ If you set any view for the [`MarkerTemplate`](https://help.syncfusion.com/cr/wp { e.MarkerTemplate = Resources["markerTemplate"] as DataTemplate; object selectedMarker = e.SelectedMarker; - bool MarkerSelected = e.IsSelected; + bool isSelected = e.IsSelected; } {% endhighlight %} diff --git a/wpf/Maps/Multilayer-Support.md b/wpf/Maps/Multilayer-Support.md index 8113a8b6c1..e8a0d9515a 100644 --- a/wpf/Maps/Multilayer-Support.md +++ b/wpf/Maps/Multilayer-Support.md @@ -15,18 +15,18 @@ Multilayer support allows you to load multiple shapefiles in a single container, This feature enables the map to load multiple types of shapefiles in a single container. Basically, shape files contain point shapes in a single container. -Situations arise where, any combination of available shapefiles needs to be loaded in a single container. In such situations this feature enables the map to load multiple shape layers in a single container. +Situations arise where any combination of available shapefiles needs to be loaded in a single container. In such situations, this feature enables the map to load multiple shape layers in a single container. ## Adding Multiple Layers in the Map -ShapeFileLayer is the core layer for the map. Multiple layers can be added in the [`ShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html) itself. They have to be added in SubShapeFileLayers within the ShapeFileLayer. +ShapeFileLayer is the core layer for the map. Multiple layers can be added in the [`ShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html) itself. They have to be added in the SubShapeFileLayers within the ShapeFileLayer. ## SubShapeFileLayers SubShapeFileLayers is the collection of [`SubShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SubShapeFileLayer.html). SubShapeFileLayer is also a type of shapefile layer. The following code adds multiple layers in the ShapeFileLayer. -{%tabs%} +{% tabs %} {% highlight xaml %} @@ -252,7 +252,7 @@ SubShapeFileLayers is the collection of [`SubShapeFileLayer`](https://help.syncf {% endhighlight %} -{%endtabs%} +{% endtabs %} ![Maps control multi layer support](Multilayer-Support_images/Multilayer-Support_img1.png) diff --git a/wpf/Maps/Overview.md b/wpf/Maps/Overview.md index 5973886269..7e56fcaf33 100644 --- a/wpf/Maps/Overview.md +++ b/wpf/Maps/Overview.md @@ -13,7 +13,7 @@ A map is a graphical representation of geographical data. It is used to represen ## Use case scenario -The Maps control can be used in following cases: +The Maps control can be used in the following cases: 1. To visualize weather data. 2. To visualize geographical statistics information. @@ -24,9 +24,9 @@ The Maps control can be used in following cases: ## Key Concepts of Map -A map contains a set of elements, including shapes, bubbles, annotations, and data items, that is maintained in layers. ShapeFileLayer is one of the layers that can be used to generate map shapes and bind business objects with them. Bubbles and MapItems enhance the data visualization capabilities of the map with data binding. +A map contains a set of elements, including shapes, bubbles, annotations, and data items, that are maintained in layers. ShapeFileLayer is one of the layers that can be used to generate map shapes and bind business objects with them. Bubbles and MapItems enhance the data visualization capabilities of the map with data binding. -Tree map-like support provides rich UI for shapes and bubbles. Annotation and CustomDataBinding items shows additional information on the map. +Tree map-like support provides rich UI for shapes and bubbles. Annotation and CustomDataBinding items show additional information on the map. Maps also provide multilayer support, which can be added as a sublayer, and shapes such as polygons, polylines, and points can be added to them. diff --git a/wpf/Maps/PopulateData.md b/wpf/Maps/PopulateData.md index f4c712445b..de8502e3db 100644 --- a/wpf/Maps/PopulateData.md +++ b/wpf/Maps/PopulateData.md @@ -9,7 +9,7 @@ documentation: ug # Populate Data in WPF Maps (SfMap) -This section explains how to populate shape data for providing data input to the maps control and usage of the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsSource) property. +This section explains how to populate shape data for providing data input to the maps control and the usage of the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsSource) property. ## Data binding @@ -23,11 +23,11 @@ The following properties in shape layers are used for binding data in the maps c ### ItemsSource -This is the basic property that exposes data binding for Maps. [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsSource) is the property that accepts the collection type values. For example, the ItemsSource property accepts the ObservableCollections, Lists, and LinqResult values. +This is the basic property that exposes data binding for Maps. [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsSource) is the property that accepts the collection type values. For example, the ItemsSource property accepts the ObservableCollection, List, and LinqResult values. ### ShapeIDPath -[`ShapeIDPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeIDPath) is the string type property used to refer to the ID of a shape from the ItemsSource. The ItemsSource property must have a property with name of the ShapeIDPath. The ShapeIDPath and the ShapeIDTableField properties are related to each other (refer to ShapeIDTableField for more details). +[`ShapeIDPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeIDPath) is the string type property used to refer to the ID of a shape from the ItemsSource. The ItemsSource property must have a property with the name of the ShapeIDPath. The ShapeIDPath and the ShapeIDTableField properties are related to each other (refer to ShapeIDTableField for more details). ### ShapeIDTableField @@ -39,7 +39,7 @@ The [`ShapeIDTableField`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. ### Role of DBF file in Data Binding -The .dbf file that is included in the main shape file, is required to work with data binding. The .dbf file contains the information about the shapes in the main shape file. Each record in the .dbf file is associated with the each shape in the main file. Shapes in the main file and records in the .dbf file are organized in the same sequence. Therefore, the Nth shape in the main file is associated with Nth record in the .dbf file. A record of the .dbf file can contain the name of the shape or population data or some other statistical data of a geographic shape. +The .dbf file that is included in the main shape file is required to work with data binding. The .dbf file contains the information about the shapes in the main shape file. Each record in the .dbf file is associated with each shape in the main file. Shapes in the main file and records in the .dbf file are organized in the same sequence. Therefore, the Nth shape in the main file is associated with the Nth record in the .dbf file. A record of the .dbf file can contain the name of the shape or population data or some other statistical data of a geographic shape. {% tabs %} @@ -90,7 +90,7 @@ The .dbf file that is included in the main shape file, is required to work with {% endtabs %} -The following code sample demonstrates referring the United States election data as items source. +The following code sample demonstrates referring the United States election data as the items source. {% highlight c# %} @@ -103,7 +103,7 @@ The following code sample demonstrates referring the United States election data set { state = value; } } - public string candidate; + private string candidate; public string Candidate { get { return candidate; } diff --git a/wpf/Maps/ShapeType.md b/wpf/Maps/ShapeType.md index 184e6b9ad9..4259c2d691 100644 --- a/wpf/Maps/ShapeType.md +++ b/wpf/Maps/ShapeType.md @@ -11,20 +11,20 @@ documentation: ug This feature allows you to draw a polygon, polyline, or circle on the map. You can provide input as geo points to draw shapes in two different ways: - 1.Add shapes using map element collection - 2.Add shapes using point collection + 1. Add shapes using map element collection + 2. Add shapes using point collection ## Add shapes using map element collection -You can provide input as a geo points collection to add multiple shapes in a single layer by using the [`MapElements`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapElements) property of shape layer. There are three types of shapes available in map element. +You can provide input as a geo points collection to add multiple shapes in a single layer by using the [`MapElements`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapElements) property of the shape layer. There are three types of shapes available in the map element. - 1.MapPolygon - 2.MapPolyline - 3.MapCircle + 1. MapPolygon + 2. MapPolyline + 3. MapCircle ### MapPolygon -You can add polygon shape on map using [`MapPolygon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapPolygon.html) class and provide geo points collection to `Points` property. Polygon shape type is used to defines a group of land, water bodies, and other features with a spatial extent. +You can add a polygon shape on the map using the [`MapPolygon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapPolygon.html) class and provide the geo points collection to the `Points` property. The polygon shape type is used to define a group of land, water bodies, and other features with a spatial extent. {% tabs %} {% highlight xaml %} @@ -65,7 +65,7 @@ You can add polygon shape on map using [`MapPolygon`](https://help.syncfusion.co { InitializeComponent(); - ViewModel viewModel = new ViewModel(); + ViewModel viewModel = new ViewModel(); SfMap maps = new SfMap(); maps.ZoomLevel = 4; ImageryLayer layer = new ImageryLayer(); @@ -136,7 +136,7 @@ You can add polygon shape on map using [`MapPolygon`](https://help.syncfusion.co ### MapPolyline -You can add polyline shape on map using [`MapPolyline`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapPolyline.html) class and provide geo points collection to `Points`. Polylines are frequently used to define linear features such as roads, rivers, and power lines. +You can add a polyline shape on the map using the [`MapPolyline`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapPolyline.html) class and provide the geo points collection to `Points`. Polylines are frequently used to define linear features such as roads, rivers, and power lines. {% tabs %} {% highlight xaml %} @@ -187,7 +187,7 @@ You can add polyline shape on map using [`MapPolyline`](https://help.syncfusion. { InitializeComponent(); - SfMap maps = new SfMap(); + SfMap maps = new SfMap(); maps.ZoomLevel = 5; ImageryLayer layer = new ImageryLayer(); layer.Center = new Point(49.9709225, 10.2187212); @@ -217,9 +217,9 @@ You can add polyline shape on map using [`MapPolyline`](https://help.syncfusion. ### MapCircle -A circle has a single geo coordinate value and it can be positioned on map using [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html#Syncfusion_UI_Xaml_Maps_MapCircle_Center) property of [`MapCircle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html). The circles are often used to define features such as oil wells, landmarks, and elevations. +A circle has a single geo coordinate value and it can be positioned on the map using the [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html#Syncfusion_UI_Xaml_Maps_MapCircle_Center) property of [`MapCircle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html). The circles are often used to define features such as oil wells, landmarks, and elevations. -* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html#Syncfusion_UI_Xaml_Maps_MapCircle_Center) - Holds latitude and longitude values that defines the center of the circle. +* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html#Syncfusion_UI_Xaml_Maps_MapCircle_Center) - Holds latitude and longitude values that define the center of the circle. {% tabs %} {% highlight xaml %} @@ -384,17 +384,17 @@ The following properties are used to customize [`MapPolygon`](https://help.syncf ## Add shapes using point collection -You can add more number of shapes on map by using [`SubShapeFileLayer`](https://help.syncfusion.com/wpf/maps/multilayer-support#subshapefilelayers) and `Points` collection property which contains the geo-coordinate points to draw a shape. In shape file layer, there are three type of shapes available and it can be changed by using the [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) property. +You can add more number of shapes on the map by using [`SubShapeFileLayer`](https://help.syncfusion.com/wpf/maps/multilayer-support#subshapefilelayers) and the `Points` collection property which contains the geo-coordinate points to draw a shape. In the shape file layer, there are three types of shapes available and it can be changed by using the [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) property. - 1.Polygon - 2.Polyline - 3.Point icon + 1. Polygon + 2. Polyline + 3. Point icon -You can customize the appearance of the shape UI by setting [`ShapeFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeFill), [`ShapeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStroke), and [`ShapeStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStrokeThickness) properties in [`ShapeSetting`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html). +You can customize the appearance of the shape UI by setting the [`ShapeFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeFill), [`ShapeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStroke), and [`ShapeStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStrokeThickness) properties in [`ShapeSetting`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html). ### Polygon -You can add polygon shape on map by using Points collection property of shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `Polygon`. Polygon shape type defines a group of land, water bodies, and other features with a spatial extent. +You can add a polygon shape on the map by using the Points collection property of the shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `Polygon`. The polygon shape type defines a group of land, water bodies, and other features with a spatial extent. {% tabs %} {% highlight xaml %} @@ -503,7 +503,7 @@ You can add polygon shape on map by using Points collection property of shape la ### Polyline -You can add polyline shape on map by using Points collection property of shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `Polyline`. Polylines are frequently used to define linear features such as roads, rivers, and power lines. +You can add a polyline shape on the map by using the Points collection property of the shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `Polyline`. Polylines are frequently used to define linear features such as roads, rivers, and power lines. {% tabs %} {% highlight xaml %} @@ -586,7 +586,7 @@ You can add polyline shape on map by using Points collection property of shape l ### Point icon -A point icon has a single geo coordinate value and you can add multi point icon shapes on map by using `Points` collection property of shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `PointIcon`. The point icons are often used to define features such as oil wells, landmarks, and elevations. +A point icon has a single geo coordinate value and you can add multi point icon shapes on the map by using the `Points` collection property of the shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `PointIcon`. The point icons are often used to define features such as oil wells, landmarks, and elevations. The size, shape, and alignment of the map points can be customized using the [`MapPointIconSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointIconSize), [`MapPointIcon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointIcon), [`MapPointHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointHorizontalAlignment), and [`MapPointVerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointVerticalAlignment) properties of the shape file layer. diff --git a/wpf/Maps/Shapes-Color-Customization.md b/wpf/Maps/Shapes-Color-Customization.md index 420dacf252..eee94dd1b8 100644 --- a/wpf/Maps/Shapes-Color-Customization.md +++ b/wpf/Maps/Shapes-Color-Customization.md @@ -19,7 +19,7 @@ The important property that makes an impact on shape colors is AutoFillColors. T ## Properties -The below mentioned properties are available in the ShapesSetting property of the ShapeFileLayer. ShapeSetting defines the basic customization settings of shapes in the map. +The properties mentioned below are available in the ShapesSetting property of the ShapeFileLayer. ShapeSetting defines the basic customization settings of shapes in the map. ### ShapeFill @@ -33,7 +33,7 @@ The below mentioned properties are available in the ShapesSetting property of th [`ShapeStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStrokeThickness) is a double type property that sets the border thickness of the shape in the map. -These setting works only when `AutoFillColor` is set as false. +These settings work only when `AutoFillColor` is set to false. {% tabs %} @@ -112,10 +112,10 @@ Gets or sets the To value of ColorValuePath +Gets or sets the color values for the given range based on the From and To.
{{'[Color](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ColorMapping.html#Syncfusion_UI_Xaml_Maps_ColorMapping_Color)'| markdownify }} Color -Gets or sets the color values for the given range based on the From and To .
-The fill color of a particular bubble fill is determined by its under-bound value and color range. To provide a Tree Map like impact on the map, the data binding should work properly. For example, consider the following color ranges. +The fill color of a particular bubble is determined by its under-bound value and color range. To provide a Tree Map-like impact on the map, the data binding should work properly. For example, consider the following color ranges. {% tabs %} @@ -195,13 +195,13 @@ The fill color of a particular bubble fill is determined by its under-bound valu {% endtabs %} -When under-bound object value is 750000000, then the fill color of the corresponding bubble is set to #3D9FD8. As mentioned earlier, the under-bound value of the bubble is set through the ShapeValuePath in the ShapeSetting. +When the under-bound object value is 750000000, then the fill color of the corresponding bubble is set to #3D9FD8. As mentioned earlier, the under-bound value of the bubble is set through the ShapeValuePath in the ShapeSetting. -When the under-bound value is under any of the given sorted range or above the sorted range, then the fill is set to Black. +When the under-bound value is under any of the given sorted ranges or above the sorted range, the fill is set to Black. AutoFillColor must be set to false to enable the range color mapping. -N> The shape’s under-bound object value must have numeric property and should be mentioned in ShapeValuePath to work on this. The color between the given ranges is applied only to the shapes that have a proper under-bound values. The color for other shapes is the ShapeFill’s color. +N> The shape's under-bound object value must have a numeric property and should be mentioned in ShapeValuePath to work on this. The color between the given ranges is applied only to the shapes that have a proper under-bound value. The color for other shapes is the ShapeFill's color. ![Maps control Shapes color customization](Shapes-Color-Customization_images/Shapes-Color-Customization_img2.png) @@ -214,13 +214,13 @@ N> The shape’s under-bound object value must have numeric property and should 1. Metro 2. CoolBlue -ColorPalette has to be set in the ShapeSetting’s ColorPalette property. ColorPalette is the enum property that accepts Metro, CoolBlue and CustomPalette. +ColorPalette has to be set in the ShapeSetting's ColorPalette property. ColorPalette is the enum property that accepts Metro, CoolBlue, and CustomPalette. {% tabs %} {% highlight xaml %} - + @@ -238,19 +238,19 @@ ColorPalette has to be set in the ShapeSetting’s ColorPalette property. ColorP {% highlight c# %} - SfMap map = new SfMap(); - ShapeFileLayer shapeFileLayer = new ShapeFileLayer(); - shapeFileLayer.Uri = "DataMarkers.ShapeFiles.usa_state.shp"; - map.Layers.Add(shapeFileLayer); + SfMap map = new SfMap(); + ShapeFileLayer shapeFileLayer = new ShapeFileLayer(); + shapeFileLayer.Uri = "DataMarkers.ShapeFiles.usa_state.shp"; + map.Layers.Add(shapeFileLayer); - ShapeSetting setting = new ShapeSetting(); - setting.ColorPalette = ColorPalettes.Metro; + ShapeSetting setting = new ShapeSetting(); + setting.ColorPalette = ColorPalettes.Metro; - ShapeFillSetting shapeFillSetting = new ShapeFillSetting(); - shapeFillSetting.AutoFillColors = true; - setting.FillSetting = shapeFillSetting; - shapeFileLayer.ShapeSettings = setting; - this.Content = map; + ShapeFillSetting shapeFillSetting = new ShapeFillSetting(); + shapeFillSetting.AutoFillColors = true; + setting.FillSetting = shapeFillSetting; + shapeFileLayer.ShapeSettings = setting; + this.Content = map; {% endhighlight %} {% endtabs %} @@ -259,9 +259,9 @@ ColorPalette has to be set in the ShapeSetting’s ColorPalette property. ColorP ## CustomColorPalette -Besides the built-in the color palettes, the custom colors can be defined for the color palette. The custom colors are defined in the `CustomColors` in `ShapeSetting`. CustomColors is the collection property that accepts the `MapColorPalette`. To apply the custom colors, `ColorPalette` must be set to `CustomPalette` and CustomColors should be defined. +Besides the built-in color palettes, the custom colors can be defined for the color palette. The custom colors are defined in the `CustomColors` in `ShapeSetting`. CustomColors is the collection property that accepts the `MapColorPalette`. To apply the custom colors, `ColorPalette` must be set to `CustomPalette` and CustomColors should be defined. -MapColorPalette contains a property named `FillBrush`. This property sets the fill color of the shape when custom palette is set. +MapColorPalette contains a property named `FillBrush`. This property sets the fill color of the shape when the custom palette is set. {% tabs %} {% highlight xaml %} @@ -288,36 +288,38 @@ MapColorPalette contains a property named `FillBrush`. This property sets the fi {% endhighlight %} -{% highlight c# %} - SfMap map = new SfMap(); - ShapeFileLayer shapeFileLayer = new ShapeFileLayer(); - shapeFileLayer.Uri = "DataMarkers.ShapeFiles.usa_state.shp"; - map.Layers.Add(shapeFileLayer); +{% highlight C# %} - ShapeSetting setting = new ShapeSetting(); - setting.ColorPalette = ColorPalettes.CustomPalette; - MapColorPalette palette = new MapColorPalette(); - palette.FillBrush = new SolidColorBrush(Colors.Gray); - setting.CustomColors.Add(palette); + SfMap map = new SfMap(); + ShapeFileLayer shapeFileLayer = new ShapeFileLayer(); + shapeFileLayer.Uri = "DataMarkers.ShapeFiles.usa_state.shp"; + map.Layers.Add(shapeFileLayer); - palette = new MapColorPalette(); - palette.FillBrush = new SolidColorBrush(Colors.Gold); - setting.CustomColors.Add(palette); + ShapeSetting setting = new ShapeSetting(); + setting.ColorPalette = ColorPalettes.CustomPalette; + MapColorPalette palette = new MapColorPalette(); + palette.FillBrush = new SolidColorBrush(Colors.Gray); + setting.CustomColors.Add(palette); - palette = new MapColorPalette(); - palette.FillBrush = new SolidColorBrush(Colors.LightBlue); - setting.CustomColors.Add(palette); + palette = new MapColorPalette(); + palette.FillBrush = new SolidColorBrush(Colors.Gold); + setting.CustomColors.Add(palette); - palette = new MapColorPalette(); - palette.FillBrush = new SolidColorBrush(Colors.LightCyan); - setting.CustomColors.Add(palette); + palette = new MapColorPalette(); + palette.FillBrush = new SolidColorBrush(Colors.LightBlue); + setting.CustomColors.Add(palette); - ShapeFillSetting shapeFillSetting = new ShapeFillSetting(); - shapeFillSetting.AutoFillColors = true; - setting.FillSetting = shapeFillSetting; - shapeFileLayer.ShapeSettings = setting; + palette = new MapColorPalette(); + palette.FillBrush = new SolidColorBrush(Colors.LightCyan); + setting.CustomColors.Add(palette); - this.Content = map; + ShapeFillSetting shapeFillSetting = new ShapeFillSetting(); + shapeFillSetting.AutoFillColors = true; + setting.FillSetting = shapeFillSetting; + shapeFileLayer.ShapeSettings = setting; + + this.Content = map; + {% endhighlight %} {% endtabs %} diff --git a/wpf/Maps/UserInteraction.md b/wpf/Maps/UserInteraction.md index 3656209b16..ccbb62c635 100644 --- a/wpf/Maps/UserInteraction.md +++ b/wpf/Maps/UserInteraction.md @@ -450,7 +450,7 @@ The following properties are related to the zooming feature of the Maps control: #### ZoomLevel -[`ZoomLevel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomLevel) is the primary property of the zooming feature. It controls the map’s scale size while zooming. Initially, the `ZoomLevel` is set to 1. zoom level cannot be less than 1. +[`ZoomLevel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomLevel) is the primary property of the zooming feature. It controls the map's scale size while zooming. Initially, the `ZoomLevel` is set to 1. The zoom level cannot be less than 1. #### EnableZoom @@ -501,19 +501,19 @@ Maps can be zoomed by using the following methods: #### Changing the ZoomLevel -A map can be zoomed by changing the zoom level of the Map control. Incrementing the ZoomLevel, zooms in the map, while decrementing the ZoomLevel, zooms it out. +A map can be zoomed by changing the zoom level of the Map control. Incrementing the ZoomLevel zooms in the map, while decrementing the ZoomLevel zooms it out. #### Using the Zoom method Maps can be zoomed using the [`Zoom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_Zoom_System_Double_) method. The Zoom method has the parameter zoom value. The map can be zoomed or scaled with the zoom value parameter. -{% highlight C# %} +{% highlight c# %} SfMap syncMap = new SfMap(); ShapeFileLayer shapeLayer = new ShapeFileLayer(); -   shapeLayer.Uri = "MapApp.ShapeFiles.world1.shp"; + shapeLayer.Uri = "MapApp.ShapeFiles.world1.shp"; syncMap.Layers.Add(shapeLayer); @@ -525,7 +525,7 @@ Maps can be zoomed using the [`Zoom`](https://help.syncfusion.com/cr/wpf/Syncfus In addition to the pinching event, the map can be zoomed using the mouse events. The map is zoomed in when the mouse is scrolled up. The map zooms out when the mouse is scrolled down. -![Maps controls Zooming and Padding](Zooming-and-Panning_images/Zooming-and-Panning_img1.png) +![Maps controls Zooming and Panning](Zooming-and-Panning_images/Zooming-and-Panning_img1.png) ## Panning the map @@ -574,7 +574,7 @@ The map can be panned with the [`Pan`](https://help.syncfusion.com/cr/wpf/Syncfu ##### Code sample for the Pan method -{% highlight C# %} +{% highlight c# %} SfMap syncMap = new SfMap(); @@ -602,18 +602,18 @@ N> The map can be panned only when some parts of the map are outside the view of ### Calculate a zoom level -This feature allows you to automatically set the initial zoom level automatically in two ways: +This feature allows you to automatically set the initial zoom level in two ways: * Distance Radius(KM/miles) * Geo-bounds(Northeast, Southwest) ### Distance radius -N> [`DistanceType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_DistanceType) default value is KiloMeter. +N> The default value of [`DistanceType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_DistanceType) is KiloMeter. Calculate the initial zoom level automatically based on the [`Radius`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_Radius) and [`DistanceType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_DistanceType) properties of ImageryLayer. -* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_Center) - Represents center point of ImageryLayer. +* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_Center) - Represents the center point of ImageryLayer. {% capture codesnippet1 %} {% tabs %} @@ -645,30 +645,30 @@ Calculate the initial zoom level automatically based on the [`Radius`](https://h {% highlight c# %} - SfMap maps = new SfMap(); - ImageryLayer layer = new ImageryLayer(); - layer.Center = new Point(38.909804, -77.043442); - layer.Radius = 5; - layer.DistanceType = DistanceType.KiloMeter; - layer.Markers = obj.Models; - layer.MarkerTemplate = this.Resources["markerTemplate"] as DataTemplate; - maps.Layers.Add(layer); - - public class Model - { - public string Longitude { get; set; } - public string Latitude { get; set; } - } + SfMap maps = new SfMap(); + ImageryLayer layer = new ImageryLayer(); + layer.Center = new Point(38.909804, -77.043442); + layer.Radius = 5; + layer.DistanceType = DistanceType.KiloMeter; + layer.Markers = obj.Models; + layer.MarkerTemplate = this.Resources["markerTemplate"] as DataTemplate; + maps.Layers.Add(layer); - public class ViewModel - { - public ObservableCollection Models { get; set; } - public ViewModel() - { - this.Models = new ObservableCollection(); - this.Models.Add(new Model() { Latitude = "38.909804", Longitude = "-77.043442" }); - } - } + public class Model + { + public string Longitude { get; set; } + public string Latitude { get; set; } + } + + public class ViewModel + { + public ObservableCollection Models { get; set; } + public ViewModel() + { + this.Models = new ObservableCollection(); + this.Models.Add(new Model() { Latitude = "38.909804", Longitude = "-77.043442" }); + } + } {% endhighlight %} From a9c3c22d4047ba3f0e33006190920b9d44b20a9e Mon Sep 17 00:00:00 2001 From: DhanarajRajendran Date: Thu, 9 Jul 2026 19:02:18 +0530 Subject: [PATCH 14/15] Resolved CI issues. --- wpf/Maps/Map-Providers.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/wpf/Maps/Map-Providers.md b/wpf/Maps/Map-Providers.md index 84ba1cfd13..56753416ea 100644 --- a/wpf/Maps/Map-Providers.md +++ b/wpf/Maps/Map-Providers.md @@ -9,7 +9,7 @@ documentation: ug # Map Providers in WPF Maps (SfMap) -The [SfMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control provides support for various map providers, including [OpenStreetMap](https://www.openstreetmap.org), [Google Maps](https://developers.google.com/maps/documentation), [Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/), and [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV). You can also integrate other map providers by adding them as layers. +The [SfMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control provides support for various map providers, including [OpenStreetMap](https://www.openstreetmap.org), [Google Maps](https://developers.google.com/maps/documentation), [Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/), and [Bing Maps](https://explore.microsoft.com/en-in/bing/features/maps/?form=MA13FV). You can also integrate other map providers by adding them as layers. ## Open Street Map @@ -162,7 +162,7 @@ The following code example demonstrates how to add multiple layers to an [Imager ## Bing Map -The [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV) is a global mapping service provided by Microsoft. Similar to [OpenStreetMap](https://www.openstreetmap.org) (OSM), it delivers map tile images based on user requests and combines them to render the required map area. +The [Bing Maps](https://explore.microsoft.com/en-in/bing/features/maps/?form=MA13FV) is a global mapping service provided by Microsoft. Similar to [OpenStreetMap](https://www.openstreetmap.org) (OSM), it delivers map tile images based on user requests and combines them to render the required map area. ### Enable a Bing Map @@ -172,7 +172,7 @@ You can enable Bing Maps by setting the [LayerType](https://help.syncfusion.com/ The [BingMapKey](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapKey) is provided as input to this key property. The Bing Map key can be obtained from [https://www.microsoft.com/en-us/maps/create-a-bing-maps-key](https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key). -The [Maps](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control supports the following [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV) view styles: +The [Maps](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control supports the following [Bing Maps](https://explore.microsoft.com/en-in/bing/features/maps/?form=MA13FV) view styles: 1. Aerial 2. AerialWithLabel @@ -275,7 +275,7 @@ The following screenshot illustrates the AerialWithLabel view. ## Azure Maps -[Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/) is an online map tile provider from Microsoft. Similar to [OSM](https://www.openstreetmap.org) and [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV), it serves map tile images on request and composites them to display the map area. +[Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/) is an online map tile provider from Microsoft. Similar to [OSM](https://www.openstreetmap.org) and [Bing Maps](https://explore.microsoft.com/en-in/bing/features/maps?form=MA13FV), it serves map tile images on request and composites them to display the map area. ### Adding Azure Maps From b5662358bb67d83a47311eeec7590de91a43086d Mon Sep 17 00:00:00 2001 From: DhanarajRajendran Date: Thu, 9 Jul 2026 19:28:17 +0530 Subject: [PATCH 15/15] Updated the Range selector UG documents. --- wpf/Range-Selector/Getting-Started.md | 38 ++++++++++++----------- wpf/Range-Selector/Interactivity.md | 22 ++++++------- wpf/Range-Selector/Label-Customization.md | 12 +++---- wpf/Range-Selector/Overview.md | 4 +-- 4 files changed, 39 insertions(+), 37 deletions(-) diff --git a/wpf/Range-Selector/Getting-Started.md b/wpf/Range-Selector/Getting-Started.md index a8b0a172be..1899ed9b7d 100644 --- a/wpf/Range-Selector/Getting-Started.md +++ b/wpf/Range-Selector/Getting-Started.md @@ -11,10 +11,10 @@ documentation: ug ## Visual structure -The date-time range navigator control is composed of various elements such as higher level bar, lower Level bar, content, and resizable scroll bar. +The date-time range navigator control is composed of various elements such as higher level bar, lower level bar, content, and resizable scroll bar. * Higher level bar: Contains timespan format that is one level higher than date-time values of lower level bar, e.g. the higher level bar contains year format (yyyy) and the lower level bar contains month format (MMM). -* Lower level bar: Contains timespan format that is one lever lower than date-time values of higher level bar, e.g. the lower level bar contains month format (MMM) and the higher level bar contains year format (yyyy). +* Lower level bar: Contains timespan format that is one level lower than date-time values of higher level bar, e.g. the lower level bar contains month format (MMM) and the higher level bar contains year format (yyyy). * Content: Holds any type of UI element inside the navigator. * Resizable scroll bar: Allows users to zoom and scroll the content and label bars. @@ -60,7 +60,7 @@ SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator(); ### Set ItemsSource for SfDateTimeRangeNavigator -Since the above steps are enough to create only empty date-time range navigator, you need to set the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_ItemsSource) and [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_XBindingPath) for the SfDateTimeRangeNavigator. The ItemsSource must implement the IEnumerable interface. +Since the above steps create only an empty date-time range navigator, you need to set the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_ItemsSource) and [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_XBindingPath) for the SfDateTimeRangeNavigator. The ItemsSource must implement the IEnumerable interface. {% tabs %} @@ -91,7 +91,7 @@ SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator Add content that needs to be displayed inside the date-time range navigator. -### Property +### Properties @@ -184,7 +184,7 @@ This section explains how to create an application using the date-time range nav 1. Open the Add Reference window in your project. 2. Choose Windows > Extensions > Syncfusion.SfChart.WPF. -3. Add the following namespace in your C# file: MainPage.xaml.cs. +3. Add the following namespace in your C# file: MainWindow.xaml.cs. {% capture codesnippet2 %} {% highlight c# %} @@ -199,7 +199,7 @@ using Syncfusion.UI.Xaml.Charts; {% highlight c# %} -SfDateTimeRangNavigator rangenavigator = new SfDateTimeRangNavigator (); +SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator(); {% endhighlight %} @@ -207,7 +207,7 @@ SfDateTimeRangNavigator rangenavigator = new SfDateTimeRangNavigator (); {% highlight c# %} -public class ItemsSource +public class UserDetail { public DateTime Date { get; set; } public double NoOfUsers { get; set; } @@ -215,20 +215,20 @@ public class ItemsSource public class UsersViewModel { - public ObservableCollection UsersList { get; set; } + public ObservableCollection UsersList { get; set; } public UsersViewModel() { - this.UsersList = new ObservableCollection(); + this.UsersList = new ObservableCollection(); DateTime date = DateTime.Today; - UsersList.Add(new ItemsSource { Date = date.AddHours(1), NoOfUsers = 3000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(2), NoOfUsers = 5000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(3), NoOfUsers = 2000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(4), NoOfUsers = 7000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(5), NoOfUsers = 6000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(6), NoOfUsers = 3000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(1), NoOfUsers = 3000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(2), NoOfUsers = 5000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(3), NoOfUsers = 2000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(4), NoOfUsers = 7000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(5), NoOfUsers = 6000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(6), NoOfUsers = 3000 }); } } @@ -242,10 +242,10 @@ N> You can set any IEnumerable collection as ItemsSource. {% highlight c# %} -//Intialize the SfDateTimeRangNavigator. +// Initialize the SfDateTimeRangeNavigator. SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator { - ItemsSource = UsersList, + ItemsSource = new UsersViewModel().UsersList, XBindingPath = "Date" }; @@ -261,9 +261,11 @@ Add the content that needs to be displayed inside the date-time range navigator // Initialize the SfChart SfChart chart = new SfChart(); +var userList = new UsersViewModel().UsersList; + LineSeries series = new LineSeries { - ItemsSource = UsersList, + ItemsSource = userList, XBindingPath = "Date", YBindingPath = "NoOfUsers" }; diff --git a/wpf/Range-Selector/Interactivity.md b/wpf/Range-Selector/Interactivity.md index 2f4ec9107e..c788821cb9 100644 --- a/wpf/Range-Selector/Interactivity.md +++ b/wpf/Range-Selector/Interactivity.md @@ -9,7 +9,7 @@ documentation: ug # Interactivity in WPF Range Selector (SfDateTimeRangeNavigator) -The date-time range navigator control provides interactive features such as zooming and panning. This control has a resizable scrollbar, which is used to zoom in large amount of data and navigate to particular timespan by moving the scroll bar. +The date-time range navigator control provides interactive features such as zooming and panning. This control has a resizable scrollbar, which is used to zoom into a large amount of data and navigate to a particular timespan by moving the scroll bar. The ZoomPosition and ZoomFactor properties of the chart axis can be bound with the SfDateTimeRangeNavigator. @@ -73,18 +73,18 @@ Description +ValueChanged(Object sender, EventArgs e) +This event is triggered when the lower bar labels are created.

+This event is triggered when the upper bar labels are created.

{{'[`ValueChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfRangeNavigator_ValueChanged)'| markdownify }} -ValueChanged (Object sender, EventArgs e) -This event is triggered when the position of the scrollbar is changed
+This event is triggered when the position of the scrollbar is changed.
{{'[`LowerBarLabelsCreated`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_LowerBarLabelsCreated)'| markdownify }}

 LowerBarLabelsCreated(Object sender, LowerBarLabelsCreatedEventArgs e)

 -This event is triggered when the lower bar labels gets created.

{{'[`HigherBarLabelsCreated`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_HigherBarLabelsCreated)'| markdownify }}

 HigherBarLabelsCreated(Object sender, HigherBarLabelsCreatedEventArgs e)

 -This event is triggered when the upper bar labels gets created.

{% tabs %} @@ -200,7 +200,7 @@ SfDateTimeRangeNavigator [LeftThumbStyle](https://help.syncfusion.com/cr/wpf/Syn ### SymbolTemplate -[SymbolTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ThumbStyle.html#Syncfusion_UI_Xaml_Charts_ThumbStyle_SymbolTemplate) can be used for gets or sets the data template for the symbol. +[SymbolTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ThumbStyle.html#Syncfusion_UI_Xaml_Charts_ThumbStyle_SymbolTemplate) gets or sets the data template for the symbol. {% tabs %} @@ -258,7 +258,7 @@ The following screenshot illustrates the control after customizing the right thu ### LineStyle -[`LineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ThumbStyle.html#Syncfusion_UI_Xaml_Charts_ThumbStyle_LineStyle) can be used for gets or sets the style for the thumb line. +[`LineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ThumbStyle.html#Syncfusion_UI_Xaml_Charts_ThumbStyle_LineStyle) gets or sets the style for the thumb line. {% tabs %} @@ -296,18 +296,18 @@ The following screenshot illustrates the control after customizing the right thu ThumbStyle thumbLineStyle1 = new ThumbStyle() { - LineStyle = grid.Resources["lineStyle1"] as DataTemplate + LineStyle = grid.Resources["lineStyle1"] as Style }; ThumbStyle thumbLineStyle2 = new ThumbStyle() { - LineStyle = grid.Resources["lineStyle2"] as DataTemplate + LineStyle = grid.Resources["lineStyle2"] as Style }; SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator() { - LineStyle = thumbLineStyle1, - LineStyle = thumbLineStyle2 + LeftThumbStyle = thumbLineStyle1, + RightThumbStyle = thumbLineStyle2 }; {% endhighlight %} diff --git a/wpf/Range-Selector/Label-Customization.md b/wpf/Range-Selector/Label-Customization.md index 6359bd2499..3272a3d24b 100644 --- a/wpf/Range-Selector/Label-Customization.md +++ b/wpf/Range-Selector/Label-Customization.md @@ -167,7 +167,7 @@ Description
{{'[`LabelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LabelBarStyle.html)'| markdownify }} -Allows to customize the label style using the LabelBarStyle property, and this property can be applied to the {{'[`HigherLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_HigherLevelBarStyle)'| markdownify }} or {{'[`LowerLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_LowerLevelBarStyle)'| markdownify }}.
{{'[`SelectedLabelStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LabelBarStyle.html#Syncfusion_UI_Xaml_Charts_LabelBarStyle_SelectedLabelStyle)'| markdownify }} @@ -221,11 +221,11 @@ The following screenshot illustrates setting the Label HorizontalAlignment to le ![Label customization in WPF SfDateTimeRangeNavigator](Label-Customization_images/Label-Customization_img2.png) -### Visibility of label bar - -SfDateTimeRangeNavigator provides support to customize the visibility of lower bar and upper bar using the `LowerLabelBarVisibility` and `UpperLabelBarVisibility` types. +### Visibility of label bar -## RangePadding Customization +SfDateTimeRangeNavigator provides support to customize the visibility of the lower bar and upper bar using the `LowerLabelBarVisibility` and `UpperLabelBarVisibility` properties. + +## RangePadding customization The date-time range navigator supports the following types of padding. @@ -261,7 +261,7 @@ SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator ### Round -When the value of [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_RangePadding) property is Round, range will be rounded to the nearest possible value by the interval. +When the value of the [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_RangePadding) property is `Round`, the range will be rounded to the nearest possible value by the interval. {% tabs %} diff --git a/wpf/Range-Selector/Overview.md b/wpf/Range-Selector/Overview.md index 71096a8cd6..7f81c20599 100644 --- a/wpf/Range-Selector/Overview.md +++ b/wpf/Range-Selector/Overview.md @@ -9,11 +9,11 @@ documentation: ug # WPF Range Selector (SfDateTimeRangeNavigator) Overview -The date-time range navigator control is a time bound data visualization control. Its purpose is to allow scrolling and navigation through large periods of time. This control can be easily combined with other controls such as chart and grid view to create rich and powerful dashboards. +The date-time range navigator control is a time-bound data visualization control. Its purpose is to allow scrolling and navigation through large periods of time. This control can be easily combined with other controls such as chart and grid view to create rich and powerful dashboards. ## Key features * Supports interactive features such as zooming and scrolling through large data. * Calculates smart labels when zooming. -* Allows users to select a particular region in large period of time. +* Allows users to select a particular region in a large period of time. * Gets the data from a selected region. \ No newline at end of file