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
18 changes: 9 additions & 9 deletions wpf/GridControl/Appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ The following graphic illustrates the effect of using the GridStyleInfo inherita



![Change background color of specific cell or row and column in WPF GridControl](Appearance_images/Appearance_img1.jpeg)
![Change background color of specific cell or row and column](Appearance_images/Appearance_img1.jpeg)

### Style Properties

Expand Down Expand Up @@ -130,7 +130,7 @@ Output

The code above displays the following output:

![Change the background color of each columns in WPF GridControl](Appearance_images/Appearance_img2.jpeg)
![Change the background color of each columns](Appearance_images/Appearance_img2.jpeg)

#### Background

Expand Down Expand Up @@ -161,7 +161,7 @@ this.grid.Model[3, 6].Background = new LinearGradientBrush(Colors.Gold, Colors.Y

The following output is generated using the code above.

![Applied gradient background color in specific cells in WPF GridControl](Appearance_images/Appearance_img3.jpeg)
![Applied gradient background color in specific cells](Appearance_images/Appearance_img3.jpeg)

#### Visual properties

Expand Down Expand Up @@ -238,7 +238,7 @@ this.grid.Model[8, 5].CellValue = "Font style is Normal";

The following output is generated using the code above.

![Change the font style and color in WPF GridControl](Appearance_images/Appearance_img4.jpeg)
![Change the font style and color](Appearance_images/Appearance_img4.jpeg)

2. Setting cell orientation

Expand Down Expand Up @@ -280,7 +280,7 @@ this.grid.Model.RowHeights[12] = 50;

The following output is generated using the code above.

![Change the font alignment in WPF GridControl](Appearance_images/Appearance_img5.jpeg)
![Change the font alignment](Appearance_images/Appearance_img5.jpeg)



Expand Down Expand Up @@ -339,7 +339,7 @@ this.grid.Model[15, 6].Borders.Right.DashStyle = DashStyles.DashDotDot;

The following output is generated using the code above.

![Change the border style in WPF GridControl](Appearance_images/Appearance_img6.jpeg)
![Change the border style](Appearance_images/Appearance_img6.jpeg)

### Data Formats

Expand Down Expand Up @@ -478,7 +478,7 @@ foreach (string format in new string[]

The following output is generated using the code above.

![Data formats in WPF GridControl](Appearance_images/Appearance_img7.jpeg)
![Data formats](Appearance_images/Appearance_img7.jpeg)



Expand All @@ -488,7 +488,7 @@ The FormatProvider in GridStyleInfo is used to format the display text in the ce

#### Format using FormatProvider Property

In the Grid control, you can set the FormatProvider property as shown in the following code snippet.
In the Excel-like Grid, you can set the FormatProvider property as shown in the following code snippet.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -572,4 +572,4 @@ The CustomNumberFormat class converts the double value to string based on the cu

The output is shown in the following screenshot:

![Applied formatting in specific cells in WPF GridControl](Appearance_images/Appearance_img8.png)
![Applied formatting in specific cells](Appearance_images/Appearance_img8.png)
18 changes: 9 additions & 9 deletions wpf/GridControl/Autofit-Cells.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ documentation: ug

# Autofit Cells in WPF Excel-like Grid

GridControl provides support to autofit rows and columns based on the content of cells.
The Excel-like Grid provides support to autofit rows and columns based on the content of cells.

## Autofit row height

GridControl provides the support to auto fit the row height based on content of the cells using [ResizeRowsToFit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_ResizeRowsToFit_Syncfusion_Windows_Controls_Grid_GridRangeInfo_Syncfusion_Windows_Controls_Grid_GridResizeToFitOptions_) method which accepts the following parameters,
The Excel-like Grid provides the support to auto fit the row height based on content of the cells using [ResizeRowsToFit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_ResizeRowsToFit_Syncfusion_Windows_Controls_Grid_GridRangeInfo_Syncfusion_Windows_Controls_Grid_GridResizeToFitOptions_) method which accepts the following parameters,

* [GridRangeInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridRangeInfo.html) - Specifies the range where `GridControl` auto fits the rows based on the cell content.
* [GridRangeInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridRangeInfo.html) - Specifies the range where `Excel-like Grid` auto fits the rows based on the cell content.
* [GridResizeToFitOptions](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridResizeToFitOptions.html) - Specifies the auto fit settings to customize the auto fit behavior.

{% tabs %}
Expand All @@ -40,9 +40,9 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/fit-the-column-

## Autofit column width

GridControl provides the support to auto fit the column width based on content of the cells using [ResizeColumnsToFit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_ResizeColumnsToFit_Syncfusion_Windows_Controls_Grid_GridRangeInfo_Syncfusion_Windows_Controls_Grid_GridResizeToFitOptions_) method which accepts the following parameters,
The Excel-like Grid provides the support to auto fit the column width based on content of the cells using [ResizeColumnsToFit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_ResizeColumnsToFit_Syncfusion_Windows_Controls_Grid_GridRangeInfo_Syncfusion_Windows_Controls_Grid_GridResizeToFitOptions_) method which accepts the following parameters,

* [GridRangeInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridRangeInfo.html) - Specifies the range where `GridControl` auto fits the columns based on the cell content.
* [GridRangeInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridRangeInfo.html) - Specifies the range where `Excel-like Grid` auto fits the columns based on the cell content.
* [GridResizeToFitOptions](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridResizeToFitOptions.html) - Specifies the auto fit settings to customize the auto fit behavior.

{% tabs %}
Expand Down Expand Up @@ -99,7 +99,7 @@ autofit the columns or rows before the last one also.</td></tr>
<tr>
<td>
IncludeHiddenCells</td><td>
This option includes the hidden cells while auto fitting the cells. By default, visible cells only will be auto fitted and if you want to autofit all the cells including hidden cells in `GridControl`, then need to use this option.</td></tr>
This option includes the hidden cells while auto fitting the cells. By default, visible cells only will be auto fitted and if you want to autofit all the cells including hidden cells in `Excel-like Grid`, then need to use this option.</td></tr>
</table>

## Autofit Cells based on Wrap Text
Expand All @@ -119,7 +119,7 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/fit-the-column-

## How to avoid rendering issues due to fractions when auto fit the cells

When you autofit the cells, you may face scrolling and rendering issues in GridControl. You can set [GridColumnAutoSizer.CanRoundCalculation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridColumnAutoSizer.html#Syncfusion_Windows_Controls_Grid_GridColumnAutoSizer_CanRoundCalculation) to `true` to avoid rendering issues if needed.
When you autofit the cells, you may face scrolling and rendering issues in the Excel-like Grid. You can set [GridColumnAutoSizer.CanRoundCalculation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridColumnAutoSizer.html#Syncfusion_Windows_Controls_Grid_GridColumnAutoSizer_CanRoundCalculation) to `true` to avoid rendering issues if needed.

{% tabs %}
{% highlight c# %}
Expand All @@ -131,7 +131,7 @@ GridColumnAutoSizer.CanRoundCalculation = true;

## Change the size of row height and column width to fit all cells in View

When GridControl is placed inside custom control and if you want to auto fit the row/column size of GridControl based on custom control resized position, then you can invoke [SizeChanged](https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.control.sizechanged?view=netframework-4.8) event of GridControl and set the [RowHeights](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_RowHeights) and [ColumnWidths](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_ColumnWidths) property of [GridModel](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html) to the resized height/width.
When the Excel-like Grid is placed inside a custom control and you want to auto fit its row/column size based on the custom control’s resized position, then you can invoke the [SizeChanged](https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.control.sizechanged?view=netframework-4.8) event and set the [RowHeights](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_RowHeights) and [ColumnWidths](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html#Syncfusion_Windows_Controls_Grid_GridModel_ColumnWidths) property of [GridModel](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Grid.GridModel.html) to the resized height/width.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -160,4 +160,4 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/fit-the-columns

## See also

[How to auto fit all the columns in a GridControl based on the Window size](https://www.syncfusion.com/kb/7810)
[How to auto fit all the columns based on the Window size](https://support.syncfusion.com/kb/article/7030/how-to-auto-fit-all-the-columns-in-a-gridcontrol-based-on-the-window-size)
36 changes: 18 additions & 18 deletions wpf/GridControl/Cell-Layout-Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Cell Layout Customization in WPF Excel-like Grid

This section explains the Covered Cells, Banner Cells, Overlapping Cells and Graphic cell of the WPF GridControl.
This section explains the Covered Cells, Banner Cells, Overlapping Cells and Graphic cell of the WPF Excel-like Grid.

## Covered Cells

Expand Down Expand Up @@ -52,7 +52,7 @@ cell.HorizontalAlignment = HorizontalAlignment.Center;

The following output is generated using the code above.

![Cells spanned in rows or column in WPF GridControl](Celllayout_images/covered_cells.jpeg)
![Cells spanned in rows or column](Celllayout_images/covered_cells.jpeg)

## Banner Cells

Expand Down Expand Up @@ -102,7 +102,7 @@ void grid_QueryCellSpanBackgrounds(object sender, GridQueryCellSpanBackgroundsEv

The following output is generated using the code above.

![Cell spans with gradient background in WPF GridControl](Celllayout_images/banner_cells.jpeg)
![Cell spans with gradient background](Celllayout_images/banner_cells.jpeg)


## Overlapping Cells
Expand All @@ -129,7 +129,7 @@ grid.Model.Options.FloodCell = false;
{% endhighlight %}
{% endtabs %}

![Overlapping cells in WPF GridControl](Celllayout_images/overlapping_cells.png)
![Overlapping cells](Celllayout_images/overlapping_cells.png)


### Properties
Expand Down Expand Up @@ -185,7 +185,7 @@ this.grid.Model.Options.EnableFloatingCell = true;

## Graphic Cell

A graphic cell is a special type of cell that helps users render any content over the Grid control regardless of the underlying cell. Graphic cells have a separate style info class and model (GraphicModel) which is used to decide the styles and behaviors of graphic cells and their content.
A graphic cell is a special type of cell that helps users render any content over the Excel-like Grid regardless of the underlying cell. Graphic cells have a separate style info class and model (GraphicModel) which is used to decide the styles and behaviors of graphic cells and their content.

### GraphicStyleInfo Properties

Expand Down Expand Up @@ -266,7 +266,7 @@ VerticalAlignment</td></tr>

### Cell Types

The Grid control allows any controls to be loaded inside graphic cells. This greatly improves the usability and appearance of the Grid control. This attribute of a grid cell is referred to as its cell type.
The Excel-like Grid allows any controls to be loaded inside graphic cells. This greatly improves the usability and appearance of the control. This attribute of a grid cell is referred to as its cell type.

#### Built-in Cell Types

Expand All @@ -278,7 +278,7 @@ Graphic cells have built-in support for the following cell types:

### Image Cell

The image cell type is used to load images inside graphic cells. To load the graphic image cell in the Grid control you have to set the CellType as ImageCell and the CellValue as BitmapImage as shown in the following code sample.
The image cell type is used to load images inside graphic cells. To load the graphic image cell in the Excel-like Grid you have to set the CellType as ImageCell and the CellValue as BitmapImage as shown in the following code sample.

{% tabs %}
{% highlight c# %}
Expand All @@ -290,11 +290,11 @@ style.CellValue = bi;
{% endtabs %}


![Image Graphic Cell in WPF GridControl](Celllayout_images/image_graphic_cell.png)
![Image Graphic Cell](Celllayout_images/image_graphic_cell.png)

### RichTextBox Cell

The RichTextBox cell type is used to load a rich text box inside graphic cells. To load the rich text box over the Grid control, you have to set the CellType as RichTextBox and the CellValue as FlowDocument as shown in the following code sample.
The RichTextBox cell type is used to load a rich text box inside graphic cells. To load the rich text box over the Excel-like Grid, you have to set the CellType as RichTextBox and the CellValue as FlowDocument as shown in the following code sample.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -325,7 +325,7 @@ style.CellValue = _flowDocument;
{% endhighlight %}
{% endtabs %}

![RichTextBox Graphic Cell in WPF GridControl](Celllayout_images/textbox_graphic_cell.png)
![RichTextBox Graphic Cell](Celllayout_images/textbox_graphic_cell.png)

### Custom Cell Types

Expand Down Expand Up @@ -398,7 +398,7 @@ void</td></tr>

### Custom Graphic Chart Cell Renderer

This cell displays a chart control over the grid cells as seen in Microsoft Excel when importing an Excel file to the Grid control. To render the Chart control over the Grid control, you need to derive from the GraphicCellModel and GraphicCellRendererBase classes.
This cell displays a chart control over the grid cells as seen in Microsoft Excel when importing an Excel file to the Excel-like Grid. To render the Chart control over the control, you need to derive from the GraphicCellModel and GraphicCellRendererBase classes.

#### CellModel class

Expand Down Expand Up @@ -444,7 +444,7 @@ public class GraphicChartCellRenderer : GraphicCellRendererBase<Chart>
{% endhighlight %}
{% endtabs %}

The ChartExtensions class is used to create the Chart control (Syncfusion.Windows.Chart) from the IChartShape object (Syncfusion.XlsIO.IChartShape). While importing the Excel file to the Grid control, the chart in the Excel file is added to the graphic cell collection and the cell value is set as IChartShape.
The ChartExtensions class is used to create the Chart control (Syncfusion.Windows.Chart) from the IChartShape object (Syncfusion.XlsIO.IChartShape). While importing the Excel file to the Excel-like Grid, the chart in the Excel file is added to the graphic cell collection and the cell value is set as IChartShape.

{% tabs %}
{% highlight c# %}
Expand Down Expand Up @@ -665,11 +665,11 @@ GraphicCommitCellInfoEventArgs</td><td>
This event is similar to the CommittedCellInfo event in GridModel. The changes made in the graphic cell will be saved by the GraphicCommittedCellInfo event.</td></tr>
</table>

### Adding Graphic Cell to the Grid Control
### Adding Graphic Cell to the Excel-like Grid

To add the graphic cell to the Grid control, you have to create the instance for GraphicCellSpanInfo and add that object to the GraphicCells collection in the GraphicModel. For the GraphicCellSpanInfo constructor you have to pass the row index and column index (which will decide the starting point of the graphic cell) along with the height and width of the graphic cell.
To add the graphic cell to the Excel-like Grid, you have to create the instance for GraphicCellSpanInfo and add that object to the GraphicCells collection in the GraphicModel. For the GraphicCellSpanInfo constructor you have to pass the row index and column index (which will decide the starting point of the graphic cell) along with the height and width of the graphic cell.

The following code sample demonstrates adding GraphicCell to the Grid control through GraphicModel.
The following code sample demonstrates adding GraphicCell to the Excel-like Grid through GraphicModel.

{% tabs %}
{% highlight c# %}
Expand All @@ -678,11 +678,11 @@ this.grid.Model.GraphicModel.GraphicCells.Add(cellspan);
{% endhighlight %}
{% endtabs %}

![Graphic Cell in WPF GridControl](Celllayout_images/graphic_cell.png)
![Graphic Cell](Celllayout_images/graphic_cell.png)

#### Setting Cell Type to the Graphic Cell

After adding the graphic cell to GraphicModel you can see the empty cell over the Grid control in the specified position. Now you have set the CellType, CellValue, and other style information by accessing the GraphicStyleInfo from GraphicModel. You can get the graphic cell style from the GraphicModel by passing the row and column index. Then by using that style you can set the cell type, cell values and other customization options for the Graphic cell, as shown in the following code sample.
After adding the graphic cell to GraphicModel you can see the empty cell over the Excel-like Grid in the specified position. Now you have set the CellType, CellValue, and other style information by accessing the GraphicStyleInfo from GraphicModel. You can get the graphic cell style from the GraphicModel by passing the row and column index. Then by using that style you can set the cell type, cell values and other customization options for the Graphic cell, as shown in the following code sample.

{% tabs %}
{% highlight c# %}
Expand All @@ -693,6 +693,6 @@ style.CellValue = bi;
{% endhighlight %}
{% endtabs %}

![Image Graphic Cell in WPF GridControl](Celllayout_images/graphic_cell_with_image.png)
![Image Graphic Cell](Celllayout_images/graphic_cell_with_image.png)

If you do not set the offset value in the GraphicCellSpanInfo object, the control inside the graphic cells will be loaded in the starting position of the row and column index. By setting the offset value in the GraphicCellSpanInfo you can place the control anywhere in the cell.
Loading