diff --git a/uwp/DataGrid/Clipboard-Operations.md b/uwp/DataGrid/Clipboard-Operations.md index 67d06dac..783f6c49 100644 --- a/uwp/DataGrid/Clipboard-Operations.md +++ b/uwp/DataGrid/Clipboard-Operations.md @@ -1,6 +1,6 @@ --- layout: post -title: Clipboard Operations in UWP Data Grid | Syncfusion® +title: Clipboard Operations in UWP Data Grid | Syncfusion® description: Clipboard Operations in Data Grid enables copy, cut, and paste actions with configurable settings, events, and custom clipboard behavior. platform: uwp control: Data Grid @@ -10,7 +10,7 @@ documentation: ug # Clipboard Operations in UWP Data Grid -SfDataGrid provide support for the clipboard operations such as cut, copy and paste the data within control and between other applications such as Notepad, Excel. Clipboard operations copy and paste is enabled by default. You can copy selected records/cells from SfDataGrid by pressing Ctrl+C and also can paste the content from [Clipboard](https://learn.microsoft.com/en-us/uwp/api/windows.applicationmodel.datatransfer.clipboard?view=winrt-22621&redirectedfrom=MSDN) to SfDataGrid by pressing Ctrl+V. +UWP Data Grid provide support for the clipboard operations such as cut, copy and paste the data within control and between other applications such as Notepad, Excel. Clipboard operations copy and paste is enabled by default. You can copy selected records/cells from Data Grid by pressing Ctrl+C and also can paste the content from [Clipboard](https://learn.microsoft.com/en-us/uwp/api/windows.applicationmodel.datatransfer.clipboard?view=winrt-22621&redirectedfrom=MSDN) to Data Grid by pressing Ctrl+V. N> Clipboard operations is not supported for the summary rows, add new row and unbound rows. @@ -18,9 +18,9 @@ N> Clipboard operations is not supported for the summary rows, add new row and u Copy operation works based on [GridCopyOption](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_GridCopyOption) property.`GridCopyOption` provides the following options, -[None](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_None) – Disables copy in SfDataGrid. +[None](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_None) – Disables copy in Data Grid. -[CopyData](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_CopyData) – Enabled copy in SfDataGrid. +[CopyData](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_CopyData) – Enabled copy in Data Grid. [IncludeHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_IncludeHeaders) – Column header also copied along with data. @@ -52,9 +52,9 @@ N> `IncludeHiddenColumn` is not supported when `SelectionUnit` is `Cell`. Paste operation works based on [GridPasteOption](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_GridPasteOption) property. `GridPasteOption` provides the following options, -[None](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPasteOption.html#Syncfusion_UI_Xaml_Grid_GridPasteOption_None) – Disable paste in SfDataGrid. +[None](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPasteOption.html#Syncfusion_UI_Xaml_Grid_GridPasteOption_None) – Disable paste in Data Grid. -[PasteData](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPasteOption.html#Syncfusion_UI_Xaml_Grid_GridPasteOption_PasteData) – Enabled paste in SfDataGrid and when an incompatible value is pasted into a record/cell, the pasting operation is skipped for that particular record/cell. +[PasteData](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPasteOption.html#Syncfusion_UI_Xaml_Grid_GridPasteOption_PasteData) – Enabled paste in Data Grid and when an incompatible value is pasted into a record/cell, the pasting operation is skipped for that particular record/cell. [ExcludeFirstLine](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPasteOption.html#Syncfusion_UI_Xaml_Grid_GridPasteOption_ExcludeFirstLine) – This can be used when pasting data copied with `IncludeHeaders` copy option. @@ -81,9 +81,9 @@ this.dataGrid.GridPasteOption = GridPasteOption.PasteData | GridPasteOption.Excl Cut operation works based on [GridCopyOption](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_GridCopyOption) property. `GridCopyOption` provides the following options, -[None](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_None) – Disables cut in SfDataGrid. +[None](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_None) – Disables cut in Data Grid. -[CutData](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_CutData) – Enabled cut in SfDataGrid. +[CutData](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_CutData) – Enabled cut in Data Grid. [IncludeHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyOption.html#Syncfusion_UI_Xaml_Grid_GridCopyOption_IncludeHeaders) – Column header also copied along with data. @@ -114,7 +114,7 @@ N> `IncludeHiddenColumn` is not supported when `SelectionUnit` is `Cell`. ### GridCopyContent -[GridCopyContent](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridCopyContent) event occurs when copy/cut the cells in SfDataGrid. [GridCopyPasteEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyPasteEventArgs.html) provides information for `GridCopyContent` event. You can cancel copy operation by handling this event. +[GridCopyContent](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridCopyContent) event occurs when copy/cut the cells in Data Grid. [GridCopyPasteEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyPasteEventArgs.html) provides information for `GridCopyContent` event. You can cancel copy operation by handling this event. {% tabs %} {% highlight c# %} @@ -128,7 +128,7 @@ private void DataGrid_GridCopyContent(object sender, GridCopyPasteEventArgs e) ### GridPasteContent -[GridPasteContent](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridPasteContent) event occurs when paste the clipboard value into SfDataGrid. [GridCopyPasteEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyPasteEventArgs.html) provides information for `GridPasteContent` event. You can cancel paste operation by handling this event. +[GridPasteContent](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridPasteContent) event occurs when paste the clipboard value into Data Grid. [GridCopyPasteEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyPasteEventArgs.html) provides information for `GridPasteContent` event. You can cancel paste operation by handling this event. {% tabs %} {% highlight c# %} @@ -154,7 +154,7 @@ private void DataGrid_GridPasteContent(object sender, GridCopyPasteEventArgs e) [RowData](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyPasteCellEventArgs.html#Syncfusion_UI_Xaml_Grid_GridCopyPasteCellEventArgs_RowData) – Returns corresponding RowData of a cell. -[OriginalSender](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCancelEventArgs.html#Syncfusion_UI_Xaml_Grid_GridCancelEventArgs_OriginalSender) – Returns the SfDataGrid. +[OriginalSender](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCancelEventArgs.html#Syncfusion_UI_Xaml_Grid_GridCancelEventArgs_OriginalSender) – Returns the Data Grid. You can change the text copied to clipboard by changing the `ClipBoardValue`. @@ -168,7 +168,7 @@ private void DataGrid_CopyGridCellContent(object sender, GridCopyPasteCellEventA {% endhighlight %} {% endtabs %} -The below code example change the clipboard value as 100 instead of cell value 1003 in SfDataGrid. +The below code example change the clipboard value as 100 instead of cell value 1003 in Data Grid. {% tabs %} {% highlight c# %} @@ -212,9 +212,9 @@ private void DataGrid_CopyGridCellContent(object sender, GridCopyPasteCellEventA [RowData](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCopyPasteCellEventArgs.html#Syncfusion_UI_Xaml_Grid_GridCopyPasteCellEventArgs_RowData) – Returns corresponding RowData of a cell. -[OriginalSender](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCancelEventArgs.html#Syncfusion_UI_Xaml_Grid_GridCancelEventArgs_OriginalSender) – Returns the SfDataGrid. +[OriginalSender](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCancelEventArgs.html#Syncfusion_UI_Xaml_Grid_GridCancelEventArgs_OriginalSender) – Returns the Data Grid. -You can change the text paste to SfDataGrid by changing the `ClipBoardValue`. +You can change the text paste to Data Grid by changing the `ClipBoardValue`. {% tabs %} {% highlight c# %} @@ -263,7 +263,7 @@ private void DataGrid_PasteGridCellContent(object sender, GridCopyPasteCellEvent ### Copy programmatically -Copy the selected records/cells in SfDataGrid by using [Copy](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Copy) method in [GridCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridCopyPaste) of SfDataGrid. +Copy the selected records/cells in SfDataGrid by using [Copy](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Copy) method in [GridCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridCopyPaste) of Data Grid. {% tabs %} {% highlight c# %} @@ -271,7 +271,7 @@ this.dataGrid.GridCopyPaste.Copy(); {% endhighlight %} {% endtabs %} -Copy a record by selecting the record using [MoveCurrentCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridBaseSelectionController.html#Syncfusion_UI_Xaml_Grid_GridBaseSelectionController_MoveCurrentCell_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_System_Boolean_) method and [Copy](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Copy) method in [GridCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridCopyPaste) of SfDataGrid. +Copy a record by selecting the record using [MoveCurrentCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridBaseSelectionController.html#Syncfusion_UI_Xaml_Grid_GridBaseSelectionController_MoveCurrentCell_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_System_Boolean_) method and [Copy](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Copy) method in [GridCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridCopyPaste) of Data Grid. {% tabs %} {% highlight c# %} @@ -283,7 +283,7 @@ this.dataGrid.GridCopyPaste.Copy(); {% endhighlight %} {% endtabs %} -Copy the multiple records by selecting group of records using `SelectRows` method and [Copy](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Copy) method in [GridCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridCopyPaste) of SfDataGrid. +Copy the multiple records by selecting group of records using `SelectRows` method and [Copy](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Copy) method in [GridCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GridCopyPaste) of Data Grid. {% tabs %} {% highlight c# %} @@ -292,7 +292,7 @@ this.dataGrid.GridCopyPaste.Copy(); {% endhighlight %} {% endtabs %} -Copy the multiple cells by selecting group of cells using `SelectCells` method and `Copy` method in `GridCopyPaste` of SfDataGrid. +Copy the multiple cells by selecting group of cells using `SelectCells` method and `Copy` method in `GridCopyPaste` of Data Grid. {% tabs %} {% highlight c# %} @@ -305,7 +305,7 @@ this.dataGrid.GridCopyPaste.Copy(); ### Copy rows without selecting -You can copy the records without selection by using [CopyRowsToClipboard](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_CopyRowsToClipboard_System_Int32_System_Int32_) method in `GridCopyPaste` of SfDataGrid. +You can copy the records without selection by using [CopyRowsToClipboard](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_CopyRowsToClipboard_System_Int32_System_Int32_) method in `GridCopyPaste` of Data Grid. {% tabs %} {% highlight c# %} @@ -315,7 +315,7 @@ this.dataGrid.GridCopyPaste.CopyRowsToClipboard(2, 4); ### Cut Programmatically -Cut the selected records/cells in SfDataGrid by using [Cut](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Cut) method in `GridCopyPaste` of SfDataGrid. +Cut the selected records/cells in Data Grid by using [Cut](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Cut) method in `GridCopyPaste` of Data Grid. {% tabs %} {% highlight c# %} @@ -323,7 +323,7 @@ this.dataGrid.GridCopyPaste.Cut(); {% endhighlight %} {% endtabs %} -Cut the entire record in SfDataGrid by selecting whole SfDataGrid using [SelectAll](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectAll_System_Boolean_) method and `Cut` method in `GridCopyPaste` of SfDataGrid. +Cut the entire record in Data Grid by selecting whole Data Grid using [SelectAll](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectAll_System_Boolean_) method and `Cut` method in `GridCopyPaste` of Data Grid. {% tabs %} {% highlight c# %} @@ -332,7 +332,7 @@ this.dataGrid.GridCopyPaste.Cut(); {% endhighlight %} {% endtabs %} -Cut the entire column in SfDataGrid by using [SelectCells](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectCells_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Boolean_) method and `Cut` method in `GridCopyPaste` of SfDataGrid. +Cut the entire column in Data Grid by using [SelectCells](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectCells_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Boolean_) method and `Cut` method in `GridCopyPaste` of Data Grid. {% tabs %} {% highlight c# %} @@ -348,7 +348,7 @@ this.dataGrid.GridCopyPaste.Cut(); ### Paste programmatically -Paste the clipboard value into SfDataGrid by using [Paste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Paste) method in `GridCopyPaste` of SfDataGrid. +Paste the clipboard value into Data Grid by using [Paste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_Paste) method in `GridCopyPaste` of Data Grid. {% tabs %} {% highlight c# %} @@ -356,7 +356,7 @@ this.dataGrid.GridCopyPaste.Paste(); {% endhighlight %} {% endtabs %} -Paste the clipboard value into selected record by selecting the record using MoveCurrentCell method and `Paste` method in `GridCopyPaste` of SfDataGrid. +Paste the clipboard value into selected record by selecting the record using MoveCurrentCell method and `Paste` method in `GridCopyPaste` of Data Grid. {% tabs %} {% highlight c# %} @@ -371,7 +371,7 @@ this.dataGrid.GridCopyPaste.Paste(); ## Customizing Copy Paste behavior -SfDataGrid process the clipboard operations in [GridCutCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html) class. You can customize the default copy paste behaviors by overriding `GridCutCopyPaste` class and set it to `SfDataGrid.GridCopyPaste`. +Data Grid process the clipboard operations in [GridCutCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html) class. You can customize the default copy paste behaviors by overriding `GridCutCopyPaste` class and set it to `SfDataGrid.GridCopyPaste`. {% tabs %} {% highlight c# %} @@ -393,7 +393,7 @@ public MainWindow() ### Paste a cell into many cells -By default, you can copy one cell and paste it into another cell when Cell Selection is enabled in SfDataGrid. The below code shows how to copy one cell and paste it into all the selected cells by overriding [PasteToCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_PasteToCell_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Object_) method in [GridCutCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html) class. +By default, you can copy one cell and paste it into another cell when Cell Selection is enabled in Data Grid. The below code shows how to copy one cell and paste it into all the selected cells by overriding [PasteToCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_PasteToCell_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Object_) method in [GridCutCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html) class. {% tabs %} {% highlight c# %} @@ -448,7 +448,7 @@ public class CustomCopyPaste: GridCutCopyPaste ### Paste a record into many rows -By default, you can able to copy one row and paste it into another row when Row Selection is enabled in SfDataGrid. The below code shows how to copy one row and paste it into all selected rows by overriding the [PasteToRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_PasteToRow_System_Object_System_Object_) method in the `GridCutCopyPaste` class. +By default, you can able to copy one row and paste it into another row when Row Selection is enabled in Data Grid. The below code shows how to copy one row and paste it into all selected rows by overriding the [PasteToRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_PasteToRow_System_Object_System_Object_) method in the `GridCutCopyPaste` class. {% tabs %} {% highlight c# %} @@ -496,7 +496,7 @@ public class CustomCopyPaste : GridCutCopyPaste ### Select pasted records -By default, after pasting the clipboard value to SfDataGrid selection is maintains in previously selected records as it is. The below code shows select the pasted records after the Paste operation, by overriding the [PasteToRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_PasteToRows_System_Object_) and [PasteToRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_PasteToRow_System_Object_System_Object_) methods in [GridCutCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html) class. This code is applicable when [SelectionUnit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionUnit) is `Row`. +By default, after pasting the clipboard value to Data Grid selection is maintains in previously selected records as it is. The below code shows select the pasted records after the Paste operation, by overriding the [PasteToRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_PasteToRows_System_Object_) and [PasteToRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html#Syncfusion_UI_Xaml_Grid_GridCutCopyPaste_PasteToRow_System_Object_System_Object_) methods in [GridCutCopyPaste](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCutCopyPaste.html) class. This code is applicable when [SelectionUnit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionUnit) is `Row`. {% tabs %} {% highlight c# %} @@ -532,7 +532,7 @@ public class CustomCopyPaste : GridCutCopyPaste ### Create new records while pasting -By default, while paste the clipboard value to SfDataGrid, it changes the values of the already existing records. The below code example shows how to add the copied records as new rows in SfDataGrid by overriding the `PasteToRows` method in `GridCutCopyPaste` class. +By default, while paste the clipboard value to Data Grid, it changes the values of the already existing records. The below code example shows how to add the copied records as new rows in Data Grid by overriding the `PasteToRows` method in `GridCutCopyPaste` class. {% tabs %} {% highlight c# %} diff --git a/uwp/DataGrid/Column-Types.md b/uwp/DataGrid/Column-Types.md index 4dc91800..b02f79d7 100644 --- a/uwp/DataGrid/Column-Types.md +++ b/uwp/DataGrid/Column-Types.md @@ -10,7 +10,7 @@ documentation: ug # Column Types in UWP Data Grid -SfDataGrid provides support for various built-in column types. Each column has its own properties and renderer to handle different types of data. +UWP Data Grid provides support for various built-in column types. Each column has its own properties and renderer to handle different types of data. You can also add or override existing columns and renderers as you need. @@ -174,7 +174,7 @@ Selects or deselects rows based on the check box value, which is not bound with ## GridColumn -[GridColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html) is an abstract class provides base functionalities for all the column types in SfDataGrid. +[GridColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html) is an abstract class provides base functionalities for all the column types in Data Grid. ### Mapping column to particular property @@ -213,7 +213,7 @@ public class DisplayBindingConverter : IValueConverter In the below screenshot, Unit Price column display value is formatted to currency by setting `DisplayBinding` property. -![Displaying the currency value in UWP SfDataGrid](Column-Types_images/Column-Types_img1.png) +![Displaying the currency value](Column-Types_images/Column-Types_img1.png) By default, Columns handling the data operations (sorting and grouping) based on `MappingName` property. You can perform data operations based on `ValueBinding` by setting [GridColumn.UseBindingValue](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_UseBindingValue) to `true`, when the standard reflection not works or binding column with complex or indexer properties. @@ -255,7 +255,7 @@ In the below code snippet, `GridNumericColumn` is loaded with `ProgressBar` and {% endhighlight %} {% endtabs %} -![Displaying the column with progressBar in UWP SfDataGrid](Column-Types_images/Column-Types_img2.png) +![Displaying the column with progressBar](Column-Types_images/Column-Types_img2.png) `CellTemplate` is not support by `GridHyperlinkColumn`, `GridCheckboxColumn` and `GridImageColumn` columns. @@ -296,7 +296,7 @@ You can use the same [DataTemplate](https://msdn.microsoft.com/en-us/library/win {% endhighlight %} {% endtabs %} -![Displaying the column with CellTemplate in UWP SfDataGrid](Column-Types_images/Column-Types_img3.png) +![Displaying the column with CellTemplate](Column-Types_images/Column-Types_img3.png) #### Setting CellTemplate based on custom logic using TemplateSelector @@ -368,7 +368,7 @@ In the below code, the custom template selector set to `GridColumn.CellTemplateS N> Non-Editable columns does not support `CellTemplate`. -![Displaying the column with CellTemplateSelector in UWP SfDataGrid](Column-Types_images/Column-Types_img4.png) +![Displaying the column with CellTemplateSelector](Column-Types_images/Column-Types_img4.png) #### Binding ViewModel properties with CellTemplate @@ -558,7 +558,7 @@ private void DataGrid_AutoGeneratingColumn(object sender, Syncfusion.UI.Xaml.Gri {% endtabs %} -![Displaying column formatting with converter in UWP SfDataGrid](Column-Types_images/Column-Types_img5.png) +![Displaying column formatting with converter](Column-Types_images/Column-Types_img5.png) ### Styling GridColumn @@ -622,7 +622,7 @@ private void DataGrid_AutoGeneratingColumn(object sender, Syncfusion.UI.Xaml.Gri {% endtabs %} -![Applying cell style to the columns in UWP SfDataGrid](Column-Types_images/Column-Types_img6.png) +![Applying cell style to the columns](Column-Types_images/Column-Types_img6.png) #### Styles based on custom logic @@ -710,7 +710,7 @@ private void DataGrid_AutoGeneratingColumn(object sender, Syncfusion.UI.Xaml.Gri {% endtabs %} -![Applying cell style to the columns by using CellStyleSelector in UWP SfDataGrid](Column-Types_images/Column-Types_img7.png) +![Applying cell style to the columns by using CellStyleSelector](Column-Types_images/Column-Types_img7.png) ### UI Interaction @@ -772,7 +772,7 @@ GridColumn allows you to change the alignment of `GridCell` and `GridHeaderCellC {% endtabs %} -![Applying TextTrimming,TextDecorations,TextAlignment,TextWrapping to columns in UWP SfDataGrid](Column-Types_images/Column-Types_img8.png) +![Applying TextTrimming,TextDecorations,TextAlignment,TextWrapping to columns](Column-Types_images/Column-Types_img8.png) ## GridTextColumn @@ -812,7 +812,7 @@ this.dataGrid.Columns.Add(new GridTextColumn() { HeaderText = "Ship City", Mappi {% endhighlight %} {% endtabs %} -![Image used to display the spell check in SfDataGrid UWP](Column-Types_images/Column-Types_img9.png) +![Image used to display the spell check](Column-Types_images/Column-Types_img9.png) ## GridNumericColumn @@ -834,7 +834,7 @@ this.dataGrid.Columns.Add(new GridNumericColumn() { MappingName = "Quantity", He {% endtabs %} -![Displaying numeric column in UWP SfDataGrid](Column-Types_images/Column-Types_img10.png) +![Displaying numeric column](Column-Types_images/Column-Types_img10.png) ### Data formatting @@ -852,7 +852,7 @@ this.dataGrid.Columns.Add(new GridNumericColumn() { HeaderText = "Unit Price", M {% endtabs %} -![Displaying data formatting of numeric column in UWP SfDataGrid](Column-Types_images/Column-Types_img11.png) +![Displaying data formatting of numeric column](Column-Types_images/Column-Types_img11.png) ### Null value support @@ -873,7 +873,7 @@ this.dataGrid.Columns.Add(new GridNumericColumn() { HeaderText = "Unit Price", M {% endtabs %} -![Displaying WaterMark text of numeric column in UWP SfDataGrid](Column-Types_images/Column-Types_img12.png) +![Displaying WaterMark text of numeric column](Column-Types_images/Column-Types_img12.png) ### Parsing Mode @@ -912,7 +912,7 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endhighlight %} {% endtabs %} -![Displaying GridDateTimeColumn with SfDatePicker in UWP SfDataGrid](Column-Types_images/Column-Types_img13.png) +![Displaying GridDateTimeColumn with SfDatePicker](Column-Types_images/Column-Types_img13.png) ### Formatting date time value @@ -930,7 +930,7 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endtabs %} -![Displaying data formatting in GridDateTimeColumn with SfDatePicker in UWP SfDataGrid](Column-Types_images/Column-Types_img14.png) +![Displaying data formatting in GridDateTimeColumn with SfDatePicker](Column-Types_images/Column-Types_img14.png) When the predefined format specifier does not meet your requirement, you can set the [custom date and time format strings](https://msdn.microsoft.com/en-us/library/8kb3ddd4.aspx) into `FormatString` property. @@ -947,7 +947,7 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endtabs %} -![Displaying custom date-time formatting in GridDateTimeColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img15.png) +![Displaying custom date-time formatting in GridDateTimeColumn](Column-Types_images/Column-Types_img15.png) ### Editing support @@ -971,10 +971,10 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endtabs %} -![Displaying editing in GridDateTimeColumn with On-Screen keyboard in Desktop view of UWP SfDataGrid](Column-Types_images/Column-Types_img16.png) +![Displaying editing in GridDateTimeColumn with On-Screen keyboard in Desktop view](Column-Types_images/Column-Types_img16.png) -![Displaying editing in GridDateTimeColumn with On-Screen keyboard in Mobile view of UWP SfDataGrid](Column-Types_images/Column-Types_img17.png) +![Displaying editing in GridDateTimeColumn with On-Screen keyboard in Mobile view](Column-Types_images/Column-Types_img17.png) ### Null value support @@ -995,7 +995,7 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endtabs %} -![Displaying null value in GridDateTimeColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img18.png) +![Displaying null value in GridDateTimeColumn](Column-Types_images/Column-Types_img18.png) ### Setting date time value range @@ -1044,7 +1044,7 @@ public class ViewModel You can hide or unhide the dropdown button by using [ShowDropDownButton](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridDateTimeColumn.html#Syncfusion_UI_Xaml_Grid_GridDateTimeColumn_ShowDropDownButton) property. The height of dropdown can be changed using [DropDownHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridDateTimeColumn.html#Syncfusion_UI_Xaml_Grid_GridDateTimeColumn_DropDownHeight) property. -![Displaying customization of drop-down button in GridDateTimeColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img19.png) +![Displaying customization of drop-down button in GridDateTimeColumn](Column-Types_images/Column-Types_img19.png) ### Styling @@ -1063,7 +1063,7 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endtabs %} -![Styling SelectorItem with color in GridDateTimeColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img20.png) +![Styling SelectorItem with color in GridDateTimeColumn](Column-Types_images/Column-Types_img20.png) ### SelectorItem customization @@ -1085,7 +1085,7 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endtabs %} -![Displaying height and width customization of SelectorItem in GridDateTimeColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img21.png) +![Displaying height and width customization of SelectorItem in GridDateTimeColumn](Column-Types_images/Column-Types_img21.png) #### SelectorItem formatting @@ -1103,7 +1103,7 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endtabs %} -![Displaying custom formatting of SelectorItem in GridDateTimeColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img22.png) +![Displaying custom formatting of SelectorItem in GridDateTimeColumn](Column-Types_images/Column-Types_img22.png) #### SelectorItem spacing and count customization @@ -1125,7 +1125,7 @@ this.dataGrid.Columns.Add(new GridDateTimeColumn() { HeaderText = "Order Date", {% endtabs %} -![Displaying space and count customization between SelectorItems in GridDateTimeColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img23.png) +![Displaying space and count customization between SelectorItems in GridDateTimeColumn](Column-Types_images/Column-Types_img23.png) ## GridCheckBoxColumn @@ -1147,7 +1147,7 @@ this.dataGrid.Columns.Add(new GridCheckBoxColumn() { HeaderText = "Is Delivered" {% endtabs %} -![Displaying GridCheckBoxColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img24.png) +![Displaying GridCheckBoxColumn](Column-Types_images/Column-Types_img24.png) `GridCheckBoxColumn` allows you to customize check box state and its alignment. @@ -1201,7 +1201,7 @@ this.dataGrid.Columns.Add(new GridTemplateColumn() { MappingName = "IsClosed", C You can allow `UIElement` loaded inside `CellTemplate` to handle keyboard interaction by setting [FocusManagerHelper.WantsKeyInput](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.FocusManagerHelper.html#Syncfusion_UI_Xaml_Grid_FocusManagerHelper_WantsKeyInputProperty) attached property to `GridColumn`. You can use this when loading edit element in CellTemplate. -In this case SfDataGrid handles the below key operations and other keys are handled by UIElement loaded inside `CellTemplate`. +In this case Data Grid handles the below key operations and other keys are handled by UIElement loaded inside `CellTemplate`. * Tab * Enter @@ -1382,7 +1382,7 @@ In the below code, custom template selector set to `GridTemplateColumn.EditTempl {% endtabs %} -![Displaying CellTemplateSelector and EditTemplateSelector with GridTemplateColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img25.png) +![Displaying CellTemplateSelector and EditTemplateSelector with GridTemplateColumn](Column-Types_images/Column-Types_img25.png) ## GridComboBoxColumn @@ -1408,12 +1408,12 @@ this.dataGrid.Columns.Add(new GridComboBoxColumn() { HeaderText = "Customer ID", {% endhighlight %} {% endtabs %} -SfDataGrid triggers, [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event, when the SelectedValue is changed. [CurrentCellDropDownSelectionChangedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellDropDownSelectionChangedEventArgs.html) of `CurrentCellDropDownSelectionChanged` event provides the information about the changed cell value. +Data Grid triggers, [CurrentCellDropDownSelectionChanged](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event, when the SelectedValue is changed. [CurrentCellDropDownSelectionChangedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellDropDownSelectionChangedEventArgs.html) of `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. -![Displaying GridComboBoxColumn with SelectedItem in UWP SfDataGrid](Column-Types_images/Column-Types_img26.png) +![Displaying GridComboBoxColumn with SelectedItem](Column-Types_images/Column-Types_img26.png) ### Improving dropdown opening time @@ -1602,15 +1602,15 @@ public class ItemsSourceSelector : IItemsSourceSelector The following screenshot illustrates the different ShipCity ItemsSource bound to each row of the ComboBox based on the Country Name. -![Displaying different itemssource for different rows using ItemsSourceSelector property of GridComboBoxColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img37.png) +![Displaying different itemssource for different rows using ItemsSourceSelector property of GridComboBoxColumn](Column-Types_images/Column-Types_img37.png) -![Displaying different itemssource for different rows using ItemsSourceSelector property of GridComboBoxColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img38.png) +![Displaying different itemssource for different rows using ItemsSourceSelector property of GridComboBoxColumn](Column-Types_images/Column-Types_img38.png) You can download the sample from [here](http://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxColumnUWP-1974208434.zip). ## GridMultiColumnDropDownList -`GridMultiColumnDropDownList` derived from `GridTextColumnBase` and it displays enumeration as cell contents. It hosts `SfMultiDropDownControl` in editing mode. `GridMultiColumnDropDownList` allows you to define the predefined columns in its drop-down like SfDataGrid. +`GridMultiColumnDropDownList` derived from `GridTextColumnBase` and it displays enumeration as cell contents. It hosts `SfMultiDropDownControl` in editing mode. `GridMultiColumnDropDownList` allows you to define the predefined columns in its drop-down like Data Grid. By default, ` GridMultiColumnDropDownList ` displays the value using `MappingName` property. You can set `DisplayMember` which denotes the property that is contained in the `GridMultiColumnDropDownList.ItemsSource` to serve as the visual representation of object. You can set the property to `ValueMember` from which to get values that correspond to the selections in the drop-down list. @@ -1650,13 +1650,13 @@ this.dataGrid.Columns.Add(new GridMultiColumnDropDownList() { ItemsSource = view {% endhighlight %} {% endtabs %} -SfDataGrid triggers, `CurrentCellDropDownSelectionChanged` event, when the SelectedValue is changed. `CurrentCellDropDownSelectionChangedEventArgs` of `CurrentCellDropDownSelectionChanged` event provides the information about the changed cell value. +Data Grid triggers, `CurrentCellDropDownSelectionChanged` event, when the SelectedValue is changed. `CurrentCellDropDownSelectionChangedEventArgs` of `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. -![Image used to display GridMultiColumnDropDownList in SfDataGrid UWP](Column-Types_images/Column-Types_img27.png) +![Image used to display GridMultiColumnDropDownList](Column-Types_images/Column-Types_img27.png) ### Auto complete support @@ -1670,7 +1670,7 @@ You can allow SfMultiDropDownControl to filter the drop-down list items dynamica `GridMultiColumnDropDownList` allows you to filter the items based on case by setting [AllowCasingforFilter](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridMultiColumnDropDownList.html#Syncfusion_UI_Xaml_Grid_GridMultiColumnDropDownList_AllowCasingforFilter) to `true`. This will help users to select from large number of items. -![Displaying GridMultiColumnDropDownList with filtered items in UWP SfDataGrid](Column-Types_images/Column-Types_img28.png) +![Displaying GridMultiColumnDropDownList with filtered items](Column-Types_images/Column-Types_img28.png) ### Auto increment @@ -1690,13 +1690,13 @@ You can allow change the size of drop-down popup by setting [PopUpWidth](https:/ Similarly, the `PopUpHeight` based on [PopUpMinHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridMultiColumnDropDownList.html#Syncfusion_UI_Xaml_Grid_GridMultiColumnDropDownList_PopUpMinHeight) and [PopUpMaxHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridMultiColumnDropDownList.html#Syncfusion_UI_Xaml_Grid_GridMultiColumnDropDownList_PopUpMaxHeight) when the value is not between them. The default value of `PopUpMinHeight` is 300.0. -SfMultiDropDownControl can automatically adjust the popup width based on the actual size of SfDataGrid when setting [IsAutoPopupSize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridMultiColumnDropDownList.html#Syncfusion_UI_Xaml_Grid_GridMultiColumnDropDownList_IsAutoPopupSize) to `true`. +SfMultiDropDownControl can automatically adjust the popup width based on the actual size of Data Grid when setting [IsAutoPopupSize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridMultiColumnDropDownList.html#Syncfusion_UI_Xaml_Grid_GridMultiColumnDropDownList_IsAutoPopupSize) to `true`. #### Resizing drop-down popup You can allow end-user to resize the drop-down popup by showing resizing thumb by setting [ShowResizeThumb](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridMultiColumnDropDownList.html#Syncfusion_UI_Xaml_Grid_GridMultiColumnDropDownList_ShowResizeThumb) property to `Visible`. -![Displaying GridMultiColumnDropDownList with resizing enabled in UWP SfDataGrid](Column-Types_images/Column-Types_img29.png) +![Displaying GridMultiColumnDropDownList with resizing enabled](Column-Types_images/Column-Types_img29.png) #### Keep popup open on editing @@ -1790,9 +1790,9 @@ public class ItemsSourceSelector : IItemsSourceSelector The following screenshot illustrates the different `ShipCity` ItemsSource bound to each row of `MultiColumnDropDownList` based on the country name. -![Displaying different itemssource for different rows using the ItemsSourceSelector property of GridMultiColumnDropDownList in UWP SfDataGrid](Column-Types_images/Column-Types_img39.png) +![Displaying different itemssource for different rows using the ItemsSourceSelector property of GridMultiColumnDropDownList](Column-Types_images/Column-Types_img39.png) -![Displaying different itemssource for different rows using the ItemsSourceSelector property of GridMultiColumnDropDownList in UWP SfDataGrid](Column-Types_images/Column-Types_img40.png) +![Displaying different itemssource for different rows using the ItemsSourceSelector property of GridMultiColumnDropDownList](Column-Types_images/Column-Types_img40.png) You can download the sample from the following link: [Sample](https://github.com/SyncfusionExamples/how-to-load-different-items-for-each-row-in-multicolumn-dropdown-column-in-wpf-and-uwp-datagrid). @@ -1815,7 +1815,7 @@ this.dataGrid.Columns.Add(new GridHyperlinkColumn() { HeaderText = "Country", Ma {% endhighlight %} {% endtabs %} -![Displaying GridHyperlinkColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img30.png) +![Displaying GridHyperlinkColumn](Column-Types_images/Column-Types_img30.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/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. The `CurrentCellRequestNavigate` occurs when the current cell in `GridHyperlinkColumn` is clicked for navigation. @@ -1889,7 +1889,7 @@ this.dataGrid.Columns.Add(new GridImageColumn() { HeaderText = "Flag", MappingNa {% endtabs %} -![Displaying GridImageColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img31.png) +![Displaying GridImageColumn](Column-Types_images/Column-Types_img31.png) ### Read image from path using ValueBinding @@ -1972,7 +1972,7 @@ this.dataGrid.Columns.Add(new GridUpDownColumn() { HeaderText = "Unit Price", Ma {% endtabs %} -![Displaying GridUpDownColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img32.png) +![Displaying GridUpDownColumn](Column-Types_images/Column-Types_img32.png) ### Parsing Mode @@ -2025,11 +2025,11 @@ this.sfDataGrid.Columns.Add(new GridToggleSwitchColumn() { MappingName = "IsDeli GridToggleSwitchColumn provides support to display the text, while ToggleSwitch is in `ON`/`OFF` state based on [OnContent](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridToggleSwitchColumn.html#Syncfusion_UI_Xaml_Grid_GridToggleSwitchColumn_OnContent) and [OffContent](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridToggleSwitchColumn.html#Syncfusion_UI_Xaml_Grid_GridToggleSwitchColumn_OffContent) properties. -![Displaying GridToggleSwitchColumn in UWP SfDataGrid](Column-Types_images/Column-Types_img36.png) +![Displaying GridToggleSwitchColumn](Column-Types_images/Column-Types_img36.png) ## GridCheckBoxSelectorColumn -`SfDataGrid` allows you to select or deselect individual rows through `CheckBox` using the [GridCheckBoxSelectorColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCheckBoxSelectorColumn.html), which is not bound with data object from underlying data source, and it can be added like normal columns. The selector column supports row selection alone, and selection in selector column works based on [SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode). +Data Grid allows you to select or deselect individual rows through `CheckBox` using the [GridCheckBoxSelectorColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCheckBoxSelectorColumn.html), which is not bound with data object from underlying data source, and it can be added like normal columns. The selector column supports row selection alone, and selection in selector column works based on [SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode). {% tabs %} {% highlight xaml %} @@ -2418,11 +2418,11 @@ The following are the limitations of GridCheckBoxSelectorColumn: ## Custom column support -SfDataGrid allows you to create your own column by overriding predefined column type or creating a new custom column. +Data Grid allows you to create your own column by overriding predefined column type or creating a new custom column. ### Creating column from existing column -You can create your own column by overriding the [predefined](#Overriding_existing_cell) column types in SfDataGrid. +You can create your own column by overriding the [predefined](#Overriding_existing_cell) column types in Data Grid. For example, the `GridDateTimeColumn` loads the `DateTime` value by default. If you want to display [DateTimeOffset](https://msdn.microsoft.com/en-us/library/system.datetimeoffset.aspx) value, you can create a new column by overriding the `GridDateTimeColumn` class. @@ -2543,7 +2543,7 @@ You can get the sample from [here](https://github.com/SyncfusionExamples/how-to- ### Customize column renderer -SfDataGrid allows you to customize the column related operations like key navigation and UI related interactions by overriding the corresponding renderer associated with the column. Each column has its own renderer with set of virtual methods for handling the column level operations. +Data Grid allows you to customize the column related operations like key navigation and UI related interactions by overriding the corresponding renderer associated with the column. Each column has its own renderer with set of virtual methods for handling the column level operations. Below table lists the available cell types for columns and its renderers. @@ -2921,13 +2921,13 @@ public class GridComboBoxRenderer: GridVirtualizingCellRenderer @@ -114,7 +114,7 @@ Use to display the numeric values . ## 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 Data Grid to create columns or you can manually define columns to be displayed. Below sections explains both ways, 1. Automatically generating columns 2. Manually define columns @@ -186,7 +186,7 @@ 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 of that they will appear in Data Grid. #### AutoGenerateColumns with different modes @@ -335,7 +335,7 @@ 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 Data Grid by handling `AutoGeneratingColumn` event. In the below code, column generation for `OrderID` property is canceled by setting `Cancel` property to `true`. @@ -354,7 +354,7 @@ 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 adding to Data Grid by setting the instance of column you want to add in ` AutoGeneratingColumn` event. In the below code, column type for `UnitPrice` property is changed to `GridTextColumn` by setting instance of GridTextColumn to `Column` property. @@ -440,7 +440,7 @@ Below screenshot shows the customized header template loaded on the header of Or #### Data Annotations with AutoGenerateColumns -SfDataGrid support to generate the columns based on built-in [Data Annotation Attributes](https://msdn.microsoft.com/en-us/library/mt185499.aspx). +Data Grid support to generate the columns based on built-in [Data Annotation Attributes](https://msdn.microsoft.com/en-us/library/mt185499.aspx). Data Annotations ignored, when the `AutoGenerateColumns` is set to `False`. @@ -536,7 +536,7 @@ The OrderID and CustomerID column rearranged based on specified order. ### Manually defining columns -SfDataGrid control allows you to define the columns manually by adding desired column to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) collection. +Data Grid control allows you to define the columns manually by adding desired column to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) collection. {% tabs %} {% highlight xaml %} @@ -585,7 +585,7 @@ this.dataGrid.Columns.Add(new GridTextColumn() { HeaderText = "Order ID", Mappin ### Accessing column -You can access the column through its column index or `GridColumn.MappingName` from the SfDataGrid.Columns collection. +You can access the column through its column index or `GridColumn.MappingName` from the `SfDataGrid.Columns` collection. {% tabs %} {% highlight c# %} @@ -633,7 +633,7 @@ foreach (var name in childColumns) ## Resizing Columns -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/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [GridColumn.AllowResizing](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property. +Data Grid 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/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingColumns) or [GridColumn.AllowResizing](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_AllowResizing) property. N> Resizing considers MinWidth and MaxWidth of column. @@ -652,7 +652,7 @@ You can change the column width by clicking and dragging the resizing cursor at ### Hidden column resizing -SfDataGrid shows indication for hidden columns in column header and also allows end-users to resize the hidden columns when setting [SfDataGrid.AllowResizingHiddenColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingHiddenColumns) property to `true`. +Data Grid shows indication for hidden columns in column header and also allows end-users to resize the hidden columns when setting [SfDataGrid.AllowResizingHiddenColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowResizingHiddenColumns) property to `true`. ![Hidden column resizing](Columns_images/Columns_img4.png) @@ -676,7 +676,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/uwp/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/uwp/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Width) when `ResizingColumnsEventArgs.Reason` is [ColumnResizingReason.Resized](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnResizingReason.html) in [ResizingColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. +Data Grid allows you to identify the progress of the resizing of columns through [ResizingColumnsEventArgs.Reason](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Grid.ResizingColumnsEventArgs.html#Syncfusion_UI_Xaml_Grid_ResizingColumnsEventArgs_Width) when `ResizingColumnsEventArgs.Reason` is [ColumnResizingReason.Resized](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnResizingReason.html) in [ResizingColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. {% tabs %} {% highlight c# %} @@ -780,7 +780,7 @@ public class CustomDragDropController:GridColumnDragDropController return base.CreatePopupContent(column); } - //Occurs when the popup content is dropped on DataGrid. + //Occurs when the popup content is dropped on Data Grid. protected override void PopupContentDroppedOnGrid(Point point) { base.PopupContentDroppedOnGrid(point); @@ -858,11 +858,11 @@ 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. Data Grid has support to freeze the number of columns from the left or right. There is no support to freeze a specific column. ## Stacked Headers -SfDataGrid supports additional unbound header rows known as `stacked header rows` that span across the DataGrid columns using [StackedHeaderRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.StackedHeaderRows.html). You can group one or more columns under each stacked header. +Data Grid supports additional unbound header rows known as `stacked header rows` that span across the Data Grid columns using [StackedHeaderRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.StackedHeaderRows.html). You can group one or more columns under each stacked header. Each [StackedHeaderRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.StackedHeaderRow.html) contains the [StackedColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.StackedHeaderRow.html#Syncfusion_UI_Xaml_Grid_StackedHeaderRow_StackedColumns) where each [StackedColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.StackedColumn.html) contains a number of child columns. `StackedColumn.ChildColumns` property returns the columns which are grouped under the stacked header row. The `StackedColumn.MappingName` is a unique name used for mapping a specific child columns grouped under the same stacked header row whereas, the `StackedColumn.HeaderText` returns the text that displays in stacked header row. @@ -1042,7 +1042,7 @@ void dataGrid_QueryRowHeight(object sender, Syncfusion.UI.Xaml.Grid.QueryRowHeig ## Column Sizing -SfDataGrid allows you to set the column widths based on certain logic using [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ColumnSizer) or [GridColumn.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnSizer) property. +Data Grid allows you to set the column widths based on certain logic using [SfDataGrid.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ColumnSizer) or [GridColumn.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnSizer) property. Below is the list of predefined column sizing options available. @@ -1135,7 +1135,7 @@ N> The `GridColumn.ColumnSizer` takes higher priority than the `SfDataGrid.Colum ### Fill remaining width for any column instead of last column when ColumnSizer is AutoLastColumnFill or AutoWithLastColumnFill  -In SfDataGrid while setting SfDataGrid.ColumnSizer as AutoLastColumnFill or AutoWithLastColumnFill remaining width is applied to last column. You can apply the remaining width to specific column by setting [GridColumn.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnSizer) property as like below. +In Data Grid while setting `SfDataGrid.ColumnSizer` as AutoLastColumnFill or AutoWithLastColumnFill remaining width is applied to last column. You can apply the remaining width to specific column by setting [GridColumn.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_ColumnSizer) property as like below. {% tabs %} {% highlight xaml %} @@ -1163,7 +1163,7 @@ this.datagrid.Columns["OrderID"].ColumnSizer = GridLengthUnitType.AutoWithLastCo You can refresh the `ColumnSizer` at runtime by calling [SfDataGrid.GridColumnSizer.Refresh](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnSizer.html#Syncfusion_UI_Xaml_Grid_GridColumnSizer_Refresh) method. -SfDataGrid support to recalculates the column auto width by calling reset methods of `GridColumnSizer`. [GridColumnSizer.ResetAutoCalculationforAllColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnSizerBase-1.html#Syncfusion_UI_Xaml_Grid_ColumnSizerBase_1_ResetAutoCalculationforAllColumns) method reset widths to all columns. [GridColumnSizer.ResetAutoCalculation](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnSizerBase-1.html#Syncfusion_UI_Xaml_Grid_ColumnSizerBase_1_ResetAutoCalculation_Syncfusion_UI_Xaml_Grid_GridColumnBase_) method reset the width to particular column. +Data Grid support to recalculates the column auto width by calling reset methods of `GridColumnSizer`. [GridColumnSizer.ResetAutoCalculationforAllColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnSizerBase-1.html#Syncfusion_UI_Xaml_Grid_ColumnSizerBase_1_ResetAutoCalculationforAllColumns) method reset widths to all columns. [GridColumnSizer.ResetAutoCalculation](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnSizerBase-1.html#Syncfusion_UI_Xaml_Grid_ColumnSizerBase_1_ResetAutoCalculation_Syncfusion_UI_Xaml_Grid_GridColumnBase_) method reset the width to particular column. N> The `GridColumnSizer.ResetAutoCalculationforAllColumns` or `GridColumnSizer.ResetAutoCalculation` methods applicable for Auto, AutoWithLastColumnFill, AutoLastColumnFill, SizeToCells types. @@ -1200,7 +1200,7 @@ this.dataGrid.GridColumnSizer.Refresh(); ### Customizing built-in column sizing logic -SfDataGrid process column sizing operations in [GridColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnSizer.html) class. You can customize the column sizing operations by overriding `GridColumnSizer` and set it to ` SfDataGrid.GridColumnSizer`. +Data Grid process column sizing operations in [GridColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnSizer.html) class. You can customize the column sizing operations by overriding `GridColumnSizer` and set it to ` SfDataGrid.GridColumnSizer`. {% tabs %} {% highlight c# %} @@ -1244,7 +1244,7 @@ dataGrid.GridColumnSizer.FilterIconWidth = 20; {% endhighlight %} {% endtabs %} -#### Changing Font settings for SfDataGrid +#### Changing Font settings for UWP Data Grid You can change the `font settings` for column width calculation by setting [GridColumnSizer.FontSize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnSizerBase-1.html#Syncfusion_UI_Xaml_Grid_ColumnSizerBase_1_FontSize), [GridColumnSizer.FontFamily](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnSizerBase-1.html#Syncfusion_UI_Xaml_Grid_ColumnSizerBase_1_FontFamily) and [GridColumnSizer.Margin](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.ColumnSizerBase-1.html#Syncfusion_UI_Xaml_Grid_ColumnSizerBase_1_Margin) properties. These settings will be considered for all columns. @@ -1462,7 +1462,7 @@ public class CustomColumnSizer : GridColumnSizer ## Binding column properties with ViewModel -SfDataGrid provides MVVM support for binding `GridColumn` properties with ViewModel properties. +Data Grid provides MVVM support for binding `GridColumn` properties with ViewModel properties. {% tabs %} {% highlight c# %} diff --git a/uwp/DataGrid/Conditional-Styling.md b/uwp/DataGrid/Conditional-Styling.md index 6f077d6a..a69efc68 100644 --- a/uwp/DataGrid/Conditional-Styling.md +++ b/uwp/DataGrid/Conditional-Styling.md @@ -9,7 +9,7 @@ documentation: ug # Conditional Styling in UWP Data Grid -You can style the SfDataGrid and its inner elements conditionally based on data in two ways, +You can style the Data Grid and its inner elements conditionally based on data in two ways, 1. Using Converter 2. Using StyleSelector diff --git a/uwp/DataGrid/Data-Binding.md b/uwp/DataGrid/Data-Binding.md index 969924bd..e4370e2b 100644 --- a/uwp/DataGrid/Data-Binding.md +++ b/uwp/DataGrid/Data-Binding.md @@ -10,7 +10,7 @@ documentation: ug # Data Binding in UWP Data Grid -SfDataGrid control is designed to display the bounded data in a tabular format. The data binding can be achieved by assigning the data sources to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. +Data Grid control is designed to display the bounded data in a tabular format. The data binding can be achieved by assigning the data sources to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. {% tabs %} {% highlight xaml %} @@ -20,17 +20,17 @@ SfDataGrid control is designed to display the bounded data in a tabular format. {% endhighlight %} {% endtabs %} -If the data source implements [INotifyCollectionChanged](https://msdn.microsoft.com/en-us/library/System.Collections.Specialized.INotifyCollectionChanged) interface, then SfDataGrid control will automatically refresh the UI when item is added, removed or while list cleared. When you add, remove item in [ObservableCollection](https://msdn.microsoft.com/library/ms668604), SfDataGrid automatically refresh the UI as `ObservableCollection` implements `INotifyCollectionChanged`. But when you do the same in [List](https://msdn.microsoft.com/en-us/library/6sh2ey19), SfDataGrid will not refresh the UI automatically. +If the data source implements [INotifyCollectionChanged](https://msdn.microsoft.com/en-us/library/System.Collections.Specialized.INotifyCollectionChanged) interface, then Data Grid control will automatically refresh the UI when item is added, removed or while list cleared. When you add, remove item in [ObservableCollection](https://msdn.microsoft.com/library/ms668604), Data Grid automatically refresh the UI as `ObservableCollection` implements `INotifyCollectionChanged`. But when you do the same in [List](https://msdn.microsoft.com/en-us/library/6sh2ey19), Data Grid will not refresh the UI automatically. ## Binding with IEnumerable -SfDataGrid control supports to bind any collection that implements the [IEnumerable](https://msdn.microsoft.com/en-us/library/system.collections.ienumerable) interface. All the data operations such as sorting, grouping, filtering, summaries are supported when you are binding collection derived from IEnumerable. +Data Grid control supports to bind any collection that implements the [IEnumerable](https://msdn.microsoft.com/en-us/library/system.collections.ienumerable) interface. All the data operations such as sorting, grouping, filtering, summaries are supported when you are binding collection derived from IEnumerable. ## Binding with dynamic data object -SfDataGrid control supports to bind [dynamic data object](https://msdn.microsoft.com/en-us/library/system.dynamic). Below are the limitations when you are binding dynamic data object, +Data Grid control supports to bind [dynamic data object](https://msdn.microsoft.com/en-us/library/system.dynamic). Below are the limitations when you are binding dynamic data object, -1. SfDataGrid doesn’t support [LiveDataUpdateMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LiveDataUpdateMode) - `AllowDataShaping` and `AllowSummaryUpdate`. +1. Data Grid doesn’t support [LiveDataUpdateMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LiveDataUpdateMode) - `AllowDataShaping` and `AllowSummaryUpdate`. 2. In WinRT, UI won’t get refreshed when you are changing the property value. This is limitation in WinRT platform. All the data operations (sorting, grouping, filtering and etc.) are supported when you are binding dynamic data object. If the data operations are not working as expected, set [SfDataGrid.IsDynamicItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_IsDynamicItemsSource) property as `true` . @@ -38,7 +38,7 @@ All the data operations (sorting, grouping, filtering and etc.) are supported wh ## Binding Complex properties -SfDataGrid control provides support to bind complex property to its columns. To bind the complex property to [GridColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html), set the complex property path to [MappingName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_MappingName). +Data Grid control provides support to bind complex property to its columns. To bind the complex property to [GridColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html), set the complex property path to [MappingName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_MappingName). {% tabs %} {% highlight xaml %} @@ -56,11 +56,11 @@ All the data operations (sorting, grouping, filtering and etc.) are supported wh ### Limitations when binding complex property -* SfDataGrid doesn’t support [LiveDataUpdateMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LiveDataUpdateMode) - `AllowDataShaping` and `AllowSummaryUpdate`. +* Data Grid doesn’t support [LiveDataUpdateMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LiveDataUpdateMode) - `AllowDataShaping` and `AllowSummaryUpdate`. ## Binding Indexer properties -SfDataGrid control provides support to bind an indexer property to its columns. To bind an indexer property to [GridColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html), set the indexer property path to [MappingName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_MappingName). +Data Grid control provides support to bind an indexer property to its columns. To bind an indexer property to [GridColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html), set the indexer property path to [MappingName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_MappingName). {% tabs %} {% highlight xaml %} @@ -81,12 +81,12 @@ All the data operations (sorting, grouping, filtering and etc.) are supported wh ### Limitations when binding indexer property -* SfDataGrid doesn’t support [LiveDataUpdateMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LiveDataUpdateMode) - `AllowDataShaping` and `AllowSummaryUpdate`. +* Data Grid doesn’t support [LiveDataUpdateMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LiveDataUpdateMode) - `AllowDataShaping` and `AllowSummaryUpdate`. ## Defining source data type -Based on type of data item bound to SfDataGrid, the data operations and column auto generation are carried out. You can specify the type of underlying data item explicitly for doing data operation by setting [SfDataGrid.SourceType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SourceType) property. +Based on type of data item bound to Data Grid, the data operations and column auto generation are carried out. You can specify the type of underlying data item explicitly for doing data operation by setting [SfDataGrid.SourceType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SourceType) property. {% tabs %} {% highlight xaml %} @@ -114,9 +114,9 @@ The [GridItemsSourceChangedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfu ## View -DataGrid has the View property of type `ICollectionViewAdv` interface that implements ICollectionView interface. View is responsible for maintain and manipulation data and other advanced operations like Sorting, Grouping, Filtering and etc. When you bind Collection to `ItemsSource` property of SfDataGrid, then View will be created and maintains the operations on Data such as Grouping, Filtering, Sorting, Insert, Delete, and Modification. Following are some important properties that can be used for various purposes. +Data Grid has the View property of type `ICollectionViewAdv` interface that implements ICollectionView interface. View is responsible for maintain and manipulation data and other advanced operations like Sorting, Grouping, Filtering and etc. When you bind Collection to `ItemsSource` property of Data Grid, then View will be created and maintains the operations on Data such as Grouping, Filtering, Sorting, Insert, Delete, and Modification. Following are some important properties that can be used for various purposes. -N> DataGrid creates different types of views derived from [ICollectionViewAdv](https://help.syncfusion.com/cr/uwp/Syncfusion.Data.ICollectionViewAdv.html) interface based on ItemsSource. +N> Data Grid creates different types of views derived from [ICollectionViewAdv](https://help.syncfusion.com/cr/uwp/Syncfusion.Data.ICollectionViewAdv.html) interface based on ItemsSource. @@ -127,16 +127,16 @@ N> DataGrid creates different types of views derived from [ICollectionViewAdv](h - + - + - + @@ -172,21 +172,21 @@ N> DataGrid creates different types of views derived from [ICollectionViewAdv](h
Records IRecordsListMaintains the Records that are displayed in View when DataGrid is not Grouped.
Maintains the Records that are displayed in View when Data Grid is not Grouped.
TopLevelGroup TopLevelGroupMaintains the Group information when DataGrid is Grouped.Maintains the Group information when Data Grid is Grouped.
TopLevelGroup.DisplayElements GroupDisplayElementsMaintains the Records and Group information that are displayed in View when DataGrid is Grouped.Maintains the Records and Group information that are displayed in View when Data Grid is Grouped.
FilterTableSummaryRows ObservableCollection<ISummaryRow> -Maintains the TableSummaryRows collection information. To know more about Table Summaries, see the Table Summaries documentation. +Maintains the TableSummaryRows collection information. To know more about Table Summaries, see the Table Summaries documentation.
SummaryRows ObservableCollection<ISummaryRow> -Maintains the SummaryRows collection information. To know more about summaries, see the Summaries documentation. +Maintains the SummaryRows collection information. To know more about summaries, see the Summaries documentation.
CaptionSummaryRows ISummaryRow -Maintains the CaptionSummaryRow information. To know more about CaptionSummaries, see the Caption Summaries documentation. +Maintains the CaptionSummaryRow information. To know more about CaptionSummaries, see the Caption Summaries documentation.
@@ -254,7 +254,7 @@ When BeginInit method is called it suspends all the updates until EndInit method -N> View has properties that already defined in SfDataGrid. It recommended setting those properties via SfDataGrid. +N> View has properties that already defined in Data Grid. It recommended setting those properties via Data Grid. ## Maintain scroll position when changing the ItemsSource diff --git a/uwp/DataGrid/Data-Manipulation.md b/uwp/DataGrid/Data-Manipulation.md index c48c8cbd..c3dac3f7 100644 --- a/uwp/DataGrid/Data-Manipulation.md +++ b/uwp/DataGrid/Data-Manipulation.md @@ -10,7 +10,7 @@ documentation: ug # Data Manipulation in UWP Data Grid -SfDataGrid listens and responds to the manipulation operations such as add, delete and data update (property change) at runtime. DataGrid refresh the sorting, filtering, grouping and summaries based on [SfDataGrid.LiveDataUpdateMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LiveDataUpdateMode) property. +UWP Data Grid listens and responds to the manipulation operations such as add, delete and data update (property change) at runtime. Data Grid refresh the sorting, filtering, grouping and summaries based on [SfDataGrid.LiveDataUpdateMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LiveDataUpdateMode) property. {% tabs %} {% highlight xaml %} @@ -261,9 +261,9 @@ Updated ## Built-in AddNewRow -SfDataGrid provides built-in row (called AddNewRow) to add new records to underlying collection. You can enable the AddNewRow by specifying the position where it should be displayed by setting [SfDataGrid.AddNewRowPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AddNewRowPosition) property. +Data Grid provides built-in row (called AddNewRow) to add new records to underlying collection. You can enable the AddNewRow by specifying the position where it should be displayed by setting [SfDataGrid.AddNewRowPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AddNewRowPosition) property. -When you start editing in AddNewRow, the SfDataGrid control creates an instance for the underlying data object and adds it to underlying collection when editing completed. +When you start editing in AddNewRow, the Data Grid control creates an instance for the underlying data object and adds it to underlying collection when editing completed. N> The underlying data object must be defined with default constructor. Otherwise, create instance of data object by handling `AddNewRowInitiating` event. @@ -279,7 +279,7 @@ this.dataGrid.AddNewRowPosition = AddNewRowPosition.Top; {% endhighlight %} {% endtabs %} -![UWP DataGrid with add new row](Data-Manipulation_images/Data-Manipulation_img1.png) +![Add new row](Data-Manipulation_images/Data-Manipulation_img1.png) You can get the row index of AddNewRow where it placed by using the [GridAddNewRowController.GetAddNewRowIndex](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridAddNewRowController.html#Syncfusion_UI_Xaml_Grid_GridAddNewRowController_GetAddNewRowIndex) method. @@ -301,9 +301,9 @@ bool isAddNewRowIndex = this.dataGrid.IsAddNewIndex(1); {% endhighlight %} {% endtabs %} -### Changing the AddNewRow default text in DataGrid +### Changing the AddNewRow default text in Data Grid -You can change the default static string of AddNewRow in datagrid by using the [SfDataGrid.AddNewRowText](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AddNewRowText) property. The `AddNewRowText` property has higher priority than the text that is localized in resx file. +You can change the default static string of AddNewRow in Data Grid by using the [SfDataGrid.AddNewRowText](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AddNewRowText) property. The `AddNewRowText` property has higher priority than the text that is localized in resx file. {% tabs %} {% highlight xaml %} @@ -322,7 +322,7 @@ this.dataGrid.AddNewRowText = "Click here to add new row in datagrid"; ### Customize the newly added row position -SfDataGrid adds new data item from AddNewRow at the end of collection. When data operations (sorting, grouping) performed, the new item added based on data operations. You can customize the newly added data item position by setting [SfDataGrid.NewItemPlaceHolderPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_NewItemPlaceholderPosition). +Data Grid adds new data item from AddNewRow at the end of collection. When data operations (sorting, grouping) performed, the new item added based on data operations. You can customize the newly added data item position by setting [SfDataGrid.NewItemPlaceHolderPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_NewItemPlaceholderPosition). {% tabs %} {% highlight xaml %} [GridColumn.AllowEditing](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowEditing) takes higher priority than [SfDataGrid.AllowEditing](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowEditing). -![UWP DataGrid Cell Editing](Editing_images/Editing_img1.png) +![Cell Editing](Editing_images/Editing_img1.png) N> It is mandatory to set the [NavigationMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_NavigationMode) to Cell to enable [CurrentCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCurrentCellManager.html#Syncfusion_UI_Xaml_Grid_GridCurrentCellManager_CurrentCell) navigation and editing. @@ -84,11 +84,11 @@ dataGrid.EditorSelectionBehavior = EditorSelectionBehavior.SelectAll; {% endtabs %} -![UWP DataGrid Cell Editing with EditorSelectionBehavior.SelectAll](Editing_images/Editing_img2.png) +![Cell Editing with EditorSelectionBehavior.SelectAll](Editing_images/Editing_img2.png) ## Retain editing on lost focus -The editing of current cell will be ended by default while the focus is moving from DataGrid to another control. You can set the [LostFocusBehavior](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LostFocusBehavior) property to `LostFocusBehavior.Default` if you want to retain the editing of the current cell even when focus is moved to another control. +The editing of current cell will be ended by default while the focus is moving from Data Grid to another control. You can set the [LostFocusBehavior](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_LostFocusBehavior) property to `LostFocusBehavior.Default` if you want to retain the editing of the current cell even when focus is moved to another control. {% tabs %} {% highlight xaml %} @@ -105,7 +105,7 @@ dataGrid.LostFocusBehavior = LostFocusBehavior.Default; ## Support for IEditableObject -SfDataGrid supports to commit and roll back the changes in row level when underlying data object implements [IEditableObject](https://msdn.microsoft.com/en-us/library/system.componentmodel.ieditableobject.aspx) interface. +Data Grid supports to commit and roll back the changes in row level when underlying data object implements [IEditableObject](https://msdn.microsoft.com/en-us/library/system.componentmodel.ieditableobject.aspx) interface. The editing changes in a row will be committed only when user move to next row or pressing enter key in `EndEdit`. Also when user press Esc key, then the changes made in a row will be reverted in `CancelEdit`. @@ -221,7 +221,7 @@ public class OrderInfo : INotifyPropertyChanged, IEditableObject ## Events -SfDataGrid triggers the following events during editing. +Data Grid triggers the following events during editing. ### CurrentCellBeginEdit Event @@ -229,9 +229,9 @@ SfDataGrid triggers the following events during editing. * [Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs.cancel?view=net-9.0): When set to ‘true’, the event is canceled and the `CurrentCell` does not enter into the edit mode. -* [RowColumnIndex](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellBeginEditEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellBeginEditEventArgs_RowColumnIndex): Gets the current row column index of the DataGrid. +* [RowColumnIndex](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellBeginEditEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellBeginEditEventArgs_RowColumnIndex): Gets the current row column index of the Data Grid. -* [Column](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellBeginEditEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellBeginEditEventArgs_Column): Gets the Grid Column of the SfDataGrid. +* [Column](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellBeginEditEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellBeginEditEventArgs_Column): Gets the Grid Column of the Data Grid. {% tabs %} @@ -268,7 +268,7 @@ private void DataGrid_CurrentCellEndEdit(object sender, CurrentCellEndEditEventA [CurrentCellValueChangedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellValueChangedEventArgs.html) has following members which provides information for `CurrentCellValueChanged` event. -* [Column](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellValueChangedEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellValueChangedEventArgs_Column): Gets the Grid Column of the SfDataGrid. +* [Column](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellValueChangedEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellValueChangedEventArgs_Column): Gets the Grid Column of the Data Grid. * [RowColumnIndex](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CurrentCellValueChangedEventArgs.html#Syncfusion_UI_Xaml_Grid_CurrentCellValueChangedEventArgs_RowColumnIndex): Gets the value of the current RowColumnIndex. @@ -312,7 +312,7 @@ private void DataGrid_CurrentCellDropDownSelectionChanged(object sender, Current ### CellTapped Event -CellTapped event occurs when the user clicks or touches the `Cell` in SfDataGrid with [GridCellTappedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCellTappedEventArgs.html). CellTapped event does not occur for the non-selectable cells. The GridCellTappedEventArgs has following members which provides information for `CellTapped` event. +CellTapped event occurs when the user clicks or touches the `Cell` in Data Grid with [GridCellTappedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCellTappedEventArgs.html). CellTapped event does not occur for the non-selectable cells. The GridCellTappedEventArgs has following members which provides information for `CellTapped` event. * [Column](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CellDoubleTappedEventArgs.html#Syncfusion_UI_Xaml_Grid_CellDoubleTappedEventArgs_Column) - Gets the GridColumn of the tapped cell. * [Record](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CellDoubleTappedEventArgs.html#Syncfusion_UI_Xaml_Grid_CellDoubleTappedEventArgs_Record) - Gets the data context of the tapped cell. @@ -342,7 +342,7 @@ private void Datagrid_CellTapped(object sender, GridCellTappedEventArgs e) {% endtabs %} ### CellDoubleTapped Event -CellDoubleTapped event occurs when the user double clicks or double taps the `GridCell` in SfDataGrid with [GridCellDoubleTappedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CellDoubleTappedEventArgs.html). CellDoubleTapped event does not occur for non-selectable cells. GridCellDoubleTappedEventArgs has following members which provides information for `CellDoubleTapped ` event. +CellDoubleTapped event occurs when the user double clicks or double taps the `GridCell` in Data Grid with [GridCellDoubleTappedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CellDoubleTappedEventArgs.html). CellDoubleTapped event does not occur for non-selectable cells. GridCellDoubleTappedEventArgs has following members which provides information for `CellDoubleTapped ` event. * [Column](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CellDoubleTappedEventArgs.html#Syncfusion_UI_Xaml_Grid_CellDoubleTappedEventArgs_Column) - Gets the GridColumn of the double tapped cell. @@ -376,12 +376,12 @@ private void Datagrid_CellDoubleTapped(object sender, GridCellDoubleTappedEventA ### BeginEdit -SfDataGrid allows you to edit the cell programmatically by calling the [BeginEdit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCurrentCellManager.html#Syncfusion_UI_Xaml_Grid_GridCurrentCellManager_BeginEdit) method. Initially the [CurrentCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCurrentCellManager.html#Syncfusion_UI_Xaml_Grid_GridCurrentCellManager_CurrentCell) need to set before calling the `BeginEdit` method when the CurrentCell value is null. +Data Grid allows you to edit the cell programmatically by calling the [BeginEdit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCurrentCellManager.html#Syncfusion_UI_Xaml_Grid_GridCurrentCellManager_BeginEdit) method. Initially the [CurrentCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCurrentCellManager.html#Syncfusion_UI_Xaml_Grid_GridCurrentCellManager_CurrentCell) need to set before calling the `BeginEdit` method when the CurrentCell value is null. {% tabs %} {% highlight c# %} -//Add this namespace to access the RowColumnIndex structure type in SfDataGrid +//Add this namespace to access the RowColumnIndex structure type in Data Grid using Syncfusion.UI.Xaml.ScrollAxis; this.dataGrid.Loaded += DataGrid_Loaded; @@ -403,7 +403,7 @@ You can call the [EndEdit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml {% tabs %} {% highlight c# %} -//Add this namespace to access the RowColumnIndex structure type in SfDataGrid +//Add this namespace to access the RowColumnIndex structure type in Data Grid using Syncfusion.UI.Xaml.ScrollAxis; this.dataGrid.Loaded += DataGrid_Loaded; @@ -425,7 +425,7 @@ You can use the [CurrentCellBeginEdit](https://help.syncfusion.com/cr/uwp/Syncfu {% tabs %} {% highlight c# %} -//Add this namespace to access the RowColumnIndex structure type in SfDataGrid +//Add this namespace to access the RowColumnIndex structure type in Data Grid using Syncfusion.UI.Xaml.ScrollAxis; this.dataGrid.CurrentCellBeginEdit += DataGrid_CurrentCellBeginEdit; @@ -496,7 +496,7 @@ You can allow `UIElement` loaded inside `CellTemplate` to handle keyboard intera {% endtabs %} -N> Enter and Tab keys are always handled by SfDataGrid only. +N> Enter and Tab keys are always handled by Data Grid only. ## How to @@ -573,12 +573,12 @@ public class CellStyleSelector:StyleSelector {% endtabs %} -![UWP DataGrid Changed the foreground of edited cells](Editing_images/Editing_img3.png) +![Changed the foreground of edited cells](Editing_images/Editing_img3.png) ### Allow editing when pressing minus key -SfDataGrid does not allow the cell to get into the edit mode while pressing the - key or any special character. You can overcome this behavior by deriving a class from `GridCellNumericRenderer` and override the `ShouldGridTryToHandleKeyDown` method. +Data Grid does not allow the cell to get into the edit mode while pressing the - key or any special character. You can overcome this behavior by deriving a class from `GridCellNumericRenderer` and override the `ShouldGridTryToHandleKeyDown` method. {% tabs %} {% highlight c# %} diff --git a/uwp/DataGrid/Export-To-Excel.md b/uwp/DataGrid/Export-To-Excel.md index 8c374477..c0f5427d 100644 --- a/uwp/DataGrid/Export-To-Excel.md +++ b/uwp/DataGrid/Export-To-Excel.md @@ -10,7 +10,7 @@ documentation: ug # Export To Excel in UWP Data Grid -SfDataGrid provides support to export data to excel. It also provides support for grouping, filtering, sorting, paging, unbound rows, merged cells, stacked headers and Details View while exporting. +UWP Data Grid provides support to export data to excel. It also provides support for grouping, filtering, sorting, paging, unbound rows, merged cells, stacked headers and Details View while exporting. The following assemblies needs to be added for exporting to excel. @@ -19,7 +19,7 @@ The following assemblies needs to be added for exporting to excel. For NuGet package, install [Syncfusion.DataGridExcelExport.UWP](https://www.nuget.org/packages/Syncfusion.DataGridExcelExport.UWP) package. For more details refer this [UG link](https://help.syncfusion.com/uwp/control-dependencies#exporting-datagrid-to-excel-pdf-and-csv). -You can export SfDataGrid to excel by using the [ExportToExcel](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.GridExcelExportExtension.html) extension method present in the [Syncfusion.UI.Xaml.Grid.Converter](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.html) namespace. +You can export Data Grid to excel by using the [ExportToExcel](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.GridExcelExportExtension.html) extension method present in the [Syncfusion.UI.Xaml.Grid.Converter](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.html) namespace. {% tabs %} {% highlight c# %} @@ -43,7 +43,7 @@ if (storageFile != null) ![Export-To-Excel_img2](Export-To-Excel_images/Export-To-Excel_img2.png) -N> SfDataGrid exports data to excel by using XlsIO. +N> Data Grid exports data to excel by using XlsIO. ## Exporting options @@ -101,7 +101,7 @@ if (storageFile != null) ### Exclude columns while exporting -By default, all the columns (including hidden columns) in SfDataGrid will be exported to Excel. If you want to exclude some columns while exporting to Excel, you can use [ExcludeColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.ExcelExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_ExcelExportingOptions_ExcludeColumns) field in `ExcelExportingOptions`. +By default, all the columns (including hidden columns) in Data Grid will be exported to Excel. If you want to exclude some columns while exporting to Excel, you can use [ExcludeColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.ExcelExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_ExcelExportingOptions_ExcludeColumns) field in `ExcelExportingOptions`. {% tabs %} {% highlight c# %} @@ -616,11 +616,11 @@ Here, OrderID column cells are customized while exporting. ## Customize exported workbook and worksheet -SfDataGrid exports to excel by using [XlsIO](https://help.syncfusion.com/file-formats/xlsio/overview). +Data Grid exports to excel by using [XlsIO](https://help.syncfusion.com/file-formats/xlsio/overview). ### Workbook -SfDataGrid provides option to return [ExcelEngine](https://help.syncfusion.com/cr/uwp/Syncfusion.XlsIO.ExcelEngine.html) from that you can get exported workbook. This allows you to protect, encrypt and add worksheet before saving. +Data Grid provides option to return [ExcelEngine](https://help.syncfusion.com/cr/uwp/Syncfusion.XlsIO.ExcelEngine.html) from that you can get exported workbook. This allows you to protect, encrypt and add worksheet before saving. {% tabs %} {% highlight c# %} @@ -638,7 +638,7 @@ if (storageFile != null) ### Worksheet customization -SfDataGrid provides support to export to already existing file or worksheet. +Data Grid provides support to export to already existing file or worksheet. In the below code snippet, worksheet is created and passed to `ExportToExcel` method. In the same way, you can open already existing excel also using `XlsIO`. @@ -831,7 +831,7 @@ Here, OrderID column is displayed in `DetailsViewDataGrid` and it is excluded wh ### Customizing DetailsViewDataGrid cells -Like parent DataGrid, you can customize the `DetailsViewDataGrid` cells also by using [CellsExportingEventHandler](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.ExcelExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_ExcelExportingOptions_CellsExportingEventHandler). Based on [GridCellExcelExportingEventArgs.GridViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.GridCellExcelExportingEventArgs.html#Syncfusion_UI_Xaml_Grid_Converter_GridCellExcelExportingEventArgs_GridViewDefinition) property, you can identify the particular `DetailsViewDataGrid` and customize it. +Like parent Data Grid, you can customize the `DetailsViewDataGrid` cells also by using [CellsExportingEventHandler](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.ExcelExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_ExcelExportingOptions_CellsExportingEventHandler). Based on [GridCellExcelExportingEventArgs.GridViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.GridCellExcelExportingEventArgs.html#Syncfusion_UI_Xaml_Grid_Converter_GridCellExcelExportingEventArgs_GridViewDefinition) property, you can identify the particular `DetailsViewDataGrid` and customize it. {% tabs %} {% highlight c# %} diff --git a/uwp/DataGrid/Export-To-PDF.md b/uwp/DataGrid/Export-To-PDF.md index 87b7287e..076cdbdb 100644 --- a/uwp/DataGrid/Export-To-PDF.md +++ b/uwp/DataGrid/Export-To-PDF.md @@ -10,7 +10,7 @@ documentation: ug # Export To PDF in UWP Data Grid -SfDataGrid provides support to export data to PDF file. It also provides support for grouping, filtering, sorting, paging, unbound rows, merged cells, stacked headers and details View while exporting. +UWP Data Grid provides support to export data to PDF file. It also provides support for grouping, filtering, sorting, paging, unbound rows, merged cells, stacked headers and details View while exporting. The following assemblies needs to be added for exporting to PDF file. @@ -20,7 +20,7 @@ The following assemblies needs to be added for exporting to PDF file. For NuGet package, install [Syncfusion.DataGridExcelExport.UWP](https://www.nuget.org/packages/Syncfusion.DataGridExcelExport.UWP) package. For more details refer this [UG link](https://help.syncfusion.com/uwp/control-dependencies#exporting-datagrid-to-excel-pdf-and-csv). -You can export SfDataGrid to PDF by using the following extension methods present in the [Syncfusion.UI.Xaml.Grid.Converter](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.html) namespace. +You can export Data Grid to PDF by using the following extension methods present in the [Syncfusion.UI.Xaml.Grid.Converter](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.html) namespace. * ExportToPdf @@ -48,7 +48,7 @@ Exporting operation can be customized by passing [PdfExportingOptions](https://h ### Exporting with Auto column width -You can export SfDataGrid to PDF by fitting column widths based on its content by setting [AutoColumnWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_AutoColumnWidth) property as `true`. +You can export Data Grid to PDF by fitting column widths based on its content by setting [AutoColumnWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_AutoColumnWidth) property as `true`. {% tabs %} {% highlight c# %} @@ -67,7 +67,7 @@ if (storageFile != null) ### Exporting with Auto Row height -You can export SfDataGrid to PDF by fitting row heights based on its content by setting [AutoRowHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_AutoRowHeight) property as `true`. +You can export Data Grid to PDF by fitting row heights based on its content by setting [AutoRowHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_AutoRowHeight) property as `true`. {% tabs %} {% highlight c# %} @@ -86,7 +86,7 @@ if (storageFile != null) ### Exclude columns while exporting -By default, all the columns (including hidden columns) in SfDataGrid will be exported to PDF. If you want to exclude some columns while exporting to PDF, you can use [ExcludeColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ExcludeColumns) property in `PdfExportingOptions`. +By default, all the columns (including hidden columns) in Data Grid will be exported to PDF. If you want to exclude some columns while exporting to PDF, you can use [ExcludeColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ExcludeColumns) property in `PdfExportingOptions`. {% tabs %} {% highlight c# %} @@ -179,7 +179,7 @@ if (storageFile != null) ### Exclude groups while exporting -By default, all the groups in SfDataGrid will be exported to PDF. If you want to export without Groups, you need to set [ExportGroups](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ExportGroups) property as `false`. +By default, all the groups in Data Grid will be exported to PDF. If you want to export without Groups, you need to set [ExportGroups](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ExportGroups) property as `false`. {% tabs %} {% highlight c# %} @@ -198,7 +198,7 @@ if (storageFile != null) ### Exclude group Summaries while exporting -By default, group summaries in SfDataGrid will be exported to PDF. If you want to export without group summaries, you need to set [ExportGroupSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ExportGroupSummary) property as `false`. +By default, group summaries in Data Grid will be exported to PDF. If you want to export without group summaries, you need to set [ExportGroupSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ExportGroupSummary) property as `false`. {% tabs %} {% highlight c# %} @@ -217,7 +217,7 @@ if (storageFile != null) ### Exclude table Summaries while exporting -By default, table summaries in SfDataGrid will be exported to PDF. If you want to export without table summaries, you need to set [ExportTableSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ExportTableSummary) property as `false`. +By default, table summaries in Data Grid will be exported to PDF. If you want to export without table summaries, you need to set [ExportTableSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ExportTableSummary) property as `false`. {% tabs %} {% highlight c# %} @@ -293,7 +293,7 @@ if (storageFile != null) ## Setting Header and Footer -SfDataGrid provides a way to display additional content at the top (Header) or bottom (Footer) of the page while exporting to PDF. This can be achieved by setting [PageHeaderFooterEventHandler](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_PageHeaderFooterEventHandler) in `PdfExportingOptions`. +Data Grid provides a way to display additional content at the top (Header) or bottom (Footer) of the page while exporting to PDF. This can be achieved by setting [PageHeaderFooterEventHandler](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_PageHeaderFooterEventHandler) in `PdfExportingOptions`. You can insert string, image or any drawing in header and footer in [PdfHeaderFooterEventHandler](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_PageHeaderFooterEventHandler). Setting [PdfPageTemplateElement](https://help.syncfusion.com/cr/uwp/Syncfusion.Pdf.PdfPageTemplateElement.html) to [PdfHeaderFooterEventArgs.PdfDocumentTemplate.Top](https://help.syncfusion.com/cr/uwp/Syncfusion.Pdf.PdfDocumentTemplate.html#Syncfusion_Pdf_PdfDocumentTemplate_Top) loads the content at top of the page and setting the [PdfPageTemplateElement](https://help.syncfusion.com/cr/uwp/Syncfusion.Pdf.PdfPageTemplateElement.html) to [PdfHeaderFooterEventArgs.PdfDocumentTemplate.Bottom](https://help.syncfusion.com/cr/uwp/Syncfusion.Pdf.PdfDocumentTemplate.html#Syncfusion_Pdf_PdfDocumentTemplate_Bottom) loads the content at bottom of the page. @@ -673,7 +673,7 @@ if (storageFile != null) ![Export-To-PDF_img21](Export-To-PDF_images/Export-To-PDF_img21.png) -Here, first record only expanded in SfDataGrid. But all the DetailsViewDataGrid’s are shown in exported PDF document. +Here, first record only expanded in Data Grid. But all the DetailsViewDataGrid’s are shown in exported PDF document. You can customize its exporting operation by using [ChildGridExportingEventHandler](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.PdfExportingOptions.html#Syncfusion_UI_Xaml_Grid_Converter_PdfExportingOptions_ChildGridExportingEventHandler). @@ -738,7 +738,7 @@ Here, OrderID column is displayed in `DetailsViewDataGrid` and it is excluded wh ### Customizing DetailsViewDataGrid cells -Like parent DataGrid, you can customize the `DetailsViewDataGrid` cells also by using `CellsExportingEventHandler`. Based on [GridCellPdfExportingEventArgs.GridViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.GridCellPdfExportingEventArgs.html#Syncfusion_UI_Xaml_Grid_Converter_GridCellPdfExportingEventArgs_GridViewDefinition) property, you can identify the particular `DetailsViewDataGrid` and customize it. +Like parent Data Grid, you can customize the `DetailsViewDataGrid` cells also by using `CellsExportingEventHandler`. Based on [GridCellPdfExportingEventArgs.GridViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Converter.GridCellPdfExportingEventArgs.html#Syncfusion_UI_Xaml_Grid_Converter_GridCellPdfExportingEventArgs_GridViewDefinition) property, you can identify the particular `DetailsViewDataGrid` and customize it. {% tabs %} {% highlight c# %} diff --git a/uwp/DataGrid/FilterRow.md b/uwp/DataGrid/FilterRow.md index 949bb0ca..0f59df5f 100644 --- a/uwp/DataGrid/FilterRow.md +++ b/uwp/DataGrid/FilterRow.md @@ -9,13 +9,13 @@ documentation: ug # FilterRow in UWP Data Grid -SfDataGrid allows you to filter the data by typing the value in FilterRow which is placed either in top or bottom of the DataGrid. You can enable the FilterRow by specifying the position in [SfDataGrid.FilterRowPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterRowPosition) property. +UWP Data Grid allows you to filter the data by typing the value in FilterRow which is placed either in top or bottom of the Data Grid. You can enable the FilterRow by specifying the position in [SfDataGrid.FilterRowPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FilterRowPosition) property. -The FilterRowPosition property contains the below positions to load the FilterRow in SfDataGrid. +The FilterRowPosition property contains the below positions to load the FilterRow in Data Grid. -1. FixedTop – Placed in top of the SfDataGrid in frozen state -2. Top – Placed in top of the SfDataGrid. -3. Bottom – Placed in bottom of the SfDataGrid. +1. FixedTop – Placed in top of the Data Grid in frozen state +2. Top – Placed in top of the Data Grid. +3. Bottom – Placed in bottom of the Data Grid. {% tabs %} {% highlight xaml %} @@ -34,7 +34,7 @@ this.dataGrid.FilterRowPosition = FilterRowPosition.FixedTop; {% endhighlight %} {% endtabs %} -![UWP DataGrid with filter row](FilterRow_images/FilterRow_img1.png) +![Filter row](FilterRow_images/FilterRow_img1.png) The each GridFilterRowCell which loads TextBox, DoubleTextBox and DateTimeEdit will contains the filter options button in right corner. You can change the FilterRowCondition at runtime. The below FilterRowConditions will be loaded based on editors. diff --git a/uwp/DataGrid/Filtering.md b/uwp/DataGrid/Filtering.md index 997e5678..81b9e470 100644 --- a/uwp/DataGrid/Filtering.md +++ b/uwp/DataGrid/Filtering.md @@ -10,7 +10,7 @@ documentation: ug # Filtering in UWP Data Grid -SfDataGrid allows you to filter the data programmatically in below ways +UWP Data Grid allows you to filter the data programmatically in below ways * Through View Predicate * Through Column Filter @@ -93,7 +93,7 @@ private void OnApplyFilterPredicate(object obj) ### Clear Filtering -SfDataGrid allows you to clear the filters by clearing the filter predicates. This is achieved by invoking the following methods. +Data Grid 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/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ClearFilters) - Clears filters for all the columns programmatically. @@ -110,7 +110,7 @@ this.dataGrid.ClearFilter(this.dataGrid.Columns[0]); ## UI Filtering -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/uwp/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. +Data Grid 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/uwp/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 %} @@ -143,7 +143,7 @@ N> ### Built-in UI Views -SfDataGrid filter UI comprises of two different UIs. +Data Grid filter UI comprises of two different UIs. * **Checkbox Filter UI** - Provides excel like filter interface with list of check box’s. @@ -151,23 +151,23 @@ SfDataGrid filter UI comprises of two different UIs. 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 +#### Data Grid with Checkbox Filter View -![DataGrid with Checkbox Filter View in DataGrid UWP](Filtering_images/Filtering_img1.png) +![Checkbox Filter View](Filtering_images/Filtering_img1.png) -![Checkbox Filter View in DataGrid UWP](Filtering_images/Filtering_img2.png) +![Checkbox Filter View](Filtering_images/Filtering_img2.png) -#### SfDataGrid with Advanced Filter View +#### Data Grid with Advanced Filter View -![DataGrid with Advanced Filter View in DataGrid UWP](Filtering_images/Filtering_img3.png) +![Advanced Filter View](Filtering_images/Filtering_img3.png) -![Advanced Filter View in DataGrid UWP](Filtering_images/Filtering_img4.png) +![Advanced Filter View](Filtering_images/Filtering_img4.png) ## Choose between built-in UI Views -SfDataGrid lets you to customize the UI Views displayed for particular column or grid using [FilterMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) property in [GridFilterControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). +Data Grid lets you to customize the UI Views displayed for particular column or grid using [FilterMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridFilterControl.html#Syncfusion_UI_Xaml_Grid_GridFilterControl_FilterMode) property in [GridFilterControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridFilterControl.html). Below are the options, @@ -291,13 +291,13 @@ When the DateTime type value is bound to the {{'[GridColumn](https: -UWP DataGrid with Checkbox Filter View +Checkbox Filter View -UWP DataGrid Text filters +Text filters -UWP DataGrid with Advanced Filter View +Advanced Filter View @@ -410,7 +410,7 @@ By default, casing is not considered while filtering. Because, filter predicates {% endhighlight %} {% endtabs %} -![Improve the performance while applying the filter in SfDataGrid UWP](Filtering_images/Filtering_img8.png) +![Improve the performance while applying the filter](Filtering_images/Filtering_img8.png) By default, [CanGenerateUniqueItems](https://help.syncfusion.com/cr/uwp/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. @@ -429,11 +429,11 @@ dataGrid.Columns["Country"].AllowBlankFilters = false; ### Checkbox Filter with AllowBlankFilters as True -![Filter the NULL values by using the CheckBox Filter view in SfDataGrid UWP](Filtering_images/Filtering_img9.png) +![Filter the NULL values by using the CheckBox Filter view](Filtering_images/Filtering_img9.png) ### Advanced Filter with AllowBlankFilters as True -![Filter the NULL values by using the Advanced Filter view in SfDataGrid UWP](Filtering_images/Filtering_img10.png) +![Filter the NULL values by using the Advanced Filter view](Filtering_images/Filtering_img10.png) ## Instant Filtering @@ -452,11 +452,11 @@ Here, the OK and Cancel buttons are unavailable and Done button is available to ### Checkbox Filter with ImmediateUpdateColumnFilter is True -![Apply the immediate filter in CheckBox Filter view in DataGrid UWP](Filtering_images/Filtering_img11.png) +![Apply the immediate filter in CheckBox Filter view](Filtering_images/Filtering_img11.png) ### Advanced Filter with ImmediateUpdateColumnFilter is True -![Apply the immediate filter in Advanced Filter view in DataGrid UWP](Filtering_images/Filtering_img12.png) +![Apply the immediate filter in Advanced Filter view](Filtering_images/Filtering_img12.png) N> In Checkbox Filter, the `SelectAll` option is not reflected in the filter updates if `ImmediateUpdateColumnFilter` is `true`. @@ -476,23 +476,23 @@ dataGrid.Columns["OrderDate"].ColumnFilter = ColumnFilter.DisplayText; 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). -![Apply the filter based on the underlying value in DataGrid UWP](Filtering_images/Filtering_img13.png) +![Apply the filter based on the underlying value](Filtering_images/Filtering_img13.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. -![Apply the filter based on the display text in DataGrid UWP](Filtering_images/Filtering_img14.png) +![Apply the filter based on the display text](Filtering_images/Filtering_img14.png) If you set `ColumnFilter` as `DisplayText`, display value only will be considered for filtering. So filter popup will be shown like below. -![Apply the filter based on the actual value in DataGrid UWP](Filtering_images/Filtering_img15.png) +![Apply the filter based on the actual value](Filtering_images/Filtering_img15.png) After filtering, both records having the same OrderDate display value will be displayed in view. -![Filter the same values records in DataGrid UWP](Filtering_images/Filtering_img16.png) +![Filter the same values records](Filtering_images/Filtering_img16.png) ## Events -SfDataGrid provides the following events for filtering. +Data Grid provides the following events for filtering. ### FilterChanging event @@ -574,7 +574,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/uwp/Syncfusion.UI.Xaml.Grid.CheckboxFilterControl.html#Syncfusion_UI_Xaml_Grid_CheckboxFilterControl_ItemTemplate) as like below. +By default, in Data Grid 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/uwp/Syncfusion.UI.Xaml.Grid.CheckboxFilterControl.html#Syncfusion_UI_Xaml_Grid_CheckboxFilterControl_ItemTemplate) as like below. {% tabs %} {% highlight xaml %} @@ -639,7 +639,7 @@ public class StringToImageConverter : IValueConverter {% endhighlight %} {% endtabs %} -![Apply the column filter for image in DataGrid UWP](Filtering_images/Filtering_img18.png) +![Apply the column filter for image](Filtering_images/Filtering_img18.png) You can get the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDatagridDemo82863041). @@ -757,7 +757,7 @@ Sort Options can be collapsed by setting [SortOptionVisibility](https://help.syn {% endtabs %} -![Hide the SortOptions from Filter popup in DataGrid UWP](Filtering_images/Filtering_img17.png) +![Hide the SortOptions from Filter popup](Filtering_images/Filtering_img17.png) ### Customizing Sort Options text @@ -795,7 +795,7 @@ You can customize the FilterPopup size using [FilterPopupHeight](https://help.sy {% endhighlight %} {% endtabs %} -![Customize the FilterPopup in DataGrid UWP](Filtering_images/Filtering_img19.png) +![Customize the FilterPopup](Filtering_images/Filtering_img19.png) ### Changing filter icon style after applying filters diff --git a/uwp/DataGrid/Getting-Started.md b/uwp/DataGrid/Getting-Started.md index de6eb2f0..de14dbca 100644 --- a/uwp/DataGrid/Getting-Started.md +++ b/uwp/DataGrid/Getting-Started.md @@ -9,30 +9,30 @@ documentation: ug # Getting Started with UWP Data Grid -The SfDataGrid control for Universal Windows Platform is used to display collection of data in rows and columns. It includes editing and data shaping features (Sorting, grouping, filtering and etc) that allows the end users to easily manage the data. +The UWP Data Grid control for Universal Windows Platform is used to display collection of data in rows and columns. It includes editing and data shaping features (Sorting, grouping, filtering and etc) that allows the end users to easily manage the data. -Following are the key features of SfDataGrid control, +Following are the key features of Data Grid, * **Data binding** – Supports to bind different types of data sources. * **Selection** – Support for row and also cell selection. * **Editing** – Interactive support to edit with different column types. * **Columns** – Support for various column types including unbound columns -* **Sorting** – Interactive support to sort the data in SfDataGrid. -* **Grouping** – Interactive support to group the data in SfDataGrid. +* **Sorting** – Interactive support to sort the data in Data Grid. +* **Grouping** – Interactive support to group the data in Data Grid. * **Summaries** – Extensive support to show concise information about the individual data columns or groups of rows. * **Filtering** – Interactive support for filtering data as like in Excel. * **Validation** – Support to validate the data on errors. * **Data virtualization** – Support for different modes of data virtualization such as paging, incremental loading. * **Master-Detail View**– Support to display relational data using hierarchies. * **Printing and Exporting** – Support to print and also export the data to Excel, PDF. -* **Styling** – Extensive support for customizing styles of cells and rows in SfDataGrid. +* **Styling** – Extensive support for customizing styles of cells and rows in Data Grid. * **Stacked Headers** - Extensive support to show multiple headers called stacked headers. * **Unbound rows** – Support to display unbound rows. * **Touch support** – Complete support for resizing, drag-drop column, sorting, filtering, grouping and etc. in touch. ## Assembly deployment -The following list of assemblies needs to be added as reference to use SfDataGrid control in any application, +The following list of assemblies needs to be added as reference to use Data Grid in any application, @@ -48,7 +48,7 @@ Description Syncfusion.Data.UWP @@ -56,7 +56,7 @@ Syncfusion.Data.UWP assembly contains fundamental and base classes for [Co Syncfusion.SfGrid.UWP @@ -64,7 +64,7 @@ Syncfusion.SfGrid.UWP assembly contains classes that handles all UI operations o Syncfusion.SfInput.UWP @@ -77,7 +77,7 @@ Syncfusion.SfShared.UWP is dependent assembly for Syncfusion.SfInput.UWP.
-Syncfusion.Data.UWP assembly contains fundamental and base classes for [CollectionViewAdv](https://help.syncfusion.com/cr/uwp/Syncfusion.Data.CollectionViewAdv.html) which is responsible for data processing operations handled in SfDataGrid. +Syncfusion.Data.UWP assembly contains fundamental and base classes for [CollectionViewAdv](https://help.syncfusion.com/cr/uwp/Syncfusion.Data.CollectionViewAdv.html) which is responsible for data processing operations handled in Data Grid.
-Syncfusion.SfGrid.UWP assembly contains classes that handles all UI operations of SfDataGrid. SfDataGrid control present Syncfusion.UI.Xaml.Grid namespace. +Syncfusion.SfGrid.UWP assembly contains classes that handles all UI operations of Data Grid. Data Grid control present Syncfusion.UI.Xaml.Grid namespace.
-Syncfusion.SfInput.UWP contains various editor controls (such as SfNumericTextBox, SfDateTimeEdit and etc) which are used in SfDataGrid. +Syncfusion.SfInput.UWP contains various editor controls (such as SfNumericTextBox, SfDateTimeEdit and etc) which are used in Data Grid.
-In order to use export to excel and export to PDF functionalities of SfDataGrid control, add the reference to following assemblies, +In order to use export to excel and export to PDF functionalities of Data Grid, add the reference to following assemblies, @@ -93,7 +93,7 @@ Description Syncfusion.SfGridConverter.UWP @@ -116,9 +116,9 @@ Syncfusion.Pdf.UWP contains fundamental and base classes for creating PDF. You can refer [here](https://help.syncfusion.com/uwp/system-requirements) to know the assemblies installation location on your machine. -## Creating simple application with SfDataGrid +## Creating simple application with Data Grid -In this walk through, you will create UWP application that contains SfDataGrid control. +In this walk through, you will create UWP application that contains Data Grid control. 1. [Creating project](#creating-the-project) 2. [Adding control via Designer](#adding-control-via-designer) @@ -133,11 +133,11 @@ In this walk through, you will create UWP application that contains SfDataGrid c ### Creating the project -Create new Universal Windows Platform project in Visual Studio to display SfDataGrid with data objects. +Create new Universal Windows Platform project in Visual Studio to display Data Grid with data objects. ### Adding control via Designer -SfDataGrid control can be added to the application by dragging it from Toolbox and dropping it in Designer view. The required assembly references will be added automatically. +Data Grid control can be added to the application by dragging it from Toolbox and dropping it in Designer view. The required assembly references will be added automatically. ![Adding control via Designer](Getting-Started_images/Getting-Started_img1.png) @@ -154,9 +154,9 @@ In order to add control manually in XAML, do the below steps, * Syncfusion.SfInput.UWP * Syncfusion.SfShared.UWP -2. Import SfDataGrid control namespace **Syncfusion.UI.Xaml.Grid** in XAML page. +2. Import Data Grid control namespace **Syncfusion.UI.Xaml.Grid** in XAML page. -3. Declare SfDataGrid control in XAML page. +3. Declare Data Grid control in XAML page. {% tabs %} {% highlight xaml %} @@ -187,9 +187,9 @@ In order to add control manually in C#, do the below steps, * Syncfusion.SfInput.UWP * Syncfusion.SfShared.UWP -2. Import SfDataGrid namespace **Syncfusion.UI.Xaml.Grid**. +2. Import Data Grid namespace **Syncfusion.UI.Xaml.Grid**. -3. Create SfDataGrid control instance and add it to the Page. +3. Create Data Grid control instance and add it to the Page. {% tabs %} {% highlight c# %} @@ -216,7 +216,7 @@ namespace GettingStarted ### Creating Data Model for sample application -SfDataGrid is a data-bound control. So before create binding to the control, you must create data model for Application. +Data Grid is a data-bound control. So before create binding to the control, you must create data model for Application. 1. Create data object class named **OrderInfo** and declare properties as shown below, @@ -314,7 +314,7 @@ public class ViewModel ### Binding to Data -To bind the SfDataGrid to data, set the [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property to an **IEnumerable** implementation. Each row in SfDataGrid is bound to an object in data source and each column in SfDataGrid bound to a property in data object. +To bind the Data Grid to data, set the [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property to an **IEnumerable** implementation. Each row in Data Grid is bound to an object in data source and each column in Data Grid bound to a property in data object. Bind the collection created in previous step to `SfDataGrid.ItemsSource` property in XAML by setting ViewModel as DataContext. @@ -357,7 +357,7 @@ Now, run the application and you can expect the see the below output, ## Defining Columns -By default, the SfDataGrid control generates the columns automatically when value assigned to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. The type of the column generated depends on the type of data in the column and the attribute of the property the column bound with. +By default, the Data Grid control generates the columns automatically when value assigned to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. The type of the column generated depends on the type of data in the column and the attribute of the property the column bound with. The following table lists the column types and it’s constraints for auto column generation. @@ -404,7 +404,7 @@ Property of type Bool
-Syncfusion.SfGridConverter.UWP contains static extension classes for exporting SfDataGrid to excel and PDF in Syncfusion.UI.Xaml.Grid.Converter namespace. +Syncfusion.SfGridConverter.UWP contains static extension classes for exporting Data Grid to excel and PDF in Syncfusion.UI.Xaml.Grid.Converter namespace.
-When columns are auto-generated, you can handle the [SfDataGrid.AutoGeneratingColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event to customize or cancel the columns before they are added to the SfDataGrid. +When columns are auto-generated, you can handle the [SfDataGrid.AutoGeneratingColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event to customize or cancel the columns before they are added to the Data Grid. You can prevent the automatic column generation by setting SfDataGrid.AutoGenerateColumns property to `false`. When [SfDataGrid.AutoGenerateColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AutoGenerateColumns) property is `false`, you have to define the columns to be displayed as below, @@ -429,7 +429,7 @@ dataGrid.Columns.Add(new GridTextColumn() { MappingName = "CustomerName" }); {% endhighlight %} {% endtabs %} -Below are the list of column types provided in SfDataGrid. +Below are the list of column types provided in Data Grid. @@ -445,7 +445,7 @@ Comments GridTextColumn @@ -453,7 +453,7 @@ Represents SfDataGrid column that hosts textual content in its cells. GridNumericColumn @@ -461,7 +461,7 @@ Represents SfDataGrid column that hosts {{'[SfNumericTextBox](https://help.syncf GridDateTimeColumn @@ -469,7 +469,7 @@ Represents SfDataGrid column that hosts {{'[SfDatePicker](https://help.syncfusio GridComboBoxColumn @@ -477,7 +477,7 @@ Represents SfDataGrid column that hosts ComboBox controls in its ce GridCheckBoxColumn @@ -485,7 +485,7 @@ Represents SfDataGrid column that hosts CheckBox controls in its ce GridImageColumn @@ -493,7 +493,7 @@ Represents SfDataGrid column that hosts Image controls in its cells GridHyperlinkColumn @@ -501,7 +501,7 @@ Represents SfDataGrid column that hosts HyperlinkButton controls in GridTemplateColumn @@ -509,7 +509,7 @@ Represents SfDataGrid column that hosts template-specified content in its cells GridUnboundColumn @@ -517,7 +517,7 @@ Represents SfDataGrid column that hosts textual or template-specified content wh GridMultiColumnDropdownList @@ -525,26 +525,26 @@ Represents SfDataGrid column that hosts SfMultiColumnDropDownControl
-Represents SfDataGrid column that hosts textual content in its cells. +Represents Data Grid column that hosts textual content in its cells.
-Represents SfDataGrid column that hosts {{'[SfNumericTextBox](https://help.syncfusion.com/uwp/numeric-textbox/overview)'| markdownify}} controls in its cells which is used to format and display Numeric values. +Represents Data Grid column that hosts {{'[SfNumericTextBox](https://help.syncfusion.com/uwp/numeric-textbox/overview)'| markdownify}} controls in its cells which is used to format and display Numeric values.
-Represents SfDataGrid column that hosts {{'[SfDatePicker](https://help.syncfusion.com/uwp/datepicker/overview)'| markdownify}} controls in its cells which is used to display and format DateTime values. +Represents Data Grid column that hosts {{'[SfDatePicker](https://help.syncfusion.com/uwp/datepicker/overview)'| markdownify}} controls in its cells which is used to display and format DateTime values.
-Represents SfDataGrid column that hosts ComboBox controls in its cells. +Represents Data Grid column that hosts ComboBox controls in its cells.
-Represents SfDataGrid column that hosts CheckBox controls in its cells. +Represents Data Grid column that hosts CheckBox controls in its cells.
-Represents SfDataGrid column that hosts Image controls in its cells. +Represents Data Grid column that hosts Image controls in its cells.
-Represents SfDataGrid column that hosts HyperlinkButton controls in its cells. +Represents Data Grid column that hosts HyperlinkButton controls in its cells.
-Represents SfDataGrid column that hosts template-specified content in its cells +Represents Data Grid column that hosts template-specified content in its cells
-Represents SfDataGrid column that hosts textual or template-specified content which are not actually bound with data object of row. +Represents Data Grid column that hosts textual or template-specified content which are not actually bound with data object of row.
-Represents SfDataGrid column that hosts SfMultiColumnDropDownControl in its cells. +Represents Data Grid column that hosts SfMultiColumnDropDownControl in its cells.
-Represents SfDataGrid column that hosts SfNumericUpDown in its cells. +Represents Data Grid column that hosts SfNumericUpDown in its cells.
## Selection -By default, the entire row is selected when a user clicks a cell in a SfDataGrid. You can set the [SfDataGrid.SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property to specify whether a user can select single row or cell, or multiple rows or cells. Set the [SfDataGrid.SelectionUnit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionUnit) property to specify whether rows can be selected, or cells can selected. +By default, the entire row is selected when a user clicks a cell in a Data Grid. You can set the [SfDataGrid.SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property to specify whether a user can select single row or cell, or multiple rows or cells. Set the [SfDataGrid.SelectionUnit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionUnit) property to specify whether rows can be selected, or cells can selected. When `SelectionUnit` is `Row`, you can get information about the rows that are selected using [SfDataGrid.SelectedItem](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) and [SfDataGrid.SelectedItems](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItems) properties. When `SfDataGrid.SelectionUnit` is `Cell`, you can get information about the cells that are selected by calling [SfDataGrid.GetSelectedCells](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GetSelectedCells) method. -You can handle the selection operations with the help of [SfDataGrid.SelectionChanging](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionChanging) and [SfDataGrid.SelectionChanged](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionChanged) events of SfDataGrid. +You can handle the selection operations with the help of [SfDataGrid.SelectionChanging](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionChanging) and [SfDataGrid.SelectionChanged](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionChanged) events of Data Grid. ## Sorting, Grouping, and Filtering ### Sorting -By default, you can sort columns in a SfDataGrid by clicking the column header. You can configure the sorting by setting [SfDataGrid.SortColumnDescriptions](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortColumnDescriptions) property as below, +By default, you can sort columns in a Data Grid by clicking the column header. You can configure the sorting by setting [SfDataGrid.SortColumnDescriptions](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortColumnDescriptions) property as below, {% tabs %} {% highlight xaml %} @@ -608,6 +608,6 @@ Filtering can be enabled by setting [SfDataGrid.AllowFiltering](https://help.syn Editing can be enabled by setting [SfDataGrid.AllowEditing](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowEditing) property to `true`. Set [SfDataGrid.AllowDeleting](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowDeleting) property to specify whether user can delete rows by pressing Delete key. -Set [SfDataGrid.AddNewRowPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AddNewRowPosition) property to enable additional row either `Top` or `Bottom` of SfDataGrid, where user can enter new items into the blank row. Adding new row adds an item to the [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource). +Set [SfDataGrid.AddNewRowPosition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AddNewRowPosition) property to enable additional row either `Top` or `Bottom` of Data Grid, where user can enter new items into the blank row. Adding new row adds an item to the [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource). You can customize the editing operations by handling [SfDataGrid.CurrentCellBeginEdit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellBeginEdit) and [SfDataGrid.CurrentCellEndEdit](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellEndEdit) events. diff --git a/uwp/DataGrid/Grouping.md b/uwp/DataGrid/Grouping.md index 032940a5..2c132913 100644 --- a/uwp/DataGrid/Grouping.md +++ b/uwp/DataGrid/Grouping.md @@ -10,8 +10,8 @@ documentation: ug # Grouping in UWP Data Grid -SfDataGrid allows you to group the data against one or more columns. When grouping is applied, the data is organized into a hierarchical structure based on matching column values and it is sorted by ascending order. -SfDataGrid allows you to group the data in below ways, +UWP Data Grid allows you to group the data against one or more columns. When grouping is applied, the data is organized into a hierarchical structure based on matching column values and it is sorted by ascending order. +Data Grid allows you to group the data in below ways, * UI Grouping @@ -76,7 +76,7 @@ You can refer [Caption Summaries](https://help.syncfusion.com/uwp/datagrid/summa ## Programmatic Grouping -SfDataGrid allows you to group the data programmatically by adding or removing [GroupColumnDescription](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GroupColumnDescription.html) to [SfDataGrid.GroupColumnDescriptions](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GroupColumnDescriptions) collection. +Data Grid allows you to group the data programmatically by adding or removing [GroupColumnDescription](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GroupColumnDescription.html) to [SfDataGrid.GroupColumnDescriptions](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GroupColumnDescriptions) collection. For example, if you want to group the OrderID column programmatically, define its [MappingName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_MappingName) to [ColumnName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GroupColumnDescription.html#Syncfusion_UI_Xaml_Grid_GroupColumnDescription_ColumnName) property of `GroupColumnDescription`. Then add the `GroupColumnDescription` to the `SfDataGrid.GroupColumnDescriptions` collection. @@ -122,7 +122,7 @@ this.dataGrid.View.EndInit(); ## Display based grouping using GroupMode property -You can group the column in SfDataGrid based on the value being displayed in cell by setting [GridColumn.GroupMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_GroupMode) as ‘Display’. +You can group the column in Data Grid based on the value being displayed in cell by setting [GridColumn.GroupMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_GroupMode) as 'Display'. In the below example, OrderID column displays value with one decimal digit in cell. But when you group, groups will be created based on actual value considering all decimal digits of value (Refer right side screen shot). You can group based value displayed in the cell by setting [GridColumn.GroupMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_GroupMode) as ‘Display’ (Refer left side screen shot for the same data). {% tabs %} @@ -138,7 +138,7 @@ this.datagrid.Columns["OrderID"].GroupMode = DataReflectionMode.Display; ### Group caption based on DisplayMember when grouping GridComboBoxColumn and GridMultiColumnDropDownList -In SfDataGrid, you can group the column based on display value and also the same can be displayed in caption summary by setting [GridColumn.GroupMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_GroupMode) as ‘Display’. +In Data Grid, you can group the column based on display value and also the same can be displayed in caption summary by setting [GridColumn.GroupMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html#Syncfusion_UI_Xaml_Grid_GridColumn_GroupMode) as 'Display'. {% tabs %} {% highlight xaml %} @@ -295,7 +295,7 @@ this.dataGrid.CollapseGroup(group); ## Customize IndentColumn width -You can customize the width of IndentColumn in SfDataGrid by using [IndentColumnWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_IndentColumnWidth) property as like below. +You can customize the width of IndentColumn in Data Grid by using [IndentColumnWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_IndentColumnWidth) property as like below. {% tabs %} {% highlight xaml %} @@ -331,7 +331,7 @@ You can change the GroupDropArea’s text can by setting [SfDataGrid.GroupDropAr ### GroupDropArea Height and Appearance -SfDataGrid allows you to customize the appearance and height of GroupDropArea by writing the style of TargetType `GroupDropArea`. +Data Grid allows you to customize the appearance and height of GroupDropArea by writing the style of TargetType `GroupDropArea`. {% tabs %} @@ -371,7 +371,7 @@ this.dataGrid.IsGroupDropAreaExpanded = true; ## Custom Grouping -SfDataGrid allows you to group the data based on custom logic when the built-in grouping functionality doesn’t meet your requirement. +Data Grid allows you to group the data based on custom logic when the built-in grouping functionality doesn’t meet your requirement. To perform custom grouping on a particular column, specify the custom logic through [GroupColumnDescription.Converter](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GroupColumnDescription.html#Syncfusion_UI_Xaml_Grid_GroupColumnDescription_Converter) property and the column name to [GroupColumnDescription.ColumnName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GroupColumnDescription.html#Syncfusion_UI_Xaml_Grid_GroupColumnDescription_ColumnName) property. @@ -485,7 +485,7 @@ In the below screenshot custom grouping is applied based on SickLeaveHours colum ## Sorting CaptionSummaryRows by Aggregate -SfDataGrid allows you to sort the groups based its summary values. You can sort the groups based on summary aggregate value by using [SfDataGrid. SummaryGroupComparer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SummaryGroupComparer) property. +Data Grid allows you to sort the groups based its summary values. You can sort the groups based on summary aggregate value by using [SfDataGrid.SummaryGroupComparer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SummaryGroupComparer) property. Follow the below steps to sort the groups based on caption aggregate value. @@ -517,9 +517,9 @@ public class CustomSummaryGroupComparer : IComparer, ISortDirection {% endhighlight %} {% endtabs %} -### Defining custom group comparer to SfDataGrid +### Defining custom group comparer to Data Grid -Custom group comparer can be defined in SfDataGrid using [SfDataGrid.SummaryGroupComparer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SummaryGroupComparer) property. `SummaryGroupComparer` maintains the custom comparers and the custom comparer gets called when corresponding column is grouped. +Custom group comparer can be defined in Data Grid using [SfDataGrid.SummaryGroupComparer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SummaryGroupComparer) property. `SummaryGroupComparer` maintains the custom comparers and the custom comparer gets called when corresponding column is grouped. {% tabs %} {% highlight xaml %} diff --git a/uwp/DataGrid/Interactive-Features.md b/uwp/DataGrid/Interactive-Features.md index 7073204c..3f0b4bea 100644 --- a/uwp/DataGrid/Interactive-Features.md +++ b/uwp/DataGrid/Interactive-Features.md @@ -29,7 +29,7 @@ dataGrid.ShowRowHeader = true; {% endhighlight %} {% endtabs %} -![Image used to display the row header enabled in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img1.png) +![Image used to display the row header enabled](Interactive-Features_images/InteractiveFeatures_img1.png) You can change the default width of the RowHeader by using [SfDataGrid.RowHeaderWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_RowHeaderWidth) property. @@ -82,7 +82,7 @@ You can display the corresponding row index in each RowHeader, by customizing th {% endhighlight %} {% endtabs %} -![Image used to display the row index displayed in row header cell of uwp datagrid](Interactive-Features_images/InteractiveFeatures_img2.png) +![Image used to display the row index displayed in row header cell](Interactive-Features_images/InteractiveFeatures_img2.png) You can get the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/DisplayRowIndex1237508699.zip). @@ -136,7 +136,7 @@ You can change the CurrentRowIndicator in the RowHeader by customizing the contr {% endhighlight %} {% endtabs %} -![Image used to display the current row indicator changed in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img3.png) +![Image used to display the current row indicator changed](Interactive-Features_images/InteractiveFeatures_img3.png) You can get the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChangingCurrentRowIndicator(1)970786330.zip). @@ -146,7 +146,7 @@ You can get the sample from [here](https://www.syncfusion.com/downloads/support/ ### ColumnResizing with the Touch -SfDataGrid allows you to re-size the columns in touch by press and hold the column header. You can enable resizing in SfDataGrid by setting AllowResizingColumns as True. +Data Grid allows you to re-size the columns in touch by press and hold the column header. You can enable resizing in Data Grid by setting AllowResizingColumns as True. {% tabs %} {% highlight xaml %} @@ -167,7 +167,7 @@ this.dataGrid.AllowResizingColumns = true; {% endhighlight %} {% endtabs %} -![Image used to display the columnresizing with the touch in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img9.png) +![Image used to display the columnresizing with the touch](Interactive-Features_images/InteractiveFeatures_img9.png) You can also resize the hidden column through the touch by setting the AllowResizingHiddenColumns by True. You have to press and hold the hidden line to resize the hidden column in touch. @@ -191,7 +191,7 @@ this.dataGrid.AllowResizingHiddenColumns = true; {% endhighlight %} {% endtabs %} -![Image used to display the resize the hidden column through the touch in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img10.png) +![Image used to display the resize the hidden column through the touch](Interactive-Features_images/InteractiveFeatures_img10.png) N> you can resize the column by dragging the bubbles on the Tool-Tip @@ -217,11 +217,11 @@ this.dataGrid.AllowDraggingColumns = true; {% endhighlight %} {% endtabs %} -![Image used to display the drag and drop with the touch support in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img11.png) +![Image used to display the drag and drop with the touch support](Interactive-Features_images/InteractiveFeatures_img11.png) ## Drag and Drop Rows -SfDataGrid allows you to row drag and drop by setting the [SfDataGrid.AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowDraggingRows) and [AllowDrop](https://msdn.microsoft.com/en-us/library/system.windows.uielement.allowdrop(v=vs.110).aspx) property. Also, you can do row drag-and-drop operations between SfDataGrid and other controls like ListView, TreeView. +Data Grid allows you to row drag and drop by setting the [SfDataGrid.AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowDraggingRows) and [AllowDrop](https://msdn.microsoft.com/en-us/library/system.windows.uielement.allowdrop(v=vs.110).aspx) property. Also, you can do row drag-and-drop operations between Data Grid and other controls like ListView, TreeView. {% tabs %} {% highlight xaml %} @@ -240,15 +240,15 @@ this.datagrid.AllowDrop = true; {% endhighlight %} {% endtabs %} -![Image used to display the drag and drop rows in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img12.png) +![Image used to display the drag and drop rows](Interactive-Features_images/InteractiveFeatures_img12.png) ### Dragging multiple rows -The SfDataGrid allows to drag multiple selected rows. To enable multiple selection, set the [SfDataGrid.SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) as Multiple or Extended. +The Data Grid allows to drag multiple selected rows. To enable multiple selection, set the [SfDataGrid.SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) as Multiple or Extended. -N> The drag selection cannot be performed while the [AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowDraggingRows) enabled as true in the SfDataGrid. +N> The drag selection cannot be performed while the [AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowDraggingRows) enabled as true in the Data Grid. -![Image used to display the dragging multiple rows in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img13.png) +![Image used to display the dragging multiple rows](Interactive-Features_images/InteractiveFeatures_img13.png) ### Customizing row drag and drop @@ -328,7 +328,7 @@ protected override void ProcessOnDragOver(DragEventArgs args, RowColumnIndex row {% endhighlight %} {% endtabs %} -![Image used to display the customizing drag ui text in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img14.png) +![Image used to display the customizing drag ui text](Interactive-Features_images/InteractiveFeatures_img14.png) #### Customizing dragging records @@ -378,9 +378,9 @@ public class GridRowDragDropControllerExt : GridRowDragDropController {% endhighlight %} {% endtabs %} -### Row drag and drop between DataGrid and ListView +### Row drag and drop between Data Grid and ListView -To perform dragging between the ListView and SfDataGrid, override the [ProcessOnDragOver](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRowDragDropController.html#Syncfusion_UI_Xaml_Grid_GridRowDragDropController_ProcessOnDragOver_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) and [ProcessOnDrop](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRowDragDropController.html#Syncfusion_UI_Xaml_Grid_GridRowDragDropController_ProcessOnDrop_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) methods in the [GridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRowDragDropController.html) class. +To perform dragging between the ListView and Data Grid, override the [ProcessOnDragOver](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRowDragDropController.html#Syncfusion_UI_Xaml_Grid_GridRowDragDropController_ProcessOnDragOver_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) and [ProcessOnDrop](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRowDragDropController.html#Syncfusion_UI_Xaml_Grid_GridRowDragDropController_ProcessOnDrop_Windows_UI_Xaml_DragEventArgs_Syncfusion_UI_Xaml_ScrollAxis_RowColumnIndex_) methods in the [GridRowDragDropController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRowDragDropController.html) class. {% tabs %} {% highlight c# %} @@ -541,19 +541,19 @@ private void ListView_DragItemsStarting(object sender, DragItemsStartingEventArg {% endhighlight %} {% endtabs %} -![Image used to display the row drag and drop between sfdatagrid and listview in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img15.png) +![Image used to display the row drag and drop between Data Grid and listview](Interactive-Features_images/InteractiveFeatures_img15.png) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/how-to-drag-and-drop-rows-between-datagrid-and-listview-in-wpf-and-uwp/tree/master/UWP) -### Row Drag and Drop between two SfDataGrids +### Row Drag and Drop between two Data Grid -You should enable [AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowDraggingRows) and [AllowDrop](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.uielement.allowdrop?view=winrt-22621) property for the SfDataGrid’ s which are involved in row drag and drop operations. +You should enable [AllowDraggingRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AllowDraggingRows) and [AllowDrop](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.uielement.allowdrop?view=winrt-22621) property for the Data Grid’ s which are involved in row drag and drop operations. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/how-to-drag-and-drop-rows-between-two-datagrids-in-wpf-and-uwp/tree/master/UWP) ## Context Menu -DataGrid provides an entirely customizable context menu to expose the functionality on user interface. You can create context menu for different rows in an efficient manner. +Data Grid provides an entirely customizable context menu to expose the functionality on user interface. You can create context menu for different rows in an efficient manner. The below code example shows the context menu with command bindings. @@ -709,7 +709,7 @@ this.dataGrid.RecordContextMenu.Items.Add(new MenuFlyoutItem() { Text = "Delete" {% endhighlight %} {% endtabs %} -![Context menu added for data rows in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img16.png) +![Context menu added for data rows](Interactive-Features_images/InteractiveFeatures_img16.png) While binding the menu item using CommandBinding you can get the command parameter as [GridRecordContextMenuInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRecordContextMenuInfo.html) which contains the record of the corresponding row. @@ -777,7 +777,7 @@ this.dataGrid.HeaderContextMenu.Items.Add(new MenuFlyoutItem() { Text = "BestFit {% endhighlight %} {% endtabs %} -![Context menu added for header row in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img17.png) +![Context menu added for header row](Interactive-Features_images/InteractiveFeatures_img17.png) While binding the menu item using CommandBinding you can get the parameter as [GridColumnContextMenuInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnContextMenuInfo.html) which contains the particular GridColumn. @@ -839,7 +839,7 @@ this.dataGrid.GroupDropAreaContextMenu.Items.Add(new MenuFlyoutItem() { Text = " {% endhighlight %} {% endtabs %} -![Context menu added for GroupDropArea in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img18.png) +![Context menu added for GroupDropArea](Interactive-Features_images/InteractiveFeatures_img18.png) While binding the menu item using CommandBinding you can get the parameter as [GridGroupDropAreaContextMenuInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridGroupDropAreaContextMenuInfo.html). @@ -905,7 +905,7 @@ this.dataGrid.GroupDropItemContextMenu.Items.Add(new MenuFlyoutItem() { Text = " {% endhighlight %} {% endtabs %} -![Context menu added for GroupDropItem in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img19.png) +![Context menu added for GroupDropItem](Interactive-Features_images/InteractiveFeatures_img19.png) While binding the menu item using CommandBinding you can get the parameter as [GridColumnContextMenuInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnContextMenuInfo.html) which contains the particular GridColumn. @@ -963,7 +963,7 @@ this.dataGrid.GroupCaptionContextMenu.Items.Add(new MenuFlyoutItem() { Text = "C {% endhighlight %} {% endtabs %} -![Context menu added for group caption rows in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img20.png) +![Context menu added for group caption rows](Interactive-Features_images/InteractiveFeatures_img20.png) While binding the menu item using CommandBinding you can get the command parameter as [GridRecordContextMenuInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRecordContextMenuInfo.html) which contains the record of the corresponding row. @@ -1020,7 +1020,7 @@ this.dataGrid.GroupSummaryContextMenu.Items.Add(new MenuFlyoutItem() { Text = "C {% endhighlight %} {% endtabs %} -![Context menu added for group summary rows in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img21.png) +![Context menu added for group summary rows](Interactive-Features_images/InteractiveFeatures_img21.png) While binding the menu item using CommandBinding you can get the command parameter as [GridRecordContextMenuInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRecordContextMenuInfo.html) which contains the record of the corresponding row. @@ -1086,7 +1086,7 @@ this.dataGrid.TableSummaryContextMenu.Items.Add(new MenuFlyoutItem() { Text = "S {% endhighlight %} {% endtabs %} -![Context menu added for table summary rows in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img22.png) +![Context menu added for table summary rows](Interactive-Features_images/InteractiveFeatures_img22.png) While binding the menu item using CommandBinding you can get the command parameter as [GridRecordContextMenuInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridRecordContextMenuInfo.html) which contains the record of the corresponding row. @@ -1130,7 +1130,7 @@ private void TotalSummaryCount(object param) #### GridContextMenuOpening -[GridContextMenuOpening](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event occurs while opening the context menu in SfDataGrid. +[GridContextMenuOpening](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event occurs while opening the context menu in Data Grid. [GridContextMenuEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridContextMenuEventArgs.html) has the following members which provides the information about `GridContextMenuOpening` event. @@ -1187,7 +1187,7 @@ private void DataGrid_GridContextMenuOpening(object sender, GridContextMenuEvent {% endhighlight %} {% endtabs %} -![Context menu changed for record cell while opening in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img23.png) +![Context menu changed for record cell while opening](Interactive-Features_images/InteractiveFeatures_img23.png) #### Customizing appearance of context menu @@ -1212,4 +1212,4 @@ You can change the appearance of the context menu by customizing the style with {% endhighlight %} {% endtabs %} -![Context menu background changed in uwp datagrid](Interactive-Features_images/InteractiveFeatures_img24.png) +![Context menu background changed](Interactive-Features_images/InteractiveFeatures_img24.png) diff --git a/uwp/DataGrid/Localization.md b/uwp/DataGrid/Localization.md index 6d6317cf..1f3a2a25 100644 --- a/uwp/DataGrid/Localization.md +++ b/uwp/DataGrid/Localization.md @@ -10,7 +10,7 @@ documentation: ug # Localization in UWP Data Grid -Localization is the process of translating the application resources into different language for the specific cultures. You can localize the SfDataGrid by adding [resource] (https://msdn.microsoft.com/library/aa992030.aspx) file. Application culture can be changed by setting [CurrentUICulture](https://msdn.microsoft.com/en-us/library/system.globalization.cultureinfo.currentuiculture.aspx) before `InitializeComponent()` method. +Localization is the process of translating the application resources into different language for the specific cultures. You can localize the Data Grid by adding [resource] (https://msdn.microsoft.com/library/aa992030.aspx) file. Application culture can be changed by setting [CurrentUICulture](https://msdn.microsoft.com/en-us/library/system.globalization.cultureinfo.currentuiculture.aspx) before `InitializeComponent()` method. Below application culture changed to German. @@ -25,13 +25,13 @@ public MainPage() {% endtabs %} -To localize the SfDataGrid based on [CurrentUICulture](https://msdn.microsoft.com/en-us/library/system.globalization.cultureinfo.currentuiculture.aspx) using .resw files, follow the below steps. +To localize the Data Grid based on [CurrentUICulture](https://msdn.microsoft.com/en-us/library/system.globalization.cultureinfo.currentuiculture.aspx) using .resw files, follow the below steps. 1. Right-click on the project, select **Add** and then **NewItem**. 2. In Add New Item wizard, select the **Resource File** option and name the filename as **Syncfusion.SfGrid.UWP.Resources.<culture name>.resw** . -![Shows the name of resource file to be added for UWP DataGrid](Localization_images/Localization_img1.png) +![Shows the name of resource file to be added](Localization_images/Localization_img1.png) For example, you have to give name as **Syncfusion.SfGrid.UWP.Resources.de.resw** for German culture. @@ -40,30 +40,30 @@ For example, you have to give name as **Syncfusion.SfGrid.UWP.Resources.de.resw* 4. Now the resource file is added. -![Shows the added resource file for German language in UWP DataGrid](Localization_images/Localization_img2.png) +![Shows the added resource file for German language](Localization_images/Localization_img2.png) 5.Add the Name/Value pair in Resource Designer of **Syncfusion.SfGrid.UWP.Resources.de.resw** file and change its corresponding value to corresponding culture. -![Shows the added resource file name / value pair in the resource designer in UWP DataGrid](Localization_images/Localization_img3.png) +![Shows the added resource file name / value pair in the resource designer](Localization_images/Localization_img3.png) -You can get the SfDataGrid’s key from default resource [Syncfusion.SfGrid.UWP.Resources.resw](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.SfGrid.UWP.Resources-145129753.zip). +You can get the Data Grid’s key from default resource [Syncfusion.SfGrid.UWP.Resources.resw](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.SfGrid.UWP.Resources-145129753.zip). -![Shows the localized in German for UWP DataGrid](Localization_images/Localization_img4.png) +![Shows the localized in German](Localization_images/Localization_img4.png) ## Editing default culture resource -You can edit default resource file by adding it to your application where SfDataGrid reads the static texts from here. You can download the default resource file from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.SfGrid.UWP.Resources-145129753.zip). +You can edit default resource file by adding it to your application where Data Grid reads the static texts from here. You can download the default resource file from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.SfGrid.UWP.Resources-145129753.zip). -![Displaying the default culture resource editing for UWP SfDataGrid](Localization_images/Localization_img5.png) +![Displaying the default culture resource editing](Localization_images/Localization_img5.png) Now, change the Name/Value pair in Resource Designer of **Syncfusion.SfGrid.UWP.Resources.resw** file. -![Displaying the name / value pair in the resource designer for default culture resource in UWP SfDataGrid](Localization_images/Localization_img6.png) +![Displaying the name / value pair in the resource designer for default culture resource](Localization_images/Localization_img6.png) -![Displaying UWP SfDataGrid with the default culture resource edited](Localization_images/Localization_img7.png) +![Displaying with the default culture resource edited](Localization_images/Localization_img7.png) diff --git a/uwp/DataGrid/Master-Details-View.md b/uwp/DataGrid/Master-Details-View.md index 75f9f67a..5860766c 100644 --- a/uwp/DataGrid/Master-Details-View.md +++ b/uwp/DataGrid/Master-Details-View.md @@ -9,9 +9,9 @@ documentation: ug # Master-Details View in UWP Data Grid -SfDataGrid provides support to represent the hierarchical data in the form of nested tables using Master-Details View. You can expand or collapse the nested tables ([DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html)) by using an expander in a row or programmatically. The number of tables nested with relations is unlimited. +UWP Data Grid provides support to represent the hierarchical data in the form of nested tables using Master-Details View. You can expand or collapse the nested tables ([DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html)) by using an expander in a row or programmatically. The number of tables nested with relations is unlimited. -![UWP DataGrid shows master details view](Master-Details-View_images/Master-Details-View_img1.png) +![Master details view](Master-Details-View_images/Master-Details-View_img1.png) ## Generating Master-Details view from IEnumerable @@ -271,7 +271,7 @@ public class ViewModel #### Auto-generating relations -SfDataGrid will automatically generate relations and inner relations for the `IEnumerable` property types in the data object. This can be enabled by setting [SfDataGrid.AutoGenerateRelations](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AutoGenerateRelations) to `true`. +Data Grid will automatically generate relations and inner relations for the `IEnumerable` property types in the data object. This can be enabled by setting [SfDataGrid.AutoGenerateRelations](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AutoGenerateRelations) to `true`. Bind the collection created in the previous step to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) and set the [SfDataGrid.AutoGenerateRelations](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_AutoGenerateRelations) to `true`. {% tabs %} @@ -289,7 +289,7 @@ dataGrid.AutoGenerateRelations = true; When relations are auto-generated, you can handle the [SfDataGrid.AutoGeneratingRelations](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event to customize or cancel the [GridViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridViewDefinition.html) before they are added to the [SfDataGrid.DetailsViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_DetailsViewDefinition). Here, two relations are created from `Sales` and `Orders` collection property. -![UWP DataGrid shows auto-generated relations](Master-Details-View_images/Master-Details-View_img2.png) +![Auto-generated relations](Master-Details-View_images/Master-Details-View_img2.png) #### Manually defining Relations @@ -336,7 +336,7 @@ dataGrid.DetailsViewDefinition.Add(gridViewDefinition2); {% endhighlight %} {% endtabs %} -![Manually defined relations in UWP DataGrid](Master-Details-View_images/Master-Details-View_img3.png) +![Manually defined relations](Master-Details-View_images/Master-Details-View_img3.png) In the same way, you can define relations for first level nested grids by defining relations to the [ViewDefinition.DataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridViewDefinition.html#Syncfusion_UI_Xaml_Grid_GridViewDefinition_DataGrid) of first level nested grid. @@ -388,7 +388,7 @@ dataGrid.DetailsViewDefinition.Add(gridViewDefinition1); {% endhighlight %} {% endtabs %} -![Manually defined relations for master details view DataGrid in UWP](Master-Details-View_images/Master-Details-View_img4.png) +![Manually defined relations for master details view](Master-Details-View_images/Master-Details-View_img4.png) ## Populating Master-Details view through events @@ -616,7 +616,7 @@ Void FirstLevelNestedGrid_AutoGeneratingRelations(object sender, AutoGeneratingR N> When you make any change in one [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html), that change will be applied to all [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) in the same level. For example, when you resize the first column in one [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html), the same column width is applied to all [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) at that level. This is applicable for features like filtering, sorting, grouping and re ordering columns also. -![UWP DataGrid shows auto-generated relations](Master-Details-View_images/Master-Details-View_img5.png) +![Auto-generated relations](Master-Details-View_images/Master-Details-View_img5.png) Here, `SalesID` column is sorted in all DetailsViewDataGrid at the same level. @@ -753,7 +753,7 @@ Now, you can add the custom column to `Columns` collection of `ViewDefinition.Da {% endhighlight %} {% endtabs %} -![custom column in master details view of UWP DataGrid](Master-Details-View_images/Master-Details-View_img6.png) +![custom column in master details view](Master-Details-View_images/Master-Details-View_img6.png) ## Handling events for DetailsViewDataGrid @@ -1034,7 +1034,7 @@ Here, sender is [ViewDefinition.DataGrid](https://help.syncfusion.com/cr/uwp/Syn ## Column sizing -SfDataGrid allows you to apply column sizer to `DetailsViewDataGrid` by setting the [GridViewDefinition.DataGrid.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ColumnSizer) like parent DataGrid. For more information, refer the Column Sizing section. +Data Grid allows you to apply column sizer to `DetailsViewDataGrid` by setting the [GridViewDefinition.DataGrid.ColumnSizer](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ColumnSizer) like parent DataGrid. For more information, refer the Column Sizing section. ### Disable resizing of last column in parent DataGrid @@ -1403,7 +1403,7 @@ You can select cells also by using [SelectCell](https://help.syncfusion.com/cr/u ### Programmatically expand and bring DetailsViewDataGrid into view -SfDataGrid allows you to bring the specified [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) in to view by using [DetailsViewManager.BringInToView](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewManager.html#Syncfusion_UI_Xaml_Grid_DetailsViewManager_BringIntoView_System_Int32_) method. +Data Grid allows you to bring the specified [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) in to view by using [DetailsViewManager.BringInToView](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewManager.html#Syncfusion_UI_Xaml_Grid_DetailsViewManager_BringIntoView_System_Int32_) method. Before bringing the `DetailsViewDataGrid` into view, you have to expand the corresponding parent record if it is not already expanded. @@ -1499,7 +1499,7 @@ N> For customizing selection in second level nested grid, you can refer [here](# ## Appearance customization -The visual appearance of [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) can be customized like parent DataGrid through [Styling and Templates support](https://help.syncfusion.com/uwp/sfdatagrid/styles-and-templates) in SfDataGrid. +The visual appearance of [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) can be customized like parent DataGrid through [Styling and Templates support](https://help.syncfusion.com/uwp/sfdatagrid/styles-and-templates) in Data Grid. ### Changing Header appearance of DetailsViewDataGrid @@ -1547,7 +1547,7 @@ void dataGrid_AutoGeneratingRelations(object sender, Syncfusion.UI.Xaml.Grid.Aut {% endhighlight %} {% endtabs %} -![header appearance customization in master details view of UWP DataGrid](Master-Details-View_images/Master-Details-View_img7.png) +![header appearance customization in master details view](Master-Details-View_images/Master-Details-View_img7.png) ### Hiding header row of Master-Details View You can hide the header row of `DetailsViewDataGrid` by setting [HeaderRowHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_HeaderRowHeight) property. @@ -1577,7 +1577,7 @@ FirstLevelNestedGrid.HeaderRowHeight = 0; {% endhighlight %} {% endtabs %} -![hiding header row of master details view DataGrid in UWP](Master-Details-View_images/Master-Details-View_img8.png) +![hiding header row of master details view](Master-Details-View_images/Master-Details-View_img8.png) ### Customizing padding of the DetailsViewDataGrid @@ -1605,13 +1605,13 @@ this.dataGrid.DetailsViewPadding = new Thickness(15); {% endhighlight %} {% endtabs %} -![Padding customization of master details view in UWP DataGrid](Master-Details-View_images/Master-Details-View_img9.png) +![Padding customization of master details view](Master-Details-View_images/Master-Details-View_img9.png) N> For customizing appearance for second level nested grid, you can refer [here](#defining-properties). ### Customize ExpanderColumn width -You can customize the width of ExpanderColumn in SfDataGrid by using [ExpanderColumnWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ExpanderColumnWidth) property as like below. +You can customize the width of ExpanderColumn in Data Grid by using [ExpanderColumnWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ExpanderColumnWidth) property as like below. {% tabs %} {% highlight xaml %} @@ -1627,7 +1627,7 @@ this.dataGrid.ExpanderColumnWidth = 50; ## Expanding and collapsing the DetailsViewDataGrid programmatically -SfDataGrid allows you to expand or collapse the `DetailsViewDataGrid` programmatically in different ways. +Data Grid allows you to expand or collapse the `DetailsViewDataGrid` programmatically in different ways. ### Expand or collapse all the DetailsViewDataGrid @@ -1677,13 +1677,13 @@ By default, the expander will be visible for all the data rows in parent DataGri {% endhighlight %} {% endtabs %} -![Hiding expander icon for empty details view in UWP DataGrid](Master-Details-View_images/Master-Details-View_img10.png) +![Hiding expander icon for empty details view](Master-Details-View_images/Master-Details-View_img10.png) ## Hiding GridDetailsViewIndentCell [GridDetailsViewIndentCell](http://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridDetailsViewIndentCell.html) is used to indicate the space between the expander and first column of the [DetailsViewDataGrid](http://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html). You can hide the [GridDetailsViewIndentCell](http://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridDetailsViewIndentCell.html) by setting [SfDataGrid.ShowDetailsViewIndentCell](http://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridDetailsViewIndentCell.html) property to `False` for the respective parent grid. -![Indent cells of master details view in UWP DataGrid](Master-Details-View_images/Master-Details-View_img11.png) +![Indent cells of master details view](Master-Details-View_images/Master-Details-View_img11.png) {% tabs %} {% highlight xaml %} @@ -1707,7 +1707,7 @@ dataGrid.ShowDetailsViewIndentCell = false; {% endhighlight %} {% endtabs %} -![hiding indent cells of master details view in UWP DataGrid](Master-Details-View_images/Master-Details-View_img12.png) +![hiding indent cells of master details view](Master-Details-View_images/Master-Details-View_img12.png) ## Hiding the details view expander icon based on child items count @@ -1734,7 +1734,7 @@ private void DataGrid_QueryDetailsViewExpanderState(object sender, Syncfusion.UI {% endtabs %} The following screenshot illustrates hiding expander icon state based on child items count. -![expander icon is hidden state in UWP DataGrid](Master-Details-View_images/Master-Details-View_img13.png) +![expander icon is hidden state](Master-Details-View_images/Master-Details-View_img13.png) You can download the sample from the following link: [Sample](https://github.com/SyncfusionExamples/how-to-hide-the-detailsview-expander-icon-based-on-child-records-count-wpf-datagrid). ## Change DetailsViewDataGrid ItemsSource at runtime using LiveDataUpdateMode property @@ -1777,7 +1777,7 @@ this.dataGrid.UpdateDataRow(dataGrid.ResolveToRowIndex(data)); ### DetailsViewLoading -The [DetailsViewLoading](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event is raised, when the [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) is being loaded in to the view (such as scrolling, window size changed and expanding the record using an expander or programmatically). This event receives two arguments where sender as SfDataGrid and [DetailsViewLoadingAndUnloadingEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewLoadingAndUnloadingEventArgs.html) which contains the following member. +The [DetailsViewLoading](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event is raised, when the [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) is being loaded in to the view (such as scrolling, window size changed and expanding the record using an expander or programmatically). This event receives two arguments where sender as Data Grid and [DetailsViewLoadingAndUnloadingEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewLoadingAndUnloadingEventArgs.html) which contains the following member. `DetailsViewDataGrid` Gets the [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html) which is loaded into view. You can set the customized Renderers, SelectionController, ResizingController, GridColumnDragDropController, and GridColumnSizer to this. But it is not preferable to change the value of the public properties like AllowFiltering, AllowSorting, SelectionUnit, AllowDeleting, etc., here. {% tabs %} @@ -1796,7 +1796,7 @@ void dataGrid_DetailsViewLoading(object sender, DetailsViewLoadingAndUnloadingEv ### DetailsViewUnLoading The [DetailsViewUnLoading](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event is raised when the `DetailsViewDataGrid` is being unloaded from the view. -This event receives two arguments where sender as SfDataGrid and [DetailsViewLoadingAndUnloadingEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewLoadingAndUnloadingEventArgs.html) which contains the following member. +This event receives two arguments where sender as Data Grid and [DetailsViewLoadingAndUnloadingEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewLoadingAndUnloadingEventArgs.html) which contains the following member. `DetailsViewDataGrid` - Gets the `DetailsViewDataGrid` which was unloaded from the view (such as scrolling, window size changed, Sorting, Grouping, Filtering and collapsing the DetailsViewDataGrid using expander or programmatically). {% tabs %} @@ -1902,7 +1902,7 @@ N> To cancel expanding or collapsing operation in second level nested grid, you ## Master-Details View limitations -Following are the limitations of Master-Details View in SfDataGrid. +Following are the limitations of Master-Details View in Data Grid. 1. `DetailsViewDataGrid` does not have GroupDropArea. 2. `DetailsViewDataGrid` does not support `AutoGenerateColumnsMode.ResetAll`. Instead it works based on `Reset`. diff --git a/uwp/DataGrid/Merge-Cells.md b/uwp/DataGrid/Merge-Cells.md index 94ff2525..0918b2c1 100644 --- a/uwp/DataGrid/Merge-Cells.md +++ b/uwp/DataGrid/Merge-Cells.md @@ -9,11 +9,11 @@ documentation: ug # Merge Cells in UWP Data Grid -SfDataGrid allows you to merge the range of adjacent cells using [QueryCoveredRange](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. Merged cells can be exported and printed. +UWP Data Grid allows you to merge the range of adjacent cells using [QueryCoveredRange](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. Merged cells can be exported and printed. -`QueryCoveredRange` event occurs when each cell gets arranged and the custom range will be stored for visible rows and columns in [SfDataGrid.CoveredCells](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CoveredCells). This event is not fired for the cells that are not visible and also for the cells that are already in SfDataGrid.CoveredCells. When scrolling the merged range will be added for newly added rows & columns through this event and also removed for the rows &columns which are out of view. +`QueryCoveredRange` event occurs when each cell gets arranged and the custom range will be stored for visible rows and columns in [SfDataGrid.CoveredCells](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CoveredCells). This event is not fired for the cells that are not visible and also for the cells that are already in `SfDataGrid.CoveredCells`. When scrolling the merged range will be added for newly added rows & columns through this event and also removed for the rows &columns which are out of view. -[GridQueryCoveredRangeEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridQueryCoveredRangeEventArgs.html) of the `QueryCoveredRange` event provides information about the cell triggered this event. [GridQueryCoveredRangeEventArgs.OriginalSender](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridEventArgs.html#Syncfusion_UI_Xaml_Grid_GridEventArgs_OriginalSender) returns the DataGrid fired this event for DetailsView. By [GridQueryCoveredRangeEventArgs.Range](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridQueryCoveredRangeEventArgs.html#Syncfusion_UI_Xaml_Grid_GridQueryCoveredRangeEventArgs_Range) property, the adjacent cells can be merged. +[GridQueryCoveredRangeEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridQueryCoveredRangeEventArgs.html) of the `QueryCoveredRange` event provides information about the cell triggered this event. [GridQueryCoveredRangeEventArgs.OriginalSender](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridEventArgs.html#Syncfusion_UI_Xaml_Grid_GridEventArgs_OriginalSender) returns the Data Grid fired this event for DetailsView. By [GridQueryCoveredRangeEventArgs.Range](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridQueryCoveredRangeEventArgs.html#Syncfusion_UI_Xaml_Grid_GridQueryCoveredRangeEventArgs_Range) property, the adjacent cells can be merged. {% tabs %} {% highlight xaml %} @@ -427,7 +427,7 @@ pdfExportingOption.ExportMergedCells = true; ## Limitations -Below are the limitation when using Cell Merging in SfDataGrid. +Below are the limitation when using Cell Merging in Data Grid. 1. Row selection is not supported. 2. Heterogeneous rows can’t be merged. diff --git a/uwp/DataGrid/Paging.md b/uwp/DataGrid/Paging.md index 24a7c717..cf7faf65 100644 --- a/uwp/DataGrid/Paging.md +++ b/uwp/DataGrid/Paging.md @@ -9,11 +9,11 @@ documentation: ug # Paging in UWP Data Grid -SfDataGrid provides support to manipulate the data using SfDataPager control. You can refer [SfDataPager](http://help.syncfusion.com/uwp/datapager) control user guide for more information. +UWP Data Grid provides support to manipulate the data using SfDataPager control. You can refer [SfDataPager](http://help.syncfusion.com/uwp/datapager) control user guide for more information. ## Getting started -Follow the below steps to bind SfDataGrid with SfDataPager. +Follow the below steps to bind Data Grid with SfDataPager. 1. Create IEnumerable collection that you want to bind and set it to `SfDataPager.Source` property. 2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/uwp/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. @@ -124,8 +124,8 @@ public class OrderInfo ### Limitations -1. `AddNewRow` is not supported in SfDataGrid. -2. `FilterRow` is not supported in SfDataGrid. +1. `AddNewRow` is not supported in Data Grid. +2. `FilterRow` is not supported in Data Grid. ## Load data in on demand diff --git a/uwp/DataGrid/Performance-tips.md b/uwp/DataGrid/Performance-tips.md index 25735e4b..753a4ff9 100644 --- a/uwp/DataGrid/Performance-tips.md +++ b/uwp/DataGrid/Performance-tips.md @@ -9,7 +9,7 @@ documentation: ug # Performance Tips in UWP Data Grid -SfDataGrid provides various built-in options to optimize the performance when handling large amount of data or high frequency updates. +UWP Data Grid provides various built-in options to optimize the performance when handling large amount of data or high frequency updates. ## Improving loading performance @@ -19,7 +19,7 @@ You can load the large amount of data in less time using built-in [Data Virtuali ## Improving performance when doing batch updates -SfDataGrid allows you to add, remove and update more number of records efficiently when you are having sorting, grouping and more summaries in place. By default, SfDataGrid responds to the collection changes and updates the UI instantly. If you are doing bulk or more updates to grid then you can follow below steps for better performance, +Data Grid allows you to add, remove and update more number of records efficiently when you are having sorting, grouping and more summaries in place. By default, Data Grid responds to the collection changes and updates the UI instantly. If you are doing bulk or more updates to grid then you can follow below steps for better performance, 1. Invoke [SfDataGrid.View.BeginInit](https://help.syncfusion.com/cr/uwp/Syncfusion.Data.CollectionViewAdv.html#Syncfusion_Data_CollectionViewAdv_BeginInit_System_Boolean_) before update the data. 2. After that update underlying collection. @@ -41,7 +41,7 @@ this.dataGrid.View.EndInit(); ## Adding columns efficiently -SfDataGrid allows you to add more number of columns to [SfDataGrid.Columns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) collection efficiently. Adding or removing more no of columns to collection, updates the UI for each time which negatively impact the performance. +Data Grid allows you to add more number of columns to [SfDataGrid.Columns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Columns) collection efficiently. Adding or removing more no of columns to collection, updates the UI for each time which negatively impact the performance. You can improve the performance while adding, removing columns by suspending all the UI updates using [Suspend](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Columns.html#Syncfusion_UI_Xaml_Grid_Columns_Suspend) and resume the updates after adding columns using [Resume](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Columns.html#Syncfusion_UI_Xaml_Grid_Columns_Resume) methods. You have to refresh the UI using [RefreshColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Helpers.GridHelper.html#Syncfusion_UI_Xaml_Grid_Helpers_GridHelper_RefreshColumns_Syncfusion_UI_Xaml_Grid_SfDataGrid_) method. @@ -58,21 +58,21 @@ this.dataGrid.RefreshColumns(); ## Optimizing summary calculation performance -SfDataGrid optimizes the summary calculation when updating the underlying collection. It calculates the summaries optimistically by listening the data updates and using old calculated summary values without doing complete recalculation. +Data Grid optimizes the summary calculation when updating the underlying collection. It calculates the summaries optimistically by listening the data updates and using old calculated summary values without doing complete recalculation. -Below sections explains how SfDataGrid handles the updates efficiently for different data operations and what you have to do in application for the same. +Below sections explains how Data Grid handles the updates efficiently for different data operations and what you have to do in application for the same. ### Adding Record -SfDataGrid considers only the `added` item value and the current summary value instead of recalculating the summary based on all records. Based on these two values recalculates the summary efficiently. +Data Grid considers only the `added` item value and the current summary value instead of recalculating the summary based on all records. Based on these two values recalculates the summary efficiently. ### Removing a Record -SfDataGrid considers only the `removed` item value and the current summary value instead of recalculating the summary based on all records. Based on these two values recalculates the summary efficiently. +Data Grid considers only the `removed` item value and the current summary value instead of recalculating the summary based on all records. Based on these two values recalculates the summary efficiently. ### Property Change in a record -SfDataGrid considers only the changed item value and the current aggregated value instead of recalculating the summary based on all records. For this you have to implement [INotifyPropertyChanging](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanging?view=net-7.0&redirectedfrom=MSDN) and [INotifyPropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-7.0&redirectedfrom=MSDN "") interface to your Data Model. +Data Grid considers only the changed item value and the current aggregated value instead of recalculating the summary based on all records. For this you have to implement [INotifyPropertyChanging](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanging?view=net-7.0&redirectedfrom=MSDN) and [INotifyPropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-7.0&redirectedfrom=MSDN "") interface to your Data Model. Below code to enable summary calculation optimization by inheriting [INotifyPropertyChanging](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanging?view=net-7.0&redirectedfrom=MSDN) and [INotifyPropertyChanged](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?view=net-7.0&redirectedfrom=MSDN) interface to Data Model. @@ -129,7 +129,7 @@ this.datagrid.SummaryCalculationMode = CalculationMode.OnDemandCaptionSummary | ## Improving UI Filter loading time -SfDataGrid allows you to open filter popup in less time by setting [CanGenerateUniqueItems](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) property to false. By default `GridFilterControl` loads unique items in popup which takes more time to load. +Data Grid allows you to open filter popup in less time by setting [CanGenerateUniqueItems](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.AdvancedFilterControl.html#Syncfusion_UI_Xaml_Grid_AdvancedFilterControl_CanGenerateUniqueItems) property to false. By default `GridFilterControl` loads unique items in popup which takes more time to load. `CanGenerateUniqueItems` property loading `TextBox` to filter instead of `ComboBox` in advanced filter UI View. {% tabs %} diff --git a/uwp/DataGrid/Printing.md b/uwp/DataGrid/Printing.md index e6b63460..032b2c37 100644 --- a/uwp/DataGrid/Printing.md +++ b/uwp/DataGrid/Printing.md @@ -9,7 +9,7 @@ documentation: ug # Printing in UWP Data Grid -SfDataGrid provides support to print the data displayed in the DataGrid using [SfDataGrid.Print](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Print) method. +UWP Data Grid provides support to print the data displayed in the Data Grid using [SfDataGrid.Print](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Print) method. {% tabs %} {% highlight c# %} @@ -19,7 +19,7 @@ dataGrid.Print(); ## Print Settings -SfDataGrid provides various options to customize print preview settings using [SfDataGrid.PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_PrintSettings) property of type [PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html). +Data Grid provides various options to customize print preview settings using [SfDataGrid.PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_PrintSettings) property of type [PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html). {% tabs %} {% highlight c# %} @@ -33,11 +33,11 @@ dataGrid.Print(); Print method opens the System print dialog where user can select the printer and set the number of copies to be printed. -![Print preview window for UWP DataGrid before printing](Printing_images/Printing_img1.png) +![Print preview window before printing](Printing_images/Printing_img1.png) ### Scaling -SfDataGrid provides support to scale rows or columns or both while printing to fit on one page. Scaling options can be changed by setting [PrintSettings.PrintScaleOption](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintScaleOption) property. +Data Grid provides support to scale rows or columns or both while printing to fit on one page. Scaling options can be changed by setting [PrintSettings.PrintScaleOption](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintScaleOption) property. {% tabs %} {% highlight c# %} @@ -74,22 +74,22 @@ dataGrid.Print(); ### Print with StackedHeaders -SfDataGrid provides support to print the StackedHeaders by setting the [PrintSettings.CanPrintStackedHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_CanPrintStackedHeaders) as ‘true’. +Data Grid provides support to print the StackedHeaders by setting the [PrintSettings.CanPrintStackedHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_CanPrintStackedHeaders) as 'true'. {% tabs %} {% highlight c# %} this.sfDataGrid.PrintSettings.CanPrintStackedHeaders = true; {% endhighlight %} {% endtabs %} -![Shows stacked headers printing in UWP DataGrid](Printing_images/Printing_img13.png) +![Shows stacked headers printing](Printing_images/Printing_img13.png) ## Page Settings -SfDataGrid provides various options to customize page settings using [SfDataGrid.PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_PrintSettings) property of type [PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html). +Data Grid provides various options to customize page settings using [SfDataGrid.PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_PrintSettings) property of type [PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html). ### Orientation -SfDataGrid provides support to switch between Portrait (more rows but fewer columns) and Landscape (more columns but fewer rows) orientation while printing. Orientation can be changed by setting [PrintSettings.PrintPageOrientation](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageOrientation) Property. +Data Grid provides support to switch between Portrait (more rows but fewer columns) and Landscape (more columns but fewer rows) orientation while printing. Orientation can be changed by setting [PrintSettings.PrintPageOrientation](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageOrientation) Property. {% tabs %} {% highlight c# %} @@ -101,7 +101,7 @@ dataGrid.Print(); ### Page size -SfDataGrid provides support to change the page size. Page size can be changed by setting [PrintSettings.PrintPageWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageWidth) and [PrintSettings.PrintPageHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeight) properties. +Data Grid provides support to change the page size. Page size can be changed by setting [PrintSettings.PrintPageWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageWidth) and [PrintSettings.PrintPageHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeight) properties. {% tabs %} {% highlight c# %} @@ -114,7 +114,7 @@ dataGrid.Print(); ### Page margin -SfDataGrid provides support to change the page margins to adjust content in printed page. Page margin can be changed by setting [PrintSettings.PrintPageMargin](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageMargin) property. +Data Grid provides support to change the page margins to adjust content in printed page. Page margin can be changed by setting [PrintSettings.PrintPageMargin](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageMargin) property. {% tabs %} {% highlight c# %} @@ -126,7 +126,7 @@ dataGrid.Print(); ## Setting Header and Footer -SfDataGrid provides a way to display additional content at the top (Header) or bottom (Footer) of the page while printing. This can be achieved by setting [PrintPageHeaderHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeaderHeight), [PrintPageHeaderTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeaderTemplate), [PrintPageFooterHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageFooterHeight), [PrintPageFooterTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageFooterTemplate) properties in [PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html). +Data Grid provides a way to display additional content at the top (Header) or bottom (Footer) of the page while printing. This can be achieved by setting [PrintPageHeaderHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeaderHeight), [PrintPageHeaderTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeaderTemplate), [PrintPageFooterHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageFooterHeight), [PrintPageFooterTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageFooterTemplate) properties in [PrintSettings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html). Steps to add page header while printing, 1. Create DataTemplate in Application.Resources. @@ -157,7 +157,7 @@ dataGrid.Print(); 3.Now run the application and you can see page header in all the pages. In the same way, you can set [PrintSettings.PrintPageFooterTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageFooterTemplate) also. -![Customized HeaderTemplate and HeaderHeight in print preview window for UWP DataGrid](Printing_images/Printing_img2.png) +![Customized HeaderTemplate and HeaderHeight in print preview window](Printing_images/Printing_img2.png) N> [PrintManagerBase](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html) is the DataContext for [PrintPageControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintPageControl.html), where the header and footer templates are loaded. @@ -185,12 +185,12 @@ dataGrid.Print(); {% endhighlight %} {% endtabs %} -![Current date time in print preview window for UWP DataGrid](Printing_images/Printing_img3.png) +![Current date time in print preview window](Printing_images/Printing_img3.png) ## Printing using UIElement Rendering -When you want to print the SfDataGrid with same appearance settings as in the display (Background and Foreground) or with custom appearance by writing styles. -You can print SfDataGrid as it displayed in View by setting [PrintSettings.AllowPrintStyles](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_AllowPrintStyles) to true. +When you want to print the Data Grid with same appearance settings as in the display (Background and Foreground) or with custom appearance by writing styles. +You can print Data Grid as it displayed in View by setting [PrintSettings.AllowPrintStyles](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_AllowPrintStyles) to true. {% tabs %} {% highlight c# %} @@ -212,7 +212,7 @@ dataGrid.Print(); {% endhighlight %} {% endtabs %} -![Shows same style as in view for UWP DataGrid using AllowPrintStyles API while printing](Printing_images/Printing_img4.png) +![Shows same style as in view using AllowPrintStyles API while printing](Printing_images/Printing_img4.png) ### Applying custom style @@ -289,7 +289,7 @@ To provide custom appearance for Header cells while printing, [PrintHeaderCell]( {% endhighlight %} {% endtabs %} -To print SfDataGrid with custom styles, [PrintSettings.AllowPrintStyles](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_AllowPrintStyles) property to false. +To print Data Grid with custom styles, [PrintSettings.AllowPrintStyles](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_AllowPrintStyles) property to false. {% tabs %} {% highlight c# %} @@ -299,7 +299,7 @@ dataGrid.Print(); {% endhighlight %} {% endtabs %} -![UWP DataGrid displaying custom style for using AllowPrintStyles API while printing](Printing_images/Printing_img5.png) +![Displaying custom style for using AllowPrintStyles API while printing](Printing_images/Printing_img5.png) ## Printing Customization @@ -307,7 +307,7 @@ Printing operations can be customized by overriding [GridPrintManager](https://h ### Setting different Row Height -SfDataGrid allows you to set different Row height for specific rows while printing. You can achieve this by overriding the [GetRowHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetRowHeight_System_Object_System_Int32_Syncfusion_UI_Xaml_Grid_RowType_) method in [PrintManagerBase](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html) class. +Data Grid allows you to set different Row height for specific rows while printing. You can achieve this by overriding the [GetRowHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetRowHeight_System_Object_System_Int32_Syncfusion_UI_Xaml_Grid_RowType_) method in [PrintManagerBase](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html) class. {% tabs %} {% highlight c# %} @@ -340,7 +340,7 @@ dataGrid.PrintSettings.PrintManagerBase.Print(); {% endhighlight %} {% endtabs %} -![Customization of row height while printing in UWP DataGrid](Printing_images/Printing_img6.png) +![Customization of row height while printing](Printing_images/Printing_img6.png) ### Hiding rows while printing @@ -378,7 +378,7 @@ dataGrid.PrintSettings.PrintManagerBase.Print(); ### Setup columns to be printed -SfDataGrid allows you to the exclude the columns while printing the grid. You can change the column list by overriding the [GetColumnNames](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPrintManager.html#Syncfusion_UI_Xaml_Grid_GridPrintManager_GetColumnNames) method in [PrintManagerBase](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html) class. +Data Grid allows you to the exclude the columns while printing the grid. You can change the column list by overriding the [GetColumnNames](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPrintManager.html#Syncfusion_UI_Xaml_Grid_GridPrintManager_GetColumnNames) method in [PrintManagerBase](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html) class. {% tabs %} {% highlight c# %} @@ -409,11 +409,11 @@ dataGrid.PrintSettings.PrintManagerBase.Print(); {% endhighlight %} {% endtabs %} -![Shows removal column while printing in UWP DataGrid](Printing_images/Printing_img7.png) +![Shows removal column while printing](Printing_images/Printing_img7.png) ### Customize the header text while printing -SfDataGrid allows you to change column header text while printing the grid. You can change the Column header text by overriding the [GetColumnHeaderText](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPrintManager.html#Syncfusion_UI_Xaml_Grid_GridPrintManager_GetColumnHeaderText_System_String_) method in [GridPrintManager](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPrintManager.html). +Data Grid allows you to change column header text while printing the grid. You can change the Column header text by overriding the [GetColumnHeaderText](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPrintManager.html#Syncfusion_UI_Xaml_Grid_GridPrintManager_GetColumnHeaderText_System_String_) method in [GridPrintManager](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPrintManager.html). {% tabs %} {% highlight c# %} @@ -444,7 +444,7 @@ dataGrid.PrintSettings.PrintManagerBase.Print(); {% endhighlight %} {% endtabs %} -![customize the column header text while printing in UWP DataGrid](Printing_images/Printing_img8.png) +![customize the column header text while printing](Printing_images/Printing_img8.png) ### Styling Rows @@ -545,11 +545,11 @@ Unbound row cells -![Row styling with AllowPrintByDrawing disabled while printing in UWP DataGrid](Printing_images/Printing_img9.png) +![Row styling with AllowPrintByDrawing disabled while printing](Printing_images/Printing_img9.png) ### Setup alternate row style -SfDataGrid allows you to apply alternative row style by overriding [GetPrintGridCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPrintManager.html#Syncfusion_UI_Xaml_Grid_GridPrintManager_GetPrintGridCell_System_Object_System_String_) method in `GridPrintManager`. +Data Grid allows you to apply alternative row style by overriding [GetPrintGridCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridPrintManager.html#Syncfusion_UI_Xaml_Grid_GridPrintManager_GetPrintGridCell_System_Object_System_String_) method in `GridPrintManager`. {% tabs %} {% highlight c# %} @@ -581,7 +581,7 @@ dataGrid.PrintSettings.PrintManagerBase.Print(); {% endhighlight %} {% endtabs %} -![Alternate row styling with AllowPrintByDrawing enabled while printing in UWP DataGrid](Printing_images/Printing_img10.png) +![Alternate row styling with AllowPrintByDrawing enabled while printing](Printing_images/Printing_img10.png) ### Styling Columns @@ -616,7 +616,7 @@ dataGrid.PrintSettings.PrintManagerBase.Print(); {% endhighlight %} {% endtabs %} -![Column styling with AllowPrintByDrawing enabled while printing in UWP DataGrid](Printing_images/Printing_img11.png) +![Column styling with AllowPrintByDrawing enabled while printing](Printing_images/Printing_img11.png) N> [GetColumnWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetColumnWidth_System_String_), [GetColumnTextWrapping](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetColumnTextWrapping_System_String_), [GetColumnTextAlignment](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetColumnTextAlignment_System_String_) and [GetColumnPadding](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.PrintManagerBase.html#Syncfusion_UI_Xaml_Grid_PrintManagerBase_GetColumnPadding_System_String_) methods are also used for column customization while printing. @@ -668,7 +668,7 @@ dataGrid.PrintSettings.PrintManagerBase.Print(); {% endhighlight %} {% endtabs %} -![Print the selected items in UWP DataGrid](Printing_images/Printing_img12.png) +![Print the selected items](Printing_images/Printing_img12.png) ### Printing Specific pages @@ -781,11 +781,11 @@ dataGrid.PrintSettings.PrintManagerBase.Print(); {% endhighlight %} {% endtabs %} -![Print the Specific pages in UWP DataGrid](Printing_images/Printing_img14.png) +![Print the Specific pages](Printing_images/Printing_img14.png) N> View sample in [GitHub](https://github.com/SyncfusionExamples/How-to-print-specific-pages-in-uwp-datagrid). -N> Printing the specific pages in uwp datagrid support only for the uwp target build version as 17763 or above. For more information, refer to [PrintPageRange](https://docs.microsoft.com/en-us/uwp/api/windows.graphics.printing.printpagerange?view=winrt-19041). +N> Printing the specific pages in UWP Data Grid support only for the uwp target build version as 17763 or above. For more information, refer to [PrintPageRange](https://docs.microsoft.com/en-us/uwp/api/windows.graphics.printing.printpagerange?view=winrt-19041). ### Disable print preview @@ -808,6 +808,6 @@ private void DataGrid_PrintTaskRequested(object sender, DataGridPrintTaskRequest {% endhighlight %} {% endtabs %} -![Disable the print preview in UWP DataGrid](Printing_images/Printing_img15.png) +![Disable the print preview](Printing_images/Printing_img15.png) N> View sample in [GitHub](https://github.com/SyncfusionExamples/how-to-disable-print-preview-in-uwp-datagrid). diff --git a/uwp/DataGrid/Row-Height-Customization.md b/uwp/DataGrid/Row-Height-Customization.md index 2615db7c..91d6f92b 100644 --- a/uwp/DataGrid/Row-Height-Customization.md +++ b/uwp/DataGrid/Row-Height-Customization.md @@ -65,7 +65,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) {% endhighlight %} {% endtabs %} -![Changing RowHeight of particular Row image in uwp datagrid](Row-Height-Customization_images/Row-Height-Customization_img1.png) +![Changing RowHeight of particular Row image](Row-Height-Customization_images/Row-Height-Customization_img1.png) ## QueryRowHeight event @@ -74,7 +74,7 @@ You can change the row height in on-demand based on the row index or row data us `QueryRowHeight` event triggered for each row when it becomes visible. [QueryRowHeightEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.QueryRowHeightEventArgs.html) provides information to `QueryRowHeight` event with following members, -`RowIndex` – denotes index of the row in SfDataGrid. +`RowIndex` – denotes index of the row in Data Grid. `Height` – Gets or sets the height of the row. @@ -97,7 +97,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) {% endhighlight %} {% endtabs %} -![OnDemand Changing of RowHeight image in uwp datagrid](Row-Height-Customization_images/Row-Height-Customization_img2.png) +![OnDemand Changing of RowHeight image](Row-Height-Customization_images/Row-Height-Customization_img2.png) ### Limitations @@ -106,12 +106,12 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) ## Fit the Row Height based on its content -You can fit the row height based on its content in `QueryRowHeight` event handler using [GetAutoRowHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnSizer.html#Syncfusion_UI_Xaml_Grid_GridColumnSizer_GetAutoRowHeight_System_Int32_Syncfusion_UI_Xaml_Grid_GridRowSizingOptions_System_Double__System_Boolean_) method. This improves the readability of the content and it does not affect the loading performance of the SfDataGrid as the `QueryRowHeight` event triggered for rows in on-demand. +You can fit the row height based on its content in `QueryRowHeight` event handler using [GetAutoRowHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnSizer.html#Syncfusion_UI_Xaml_Grid_GridColumnSizer_GetAutoRowHeight_System_Int32_Syncfusion_UI_Xaml_Grid_GridRowSizingOptions_System_Double__System_Boolean_) method. This improves the readability of the content and it does not affect the loading performance of Data Grid as the `QueryRowHeight` event triggered for rows in on-demand. `GetAutoRowHeight` method returns `true` when the row height is calculated for record & header rows and returns `false` for other rows. Calculated height based on content set to the `out` parameter and you can assign the calculated height to the `Height` property of `QueryRowHeightEventArgs`. Below are the parameter to GetAutoRowHeight method, -1. `RowIndex` – denotes the index of row in SfDataGrid. +1. `RowIndex` – denotes the index of row in Data Grid. 2. `GridRowSizingOptions` – A class with properties to customize the row height calculation. @@ -152,7 +152,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) Here, row heights are customized based on the large text content. -![AutoFit RowHeight based on content Image in uwp datagrid](Row-Height-Customization_images/Row-Height-Customization_img3.png) +![AutoFit RowHeight based on content Image](Row-Height-Customization_images/Row-Height-Customization_img3.png) ### GridRowSizingOptions @@ -199,7 +199,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) Here `CustomerID` and `Country` columns are excluded from height calculation and the row height is calculated based on `CustomerName` column only. -![AutoFit RowHeight for specific columns Image in uwp datagrid](Row-Height-Customization_images/Row-Height-Customization_img4.png) +![AutoFit RowHeight for specific columns Image](Row-Height-Customization_images/Row-Height-Customization_img4.png) ## Reset Row Height at runtime @@ -320,7 +320,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) {% endhighlight %} {% endtabs %} -![AutoFit HeaderRowHeight Image in uwp datagrid](Row-Height-Customization_images/Row-Height-Customization_img5.png) +![AutoFit HeaderRowHeight Image](Row-Height-Customization_images/Row-Height-Customization_img5.png) ## Change StackedHeaderRow Height based on its content @@ -390,7 +390,7 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) {% endhighlight %} {% endtabs %} -![AutoFit StackedHeaderRow Image in uwp datagrid](Row-Height-Customization_images/Row-Height-Customization_img6.png) +![AutoFit StackedHeaderRow Image](Row-Height-Customization_images/Row-Height-Customization_img6.png) ## Change TableSummaryRow Height @@ -414,5 +414,5 @@ void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) {% endhighlight %} {% endtabs %} -![Customized TableSummaryRow height Image in uwp datagrid](Row-Height-Customization_images/Row-Height-Customization_img7.png) +![Customized TableSummaryRow height Image](Row-Height-Customization_images/Row-Height-Customization_img7.png) diff --git a/uwp/DataGrid/Rows.md b/uwp/DataGrid/Rows.md index 762ecd00..76693869 100644 --- a/uwp/DataGrid/Rows.md +++ b/uwp/DataGrid/Rows.md @@ -11,7 +11,7 @@ documentation: ug # Rows in UWP Data Grid -This section explains about various row types in SfDataGrid. +This section explains about various row types in Data Grid. [StackedHeaderRow](http://help.syncfusion.com/uwp/datagrid/columns#stacked-headers) @@ -38,7 +38,7 @@ dataGrid.ShowRowHeader = true; {% endtabs %} -![Row Header in UWP DataGrid](Rows_images/Rows_img1.png) +![Row Header](Rows_images/Rows_img1.png) You can change the width of row header by setting `SfDataGrid.RowHeaderWidth` property. @@ -56,7 +56,7 @@ Description -Current cell in the row in UWP DataGridUWP DataGrid Current cell +Current cell in the row in UWP DataGridCurrent cell Denotes the row which has current cell or has selected item. @@ -64,7 +64,7 @@ Denotes the row which has current cell or has selected item. -Edited row in UWP DataGridUWP DataGrid Edited row +Edited row in UWP DataGridEdited row Denotes row is being edited. @@ -72,7 +72,7 @@ Denotes row is being edited. -Adding new row in UWP DataGridUWP DataGrid AddNewRow +Adding new row in UWP DataGridAddNewRow Denotes row is AddNewRow. @@ -80,7 +80,7 @@ Denotes row is AddNewRow. -Rows with errors in UWP DataGridUWP DataGrid Rows with errors +Rows with errors in UWP DataGridRows with errors Denotes the row has errors. @@ -88,7 +88,7 @@ Denotes the row has errors. -Current rows with errors in UWP DataGridUWP DataGrid Current rows +Current rows with errors in UWP DataGridCurrent rows with errors Denotes that the current row which has errors. @@ -104,9 +104,9 @@ See also. ## Header Row -Header row is present in top of the SfDataGrid which has column headers in it. Column header describes the caption to identify the column content. +Header row is present in top of Data Grid which has column headers in it. Column header describes the caption to identify the column content. -![Show the column header in Header row in UWP DataGrid](Rows_images/Rows_img7.png) +![Show the column header in Header row](Rows_images/Rows_img7.png) You can change the header row height by setting [SfDataGrid.HeaderRowHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_HeaderRowHeight) property. @@ -139,11 +139,11 @@ You can also hide the header row of DetailsViewDataGrid by setting `HeaderRowHei {% endtabs %} -![Hiding the row header in details view datagrid](Rows_images/Rows_img8.png) +![Hiding the row header in Details View Data Grid](Rows_images/Rows_img8.png) ## Freeze panes -SfDataGrid provides support to freeze the rows and columns at top and bottom similar to excel. You can freeze the rows and columns by setting following properties, +Data Grid provides support to freeze the rows and columns at top and bottom similar to excel. You can freeze the rows and columns by setting following properties, @@ -159,7 +159,7 @@ Description {{'[FrozenRowsCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FrozenRowsCount)'| markdownify }} @@ -167,7 +167,7 @@ Set the frozen rows count at top of the SfDataGrid. {{'[FooterRowsCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FooterRowsCount)'| markdownify }} @@ -175,7 +175,7 @@ Set the footer rows count at bottom of the SfDataGrid. {{'[FrozenColumnCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount)'| markdownify }} @@ -183,7 +183,7 @@ Set the frozen columns count in left side of the SfDataGrid. {{'[FooterColumnCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount)'| markdownify }}
-Set the frozen rows count at top of the SfDataGrid. +Set the frozen rows count at top of the Data Grid.
-Set the footer rows count at bottom of the SfDataGrid. +Set the footer rows count at bottom of the Data Grid.
-Set the frozen columns count in left side of the SfDataGrid. +Set the frozen columns count in left side of the Data Grid.
-Set the frozen columns in right side of the SfDataGrid. +Set the frozen columns in right side of the Data Grid.
@@ -207,7 +207,7 @@ dataGrid.FrozenRowsCount = 3; {% endtabs %} -![Show the Fotter column, Footer rows, Frozen column , Frozen rows in SfDataGrid](Rows_images/Rows_img9.png) +![Show the Fotter column, Footer rows, Frozen column , Frozen rows](Rows_images/Rows_img9.png) ### Differentiate frozen rows from normal rows @@ -351,7 +351,7 @@ private void DataGrid_QueryColumnDragging(object sender, QueryColumnDraggingEven 2. When `AllowFrozenGroupHeaders` is `true`, frozen rows will not be considered. -3. SfDataGrid has support to freeze the number of rows from top or bottom. There is no support to freeze a specific row. +3. Data Grid has support to freeze the number of rows from top or bottom. There is no support to freeze a specific row. N> diff --git a/uwp/DataGrid/Selection.md b/uwp/DataGrid/Selection.md index 24c9d728..674d5fe6 100644 --- a/uwp/DataGrid/Selection.md +++ b/uwp/DataGrid/Selection.md @@ -9,7 +9,7 @@ documentation: ug # Selection in UWP Data Grid -SfDataGrid 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/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionUnit) as [Row](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) or `Any`. In [SelectionUnit.Any](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) option you can select the row by clicking on row header. +UWP Data Grid 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/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectionUnit) as [Row](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) or `Any`. In [SelectionUnit.Any](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionUnit.html) option you can select the row by clicking on row header. ## Current Cell Navigation @@ -17,7 +17,7 @@ Keyboard navigation through the cells and rows is determined based on the [Navig ### Selection Modes -The `SelectionUnit` and `SelectionMode` properties together define the behavior of selection in SfDataGird. +The `SelectionUnit` and `SelectionMode` properties together define the behavior of selection in Data Grid. @@ -65,7 +65,7 @@ Allows selection of more than one row or cell. Selection is not cleared when sel Extended
-Allows selecting multiple rows or cells. You can select multiple rows or cells in the SfDataGrid by dragging the mouse or by using the key modifiers Ctrl and Shift. +Allows selecting multiple rows or cells. You can select multiple rows or cells in the Data Grid by dragging the mouse or by using the key modifiers Ctrl and Shift.
@@ -82,17 +82,17 @@ Allows selecting multiple rows or cells. You can select multiple rows or cells i {% endhighlight %} {% endtabs %} -![Single mode row selection in UWP DataGrid](Selection_images/Selection_img1.png) +![Single mode row selection](Selection_images/Selection_img1.png) ### Disable selection for rows and columns You can disable selection and navigation on particular column by setting [GridColumn.AllowFocus](https://help.syncfusion.com/cr/uwp/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 [CurrentCellActivating](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event. -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. +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 Data Grid. ## Multiple Row or Cell Selection -The SfDataGrid allows you to select multiple rows or cells by setting [SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property as [Extended](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html) or [Multiple](https://help.syncfusion.com/cr/uwp/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. +Data Grid allows you to select multiple rows or cells by setting [SelectionMode](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionMode) property as [Extended](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html) or [Multiple](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionMode.html), where you can select multiple rows or cells by dragging the mouse on Data Grid and also using the key modifiers. While using `Extended`, you can select multiple rows or cells by pressing the key modifiers Ctrl and Shift. @@ -108,7 +108,7 @@ While using `Extended`, you can select multiple rows or cells by pressing the ke {% endhighlight %} {% endtabs %} -![Extended mode cell selection in UWP DataGrid](Selection_images/Selection_img2.png) +![Extended mode cell selection](Selection_images/Selection_img2.png) N> When the `SelectionMode` as `Multiple`, 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. @@ -124,15 +124,15 @@ N> When the `SelectionMode` as `Multiple`, you can select or deselect multiple r {% endhighlight %} {% endtabs %} -![Multiple mode cell selection in UWP DataGrid](Selection_images/Selection_img3.png) +![Multiple mode cell selection](Selection_images/Selection_img3.png) ## CheckBox column selection -`SfDataGrid` allows you to select or deselect rows by interacting with check box in a column. All the rows in a datagrid can be selected by interacting with an intuitive check box in column header. Refer to [GridCheckBoxSelectorColumn](https://help.syncfusion.com/uwp/sfdatagrid/column-types#gridcheckboxselectorcolumn) for more information. +Data Grid allows you to select or deselect rows by interacting with check box in a column. All the rows in a Data Grid can be selected by interacting with an intuitive check box in column header. Refer to [GridCheckBoxSelectorColumn](https://help.syncfusion.com/uwp/sfdatagrid/column-types#gridcheckboxselectorcolumn) for more information. ## Get Selected Rows and Cells -The [SelectedItem](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) property returns the data object of the selected row and the [SelectedIndex](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedIndex) property returns the index of the `SelectedItem` in SfDataGrid. `SelectedItem` denotes the first selected row in multiple selection. +The [SelectedItem](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedItem) property returns the data object of the selected row and the [SelectedIndex](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectedIndex) property returns the index of the `SelectedItem` in Data Grid. `SelectedItem` denotes the first selected row in multiple selection. The [CurrentItem](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentItem) returns the data object that currently has the focus and the [CurrentColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentColumn) denotes the [GridColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumn.html) that currently has the focus. The [CurrentCellInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CurrentCellInfo) returns an instance [GridCellInfo](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCellInfo.html) which contains the information about the cell that currently has the focus. @@ -156,7 +156,7 @@ List selectedCells = this.dataGrid.GetSelectedCells(); ### CurrentItem vs SelectedItem -Both `SelectedItem` and `CurrentItem` returns the same data object when there is single cell or row is selected in SfDataGrid. 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` and `CurrentItem` returns the same data object when there is single cell or row is selected in Data Grid. 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 @@ -199,7 +199,7 @@ foreach(var order in viewModel.Orders) {% endhighlight %} {% endtabs %} -![Programmatic selection of records using the SelectedItems property in UWP DataGrid](Selection_images/Selection_img4.png) +![Programmatic selection of records using the SelectedItems property](Selection_images/Selection_img4.png) ### Process selection using methods @@ -214,7 +214,7 @@ this.dataGrid.SelectRows(3, 7); {% endhighlight %} {% endtabs %} -![Programmatic selection of records using the SelectRows method in UWP DataGrid](Selection_images/Selection_img5.png) +![Programmatic selection of records using the SelectRows method](Selection_images/Selection_img5.png) You can select a specific cell by using the [SelectCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectCell_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Boolean_) method in cell selection. @@ -229,7 +229,7 @@ this.dataGrid.SelectCell(record, column); {% endhighlight %} {% endtabs %} -![Programmatic selection of cell using the SelectCell method in UWP DataGrid](Selection_images/Selection_img6.png) +![Programmatic selection of cell using the SelectCell method](Selection_images/Selection_img6.png) You can select a range of cells through [SelectCells](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectCells_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Object_Syncfusion_UI_Xaml_Grid_GridColumn_System_Boolean_) method in cell selection. @@ -285,7 +285,7 @@ public class GridSelectionControllerExt : GridCellSelectionController {% endhighlight %} {% endtabs %} -![Programmatic selection of cells using the SelectCells method in UWP DataGrid](Selection_images/Selection_img7.png) +![Programmatic selection of cells using the SelectCells method](Selection_images/Selection_img7.png) You can select all the rows or cells using [SelectAll](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectAll_System_Boolean_) method. @@ -359,19 +359,19 @@ this.dataGrid.UnSelectCell(removeRecord, removeColumn); {% endhighlight %} {% endtabs %} -![Programmatic removal of selection for a cell using the UnSelectCell method in UWP DataGrid](Selection_images/Selection_img8.png) +![Programmatic removal of selection for a cell using the UnSelectCell method](Selection_images/Selection_img8.png) ## Selection in Master-Details View Master-Details View provides support to select one or more rows or cells in [DetailsViewDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DetailsViewDataGrid.html). You can’t able to maintain the selection in both ParentDataGrid and `DetailsViewDataGrid`. Selection will be maintained either in ParentDataGrid or in `DetailsViewDataGrid`. -![Selection in Master-Details View in UWP DataGrid](Selection_images/Selection_img9.png) +![Selection in Master-Details View](Selection_images/Selection_img9.png) ### Getting SelectedDetailsViewDataGrid -You can get the currently selected `DetailsViewDataGrid` by using the [SelectedDetailsViewGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectedDetailsViewGrid) property of parent DataGrid. +You can get the currently selected `DetailsViewDataGrid` by using the [SelectedDetailsViewGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SelectedDetailsViewGrid) property of parent Data Grid. {% tabs %} {% highlight c# %} @@ -560,7 +560,7 @@ var parentDataGrid = this.dataGrid.SelectedDetailsViewGrid.GetParentDataGrid(); {% endhighlight %} {% endtabs %} -You can get the top level DataGrid for the `DetailsViewDataGrid` through the [GetTopLevelParentDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Helpers.SelectionHelper.html#Syncfusion_UI_Xaml_Grid_Helpers_SelectionHelper_GetTopLevelParentDataGrid_Syncfusion_UI_Xaml_Grid_SfDataGrid_) helper method. +You can get the top level Data Grid for the `DetailsViewDataGrid` through the [GetTopLevelParentDataGrid](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.Helpers.SelectionHelper.html#Syncfusion_UI_Xaml_Grid_Helpers_SelectionHelper_GetTopLevelParentDataGrid_Syncfusion_UI_Xaml_Grid_SfDataGrid_) helper method. {% tabs %} {% highlight c# %} @@ -646,7 +646,7 @@ if (detailsViewDataGrid == null) {% endhighlight %} {% endtabs %} -![Programmatic expansion and scrolling of Master-Details View in UWP DataGrid](Selection_images/Selection_img10.png) +![Programmatic expansion and scrolling of Master-Details View](Selection_images/Selection_img10.png) You can get the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/SELECT~1-1466905114.ZIP). @@ -750,7 +750,7 @@ public class GridSelectionControllerExt : GridSelectionController ### Automatic scrolling on Drag Selection -SfDataGrid will 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/uwp/Syncfusion.UI.Xaml.Grid.AutoScroller.html#Syncfusion_UI_Xaml_Grid_AutoScroller_AutoScrolling) property. +Data Grid will 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/uwp/Syncfusion.UI.Xaml.Grid.AutoScroller.html#Syncfusion_UI_Xaml_Grid_AutoScroller_AutoScrolling) property. {% tabs %} {% highlight c# %} @@ -855,7 +855,7 @@ Moves the current cell to the last cell of the current row. PageDown -The SfDataGrid will be scrolled to next set of rows that are not displayed in view, including the row that are partially displayed and the current cell is set to last row. +The Data Grid will be scrolled to next set of rows that are not displayed in view, including the row that are partially displayed and the current cell is set to last row. @@ -863,7 +863,7 @@ The SfDataGrid will be scrolled to next set of rows that are not displayed in vi PageUp -The SfDataGrid will be scrolled to previous set of rows that are not displayed in view, including the row that are partially displayed and the current cell is set to the first row. +The Data Grid will be scrolled to previous set of rows that are not displayed in view, including the row that are partially displayed and the current cell is set to the first row. @@ -1197,7 +1197,7 @@ private void Datagrid_SelectionChanging(object sender, GridSelectionChangingEven ### SelectionChanged Event -The [SelectionChanged](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event will occurs once the selection process has been completed for particular row or cell in SfDataGrid. [GridSelectionChangedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionChangedEventArgs.html) has following members which provides information for `SelectionChanged` event. +The [SelectionChanged](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event will occurs once the selection process has been completed for particular row or cell in Data Grid. [GridSelectionChangedEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionChangedEventArgs.html) has following members which provides information for `SelectionChanged` event. [AddedItems](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionChangedEventArgs.html#Syncfusion_UI_Xaml_Grid_GridSelectionChangedEventArgs_AddedItems) – Collection of `GridRowInfo` or `GridCellInfo` where the selection has been processed. @@ -1244,7 +1244,7 @@ You can change the selection background and foreground using [RowSelectionBrush] {% endhighlight %} {% endtabs %} -![Appearance customization of rows in UWP DataGrid](Selection_images/Selection_img11.png) +![Appearance customization of rows](Selection_images/Selection_img11.png) ### Changing Current Cell Border Style @@ -1262,7 +1262,7 @@ You can change the current cell border thickness and border color using [Current {% endhighlight %} {% endtabs %} -![Appearance customization of current cell in UWP DataGrid](Selection_images/Selection_img12.png) +![Appearance customization of current cell](Selection_images/Selection_img12.png) ### Customizing Row Selection Border @@ -1328,7 +1328,7 @@ Filter Row - `FilterRowControl` {% endhighlight %} {% endtabs %} -![Customization of row selection border in UWP DataGrid](Selection_images/Selection_img13.png) +![Customization of row selection border](Selection_images/Selection_img13.png) ### Customizing Cell Selection @@ -1397,7 +1397,7 @@ Filter Row - `GridFilterRowCell` {% endhighlight %} {% endtabs %} -![Custom cell selection for UWP SfDataGrid](Selection_images/Selection_img14.png) +![Custom cell selection](Selection_images/Selection_img14.png) ## Binding Selection Properties @@ -1419,7 +1419,7 @@ You can bind the selection properties like `SelectedItem`, `SelectedIndex` and ` ## Customizing Selection Behaviors -The SfDataGrid process the selection operations in selection controller. Below are the built-in selection controllers, +The Data Grid process the selection operations in selection controller. Below are the built-in selection controllers, [GridSelectionController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSelectionController.html) – Process selection operations when selection unit as row. @@ -1561,7 +1561,7 @@ public class GridSelectionControllerExt:GridSelectionController ### Selecting the column when clicking header -You can select entire column on clicking column header by handling [MouseLeftButtonUp](https://docs.microsoft.com/en-us/dotnet/api/system.windows.uielement.mouseleftbuttonup?redirectedfrom=MSDN&view=windowsdesktop-6.0) event of SfDataGrid. You have to set `SelectionUnit` as `Cell` or `Any` and `SelectionMode` as `Extended` or `Multiple` to achieve this behavior. +You can select entire column on clicking column header by handling [MouseLeftButtonUp](https://docs.microsoft.com/en-us/dotnet/api/system.windows.uielement.mouseleftbuttonup?redirectedfrom=MSDN&view=windowsdesktop-6.0) event of Data Grid. You have to set `SelectionUnit` as `Cell` or `Any` and `SelectionMode` as `Extended` or `Multiple` to achieve this behavior. By default the sorting operation will be performed while clicking on column header where you can disable this action by setting `AllowSorting` as false or [SortClickAction](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SortClickAction) as `DoubleClick`. @@ -1615,7 +1615,7 @@ private void dataGrid_PointerPressed(object sender, PointerRoutedEventArgs e) You can get the sample from [here](https://www.syncfusion.com/downloads/support/directtrac/general/COLUMN~1-134284707.ZIP). -![Column selection when clicking column header in UWP DataGrid](Selection_images/Selection_img15.png) +![Column selection when clicking column header](Selection_images/Selection_img15.png) ### Avoid CaptionSummaryRow selection on Grouping diff --git a/uwp/DataGrid/Serialization-and-Deserialization.md b/uwp/DataGrid/Serialization-and-Deserialization.md index e8e272e7..e4af0aa5 100644 --- a/uwp/DataGrid/Serialization-and-Deserialization.md +++ b/uwp/DataGrid/Serialization-and-Deserialization.md @@ -10,11 +10,11 @@ documentation: ug # Serialization and Deserialization in UWP Data Grid -SfDataGrid allows you to serialize and deserialize the SfDataGrid settings using [DataContractSerializer](https://msdn.microsoft.com/en-in/library/system.runtime.serialization.datacontractserializer.aspx). +UWP Data Grid allows you to serialize and deserialize the Data Grid settings using [DataContractSerializer](https://msdn.microsoft.com/en-in/library/system.runtime.serialization.datacontractserializer.aspx). ## Serialization -You can serialize the SfDataGrid by using [SfDataGrid.Serialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Serialize_System_IO_Stream_) method which exports the current DataGrid control properties to an XML file. +You can serialize Data Grid by using [SfDataGrid.Serialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Serialize_System_IO_Stream_) method which exports the current Data Grid control properties to an XML file. {% tabs %} {% highlight c# %} @@ -26,7 +26,7 @@ this.dataGrid.Serialize(storageFile); ### Serialize as Stream -You can store the SfDataGrid settings as [Stream](https://msdn.microsoft.com/en-in/library/windows/apps/system.io.aspx) using [Serialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Serialize_System_IO_Stream_) method by passing the stream. +You can store the Data Grid settings as [Stream](https://msdn.microsoft.com/en-in/library/windows/apps/system.io.aspx) using [Serialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Serialize_System_IO_Stream_) method by passing the stream. {% tabs %} {% highlight c# %} @@ -42,11 +42,11 @@ this.dataGrid.Serialize(stream); ## Serialization options -SfDataGrid serialization operation can be customized by passing [SerializationOptions](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html) instance as an argument to [Serialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Serialize_System_IO_Stream_Syncfusion_UI_Xaml_Grid_SerializationOptions_) method. +Data Grid serialization operation can be customized by passing [SerializationOptions](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html) instance as an argument to [Serialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Serialize_System_IO_Stream_Syncfusion_UI_Xaml_Grid_SerializationOptions_) method. ### Serialize sorting -By default, SfDataGrid allows you to serialize the sorting operation. You can disable the sorting serialization by setting the [SerializationOptions.SerializeSorting](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeSorting) to `false`. +By default, Data Grid allows you to serialize the sorting operation. You can disable the sorting serialization by setting the [SerializationOptions.SerializeSorting](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeSorting) to `false`. {% tabs %} {% highlight c# %} @@ -63,7 +63,7 @@ this.dataGrid.Serialize(storageFile, options); ### Serialize grouping -By default, SfDataGrid allows you to serialize the grouping operation. You can disable the grouping serialization by setting the [SerializationOptions.SerializeGrouping](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeGrouping) to `false`. +By default, Data Grid allows you to serialize the grouping operation. You can disable the grouping serialization by setting the [SerializationOptions.SerializeGrouping](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeGrouping) to `false`. {% tabs %} {% highlight c# %} @@ -78,7 +78,7 @@ this.dataGrid.Serialize(storageFile, options); ### Serialize filtering -By default, SfDataGrid allows you to serialize the filtering operation. You can disable the filtering serialization by setting the [SerializationOptions.SerializeFiltering](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeFiltering) to `false`. +By default, Data Grid allows you to serialize the filtering operation. You can disable the filtering serialization by setting the [SerializationOptions.SerializeFiltering](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeFiltering) to `false`. {% tabs %} {% highlight c# %} @@ -93,7 +93,7 @@ this.dataGrid.Serialize(storageFile, options); ### Serialize columns -By default, SfDataGrid allows you to serialize the columns manipulation operation. You can disable the columns serialization by setting the [SerializationOptions.SerializeColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeColumns) to `false`. +By default, Data Grid allows you to serialize the columns manipulation operation. You can disable the columns serialization by setting the [SerializationOptions.SerializeColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeColumns) to `false`. {% tabs %} {% highlight c# %} @@ -107,7 +107,7 @@ this.dataGrid.Serialize(storageFile, options); ### Serialize summaries -By default, SfDataGrid allows you to serialize the caption summary, group summary and table summary settings in SfDataGrid. You can disable the summaries serialization by setting [SerializationOptions.SerializeCaptionSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeCaptionSummary), [SerializationOptions.SerializeGroupSummaries](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeGroupSummaries), [SerializationOptions.SerializeTableSummaries](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeTableSummaries) properties to `false`. +By default, Data Grid allows you to serialize the caption summary, group summary and table summary settings in Data Grid. You can disable the summaries serialization by setting [SerializationOptions.SerializeCaptionSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeCaptionSummary), [SerializationOptions.SerializeGroupSummaries](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeGroupSummaries), [SerializationOptions.SerializeTableSummaries](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeTableSummaries) properties to `false`. {% tabs %} {% highlight c# %} @@ -123,7 +123,7 @@ this.dataGrid.Serialize(storageFile, options); ### Serialize stacked headers -By default, SfDataGrid allows you to serialize the stack headers operation. You can disable the stack headers serialization by setting the [SerializationOptions.SerializeStackedHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeStackedHeaders) to `false`. +By default, Data Grid allows you to serialize the stack headers operation. You can disable the stack headers serialization by setting the [SerializationOptions.SerializeStackedHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeStackedHeaders) to `false`. {% tabs %} {% highlight c# %} @@ -137,7 +137,7 @@ this.dataGrid.Serialize(storageFile, options); ### Serialize Details View -By default, SfDataGrid allows you to serialize the DetailsViewDefinition. You can disable the DetailsViewDefinition serialization by setting the [SerializationOptions.SerializeDetailsViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeDetailsViewDefinition) to `false`. +By default, Data Grid allows you to serialize the DetailsViewDefinition. You can disable the DetailsViewDefinition serialization by setting the [SerializationOptions.SerializeDetailsViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeDetailsViewDefinition) to `false`. {% tabs %} {% highlight c# %} @@ -151,7 +151,7 @@ this.dataGrid.Serialize(storageFile, options); ### Serialize unbound rows -By default, SfDataGrid allows you to serialize the unbound rows settings. You can disable the unbound rows serialization by setting the [SerializationOptions.SerializeUnBoundRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeUnBoundRows) to `false`. +By default, Data Grid allows you to serialize the unbound rows settings. You can disable the unbound rows serialization by setting the [SerializationOptions.SerializeUnBoundRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationOptions.html#Syncfusion_UI_Xaml_Grid_SerializationOptions_SerializeUnBoundRows) to `false`. {% tabs %} {% highlight c# %} @@ -166,7 +166,7 @@ this.dataGrid.Serialize(storageFile, options); ## Deserialization -You can deserialize the SfDataGrid setting by using [SfDataGrid.Deserialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Deserialize_System_IO_Stream_) method which reconstructs the SfDataGrid based on the setting in the stored XML file. +You can deserialize the Data Grid setting by using [SfDataGrid.Deserialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Deserialize_System_IO_Stream_) method which reconstructs the Data Grid based on the setting in the stored XML file. {% tabs %} {% highlight c# %} @@ -177,7 +177,7 @@ this.dataGrid.Deserialize(storageFile); {% endtabs %} ### Deserialize from Stream -You can deserialize the SfDataGrid settings from [Stream](https://msdn.microsoft.com/en-in/library/windows/apps/system.io.aspx) using [Deserialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Deserialize_System_IO_Stream_) method. +You can deserialize the Data Grid settings from [Stream](https://msdn.microsoft.com/en-in/library/windows/apps/system.io.aspx) using [Deserialize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_Deserialize_System_IO_Stream_) method. {% tabs %} {% highlight c# %} @@ -197,7 +197,7 @@ Deserialization operation can be customized by passing [DeserializationOptions]( ### Deserialize sorting -By default, SfDataGrid allows you to deserialize the sorting operation. You can disable the sorting deserialization by setting the [DeserializationOptions.DeserializeSorting](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeSorting) to `false`. +By default, Data Grid allows you to deserialize the sorting operation. You can disable the sorting deserialization by setting the [DeserializationOptions.DeserializeSorting](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeSorting) to `false`. {% tabs %} {% highlight c# %} @@ -211,7 +211,7 @@ this.dataGrid.Deserialize(storageFile, options); ### Deserialize grouping -By default, SfDataGrid allows you to deserialize the grouping operation. You can disable the grouping deserialization by setting the [DeserializationOptions.DeserializeGrouping](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeGrouping) to `false`. +By default, Data Grid allows you to deserialize the grouping operation. You can disable the grouping deserialization by setting the [DeserializationOptions.DeserializeGrouping](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeGrouping) to `false`. {% tabs %} {% highlight c# %} @@ -225,7 +225,7 @@ this.dataGrid.Deserialize(storageFile, options); ### Deserialize filtering -By default, SfDataGrid allows you to deserialize the filtering. you can disable the filtering deserialization by setting [DeserializationOptions.DeserializeFiltering](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeFiltering) to `false`. +By default, Data Grid allows you to deserialize the filtering. you can disable the filtering deserialization by setting [DeserializationOptions.DeserializeFiltering](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeFiltering) to `false`. {% tabs %} {% highlight c# %} @@ -239,7 +239,7 @@ this.dataGrid.Deserialize(storageFile, options); ### Deserialize columns -By default, SfDataGrid allows you to deserialize the columns manipulation operations. You can disable the columns deserialization by setting the [DeserializationOptions.DeserializeColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeColumns) to `false`. +By default, Data Grid allows you to deserialize the columns manipulation operations. You can disable the columns deserialization by setting the [DeserializationOptions.DeserializeColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeColumns) to `false`. {% tabs %} {% highlight c# %} @@ -253,7 +253,7 @@ this.dataGrid.Deserialize(storageFile, options); ### Deserialize summaries -By default, SfDataGrid allows you to deserialize the group summary, caption summary and table summary settings. You can disable the summaries deserialization by setting [DeserializationOptions.DeserializeCaptionSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeCaptionSummary), [DeserializationOptions.DeserializeGroupSummaries](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeGroupSummaries), [DeserializationOptions.DeserializeTableSummaries](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeTableSummaries) properties to `false`. +By default, Data Grid allows you to deserialize the group summary, caption summary and table summary settings. You can disable the summaries deserialization by setting [DeserializationOptions.DeserializeCaptionSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeCaptionSummary), [DeserializationOptions.DeserializeGroupSummaries](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeGroupSummaries), [DeserializationOptions.DeserializeTableSummaries](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeTableSummaries) properties to `false`. {% tabs %} {% highlight c# %} @@ -269,7 +269,7 @@ this.dataGrid.Deserialize(storageFile, options); ### Deserialize stacked headers -By default, SfDataGrid allows you to deserialize the stack headers. You can disable the stacked headers deserialization by setting the [DeserializationOptions.DeserializeStackedHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeStackedHeaders) to `false`. +By default, Data Grid allows you to deserialize the stack headers. You can disable the stacked headers deserialization by setting the [DeserializationOptions.DeserializeStackedHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeStackedHeaders) to `false`. {% tabs %} {% highlight c# %} @@ -283,7 +283,7 @@ this.dataGrid.Deserialize(storageFile, options); ### Deserialize Details View -By default, SfDataGrid allows you to deserialize the DetailsViewDefinition. You can disable the DetailsViewDefinition deserialization by setting the [DeserializationOptions.DeserializeDetailsViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeDetailsViewDefinition) to `false`. +By default, Data Grid allows you to deserialize the DetailsViewDefinition. You can disable the DetailsViewDefinition deserialization by setting the [DeserializationOptions.DeserializeDetailsViewDefinition](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeDetailsViewDefinition) to `false`. {% tabs %} {% highlight c# %} @@ -297,7 +297,7 @@ this.dataGrid.Deserialize(storageFile, options); ### Deserialize unbound rows -By default, SfDataGrid allows you to deserialize the unbound rows settings. You can disable the unbound rows deserialization by setting the [DeserializationOptions.DeserializeUnBoundRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeUnBoundRows) to `false`. +By default, Data Grid allows you to deserialize the unbound rows settings. You can disable the unbound rows deserialization by setting the [DeserializationOptions.DeserializeUnBoundRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.DeserializationOptions.html#Syncfusion_UI_Xaml_Grid_DeserializationOptions_DeserializeUnBoundRows) to `false`. {% tabs %} {% highlight c# %} @@ -312,7 +312,7 @@ this.dataGrid.Deserialize(storageFile, options); ## Customizing Serialization and Deserialization Operations -SfDataGrid allows you to customize the serialization and deserialization operations by deriving [SerializationController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationController.html) class and override the necessary virtual methods. +Data Grid allows you to customize the serialization and deserialization operations by deriving [SerializationController](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SerializationController.html) class and override the necessary virtual methods. ### Serialize custom column @@ -333,7 +333,7 @@ public class TimePickerColumn : GridColumn {% endhighlight %} {% endtabs %} -In the below code snippet, the TimePickerColumn is defined in SfDataGrid. +In the below code snippet, the TimePickerColumn is defined in Data Grid. {% tabs %} {% highlight xaml %} @@ -494,7 +494,7 @@ You can download the sample demo [here](https://www.syncfusion.com/downloads/sup ### Serializing template column content -By default, you cannot serialize the template content in SfDataGrid. This is the default behavior during Serialization and Deserialization operation. +By default, you cannot serialize the template content in Data Grid. This is the default behavior during Serialization and Deserialization operation. {% tabs %} {% highlight xaml %} diff --git a/uwp/DataGrid/Sorting.md b/uwp/DataGrid/Sorting.md index b656fd1e..38a63e0f 100644 --- a/uwp/DataGrid/Sorting.md +++ b/uwp/DataGrid/Sorting.md @@ -10,7 +10,7 @@ documentation: ug # Sorting in UWP Data Grid -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/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. +UWP Data Grid 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/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_AllowSorting) property to `true`. {% tabs %} {% highlight xaml %} @@ -86,7 +86,7 @@ Following are the sequence of sorting orders when clicking column header, ## Multi column sorting -SfDataGrid control allows you sort more than one column, where sorting is applied one column against other columns. +Data Grid 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. @@ -165,7 +165,7 @@ 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/uwp/Syncfusion.Data.SortComparer.html) instance to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers). +Data Grid 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/uwp/Syncfusion.Data.SortComparer.html) instance to [SfDataGrid.SortComparers](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortComparers). The [SortComparer](https://help.syncfusion.com/cr/uwp/Syncfusion.Data.SortComparer.html) have the following properties, @@ -244,7 +244,7 @@ public class CustomComparer : IComparer, ISortDirection {% endhighlight %} {% endtabs %} -#### Adding custom comparer to SfDataGrid +#### Adding custom comparer to Data Grid Custom comparer can be added to `SfDataGrid.SortComparers` property. `SortComparers` maintains custom comparers and the custom comparer gets called when corresponding column gets sorted by clicking column header or programmatically. @@ -277,7 +277,7 @@ Sorting `CustomerName` column sorts the data using custom comparer available in ## 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. You can get sorted data from `SfDataGrid.View.Records` when groups are not in place and `SfDataGrid.View.TopLevelGroup.DisplayElements` when grouping in place. +Data Grid 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 sorted data from `SfDataGrid.View.Records` when groups are not in place and `SfDataGrid.View.TopLevelGroup.DisplayElements` when grouping 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/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_SortColumnsChanged) event. diff --git a/uwp/DataGrid/Styles-and-Templates.md b/uwp/DataGrid/Styles-and-Templates.md index fbeef0fd..1100cda4 100644 --- a/uwp/DataGrid/Styles-and-Templates.md +++ b/uwp/DataGrid/Styles-and-Templates.md @@ -11,18 +11,18 @@ documentation: ug # Styles and Templates in UWP Data Grid -The appearance of SfDataGrid and its inner elements (example: Cell, Row, Header, Summary and etc.) can be customized using various properties exposed and editing its Style. +The appearance of Data Grid and its inner elements (example: Cell, Row, Header, Summary and etc.) can be customized using various properties exposed and editing its Style. -## Control Structure of SfDataGrid +## Control Structure of Data Grid ![Styles-and-Templates_img1](Styles-and-Templates_images/Styles-and-Templates_img1.png) ### Customizing Default Containers -SfDataGrid arrange the cell and row content using cell and row container’s. Below screenshot shows the VisualTree of SfDataGrid where HeaderCell loaded into the HeaderCellControl and data cells loaded into the VirtualizingCellsControl container. VirtualizingCellsControl container consist of GridCell to load the cell content. +Data Grid arrange the cell and row content using cell and row container’s. Below screenshot shows the VisualTree of Data Grid where HeaderCell loaded into the HeaderCellControl and data cells loaded into the VirtualizingCellsControl container. VirtualizingCellsControl container consist of GridCell to load the cell content. ![Styles-and-Templates_img31](Styles-and-Templates_images/Styles-and-Templates_img31.png) -[RowGenerator](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.RowGenerator.html) class processes the creation and re-using of containers for SfDataGrid. You create your own containers by overriding RowGenerator class and set it [SfDataGrid.RowGenerator](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_RowGenerator). Thus, it is possible to customize the row and cell containers by customizing the RowGeneration which cannot be done with styling and conditional styling customization options. +[RowGenerator](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.RowGenerator.html) class processes the creation and re-using of containers for Data Grid. You create your own containers by overriding RowGenerator class and set it [SfDataGrid.RowGenerator](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_RowGenerator). Thus, it is possible to customize the row and cell containers by customizing the RowGeneration which cannot be done with styling and conditional styling customization options. ### Row containers Below table shows the different types of grid rows and its container. @@ -347,13 +347,13 @@ public class CustomRowGenerator : RowGenerator {% endtabs %} You can download a working demo for the above customization from [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridcellUwp1283030332). -## Editing DataGrid Elements Style in Visual Studio Designer +## Editing Data Grid Elements Style in Visual Studio Designer -You can edit the SfDataGrid elements style in Visual Studio Designer by right clicking it in designer view and click **Edit Additional Templates**. +You can edit the Data Grid elements style in Visual Studio Designer by right clicking it in designer view and click **Edit Additional Templates**. ![Styles-and-Templates_img2](Styles-and-Templates_images/Styles-and-Templates_img2.png) -You can edit or create new style for the following SfDataGrid elements through **Edit Additional Templates** option, +You can edit or create new style for the following Data Grid elements through **Edit Additional Templates** option, 1. HeaderTemplate @@ -361,12 +361,12 @@ You can edit or create new style for the following SfDataGrid elements through * ## Writing Style by TargetType -The appearance of SfDataGrid and its inner elements can be customized by writing style of TargetType to those control. If the key is not specified, then the style will be applied to all the SfDataGrid in its scope. You can apply style specific to SfDataGrid or column or cell using various +The appearance of Data Grid and its inner elements can be customized by writing style of TargetType to those control. If the key is not specified, then the style will be applied to all the Data Grid in its scope. You can apply style specific to Data Grid or column or cell using various properties exposed. ## Styling Record cell -The record cells can be customized by writing style of TargetType [GridCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCell.html). You can set to particular SfDataGrid by setting [SfDataGrid.CellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CellStyle) property and the particular column can be styled by setting [GridColumn.CellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_CellStyle) property. Underlying record will be the DataContext for `GridCell`. +The record cells can be customized by writing style of TargetType [GridCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCell.html). You can set to particular Data Grid by setting [SfDataGrid.CellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CellStyle) property and the particular column can be styled by setting [GridColumn.CellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_CellStyle) property. Underlying record will be the DataContext for `GridCell`. {% tabs %} {% highlight xaml %} @@ -418,7 +418,7 @@ You can also change the gridline color by setting [GridCell.BorderBrush](https:/ ## Styling Record row -The record rows can be customized by writing style of TargetType [VirtualizingCellsControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.VirtualizingCellsControl.html). You can set to particular SfDataGrid by setting [SfDataGrid.RowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_RowStyle) property. +The record rows can be customized by writing style of TargetType [VirtualizingCellsControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.VirtualizingCellsControl.html). You can set to particular Data Grid by setting [SfDataGrid.RowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_RowStyle) property. {% tabs %} {% highlight xaml %} @@ -484,7 +484,7 @@ The foreground and background for the selected row, cell can be customized by se ### Styling Header cell -The header cell can be customized by writing style of TargetType [GridHeaderCellControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridHeaderCellControl.html). You can set to particular SfDataGrid by setting [SfDataGrid.HeaderStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_HeaderStyle) property and the particular column can be styled by setting [GridColumn.HeaderStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_HeaderStyle) property. +The header cell can be customized by writing style of TargetType [GridHeaderCellControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridHeaderCellControl.html). You can set to particular Data Grid by setting [SfDataGrid.HeaderStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_HeaderStyle) property and the particular column can be styled by setting [GridColumn.HeaderStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_HeaderStyle) property. N> `GridColumn.HeaderStyle` takes higher priority than `SfDataGrid.HeaderStyle` property. @@ -663,7 +663,7 @@ this.dataGrid.Columns["CustomerID"].CellStyle = null; ### Styling CaptionSummary cells -The caption summary cells can be customized by writing style of TargetType [GridCaptionSummaryCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCaptionSummaryCell.html). You can set to particular SfDataGrid by setting [SfDataGrid.CaptionSummaryCellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CaptionSummaryCellStyle) property. +The caption summary cells can be customized by writing style of TargetType [GridCaptionSummaryCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridCaptionSummaryCell.html). You can set to particular Data Grid by setting [SfDataGrid.CaptionSummaryCellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CaptionSummaryCellStyle) property. {% tabs %} {% highlight xaml %} @@ -686,7 +686,7 @@ The caption summary cells can be customized by writing style of TargetType [Grid ### Styling CaptionSummary rows -The caption summary rows can be customized by writing style of TargetType [GridCaptionSummaryRowControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CaptionSummaryRowControl.html). You can set to particular SfDataGrid by setting [SfDataGrid.CaptionSummaryRowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CaptionSummaryRowStyle) property. +The caption summary rows can be customized by writing style of TargetType [GridCaptionSummaryRowControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CaptionSummaryRowControl.html). You can set to particular Data Grid by setting [SfDataGrid.CaptionSummaryRowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CaptionSummaryRowStyle) property. {% tabs %} {% highlight xaml %} @@ -713,7 +713,7 @@ The caption summary rows can be customized by writing style of TargetType [GridC ### Styling GroupSummary cells -The group summary cells can be customized by writing style of TargetType [GridGroupSummaryCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridGroupSummaryCell.html). You can set to particular SfDataGrid by setting [SfDataGrid.GroupSummaryCellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GroupSummaryCellStyle) property. +The group summary cells can be customized by writing style of TargetType [GridGroupSummaryCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridGroupSummaryCell.html). You can set to particular Data Grid by setting [SfDataGrid.GroupSummaryCellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GroupSummaryCellStyle) property. {% tabs %} {% highlight xaml %} @@ -739,7 +739,7 @@ The group summary cells can be customized by writing style of TargetType [GridGr ### Styling GroupSummary rows -The group summary rows can be customized by writing style of TargetType [GridGroupSummaryRowControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html). You can set to particular SfDataGrid by setting [SfDataGrid.GroupSummaryRowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GroupSummaryRowStyle) property. +The group summary rows can be customized by writing style of TargetType [GridGroupSummaryRowControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html). You can set to particular Data Grid by setting [SfDataGrid.GroupSummaryRowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GroupSummaryRowStyle) property. {% tabs %} {% highlight xaml %} @@ -763,7 +763,7 @@ The group summary rows can be customized by writing style of TargetType [GridGro ### Styling TableSummary cells -The table summary cells can be customized by writing style of TargetType [GridTableSummaryCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridTableSummaryCell.html). You can set to particular SfDataGrid by setting [SfDataGrid.TableSummaryCellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_TableSummaryCellStyle) property. +The table summary cells can be customized by writing style of TargetType [GridTableSummaryCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridTableSummaryCell.html). You can set to particular Data Grid by setting [SfDataGrid.TableSummaryCellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_TableSummaryCellStyle) property. {% tabs %} {% highlight xaml %} @@ -787,7 +787,7 @@ The table summary cells can be customized by writing style of TargetType [GridTa ### Styling TableSummary rows -The table summary rows can be customized by writing style of TargetType [GridTableSummaryRowControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridTableSummaryRow.html). You can set to particular SfDataGrid by setting [SfDataGrid.TableSummaryRowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_TableSummaryRowStyle) property. +The table summary rows can be customized by writing style of TargetType [GridTableSummaryRowControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridTableSummaryRow.html). You can set to particular Data Grid by setting [SfDataGrid.TableSummaryRowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_TableSummaryRowStyle) property. {% tabs %} {% highlight xaml %} @@ -811,7 +811,7 @@ The table summary rows can be customized by writing style of TargetType [GridTab ### Styling unbound row cells -The unbound row cells can be customized by writing style of TargetType [GridUnBoundRowCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRowCell.html). You can set to particular SfDataGrid by setting [SfDataGrid.UnBoundRowCellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_UnBoundRowCellStyle) property. +The unbound row cells can be customized by writing style of TargetType [GridUnBoundRowCell](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRowCell.html). You can set to particular Data Grid by setting [SfDataGrid.UnBoundRowCellStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_UnBoundRowCellStyle) property. {% tabs %} {% highlight xaml %} @@ -836,7 +836,7 @@ The unbound row cells can be customized by writing style of TargetType [GridUnBo ### Styling unbound row -The unbound rows can be customized by writing style of TargetType [UnBoundRowControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.UnBoundRowControl.html). You can set to particular SfDataGrid by setting [SfDataGrid.UnBoundRowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_UnBoundRowStyle) property. +The unbound rows can be customized by writing style of TargetType [UnBoundRowControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.UnBoundRowControl.html). You can set to particular Data Grid by setting [SfDataGrid.UnBoundRowStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_UnBoundRowStyle) property. {% tabs %} {% highlight xaml %} @@ -941,7 +941,7 @@ You can also display the row index value in the row header cell by customizing i ## Template Selectors -The [DataTemplateSelector](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.datatemplateselector.aspx) can be used to set the custom templates to the cell or rows based on the data. You can set to particular SfDataGrid by setting [SfDataGrid.CellTemplateSelector](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_CellTemplateSelector) and the template can be set to particular column by setting [GridColumn.CellTemplateSelector](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_CellTemplateSelector). +The [DataTemplateSelector](https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.datatemplateselector.aspx) can be used to set the custom templates to the cell or rows based on the data. You can set to particular Data Grid by setting [SfDataGrid.CellTemplateSelector](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_CellTemplateSelector) and the template can be set to particular column by setting [GridColumn.CellTemplateSelector](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_CellTemplateSelector). Here, custom template applied to CustomerID column based on OrderID. @@ -1007,7 +1007,7 @@ public class CellTemplateSelector:DataTemplateSelector ### Changing HeaderTemplates -You can customize the appearance of particular SfDataGrid column header by setting [SfDataGrid.HeaderTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_HeaderTemplate) and the particular column header can be customized by setting [GridColumn.HeaderTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_HeaderTemplate). +You can customize the appearance of particular Data Grid column header by setting [SfDataGrid.HeaderTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_HeaderTemplate) and the particular column header can be customized by setting [GridColumn.HeaderTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_HeaderTemplate). {% tabs %} {% highlight xaml %} @@ -1122,7 +1122,7 @@ public class EditTemplateSelector:DataTemplateSelector ## Styling DetailsViewDataGrid -The appearance of `DetailsViewDataGrid` can be customized by writing style of TargetType `DetailsViewDataGrid`. You can set to particular SfDataGrid by setting [SfDataGrid.DetailsViewDataGridStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_DetailsViewDataGridStyle) property. +The appearance of `DetailsViewDataGrid` can be customized by writing style of TargetType `DetailsViewDataGrid`. You can set to particular Data Grid by setting [SfDataGrid.DetailsViewDataGridStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_DetailsViewDataGridStyle) property. {% tabs %} {% highlight xaml %} diff --git a/uwp/DataGrid/Summaries.md b/uwp/DataGrid/Summaries.md index 5c21b0e1..5c1bb2fc 100644 --- a/uwp/DataGrid/Summaries.md +++ b/uwp/DataGrid/Summaries.md @@ -9,26 +9,26 @@ documentation: ug # Summaries in UWP Data Grid -SfDataGrid provides support to display the concise information about the data objects using summaries. SfDataGrid provides below three different types of summary rows. +UWP Data Grid provides support to display the concise information about the data objects using summaries. Data Grid provides below three different types of summary rows. -* **Table Summary** – Used to display summary information of table either at top or bottom of SfDataGrid. +* **Table Summary** – Used to display summary information of table either at top or bottom of Data Grid. * **Group Summary** – used to display summary information of data objects in each group. * **Caption Summary** – used to display summary information in the caption of the group. -![Shows the different summaries in UWP DataGrid](Summaries_images/Summaries_img1.png) +![Shows the different summaries](Summaries_images/Summaries_img1.png) -![Shows the different summaries in tablet mode of UWP DataGrid](Summaries_images/Summaries_img2.png) +![Shows the different summaries in tablet mode](Summaries_images/Summaries_img2.png) Summary rows are represented by using [GridSummaryRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html) and each `GridSummaryRow` hold summary information of columns in [SummaryColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_SummaryColumns) property. The `SummaryColumns` contains the collection of [GridSummaryColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html) which carries the name of column, format and its summary aggregate type. ## Table Summary -The table summary calculates the summary value over all the records. SfDataGrid allows you to add any number of table summary rows in top and bottom of SfDataGrid. +The table summary calculates the summary value over all the records. Data Grid allows you to add any number of table summary rows in top and bottom of Data Grid. -You can add table summary row in SfDataGrid by adding [GridTableSummaryRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridTableSummaryRow.html) to [SfDataGrid.TableSummaryRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_TableSummaryRows) collection. +You can add table summary row in Data Grid by adding [GridTableSummaryRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridTableSummaryRow.html) to [SfDataGrid.TableSummaryRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_TableSummaryRows) collection. ### Defining summary for column @@ -36,7 +36,7 @@ You can display summary information in the column by setting [GridSummaryRow.Sho 1. [GridSummaryColumn.MappingName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_MappingName) – MappingName of the column (Property name of data object) that you want calculate summary. -2. [GridSummaryColumn.SummaryType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_SummaryType) – SfDataGrid provides different built-in summary calculation functions for various types. +2. [GridSummaryColumn.SummaryType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_SummaryType) – Data Grid provides different built-in summary calculation functions for various types. 3. [GridSummaryColumn.Format](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_Format) – Used to define format string for summary based on support function name’s in specified SummaryType. @@ -70,7 +70,7 @@ In the below code snippet, summary is defined for `UnitPrice` and `ProductName` {% endtabs %} -![SummaryColumns in TableSummaryRow for UWP DataGrid](Summaries_images/Summaries_img3.png) +![SummaryColumns in TableSummaryRow](Summaries_images/Summaries_img3.png) ### Displaying summary for Row @@ -131,11 +131,11 @@ this.dataGrid.TableSummaryRows.Add(new GridTableSummaryRow() {% endtabs %} -![Table summary row in UWP DataGrid](Summaries_images/Summaries_img4.png) +![Table summary row](Summaries_images/Summaries_img4.png) ### Displaying column summary with title -SfDataGrid supports to show column summary and title summary at the same time. You can show column summary along with title by defining the [GridSummaryRow.Title](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_Title) and [GridSummaryRow.TitleColumnCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_TitleColumnCount) property along with defining summary columns. Showing column summary along with title can be only supported if [GridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_ShowSummaryInRow) is disabled. +Data Grid supports to show column summary and title summary at the same time. You can show column summary along with title by defining the [GridSummaryRow.Title](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_Title) and [GridSummaryRow.TitleColumnCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_TitleColumnCount) property along with defining summary columns. Showing column summary along with title can be only supported if [GridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_ShowSummaryInRow) is disabled. Refer [Defining summary for column](#defining-summary-for-column) section to know more about how to define summary columns. @@ -208,7 +208,7 @@ this.dataGrid.TableSummaryRows.Add(new GridTableSummaryRow() The following screenshot illustrates displaying summary columns with title at same time for `TableSummaryRow`. -![SummaryColumns with title in TableSummaryRow for UWP DataGrid](Summaries_images/Summaries_img21.png) +![SummaryColumns with title in TableSummaryRow](Summaries_images/Summaries_img21.png) #### Limitations @@ -219,7 +219,7 @@ The following are the limitations of displaying column summary along with title ### Positioning TableSummaryRow -You can position the table summary either at top or bottom of SfDataGrid by setting [GridTableSummaryRow.Position](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridTableSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridTableSummaryRow_Position) property. +You can position the table summary either at top or bottom of Data Grid by setting [GridTableSummaryRow.Position](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridTableSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridTableSummaryRow_Position) property. {% tabs %} {% highlight xaml %} @@ -292,13 +292,13 @@ this.dataGrid.TableSummaryRows.Add(tablesummaryrow2); {% endtabs %} -![Different positions of table summary row in UWP DataGrid](Summaries_images/Summaries_img5.png) +![Different positions of table summary row](Summaries_images/Summaries_img5.png) ## Group Summary -Group summary values calculated based on the records in the group and the summary information will be displayed at the bottom of each group. You can view the group summary row by expanding the corresponding group header. SfDataGrid allows you to add any number of group summary rows. +Group summary values calculated based on the records in the group and the summary information will be displayed at the bottom of each group. You can view the group summary row by expanding the corresponding group header. Data Grid allows you to add any number of group summary rows. -You can add the group summary rows in SfDataGrid by adding the `GridSummaryRow` to [SfDataGrid.GroupSummaryRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GroupSummaryRows) collection. +You can add the group summary rows in Data Grid by adding the `GridSummaryRow` to [SfDataGrid.GroupSummaryRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_GroupSummaryRows) collection. ### Defining summary for column @@ -306,7 +306,7 @@ You can display summary information in the column by setting [GridSummaryRow.Sho 1. [GridSummaryColumn.MappingName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_MappingName) – MappingName of the column (Property name of data object) that you want calculate summary. -2. [GridSummaryColumn.SummaryType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_SummaryType) – SfDataGrid provides different built-in summary calculation functions for various types. +2. [GridSummaryColumn.SummaryType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_SummaryType) – Data Grid provides different built-in summary calculation functions for various types. 3. [GridSummaryColumn.Format](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_Format) – Used to define format string for summary based on support function name’s in specified SummaryType. @@ -364,7 +364,7 @@ this.dataGrid.GroupSummaryRows.Add(new GridSummaryRow() {% endhighlight %} {% endtabs %} -![SummaryColumns in group summary row for UWP DataGrid](Summaries_images/Summaries_img6.png) +![SummaryColumns in group summary row](Summaries_images/Summaries_img6.png) ### Displaying summary for Row @@ -424,11 +424,11 @@ this.dataGrid.GroupSummaryRows.Add(new GridSummaryRow() {% endtabs %} -![Group summaries in a row for UWP DataGrid](Summaries_images/Summaries_img7.png) +![Group summaries in a row](Summaries_images/Summaries_img7.png) ### Displaying column summary with title -SfDataGrid supports to show column summary and title summary at the same time. You can show column summary along with title by defining the [GridSummaryRow.Title](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_Title) and [GridSummaryRow.TitleColumnCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_TitleColumnCount) property along with defining summary columns. Showing column summary along with title can be only supported if [GridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_ShowSummaryInRow) is disabled. +Data Grid supports to show column summary and title summary at the same time. You can show column summary along with title by defining the [GridSummaryRow.Title](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_Title) and [GridSummaryRow.TitleColumnCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_TitleColumnCount) property along with defining summary columns. Showing column summary along with title can be only supported if [GridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_ShowSummaryInRow) is disabled. Refer [Defining summary for column](#defining-summary-for-column-1) section to know more about how to define summary columns. @@ -500,7 +500,7 @@ this.dataGrid.GroupSummaryRows.Add(new GridSummaryRow() The following screenshot illustrates displaying summary columns with title at same time for `GroupSummaryRow`. -![SummaryColumns with title in group summary row for UWP DataGrid](Summaries_images/Summaries_img20.png) +![SummaryColumns with title in group summary row](Summaries_images/Summaries_img20.png) #### Limitations @@ -511,11 +511,11 @@ The following are the limitations of displaying column summary along with title ## Caption Summaries -SfDataGrid provides built-in support for caption summaries. The caption summary value calculated based on the records in a group and the summary information will be displayed in the caption of group. +Data Grid provides built-in support for caption summaries. The caption summary value calculated based on the records in a group and the summary information will be displayed in the caption of group. Below screen shot shows the built-in caption summary of Group. -![Built-in caption summary in UWP DataGrid](Summaries_images/Summaries_img8.png) +![Built-in caption summary](Summaries_images/Summaries_img8.png) ### Formatting built-in caption summary @@ -541,7 +541,7 @@ You can change group caption format to display column name and count alone by se {% endtabs %} -![Caption summary formatting using GroupCaptionTextFormat in UWP DataGrid](Summaries_images/Summaries_img9.png) +![Caption summary formatting using GroupCaptionTextFormat](Summaries_images/Summaries_img9.png) ### Defining summary for column @@ -550,7 +550,7 @@ You can display summary information in the column by setting [GridSummaryRow.Sho 1. [GridSummaryColumn.MappingName](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_MappingName) – MappingName of the column (Property name of data object) that you want calculate summary. -2. [GridSummaryColumn.SummaryType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_SummaryType) – SfDataGrid provides different built-in summary calculation functions for various types. +2. [GridSummaryColumn.SummaryType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_SummaryType) – Data Grid provides different built-in summary calculation functions for various types. 3. [GridSummaryColumn.Format](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_Format) – Used to define format string for summary based on support function name’s in specified SummaryType. @@ -608,7 +608,7 @@ this.dataGrid.CaptionSummaryRow = new GridSummaryRow() {% endtabs %} -![Caption summary in columns for UWP DataGrid](Summaries_images/Summaries_img10.png) +![Caption summary in columns](Summaries_images/Summaries_img10.png) ### Displaying summary for Row @@ -668,11 +668,11 @@ this.dataGrid.CaptionSummaryRow = new GridSummaryRow() {% endtabs %} -![Caption summaries in rows for UWP DataGrid](Summaries_images/Summaries_img11.png) +![Caption summaries in rows](Summaries_images/Summaries_img11.png) ### Displaying column summary with title -SfDataGrid supports to show column summary and title summary at the same time. You can show column summary along with title by defining the [GridSummaryRow.Title](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_Title) and [GridSummaryRow.TitleColumnCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_TitleColumnCount) property along with defining summary columns. Showing column summary along with title can be only supported if [GridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_ShowSummaryInRow) is disabled. +Data Grid supports to show column summary and title summary at the same time. You can show column summary along with title by defining the [GridSummaryRow.Title](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_Title) and [GridSummaryRow.TitleColumnCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_TitleColumnCount) property along with defining summary columns. Showing column summary along with title can be only supported if [GridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryRow.html#Syncfusion_UI_Xaml_Grid_GridSummaryRow_ShowSummaryInRow) is disabled. Refer [Defining summary for column](#defining-summary-for-column-2) section to know more about how to define summary columns. @@ -744,7 +744,7 @@ this.dataGrid.CaptionSummaryRow = new GridSummaryRow() The following screenshot illustrates displaying summary columns with title at same time for `CaptionSummaryRow`. -![Caption summary columns with title in UWP DataGrid](Summaries_images/Summaries_img22.png) +![Caption summary columns with title](Summaries_images/Summaries_img22.png) #### Limitations @@ -784,7 +784,7 @@ N> `DoubleAggregate` is used as SummaryType which has Count, Max, Min, Average a {% endtabs %} -![Shows the sum function in UWP DataGrid](Summaries_images/Summaries_img12.png) +![Shows the sum function](Summaries_images/Summaries_img12.png) ### Formatting Summary Value @@ -815,7 +815,7 @@ In the below code snippet `UnitPrice` column summary is formatted using `c` form {% endtabs %} -![Summary value formatting in UWP DataGrid](Summaries_images/Summaries_img13.png) +![Summary value formatting](Summaries_images/Summaries_img13.png) ### Displaying additional Content in Summary @@ -843,7 +843,7 @@ In the below code snippet `Total UnitPrice: ` text is appended before summary va {% endtabs %} -![Additional content in summary for UWP DataGrid](Summaries_images/Summaries_img14.png) +![Additional content in summary](Summaries_images/Summaries_img14.png) ### Formatting Summary for Row using Title Property @@ -871,7 +871,7 @@ You can format the summary value for row using [GridSummaryRow.Title](https://he {% endhighlight %} {% endtabs %} -![Summary value formatting using Title property in UWP DataGrid](Summaries_images/Summaries_img15.png) +![Summary value formatting using Title property](Summaries_images/Summaries_img15.png) ## Aggregate Types @@ -924,7 +924,7 @@ Used for custom summaries ## Calculate summary for selected rows -SfDataGrid calculates the summaries for all records by default. You can calculate the summaries for selected records by using the `SfDataGrid.SummaryCalculationUnit` or `GridSummaryRow.CalculationUnit` property. +Data Grid calculates the summaries for all records by default. You can calculate the summaries for selected records by using the `SfDataGrid.SummaryCalculationUnit` or `GridSummaryRow.CalculationUnit` property. This is applicable for all type of summary rows such as table, caption and group summary. In the below code snippet, the summaries for selected records are calculated for the top positioned `TableSummaryRow` and the summaries for all records are calculated for the bottom positioned `TableSummaryRow`. @@ -1000,7 +1000,7 @@ this.sfDataGrid.TableSummaryRows.Add(tableSummaryRow2); {% endhighlight %} {% endtabs %} -![Calculate summaries for selected records in UWP SfDataGrid](Summaries_images/Summaries_img19.png) +![Calculate summaries for selected records](Summaries_images/Summaries_img19.png) N> The `GridSummaryRow.CalculationUnit` takes higher priority than the `SfDataGrid.SummaryCalculationUnit`. @@ -1011,7 +1011,7 @@ N> The `GridSummaryRow.CalculationUnit` takes higher priority than the `SfDataGr ## Custom summaries -SfDataGrid allows you to implement your own aggregate functions, when the built-in aggregate functions don’t meet your requirement. +Data Grid allows you to implement your own aggregate functions, when the built-in aggregate functions don’t meet your requirement. You can calculate the summary values based on custom logic using [GridSummaryColumn.CustomAggregate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_CustomAggregate) property. @@ -1127,7 +1127,7 @@ this.dataGrid.TableSummaryRows.Add(new GridTableSummaryRow() {% endtabs %} -![Custom aggregate summaries in UWP SfDataGrid](Summaries_images/Summaries_img16.png) +![Custom aggregate summaries](Summaries_images/Summaries_img16.png) You can download the sample demo [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomSummaries958318941.zip) . @@ -1240,7 +1240,7 @@ public class GridTableSummaryCellRendererExt : GridTableSummaryCellRenderer {% endtabs %} -![Table summary formatting using renderer in UWP DataGrid](Summaries_images/Summaries_img17.png) +![Table summary formatting using renderer](Summaries_images/Summaries_img17.png) You can download the sample demo [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridDemo-1847415283.zip). @@ -1330,6 +1330,6 @@ public class GridCaptionSummaryCellRendererExt : GridCaptionSummaryCellRenderer {% endhighlight %} {% endtabs %} -![Customize the group caption text format in UWP DataGrid](Summaries_images/Summaries_img18.png) +![Customize the group caption text format](Summaries_images/Summaries_img18.png) You can download the sample demo [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridDemo-827769441.zip). diff --git a/uwp/DataGrid/ToolTip.md b/uwp/DataGrid/ToolTip.md index d15227e2..fd5acd95 100644 --- a/uwp/DataGrid/ToolTip.md +++ b/uwp/DataGrid/ToolTip.md @@ -9,7 +9,7 @@ documentation: ug # ToolTip in UWP Data Grid -ToolTip provides the support to show the pop-up window that displays the information when the mouse hovers in cells of SfDataGrid. +ToolTip provides the support to show the pop-up window that displays the information when the mouse hovers in cells of Data Grid. ## Record cell tooltip @@ -213,7 +213,7 @@ You can get the sample from [here](http://www.syncfusion.com/downloads/support/d The [CellToolTipOpening](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event occurs when any tooltip of the cell is opened. The `CellToolTipOpening` event receives the [GridCellToolTipOpeningEventArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.CellToolTipOpeningEventArgs.html) as argument which has the following properties:
    -
  • Column: Gets the hovered cell column in the SfDataGrid.
  • +
  • Column: Gets the hovered cell column in the Data Grid.
  • Record: Gets the data context of hovered cell.
  • RowColumnIndex: Gets the row and column index of the hovered cell.
  • ToolTip: Gets the tooltip of the hovered cells.
  • diff --git a/uwp/DataGrid/Unbound-Column.md b/uwp/DataGrid/Unbound-Column.md index c33fd5d8..d31e60a7 100644 --- a/uwp/DataGrid/Unbound-Column.md +++ b/uwp/DataGrid/Unbound-Column.md @@ -10,7 +10,7 @@ documentation: ug # Unbound Column in UWP Data Grid -SfDataGrid allows you to add **additional columns** which are **not bound with data object** from underlying data source. You can add unbound column using [GridUnBoundColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundColumn.html) class. Unbound columns support for sorting, filtering, grouping, exporting and printing as normal columns. +UWP Data Grid allows you to add **additional columns** which are **not bound with data object** from underlying data source. You can add unbound column using [GridUnBoundColumn](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundColumn.html) class. Unbound columns support for sorting, filtering, grouping, exporting and printing as normal columns. {% tabs %} {% highlight xaml %} @@ -370,7 +370,7 @@ You can refer the [Styling](https://help.syncfusion.com/uwp/datagrid/column-type ## Customize the Unbound column behavior -SfDataGrid allows you to customize the operations like key navigation and UI related interactions by overriding the corresponding renderer associated with the unbound column. +Data Grid allows you to customize the operations like key navigation and UI related interactions by overriding the corresponding renderer associated with the unbound column. Below table lists the available cell types for unbound column. diff --git a/uwp/DataGrid/Unbound-Rows.md b/uwp/DataGrid/Unbound-Rows.md index 214c3b4c..08e27d84 100644 --- a/uwp/DataGrid/Unbound-Rows.md +++ b/uwp/DataGrid/Unbound-Rows.md @@ -9,7 +9,7 @@ documentation: ug # Unbound Rows in UWP Data Grid -SfDataGrid allows you to add additional rows at top and also bottom of the SfDataGrid which are not bound with data object from underlying data source. You can add unbound rows using [SfDataGrid.UnBoundRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_UnBoundRows) collection property. You can add any no of unbound rows to SfDataGrid. Unbound rows can be exported and printed. +UWP Data Grid allows you to add additional rows at top and also bottom of the Data Grid which are not bound with data object from underlying data source. You can add unbound rows using [SfDataGrid.UnBoundRows](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_UnBoundRows) collection property. You can add any no of unbound rows to Data Grid. Unbound rows can be exported and printed. {% tabs %} {% highlight xaml %} @@ -30,7 +30,7 @@ N> [AllowFrozenGroupHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xa ## Positioning unbound rows -Unbound row can be placed in top or bottom of the SfDataGrid. Unbound row positioned based on [GridUnBoundRow.Position](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRow.html#Syncfusion_UI_Xaml_Grid_GridUnBoundRow_Position) and [GridUnBoundRow.ShowBelowSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRow.html#Syncfusion_UI_Xaml_Grid_GridUnBoundRow_ShowBelowSummary) properties. +Unbound row can be placed in top or bottom of the Data Grid. Unbound row positioned based on [GridUnBoundRow.Position](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRow.html#Syncfusion_UI_Xaml_Grid_GridUnBoundRow_Position) and [GridUnBoundRow.ShowBelowSummary](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRow.html#Syncfusion_UI_Xaml_Grid_GridUnBoundRow_ShowBelowSummary) properties. Below table shows the unbound row positioning based on property settings of `Position` and `ShowBelowSummary`. @@ -42,7 +42,7 @@ UnBoundRowPosition ShowBelowSummary @@ -75,7 +75,7 @@ Bottom True @@ -98,9 +98,9 @@ Below screen shot shows different unbound rows placed in all possible positions. ## Populating data for unbound rows -You can populate data for the unbound row by handling [QueryUnBoundRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event of SfDataGrid. This event occurs for each cell in unbound row whenever the row gets refreshed. +You can populate data for the unbound row by handling [QueryUnBoundRow](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.SfDataGrid.html) event of Data Grid. This event occurs for each cell in unbound row whenever the row gets refreshed. -[GridUnBoundRowEventsArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRowEventsArgs.html) of the `QueryUnBoundRow` event provides information about the cell triggered this event. [GridUnBoundRowEventsArgs.OriginalSender](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridEventArgs.html#Syncfusion_UI_Xaml_Grid_GridEventArgs_OriginalSender) returns the DataGrid fired this event for DetailsView. +[GridUnBoundRowEventsArgs](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRowEventsArgs.html) of the `QueryUnBoundRow` event provides information about the cell triggered this event. [GridUnBoundRowEventsArgs.OriginalSender](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridEventArgs.html#Syncfusion_UI_Xaml_Grid_GridEventArgs_OriginalSender) returns the Data Grid fired this event for DetailsView. You can get or set the [GridUnBoundRowEventsArgs.Value](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRowEventsArgs.html#Syncfusion_UI_Xaml_Grid_GridUnBoundRowEventsArgs_Value) property based on the [UnBoundAction](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Grid.GridUnBoundRowEventsArgs.html#Syncfusion_UI_Xaml_Grid_GridUnBoundRowEventsArgs_UnBoundAction). If UnBoundAction is QueryData then you can set the value for display. If the UnBoundAction is CommitData then you can get the edited value. {% tabs %} @@ -115,7 +115,7 @@ You can get or set the [GridUnBoundRowEventsArgs.Value](https://help.syncfusion. {% endhighlight %} {% endtabs %} -For example, now unbound row populated based on selected items in SfDataGrid. +For example, now unbound row populated based on selected items in Data Grid. {% tabs %} {% highlight c# %} @@ -256,7 +256,7 @@ You can customize the style of unbound row cell by writing style of TargetType [ ## Customize the Unbound Row’s behavior -SfDataGrid allows you to customize the operations like key navigation and UI related interactions by overriding the corresponding renderer associated with the unbound row cell. Each renderer have set of virtual methods for handling the behaviors. Creating new renderers also supported. +Data Grid allows you to customize the operations like key navigation and UI related interactions by overriding the corresponding renderer associated with the unbound row cell. Each renderer have set of virtual methods for handling the behaviors. Creating new renderers also supported. Below table lists the available cell types for unbound row and its renderers.
    -Position in DataGrid +Position in Data Grid
    -Unbound row placed at bottom of SfDataGrid. In this position, unbound row is not selectable, not editable and frozen when scrolling. +Unbound row placed at bottom of Data Grid. In this position, unbound row is not selectable, not editable and frozen when scrolling.