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
20 changes: 12 additions & 8 deletions Document-Processing-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -5531,7 +5531,9 @@
<li><a href="/document-processing/excel/spreadsheet/asp-net-core/mobile-responsiveness">Mobile Responsiveness</a></li>
<li><a href="/document-processing/excel/spreadsheet/asp-net-core/feature-list">Features Availability</a>
</li>

<li>
<a href="/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html"> API Reference</a>
</li>
</ul>
</li>
<li>
Expand Down Expand Up @@ -5586,7 +5588,9 @@
<li><a href="/document-processing/excel/spreadsheet/asp-net-mvc/mobile-responsiveness">Mobile Responsiveness</a></li>
<li><a href="/document-processing/excel/spreadsheet/asp-net-mvc/feature-list">Features Availability</a>
</li>

<li>
<a href="/cr/aspnetmvc-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html"> API Reference</a>
</li>
</ul>
</li>
<li>
Expand Down Expand Up @@ -5643,7 +5647,7 @@
</ul>
</li>
<li><a href="/document-processing/excel/spreadsheet/angular/mobile-responsiveness">Mobile Responsiveness</a></li>

<li><a href="https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/">API Reference</a></li>
</ul>
</li>
<li>
Expand Down Expand Up @@ -5678,7 +5682,7 @@
<li><a href="/document-processing/excel/spreadsheet/blazor/performance-metrics">Performance Metrics</a></li>
<li><a href="/document-processing/excel/spreadsheet/blazor/accessibility">Accessibility</a></li>
<li><a href="/document-processing/excel/spreadsheet/blazor/events">Events</a></li>

<li><a href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html">API Reference</a></li>
</ul>
</li>
<li>
Expand Down Expand Up @@ -5852,7 +5856,7 @@
<li><a href="/document-processing/excel/spreadsheet/react/feature-list">Features Availability</a>
</li>
<li><a href="/document-processing/excel/spreadsheet/react/events">Events</a></li>

<li><a href="https://ej2.syncfusion.com/react/documentation/api/spreadsheet/">API Reference</a></li>
</ul>
</li>
<li>
Expand Down Expand Up @@ -5908,7 +5912,7 @@
</li>
<li><a href="/document-processing/excel/spreadsheet/vue/mobile-responsiveness">Mobile Responsiveness</a></li>
<li><a href="/document-processing/excel/spreadsheet/vue/feature-list">Features Availability</a></li>

<li><a href="https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/">API Reference</a></li>
</ul>
</li>
<li>
Expand Down Expand Up @@ -5963,7 +5967,7 @@
</ul>
</li>
<li><a href="/document-processing/excel/spreadsheet/javascript-es5/mobile-responsiveness">Mobile Responsiveness</a></li>

<li><a href="https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet">API Reference</a></li>
</ul>
</li>
<li>
Expand Down Expand Up @@ -6019,7 +6023,7 @@
</ul>
</li>
<li><a href="/document-processing/excel/spreadsheet/javascript-es6/mobile-responsiveness">Mobile Responsiveness</a></li>

<li><a href="https://ej2.syncfusion.com/documentation/api/spreadsheet">API Reference</a></li>
</ul>
</li>
<li>
Expand Down
24 changes: 12 additions & 12 deletions Document-Processing/Excel/Spreadsheet/Vue/editing.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,41 @@
layout: post
title: Editing in Vue Spreadsheet component | Syncfusion
description: Learn here all about Editing in Syncfusion Vue Spreadsheet component of Syncfusion Essential JS 2 and more.
control: Editing
control: Spreadsheet
platform: document-processing
documentation: ug
---

# Editing in Vue Spreadsheet component

You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowediting) property to enable or disable the editing feature.
You can edit the contents of a cell directly in the cell or by typing in the formula bar. By default, the editing feature is enabled in the spreadsheet. Use the [`allowEditing`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowediting) property to enable or disable the editing feature.

## Edit cell

You can start editing by one of the following ways,
You can start editing by one of the following ways:

