Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions uwp/CellGrid/Appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Appearance in UWP Excel-like Grid

This section explains about customizing the appearance of SfCellGrid.
This section explains about customizing the appearance of Excel-like Grid.

## Covered Cells

Expand All @@ -18,7 +18,7 @@ There are different possible options to form a covered range. The range can be r

### Creating Covered Range

To create a covered cell, users need to add `CoveredCellInfo` item to the `CoveredCells` of SfCellGrid.
To create a covered cell, users need to add `CoveredCellInfo` item to the `CoveredCells` of Excel-like Grid.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -76,7 +76,7 @@ private void Model_QueryCoveredRange(object sender, GridQueryCoveredRangeEventAr

### Clearing the Covered Range

Covered cells in SfCellGrid can be removed by using `Clear` method.
Covered cells in Excel-like Grid can be removed by using `Clear` method.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -109,7 +109,7 @@ bool isCovered = cellGrid.CoveredCells.Find(3, 4, out range);
## Floating Cells

Floating cells are the cells in which if the content exceeds the length of the cell, then content will be floated to the adjacent cell if empty.
By default, the floating cell behavior will be enabled in SfCellGrid. If you want to disable, then set `AllowFloatingCell` property to false.
By default, the floating cell behavior will be enabled in the Excel-like Grid. If you want to disable, then set `AllowFloatingCell` property to false.

{% tabs %}
{% highlight c# %}
Expand All @@ -136,9 +136,9 @@ cellGrid.AllowFloatingCellInEdit = false;

## Conditional Formatting

Conditional formatting is a process of applying customized styles to any object based on specified conditions. SfCellGrid allows the user to format the cells based on a certain condition.
Conditional formatting is a process of applying customized styles to any object based on specified conditions. The Excel-like Grid allows the user to format the cells based on a certain condition.

Conditional formatting can be applied to SfCellGrid by using `ConditionalFormats` property which is an observable collection, where the users can add required number of formats of type `GridConditionalFormat`.
Conditional formatting can be applied to the Excel-like Grid by using `ConditionalFormats` property which is an observable collection, where the users can add required number of formats of type `GridConditionalFormat`.
Using the `GridConditionalFormat` class, users can specify the criteria for the cells such as `GridConditionalFormatType`, `GridConditionType` and the value. The `Style` property of GridConditionalFormat class is used to set the specific styles for the cells.
Once these specifications are defined, the defined styles are applied to only those cells which satisfy the condition.

Expand Down
16 changes: 8 additions & 8 deletions uwp/CellGrid/Cell-Styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Cell Styles in UWP Excel-like Grid

This section explains about how to apply the cell styles to customize the appearance in SfCellGrid.
This section explains about how to apply the cell styles to customize the appearance in the Excel-like Grid.

## BaseStyles

Expand All @@ -30,7 +30,7 @@ cellGrid.Model[5,3].BaseStyle = "custom";

### QueryBaseStyle Event

`QueryBaseStyle` Event is used to apply the `BaseStyle` at run time in SfCellGrid instead of storing in the base style collection.
`QueryBaseStyle` Event is used to apply the `BaseStyle` at run time in Excel-like Grid instead of storing in the base style collection.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -68,7 +68,7 @@ private void Model_QueryBaseStyles(object sender, Syncfusion.UI.Xaml.CellGrid.St
## TableStyle

TableStyle is a single `GridStyleInfo` object that is associated with the entire grid. To apply the styles for the each and every cell in
SfCellGrid, `TableStyle` property is used
Excel-like Grid, `TableStyle` property is used

{% tabs %}
{% highlight c# %}
Expand All @@ -85,7 +85,7 @@ cellGrid.Model.TableStyle.Borders.All = new Pen(new SolidColorBrush(Colors.Orang

## RowStyles

RowStyles are `GridStyleInfo` objects that are associated with each row in SfCellGrid. To apply styles for particular row or range of rows, `RowStyles` property is used.
RowStyles are `GridStyleInfo` objects that are associated with each row in the Excel-like Grid. To apply styles for particular row or range of rows, `RowStyles` property is used.

{% tabs %}
{% highlight c# %}
Expand All @@ -103,7 +103,7 @@ cellGrid.Model.RowStyles[3].Borders.All = new Pen(new SolidColorBrush(Colors.Ora

## ColStyles

ColStyles are `GridStyleInfo` objects that are associated with each column in SfCellGrid. To apply styles for particular column or range of columns, `ColStyles` property is used.
ColStyles are `GridStyleInfo` objects that are associated with each column in Excel-like Grid. To apply styles for particular column or range of columns, `ColStyles` property is used.

{% tabs %}
{% highlight c# %}
Expand All @@ -119,11 +119,11 @@ cellGrid.Model.ColStyles[4].Borders.All = new Pen(new SolidColorBrush(Colors.Gra
{% endhighlight %}
{% endtabs %}

N> `RowColStylePrecedence` property of `GridStyleInfo` is for setting the priority to either row/column when both `RowStyles` and `ColStyles` are used in SfCellGrid. Default `PrecedenceStyle` is Row.
N> `RowColStylePrecedence` property of `GridStyleInfo` is for setting the priority to either row/column when both `RowStyles` and `ColStyles` are used in the Excel-like Grid. Default `PrecedenceStyle` is Row.

## HeaderStyle

HeaderStyle are `GridStyleInfo` objects that are associated with header rows/columns in SfCellGrid. To apply styles for header rows or columns, `HeaderStyle` property is used.
HeaderStyle are `GridStyleInfo` objects that are associated with header rows/columns in the Excel-like Grid. To apply styles for header rows or columns, `HeaderStyle` property is used.

{% tabs %}
{% highlight c# %}
Expand All @@ -145,7 +145,7 @@ cellGrid.Model.HeaderStyle.Borders.All = new Pen(new SolidColorBrush(Colors.Oran

## FooterStyle

FooterStyle are `GridStyleInfo` objects that are associated with footer rows/columns in SfCellGrid. To apply styles for footer rows or columns, `FooterStyle` property is used.
FooterStyle are `GridStyleInfo` objects that are associated with footer rows/columns in Excel-like Grid. To apply styles for footer rows or columns, `FooterStyle` property is used.

{% tabs %}
{% highlight c# %}
Expand Down
18 changes: 9 additions & 9 deletions uwp/CellGrid/Cell-Types.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Cell Types in UWP Excel-like Grid

SfCellGrid allows the inclusion of some special controls in the cells. This attribute of a grid cell is referred to as its Cell Type.
The Excel-like Grid allows the inclusion of some special controls in the cells. This attribute of a grid cell is referred to as its Cell Type.

## Setting cell type for a cell

Expand All @@ -26,7 +26,7 @@ cellGrid.Model[2, 2].CellValue = true;

## TextBox Cell Type

TextBox cells are the default cell type of SfCellGrid. TextBox cells displays text which can be edited when clicked.
TextBox cells are the default cell type of Excel-like Grid. TextBox cells displays text which can be edited when clicked.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -66,7 +66,7 @@ cellGrid.Model.ColStyles[1].Background = new SolidColorBrush(Colors.LightPink);

## CheckBox Cell Type

`CheckBox` cell type displays a check box in the mentioned cell of SfCellGrid. The check box has three states: **Checked, Unchecked and Indeterminate**. It is possible to decide whether the check box should behave as a two-state check box or a three-state check box
`CheckBox` cell type displays a check box in the mentioned cell of the Excel-like Grid. The check box has three states: **Checked, Unchecked and Indeterminate**. It is possible to decide whether the check box should behave as a two-state check box or a three-state check box
by using the `IsThreeState` property.

{% tabs %}
Expand All @@ -81,7 +81,7 @@ cellGrid.Model[2, 2].CellValue = true;

## ComboBox Cell Type

`ComboBox` cell type displays a combo box in the mentioned cell of SfCellGrid. A combo box is a component with a drop-down arrow that users click to display an associated list of choices.
`ComboBox` cell type displays a combo box in the mentioned cell of Excel-like Grid. A combo box is a component with a drop-down arrow that users click to display an associated list of choices.
This cell type allows you to choose the cell value from a drop-down list.

{% tabs %}
Expand All @@ -95,7 +95,7 @@ cellGrid.Model[2, 2].ComboBoxEdit.ItemSource = new List<int> {1,2,3,4,5,6 };

## DateTime Cell Type

This cell type can be used to display the DateTime in the mentioned cell of SfCellGrid. Users can customize this date time cell by using `DateTimeEdit` property of `GridStyleInfo` class.
This cell type can be used to display the DateTime in the mentioned cell of the Excel-like Grid. Users can customize this date time cell by using `DateTimeEdit` property of `GridStyleInfo` class.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -205,7 +205,7 @@ Gets or sets the percentage format type. </td></tr>

## UpDown Cell Type

This cell type displays up and down repeat buttons to increment and decrement the values in the cell of SfCellGrid. User can display different formats like currency format, scientific format, etc.,
This cell type displays up and down repeat buttons to increment and decrement the values in the cell of Excel-like Grid. User can display different formats like currency format, scientific format, etc.,

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -277,7 +277,7 @@ Gets or sets the alignment of the contents in the cell. </td></tr>

## Hyperlink Cell Type

This cell type displays the hyperlink in the cell of SfCellGrid. This hyperlink cell type will be useful in navigating to browsers, other cells, mail. etc.,
This cell type displays the hyperlink in the cell of Excel-like Grid. This hyperlink cell type will be useful in navigating to browsers, other cells, mail. etc.,
The Url or the reference for the hyperlink cell will be given in the `Hyperlink` property.

{% tabs %}
Expand Down Expand Up @@ -319,7 +319,7 @@ cellGrid.Model[4, 5].CellItemTemplate = this.Resources["ButtonTemplate"] as Data

## Formula Cell Type

This cell type is used to enter the formula in the cell of SfCellGrid. The formulas in the `CellValue` property must be preceded with "=" sign.
This cell type is used to enter the formula in the cell of Excel-like Grid. The formulas in the `CellValue` property must be preceded with "=" sign.

{% tabs %}
{% highlight c# %}
Expand All @@ -330,4 +330,4 @@ cellGrid.Model[4, 4].CellValue = "=Sum(A1:A2)";
{% endhighlight %}
{% endtabs %}

For more information regarding supported formulas in SfCellGrid, please refer [here](https://help.syncfusion.com/uwp/sfcellgrid/formulas#supported-functions).
For more information regarding supported formulas in Excel-like Grid, please refer [here](https://help.syncfusion.com/uwp/sfcellgrid/formulas#supported-functions).
30 changes: 15 additions & 15 deletions uwp/CellGrid/Custom-Cell-Type.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ documentation: ug

# Custom Cell Type in UWP Excel-like Grid

SfCellGrid provides support to customize the cell by loading any user control into the cell.
The Excel-like Grid provides support to customize the cell by loading any user control into the cell.

This requires a cell renderer class which creates the custom cell control and handles the UI requirements. The custom cell type can be created by registering the cell renderer to the SfCellGrid. It can be enabled by assigning its name to the `CellType` property of `GridStyleInfo` class.
This requires a cell renderer class which creates the custom cell control and handles the UI requirements. The custom cell type can be created by registering the cell renderer to the Excel-like Grid. It can be enabled by assigning its name to the `CellType` property of `GridStyleInfo` class.

In general, the built-in cell types are also constructed only in this way. Every such cell type has its own renderer classes in the code base which are inherited from `GridVirtualizingCellRenderer` class. This class defines the basic functionality for a cell type.

To customize the cell, please follow the below steps

* Create a Custom Cell Renderer class
* Associating the Custom Cell Renderer to SfCellGrid
* Associating the Custom Cell Renderer to the Excel-like Grid

## Creating a new Custom Cell Type(SfCalendar)

Expand All @@ -41,8 +41,8 @@ public class CalendarCellRenderer : GridVirtualizingCellRenderer<TextBlock, SfCa
{% endtabs %}

To load the `SfCalendar` in the edit mode of a cell, create a new `SfCalendar` control in `OnCreateEditUIElement` method.
In `OnInitializeDisplayElement` method, initialize the display UI element `TextBlock` which is to be loaded in the cell of SfCellGrid and in `OnInitializeEditElement` method,
initialize the edit UI element `SfCalendar` which is to be loaded in the cell of SfCellGrid while in edit mode.
In `OnInitializeDisplayElement` method, initialize the display UI element `TextBlock` which is to be loaded in the cell of Excel-like Grid and in `OnInitializeEditElement` method,
initialize the edit UI element `SfCalendar` which is to be loaded in the cell of Excel-like Grid while in edit mode.

When the edit UI element is loaded in the cell, `OnEditElementLoaded` event is invoked and focus is set to the UI element(SfCalendar). When the selected date in `SfCalendar` Control is changed, `SelectionChanged` event is invoked and set the selected date as value.
The `GetControlValue` and `GetFormattedText` methods returns/updates the value and formatted text of the current rendered element(SfCalendar/TextBlock) in the cell.
Expand All @@ -57,7 +57,7 @@ public class CalendarCellRenderer : GridVirtualizingCellRenderer<TextBlock, SfCa

}

//Occurs when the UIElement(SfCalendar) is loaded in SfCellGrid,
//Occurs when the UIElement(SfCalendar) is loaded in Excel-like Grid,
protected override void OnEditElementLoaded(object sender, RoutedEventArgs e)
{
var uiElement = ((SfCalendar)sender);
Expand Down Expand Up @@ -110,15 +110,15 @@ public class CalendarCellRenderer : GridVirtualizingCellRenderer<TextBlock, SfCa
return new SfCalendar();
}

//Initializing the display element(TextBlock) while loading in SfCellGrid,
//Initializing the display element(TextBlock) while loading in Excel-like Grid,
protected override void OnInitializeDisplayElement(RowColumnIndex rowColumnIndex, TextBlock uiElement, GridStyleInfo style, string text)
{
base.OnInitializeDisplayElement(rowColumnIndex, uiElement, style, text);

uiElement.Text = text;
}

//Initializing the edit element(SfCalendar) while loading in SfCellGrid,
//Initializing the edit element(SfCalendar) while loading in Excel-like Grid,
protected override void OnInitializeEditElement(RowColumnIndex rowColumnIndex, SfCalendar uiElement, GridStyleInfo style, string text)
{
base.OnInitializeEditElement(rowColumnIndex, uiElement, style, text);
Expand Down Expand Up @@ -152,9 +152,9 @@ public class CalendarCellRenderer : GridVirtualizingCellRenderer<TextBlock, SfCa
{% endhighlight %}
{% endtabs %}

### Associating the Custom Cell Renderer to SfCellGrid
### Associating the Custom Cell Renderer to Excel-like Grid

To associate the custom cell renderer in SfCellGrid, initialize the **CalendarCellRenderer** class and add it to the `CellRenderers` property which is a collection of type `GridCellRendererCollection` class.
To associate the custom cell renderer in Excel-like Grid, initialize the **CalendarCellRenderer** class and add it to the `CellRenderers` property which is a collection of type `GridCellRendererCollection` class.

To load the custom cell(SfCalendar) in the required range, assign its name "CalendarCell" to the `CellType` property of `GridStyleInfo` class.

Expand Down Expand Up @@ -195,13 +195,13 @@ For more reference, please find the [customization](http://www.syncfusion.com/do

## Modify the Existing Cell Type

Users can also change/modify the behavior of already existing cell type in SfCellGrid by creating a custom renderer class by overriding the existing cell renderer class.
Users can also change/modify the behavior of already existing cell type in Excel-like Grid by creating a custom renderer class by overriding the existing cell renderer class.

### Create a Custom Cell Renderer class

To open the dropdown list of `ComboBox` cell with single click which is not a default behavior of `ComboBox` cell type in SfCellGrid, hence the users need to create a custom class **CustomComboRenderer** by overriding the already existing `GridComboBoxCellRenderer` class to modify the behavior of the default `ComboBox` cell type.
To open the dropdown list of `ComboBox` cell with single click which is not a default behavior of `ComboBox` cell type in Excel-like Grid, hence the users need to create a custom class **CustomComboRenderer** by overriding the already existing `GridComboBoxCellRenderer` class to modify the behavior of the default `ComboBox` cell type.

In the `OnEditElementLoaded` event, set the `IsDropDownOpen` property of `ComboBox` UI to `true` and this will open the combo box dropdown list when the edit element is loaded in the cell of SfCellGrid.
In the `OnEditElementLoaded` event, set the `IsDropDownOpen` property of `ComboBox` UI to `true` and this will open the combo box dropdown list when the edit element is loaded in the cell of Excel-like Grid.

{% tabs %}
{% highlight c# %}
Expand All @@ -219,9 +219,9 @@ public class CustomComboRenderer: GridComboBoxCellRenderer
{% endhighlight %}
{% endtabs %}

### Associating the Custom Cell Renderer to SfCellGrid
### Associating the Custom Cell Renderer to Excel-like Grid

To associate the custom cell renderer in SfCellGrid, initialize the **CustomComboRenderer** class and add it to the `CellRenderers` property which is a collection of type `GridCellRendererCollection` class and remove the existing cell type `ComboBox` from the collection.
To associate the custom cell renderer in Excel-like Grid, initialize the **CustomComboRenderer** class and add it to the `CellRenderers` property which is a collection of type `GridCellRendererCollection` class and remove the existing cell type `ComboBox` from the collection.

To load the custom cell in the required range, assign its name **ComboCell** to the `CellType` property of `GridStyleInfo` class.

Expand Down
Loading