* Double click a cell to start the edit mode.
* Double-click a cell to enter edit mode.
* Press `F2` key to edit the active cell.
* Use formula bar to perform editing.
* Use `BACKSPACE` or `SPACE` key to clear the cell content and start the edit mode.
* Using the [`startEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#startedit) method.
* Using the [`startEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#startedit) method.

## Save cell

If the cell is in editable state, you can save the edited cell by one of the following ways,
If a cell is in edit mode, you can save the edited cell by one of the following ways:

* Perform mouse click on any other cell rather than the current editing cell.
* Perform a mouse click on any other cell other than the currently editing cell.
* Press `Enter` or `Tab` keys to save the edited cell content.
* Using the [`endEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#endedit) method.
* Using the [`endEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#endedit) method.

## Cancel editing

To cancel the editing without saving the changes, you can use one of the following ways,
To cancel editing without saving the changes, you can use one of the following ways:

* Press `ESCAPE` key, this will remove the editable state and update the unchanged cell content.
* Using the [`closeEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#closeedit) method.
* Press `Escape` key to exit edit mode and restore the unchanged cell content.
* Using the [`closeEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#closeedit) method.

The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#closeedit) method in spreadsheet.
The following sample shows how to prevent the editing and cell save. Here `E` column prevent the editing by using cancel argument as true in [`cellEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#celledit) event. In `D` column, prevent saving the edited changes by using cancel argument as true in [`beforeCellSave`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#beforecellsave) and use [`closeEdit`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#closeedit) method in spreadsheet.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down
14 changes: 7 additions & 7 deletions Document-Processing/Excel/Spreadsheet/Vue/feature-list.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ platform: document-processing
documentation: ug
---

# Feature list in Vue Spreadsheet component
# Feature list in Vue Spreadsheet Component

The following table compares Excel functionality with the availability of EJ1 and EJ2 Spreadsheet features.

Expand All @@ -16,7 +16,7 @@ The following table compares Excel functionality with the availability of EJ1 an
| Ribbon | Yes | Yes | - |
| Formula bar | Yes | Yes | - |
| Sheet tab | Yes | Yes | - |
| Show / Hide gridlines and header | Yes | Yes | - |
| Show/Hide gridlines and header | Yes | Yes | - |
| Scrolling | Partially | Yes | - |
| Selection | Yes | Yes | - |
| Editing | Yes | Yes | - |
Expand All @@ -30,16 +30,16 @@ The following table compares Excel functionality with the availability of EJ1 an
| Sorting | Yes | Yes | - |
| Filtering | Yes | Yes | - |
| Hyperlink | Yes | Yes | - |
| Undo & redo | Yes | Yes | - |
| Undo/redo | Yes | Yes | - |
| Open and Save | Yes | Yes | - |
| Resize / Autofit | Yes | Yes | - |
| Resize/Autofit | Yes | Yes | - |
| Clipboard | Yes | Yes | - |
| Collaborative editing | No | Yes | - |
| Wrap text | Yes | Yes | - |
| Template | No | Yes | - |
| Merge cells | Yes | Yes | - |
| Show / Hide rows and columns | Yes | Yes | - |
| Sheet customizations | Yes | Partially | Move or copy sheet is not supported in EJ2 spreadsheet. |
| Show/Hide rows and columns | Yes | Yes | - |
| Sheet customizations | Yes | Partially | Move or copy sheet is not supported in EJ2 Spreadsheet. |
| Data Validation | Yes | Yes | - |
| Table | Yes | No | - |
| Chart | Yes | Yes | - |
Expand All @@ -52,7 +52,7 @@ The following table compares Excel functionality with the availability of EJ1 an
| Autofill | Yes | No | - |
| Auto Sum | Yes | Yes | - |
| Format painter | Yes | No | - |
| Cell Style | Yes | Partially | We can only customize the cell style in EJ2 Spreadsheet through API. |
| Cell Style | Yes | Partially | Cell style in EJ2 Spreadsheet can be customized only through the API. |
| Protection | Yes | Partially | Custom encryption is not supported in EJ2 Spreadsheet's protect workbook. |
| Find and replace | Yes | Yes | - |
| Drag and Drop | Yes | No | - |
Expand Down
32 changes: 16 additions & 16 deletions Document-Processing/Excel/Spreadsheet/Vue/filter.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Filter in Vue Spreadsheet component

Filtering helps you to view specific rows in the spreadsheet by hiding the other rows. You can use the [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowfiltering) property to enable or disable filtering functionality.
Filtering helps you to view specific rows in the spreadsheet by hiding the other rows. You can use the [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowfiltering) property to enable or disable filtering functionality.

> * The default value for `allowFiltering` property is `true`.

Expand All @@ -19,19 +19,19 @@ By default, the `Filter` module is injected internally into Spreadsheet to perfo

In the active sheet, select a range of cells to filter by value of the cell. The filtering can be done by any of the following ways:

* Select the filter item in the Ribbon toolbar.
* Right-click the sheet, select the filter item in the context menu.
* Use the [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#applyfilter) method programmatically.
* Select the `Filter` item in the Ribbon toolbar.
* Right-click the sheet and select the `Filter` item in the context menu.
* Use the [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#applyfilter) method programmatically.
* Use `Ctrl + Shift + L` keyboard shortcut to apply the filter.

> * Use `Alt + Up/Down` keyboard shortcut to open the filter dialog.

## Filter by criteria

The [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments.
The [`applyFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#applyfilter) method will apply the filter UI, based on the predicate and range given in the arguments.

> * The [`beforeFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#beforefilter) event will be triggered before filtering the specified range.
> * The [`filterComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#filtercomplete) event will be triggered after the filter action is completed successfully.
> * The [`beforeFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#beforefilter) event will be triggered before filtering the specified range.
> * The [`filterComplete`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#filtercomplete) event will be triggered after the filter action is completed successfully.

The following code example shows `filter` functionality in the Spreadsheet control.

Expand All @@ -54,33 +54,33 @@ To apply a filter for a cell value, right-click the cell and choose filter -> `F

After applying filter to a certain column, you may want to clear it to make all filtered rows visible again. It can be done in the following ways,

* Choose `Clear` option in ribbon toolbar under `Filter and Sort`. It clears the filters applied in the spreadsheet for all fields.
* Choose `Clear` in the Ribbon toolbar under `Filter and Sort`. This clears the filters applied in the spreadsheet for all fields.

* Use the [`clearFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the applied filters in spreadsheet for all fields.
* Use the [`clearFilter()`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#clearfilter) method programmatically to clear the applied filters in the spreadsheet for all fields.

## Clear filter on a field

After filtering, you can clear/reset the filter for a field alone. It can be done in the following ways,

* Click filter icon in the column’s header and then choose `Clear Filter` option from the filter dialog.
* You can right-click on a filtered column cell and choose `Clear Filter from <Column Name>.` option from the context menu.
* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#clearfilter) method programmatically, to clear the filter in a particular column.
* Right-click a filtered column cell and choose `Clear Filter from <Column Name>.` option from the context menu.
* Use the [`clearFilter(field)`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#clearfilter) method programmatically, to clear the filter in a particular column.

## Reapply filter

When you want to reapply the filter after some changes happened in the rows. It can be done in the following ways,
When you want to reapply the filter after changes have been made to the rows, It can be done in the following ways,

* You can choose `Reapply` option in ribbon toolbar under `Filter and Sort` to reapply the filtered columns again.
* You can right-click on a filtered cell and choose `Reapply` option from the context menu. It reapplies the filters again in the Spreadsheet for all the fields.
* Choose `Reapply` option in ribbon toolbar under `Filter and Sort` to reapply the filtered columns.
* Right-click a filtered cell and choose `Reapply` from the context menu. This reapplies the filters in the Spreadsheet for all fields.

## Known error validations

The following errors have been handled for filtering,
* *Out of range validation:* When the selected range is not a used range of the active sheet, it is considered as invalid and the out of range alert with the message `Select a cell or range inside the used range and try again` will be displayed. No filter will be performed if the range is invalid.
* *Out of range validation:* When the selected range is not within the used range of the active sheet, it is considered invalid and the out-of-range alert with the message `Select a cell or range inside the used range and try again` is displayed. No filter is performed if the range is invalid.

## Get data from filtered rows

Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object.
Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [`allowFiltering`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#allowfiltering) property and [`applyFilter`](https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object.

The following code example shows how to get the filtered rows.

Expand Down
Loading