diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/cell-range.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/cell-range.md index b3b91ff2e7..05ec4ec143 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/cell-range.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/cell-range.md @@ -1,28 +1,27 @@ --- layout: post -title: Cell range in EJ2 Javascript Spreadsheet control | Syncfusion -description: Learn here all about Cell range in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. +title: Cell range in EJ2 JavaScript Spreadsheet control | Syncfusion +description: Learn here all about Cell range in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Cell range +control: Cell range documentation: ug --- -# Cell range in EJ2 Javascript Spreadsheet control +# Cell range in EJ2 JavaScript Spreadsheet control -A group of cells in a sheet is known as cell range. +A group of cells in a sheet is known as a cell range. ## Wrap text -Wrap text allows you to display large content as multiple lines in a single cell. By default, the wrap text support is enabled. Use the [`allowWrap`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowwrap) property to enable or disable the wrap text support in spreadsheet. +Wrap text allows you to display large content as multiple lines in a single cell. By default, wrap text support is enabled. Use the [`allowWrap`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowwrap) property to enable or disable wrap text support in the Spreadsheet. -Wrap text can be applied or removed to a cell or range of cells in the following ways, +You can apply wrap text to or remove it from a cell or range of cells in one of the following ways: -* Using the `wrap` property in `cell`, you can enable or disable wrap text to a cell at initial load. -* Select or deselect wrap button from ribbon toolbar to apply or remove the wrap text to the selected range. +* Using the `wrap` property in `cell`, you can enable or disable wrap text on a cell at initial load. +* Select or deselect the wrap button from the ribbon toolbar to apply wrap text to or remove it from the selected range. +* Using the [`wrap`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#wrap) method, you can apply or remove wrap text once the component is loaded. -* Using the [`wrap`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#wrap) method, you can apply or remove the wrap text once the component is loaded. - -The following code example shows the wrap text functionality in spreadsheet. +The following code example shows the wrap text functionality in the Spreadsheet. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -44,15 +43,15 @@ The following features have some limitations in wrap text: ## Merge cells -Merge cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, top-left most cell data will be the data for the merged cell. By default, the merge cells option is enabled. Use [`allowMerge`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowmerge) property to enable or disable the merge cells option in spreadsheet. +Merging cells allows users to span two or more cells in the same row or column into a single cell. When cells with multiple values are merged, the top-leftmost cell data becomes the data for the merged cell. By default, the merge cells option is enabled. Use the [`allowMerge`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowmerge) property to enable or disable the merge cells option in the Spreadsheet. -You can merge the range of cells in the following ways, +You can merge a range of cells in the following ways: -* Set the `rowSpan` and `colSpan` property in `cell` to merge the number of cells at initial load. -* Select the range of cells and apply merge by selecting the desired option from ribbon toolbar. -* Use [`merge`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#merge) method to merge the range of cells, once the component is loaded. +* Set the `rowSpan` and `colSpan` properties in `cell` to merge a specified number of cells at initial load. +* Select the range of cells and apply merge by selecting the desired option from the ribbon toolbar. +* Use the [`merge`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#merge) method to merge the range of cells once the component is loaded. -The available merge options in spreadsheet are, +The available merge options in spreadsheet are: | Type | Action | |-------|---------| @@ -61,7 +60,7 @@ The available merge options in spreadsheet are, | Merge Vertically | Combines cells in a range as column-wise. | | UnMerge | Splits the merged cells into multiple cells. | -The following code example shows the merge cells operation in spreadsheet. +The following code example shows the merge cells operation in the Spreadsheet. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -76,31 +75,31 @@ The following code example shows the merge cells operation in spreadsheet. ### Limitations of Merge -The following features have some limitations in Merge: +The following features have limitations in Merge: * Merge with filter. * Merge with wrap text. ## Data Validation -Data Validation is used to restrict the user from entering the invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowdatavalidation) property to enable or disable data validation. - -> * The default value for `allowDataValidation` property is `true`. +Data Validation is used to restrict the user from entering invalid data. You can use the [`allowDataValidation`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowdatavalidation) property to enable or disable data validation. + +> * The default value for the `allowDataValidation` property is `true`. ### Apply Validation You can apply data validation to restrict the type of data or the values that users enter into a cell. -You can apply data validation by using one of the following ways, +You can apply data validation in using one of the following ways: * Select the Data tab in the Ribbon toolbar, and then choose the Data Validation item. * Use the [`addDataValidation()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#adddatavalidation) method programmatically. ### Clear Validation -Clear validation feature is used to remove data validations from the specified ranges or the whole worksheet. +The clear validation feature is used to remove data validations from the specified ranges or the whole worksheet. -You can clear data validation rule by one of the following ways, +You can clear a data validation rule in one of the following ways: * Select the Data tab in the Ribbon toolbar, and then choose the Clear Validation item. * Use the [`removeDataValidation()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#removedatavalidation) method programmatically. @@ -109,7 +108,7 @@ You can clear data validation rule by one of the following ways, Highlight invalid data feature is used to highlight the previously entered invalid values. -You can highlight an invalid data by using one of the following ways, +You can highlight invalid data in one of the following ways: * Select the Data tab in the Ribbon toolbar, and then choose the Highlight Invalid Data item. * Use the [`addInvalidHighlight()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#addinvalidhighlight) method programmatically. @@ -118,7 +117,7 @@ You can highlight an invalid data by using one of the following ways, Clear highlight feature is used to remove the highlight from invalid cells. -You can clear the highlighted invalid data by using the following ways, +You can clear the highlighted invalid data in the following ways: * Select the Data tab in the Ribbon toolbar, and then choose the Clear Highlight item. * Use the [`removeInvalidHighlight()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#removeinvalidhighlight) method programmatically. @@ -139,7 +138,7 @@ The Spreadsheet supports custom data validation, allowing users to define their With custom validation, you can enforce rules using logical expressions or formulas, ensuring that only valid data is entered into the Spreadsheet. -For example, consider a scenario where you want to ensure that a cell contains a number between 10 and 100. To achieve this, define a validation rule using a formula that checks if the entered value is greater than 10 and less than 100. The formula for this validation is =AND(A1>10, A1<100), where A1 refers to the cell being validated. +For example, consider a scenario where you want to ensure that a cell contains a number between 10 and 100. To achieve this, define a validation rule using a formula that checks if the entered value is greater than 10 and less than 100. The formula for this validation is `=AND(A1>10, A1<100)`, where `A1` refers to the cell being validated. When this rule is applied, the Spreadsheet evaluates the entered value against the formula. If a user enters a value outside the specified range, an alert notifies them of the invalid input. This helps users correct errors efficiently and ensures that only desired values are accepted. @@ -172,64 +171,63 @@ The following features have some limitations in Data Validation: ## Auto Fill -Auto Fill is used to fill the cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter the repeated data manually. You can use `allowAutoFill` property to enable/disable the auto fill support. You can also use `showFillOptions` property to enable/disable the fill option and `fillType` property to change the default auto fill option which is available in `autoFillSettings`. +Auto Fill is used to fill cells with data based on adjacent cells. It also follows a pattern from adjacent cells if available. There is no need to enter repeated data manually. You can use the [`allowAutoFill`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#allowautofill) property to enable/disable auto fill support. You can also use the [`showFillOptions`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/autoFillSettings/#showfilloptions) property to enable/disable the fill options and the [`fillType`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/autoFillSettings/#filltype) property to change the default auto fill option, both of which are available in [`autoFillSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#autofillsettings). -You can do this by one of the following ways, +You can do this in one of the following ways: -* Using “AutoFillOptions” menu which is open, while drag and drop the cell using fill handle element. -* Use the autoFill() method programmatically. +* Using the AutoFillOptions menu, which opens when you drag the fill handle of a cell. +* Use the [`autoFill()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#autofill) method programmatically. -The available parameters in `autoFill()` method are, +The available parameters in the `autoFill()` method are: | Parameter | Type | Description | |-----|------|----| | fillRange | `string` | Specifies the fill range. | | dataRange | `string` | Specifies the data range. | -| direction | `AutoFillDirection` | Specifies the direction("Up","Right","Down","Left")to be filled. | -| fillType | `AutoFillType` | Specifies the fill type("CopyCells","FillSeries","FillFormattingOnly","FillWithoutFormatting") for autofill action. | +| direction | `AutoFillDirection` | Specifies the direction (`Up`, `Right`, `Down`, `Left`) to be filled. | +| fillType | `AutoFillType` | Specifies the fill type (`CopyCells`, `FillSeries`, `FillFormattingOnly`, `FillWithoutFormatting`) for the auto fill action. | + -In Auto Fill we have following options, +In Auto Fill, we have the following options: * Copy Cells * Fill Series * Fill Formatting Only * Fill Without Formatting ->* The default auto fill option is “FillSeries” which can be referred from `fillType` property. +>* The default auto fill option is `FillSeries` which can be referred from `fillType` property. ### Copy Cells -To copy the selected cell content to the adjacent cells. You can do this by one of the following ways, +To copy the selected cell content to adjacent cells, you can do this in one of the following ways: + +* Use the fill handle to select the adjacent cell range and select the `Copy Cells` option in the AutoFillOptions menu to fill the adjacent cells. +* Use `CopyCells` as the fill type in the `autoFill` method to fill the adjacent cells. -* Using fill handle to select the adjacent cell range and “Copy Cells” option in “AutoFillOptions” menu to fill the adjacent cells. -* Using “CopyCells” as fill type in `autoFill` method to fill the adjacent cells. ### Fill Series -To fill the series of numbers, characters, or dates based on selected cell content to the adjacent cells with their formats. +To fill a series of numbers, characters, or dates based on the selected cell content to the adjacent cells with their formats, you can do this in one of the following ways: -You can do this by one of the following ways, +* Use the fill handle to select the adjacent cell range and select the `Fill Series` option in the AutoFillOptions menu to fill the adjacent cells. +* Use `FillSeries` as the fill type in the `autoFill` method to fill the adjacent cells. -* Using fill handle to select the adjacent cell range and “Fill Series” option in “AutoFillOptions” menu to fill the adjacent cells. -* Using “FillSeries” as fill type in `autoFill` method to fill the adjacent cells. ### Fill Formatting Only -To fill the cell style and number formatting based on the selected cell content to the adjacent cells without their content. +To fill the cell style and number formatting based on the selected cell content to the adjacent cells without their content, you can do this in one of the following ways: -You can do this by one of the following ways, +* Use the fill handle to select the adjacent cell range and select the `Fill Formatting Only` option in the AutoFillOptions menu to fill the adjacent cells. +* Use `FillFormattingOnly` as the fill type in the `autoFill` method to fill the adjacent cells. -* Using fill handle to select the adjacent cell range and “Fill Formatting Only” option in “AutoFillOptions” menu to fill the adjacent cells. -* Using “FillFormattingOnly” as fill type in `autoFill` method to fill the adjacent cells. ### Fill Without Formatting -To fill series of numbers, characters, or dates based on the selected cells to the adjacent cells without their formats. +To fill a series of numbers, characters, or dates based on the selected cells to the adjacent cells without their formats, you can do this in one of the following ways: -You can do this by one of the following ways, +* Use the fill handle to select the adjacent cell range and select the `Fill Without Formatting` option in the AutoFillOptions menu to fill the adjacent cells. +* Use `FillWithoutFormatting` as the fill type in the `autoFill` method to fill the adjacent cells. -* Using fill handle to select the adjacent cell range and “Fill Without Formatting” option in “AutoFillOptions” menu to fill the adjacent cells. -* Using “FillWithoutFormatting” as fill type in `autoFill` method to fill the adjacent cells. In the following sample, you can enable/disable the fill option on the button click event by using the `showFillOptions` property in `autoFillSettings`. @@ -257,12 +255,12 @@ Clear feature helps you to clear the cell contents (formulas and data), formats ### Apply Clear Feature -You can apply clear feature by using one of the following ways, +You can apply the clear feature in one of the following ways: + +* Select the clear icon in the ribbon toolbar under the Home tab. +* Use the [`clear()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#clear) method to clear the values. -* Select the clear icon in the Ribbon toolbar under the Home Tab. -* Using the [`clear()`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#clear) method to clear the values. - -Clear has the following types in the spreadsheet, +Clear has the following types in the Spreadsheet: | Options | Uses | |-----|------| diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/data-binding.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/data-binding.md index 0f7e5d0385..55f68c308d 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/data-binding.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/data-binding.md @@ -3,15 +3,15 @@ layout: post title: Data binding in EJ2 Javascript Spreadsheet control | Syncfusion description: Learn here all about Data binding in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Data binding +control: Data binding documentation: ug --- # Data binding in EJ2 Javascript Spreadsheet control -The Spreadsheet uses [`DataManager`](https://helpej2.syncfusion.com/javascript/documentation/data/), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [`DataManager`](https://helpej2.syncfusion.com/javascript/documentation/data/) or JavaScript object array collection. +The Spreadsheet uses [`DataManager`](https://ej2.syncfusion.com/javascript/documentation/data/), which supports both RESTful JSON data services and local JavaScript object array binding to a range. The `dataSource` property can be assigned either with the instance of [`DataManager`](https://ej2.syncfusion.com/javascript/documentation/data/) or JavaScript object array collection. -> To bind data to a cell, use `cell data binding` support. +> To bind data to a cell, use the [cell data binding](#cell-data-binding) support. ## Local data @@ -34,7 +34,7 @@ Refer to the following code example for local data binding. ### Customizing column data mapping -By default, when a data source is bound to a sheet, columns are auto-assigned from the data source fields sequentially. This means that the first field in the data source is assigned to Column A, the second to Column B, and so on, sequentially. However, now you can customize the column assignments by specifying the appropriate field names in the desired order using the [fieldsOrder](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/rangeModel/#fieldsorder) property. +By default, when a data source is bound to a sheet, columns are auto-assigned from the data source fields sequentially. This means that the first field in the data source is assigned to Column A, the second to Column B, and so on, sequentially. You can customize the column assignments by specifying the appropriate field names in the desired order using the [fieldsOrder](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/rangeModel/#fieldsorder) property. > You can customize the mapping of column data only in the local data binding support. @@ -72,7 +72,7 @@ Refer to the following code example for remote data binding. ### Binding with OData services -`OData` is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service. +`OData` is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Configure the `DataManager` with the `ODataAdaptor` and the service endpoint `url`. Refer to the following code example for remote data binding using an OData service. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -87,7 +87,7 @@ Refer to the following code example for remote data binding. ### Web API -You can use WebApiAdaptor to bind spreadsheet with Web API created using OData endpoint. +You can use WebApiAdaptor to bind the spreadsheet with a Web API created using an OData endpoint. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -102,8 +102,7 @@ You can use WebApiAdaptor to bind spreadsheet with Web API created using OData e ## Cell data binding -The Spreadsheet control can bind the data to individual cell in a sheet . To achive this you can use the -`value` property. +The Spreadsheet control can bind data to individual cells in a sheet. To achieve this, set the `value` property on the specific cell object inside the `cells` collection of a `row` within the sheet's `rows` definition. Each cell entry accepts a `value` field that holds the bound data. Refer to the following code example for cell data binding. @@ -118,23 +117,23 @@ Refer to the following code example for cell data binding. {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es5/data-binding-cs5" %} -> The cell data binding also supports formula, style, number format, and more. +> The cell data binding also supports `formula`, `style`, `numberFormat`, `format`, `hyperlink`, `validation`, and `lock` properties on the cell object. -## Dynamic data binding and Datasource change event +## Dynamic data binding and dataSource change event -You can dynamically change the datasource of the spreadsheet by changing the `dataSource` property of the `range` object of the `sheet`. The `dataSourceChanged` event handler will be triggered when editing, inserting, and deleting a row in the datasource range. This event will be triggered with a parameter named `action` which indicates the `edit`, `add` and `delete` actions for the respective ones. +You can dynamically change the data source of the spreadsheet by changing the `dataSource` property of the `range` object of the `sheet`. The `dataSourceChanged` event handler will be triggered when editing, inserting, and deleting a row in the data source range. This event will be triggered with a parameter named `action` which indicates the `edit`, `add`, and `delete` actions for the respective action. The following table defines the arguments of the `dataSourceChanged` event. | Property | Type | Description | |-----|-----|-------| -| action | string | Indicates the type of action such as `edit`, `add`, and `delete` performed in the datasource range. | -| data | object[] | Modified data for `edit` action; New data for `add` action; Deleted data for `delete` action. | -| rangeIndex | number | Specifies the range index of the datasource. | -| sheetIndex | number | Specifies the sheet index of the datasource. | +| action | string | Indicates the type of action such as `edit`, `add`, and `delete` performed in the data source range. | +| data | object[] | Modified data for `edit` action; new data for `add` action; deleted data for `delete` action. | +| rangeIndex | number | Specifies the range index of the data source. | +| sheetIndex | number | Specifies the sheet index of the data source. | -> For `add` action, the value for all the fields will be `null` in the data. In the case that you do not want the primary key field to be null which needs to be updated in the backend service, you can use `edit` action after updating the primary key field to update in the backend service.

-> For inserting a row at the end of the datasource range, you should insert a row below at the end of the range to trigger the `dataSourceChanged` event with action `add`. +> For `add` action, the value for all the fields will be `null` in the data. If you do not want the primary key field to be null, which needs to be updated in the backend service, you can use the `edit` action after updating the primary key field to update it in the backend service.

+> For inserting a row at the end of the data source range, you should insert a row immediately below the end of the range to trigger the `dataSourceChanged` event with action `add`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -171,4 +170,3 @@ The following code example demonstrates how to dynamically update data using the * [Filtering](./filter) * [Sorting](./sort) * [Hyperlink](./link) -* [`Collaborative Editing`](use-cases/collaborative-editing) diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md index d57aa6f039..1516ee2f6a 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/docker-deployment.md @@ -3,7 +3,7 @@ layout: post title: Docker image deployment in EJ2 JavaScript Spreadsheet | Syncfusion description: Learn here all about Docker image deployment in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Docker deployment +control: Docker deployment documentation: ug --- @@ -13,16 +13,17 @@ The [**Syncfusion® Spreadsheet (also known This Docker image is the pre-defined Docker container for Syncfusion's® Spreadsheet back-end functionalities. This server-side Web API project targets ASP.NET Core 8.0. -You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker). +You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionality, create your own Dockerfile by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker). The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), and [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) platforms. ## Prerequisites -Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment: +You must have [Docker](https://www.docker.com/products/container-runtime/#/download) installed in your environment. The minimum supported versions are Docker Engine 20.10 or later and Docker Compose v2.0 or later. -* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). -* On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/). +* On Windows, install [Docker Desktop for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows). +* On macOS, install [Docker Desktop for Mac](https://docs.docker.com/desktop/install/mac-install/). +* On Linux, follow the [Docker Engine install](https://docs.docker.com/engine/install/) and [Docker Compose install](https://docs.docker.com/compose/install/) guides. ## How to deploy the Spreadsheet Docker Image @@ -35,8 +36,6 @@ docker pull syncfusion/spreadsheet-server **Step 2:** Create the `docker-compose.yml` file with the following code in your file system. ```yaml -version: '3.4' - services: spreadsheet-server: image: syncfusion/spreadsheet-server:latest @@ -73,7 +72,6 @@ Now the Spreadsheet server Docker instance runs on localhost with the provided p - @@ -116,11 +114,11 @@ Now the Spreadsheet server Docker instance runs on localhost with the provided p ## How to configure different cultures using a Docker compose file -By default, the Spreadsheet Docker container is generated in the `en_US` culture. You can configure different cultures using the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are replaced in the Docker file to set the specified culture for the Spreadsheet server. +By default, the Spreadsheet Docker container runs in the `en_US` culture. You can configure a different culture for the Spreadsheet server by setting the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are applied at container startup to set the locale of the .NET process inside the container. -```yaml -version: '3.4' +> Common supported values include `en_US.UTF-8`, `de_DE.UTF-8`, `fr_FR.UTF-8`, `es_ES.UTF-8`, `ja_JP.UTF-8`, and `zh_CN.UTF-8`. The locale must be available inside the base image; otherwise, the server falls back to the default `en_US`. +```yaml services: spreadsheet-server: image: syncfusion/spreadsheet-server:latest diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md index 33385bf5f8..5c2e799832 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/open-save.md @@ -3,21 +3,21 @@ layout: post title: Open save in EJ2 JavaScript Spreadsheet control | Syncfusion description: Learn here all about Open save in Syncfusion EJ2 JavaScript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Open save +control: Open save documentation: ug --- # Open save in EJ2 JavaScript Spreadsheet control -The native data format for Spreadsheet is `JSON`. When you open an excel file, it needs to be read and converted to client side Spreadsheet model. The converted client side Spreadsheet model is sent as JSON which is used to render Spreadsheet. Similarly, when you save the Spreadsheet, the client Spreadsheet model is sent to the server as JSON for processing and saved as Excel file formats. [`Server configuration`](./open-save#server-configuration) is used for this process. +The native data format for the Spreadsheet is `JSON`. When you open an Excel file, it needs to be read and converted to a client-side Spreadsheet model. The converted client-side Spreadsheet model is sent as JSON, which is used to render the Spreadsheet. Similarly, when you save the Spreadsheet, the client Spreadsheet model is sent to the server as JSON for processing and saved as an Excel file. [`Server configuration`](./open-save#server-configuration) is used for this process. ## Open -The spreadsheet control opens an Excel document with its data, style, format, and more. To enable this feature, set [`allowOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowopen) as `true` and assign service url to the [`openUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openurl) property. +The Spreadsheet control opens an Excel document with its data, style, format, and more. To enable this feature, set [`allowOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowopen) to `true` and assign the service URL to the [`openUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openurl) property. **User Interface**: -In user interface you can open an Excel document by clicking `File > Open` menu item in ribbon. +In the user interface, you can open an Excel document by clicking the `File > Open` menu item in the Ribbon. The following sample shows the `Open` option by using the [`openUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openurl) property in the Spreadsheet control. You can also use the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforeopen) event to trigger before opening an Excel file. @@ -32,20 +32,20 @@ The following sample shows the `Open` option by using the [`openUrl`](https://ej {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es5/open-save-cs1" %} -Please find the below table for the beforeOpen event arguments. +The following table lists the `beforeOpen` event arguments. | **Parameter** | **Type** | **Description** | | ----- | ----- | ----- | -| file | FileList or string or File | To get the file stream. `FileList` - contains length and item index.
`File` - specifies the file lastModified and file name. | -| cancel | boolean | To prevent the open operation. | -| requestData | object | To provide the Form data. | +| file | FileList or string or File | Provides access to the file stream. `FileList` contains the length and item index.
`File` specifies the file's `lastModified` value and file name. | +| cancel | boolean | When set to `true`, prevents the open operation. | +| requestData | object | Provides access to the form data sent with the open request. | > * Use `Ctrl + O` keyboard shortcut to open Excel documents. > * The default value of the [allowOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowopen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowopen) property in previous code snippet. ### Open an excel file using a file uploader -If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/javascript/documentation/api/uploader#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) method to see the appropriate output. +When you browse your local machine to select and upload an Excel document using the file uploader, you receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/javascript/documentation/api/uploader#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) method to see the appropriate output. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -60,7 +60,7 @@ If you explore your machine to select and upload an excel document using the fil ### Open an external URL excel file while initial load -You can achieve to access the remote excel file by using the [`created`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#created) event. In this event you can fetch the excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) this file by using Spreadsheet component open method. +You can access a remote Excel file by using the [`created`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#created) event. In this event, you can fetch the Excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) this file by using the Spreadsheet component's `open` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -94,6 +94,8 @@ Please find the code to fetch the blob data and load it into the Spreadsheet con By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#openfromjson) method to load that `JSON data` into the Spreadsheet control. +> Before running the server code, create a `Files` folder under the server's content root path and place a `Sample.xlsx` file in it. The folder must be readable by the application; on Linux/macOS deployments, ensure the appropriate read permissions are set. + **Server Endpoint**: ```csharp @@ -130,7 +132,7 @@ By default, the Spreadsheet control provides an option to browse files from the }, body: JSON.stringify({ FileName: 'Sample' }), }) - .then(function (response){ response.json()}) + .then(function (response){ return response.json(); }) .then(function(data) { // Load the JSON data into spreadsheet. spreadsheet.openFromJson({ file: data }); @@ -234,7 +236,9 @@ public class OpenOptions In the JavaScript Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#open) method in the spreadsheet. -The following code example shows how to save the spreadsheet data as base64 string. +The following code example shows how to open an Excel file from a base64 string. + +> The shared `base-64-string` sample below demonstrates both flows: saving spreadsheet data as a base64 string (in the `saveComplete` event) and opening a file from a saved base64 string (via the `import` button click handler). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -249,7 +253,7 @@ The following code example shows how to save the spreadsheet data as base64 stri ### Open excel file into a read-only mode -You can open excel file into a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#lockcells) methods. +You can open an Excel file in a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#opencomplete) event. In this event, you must protect all the sheets and lock their used range cells by using the [`protectSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#lockcells) methods. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -337,6 +341,14 @@ When opening large Excel files with many features and data, the server response You can enable this feature by setting the [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings#chunksize) property in the [`openSettings`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#opensettings) object. Set the [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings#chunksize) to a value greater than 0 (in bytes). The [`chunkSize`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/openSettings#chunksize) defines how large each chunk will be. Make sure your server supports chunked responses to use this feature effectively. +In addition to `chunkSize`, the `openSettings` object exposes the following retry-related properties for reliable chunk transfer: + +| Property | Type | Description | +| ----- | ----- | ----- | +| chunkSize | number | Size (in bytes) of each chunk for the server response when opening a document. Must be greater than 0 to enable chunked transfer. | +| retryCount | number | Number of retry attempts for a failed chunk request. Useful for handling temporary network or server disruptions. | +| retryAfterDelay | number | Delay (in milliseconds) before retrying a failed chunk request. | + > This feature reduces memory usage on both the server and client, ensuring that resources are managed efficiently during data transmission. By sending smaller parts of data, it prevents connection issues that could occur with large payloads, making the transmission process more reliable. Additionally, it allows large Excel files to be loaded smoothly into the spreadsheet, providing a seamless user experience even with extensive data. The following code example demonstrates the client-side and server-side configuration required for handling chunk-based responses when opening an Excel file. @@ -391,7 +403,7 @@ The [attachment](https://www.syncfusion.com/downloads/support/directtrac/general ### Add custom header during open -You can add your own custom header to the open action in the Spreadsheet. For processing the data, it has to be sent from server to client side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforeopen) event, the custom header can be added to the request during open action. +You can add your own custom header to the open action in the Spreadsheet. For processing the data, it has to be sent from the server to the client side, and adding a custom header can provide privacy to the data with the help of an Authorization Token. Through the [`beforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforeopen) event, the custom header can be added to the request during the open action. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -434,11 +446,11 @@ The following list of Excel file formats are supported in Spreadsheet: ## Save -The Spreadsheet control saves its data, style, format, and more as Excel file document. To enable this feature, set [`allowSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowsave) as `true` and assign service url to the [`saveUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveurl) property. +The Spreadsheet control saves its data, style, format, and more as an Excel file. To enable this feature, set [`allowSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#allowsave) to `true` and assign the service URL to the [`saveUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveurl) property. **User Interface**: -In user interface, you can save Spreadsheet data as Excel document by clicking `File > Save As` menu item in ribbon. +In the user interface, you can save Spreadsheet data as an Excel document by clicking the `File > Save As` menu item in the Ribbon. The following sample shows the `Save` option by using the [`saveUrl`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveurl) property in the Spreadsheet control. You can also use the [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event to trigger before saving the Spreadsheet as an Excel file. @@ -453,17 +465,17 @@ The following sample shows the `Save` option by using the [`saveUrl`](https://ej {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es5/open-save-cs5" %} -Please find the below table for the beforeSave event arguments. +The following table lists the `beforeSave` event arguments. | **Parameter** | **Type** | **Description** | | ----- | ----- | ----- | -| url | string | Specifies the save url. | +| url | string | Specifies the save URL. | | fileName | string | Specifies the file name. | -| saveType | SaveType | Specifies the saveType like Xlsx, Xls, Csv and Pdf. | -| customParams | object | Passing the custom parameters from client to server while performing save operation. | -| isFullPost | boolean | It sends the form data from client to server, when set to true. It fetches the data from client to server and returns the data from server to client, when set to false. | -| needBlobData | boolean | You can get the blob data if set to true. | -| cancel | boolean | To prevent the save operations. | +| saveType | SaveType | Specifies the save type (`Xlsx`, `Xls`, `Csv`, or `Pdf`). | +| customParams | object | Passes custom parameters from the client to the server during the save operation. | +| isFullPost | boolean | When set to `true`, sends form data from the client to the server (full postback). When set to `false`, uses fetch to send data from the client to the server and return the result from the server to the client. | +| needBlobData | boolean | When set to `true`, the spreadsheet data is returned as a blob in the `saveComplete` event. | +| cancel | boolean | When set to `true`, prevents the save operation. | > * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file. @@ -472,9 +484,9 @@ Please find the below table for the beforeSave event arguments. ### Save an excel file as blob data -By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#savecomplete) event. You can then post the blob data to the server endpoint for saving. +By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set the `needBlobData` property to **true** and the `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#savecomplete) event. You can then post the blob data to the server endpoint for saving. -Please find below the code to retrieve blob data from the Spreadsheet control below. +The following code retrieves blob data from the Spreadsheet control. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -491,6 +503,8 @@ Please find below the code to retrieve blob data from the Spreadsheet control be By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. +> Before running the server code, create a writable `Files` folder under the server's content root path. The application pool/worker process account must have write permission to this folder so the saved `.xlsx` file can be committed successfully. + **Client Side**: ```js @@ -573,7 +587,7 @@ var spreadsheet = new ej.spreadsheet.Spreadsheet({ sheets: [ ], saveUrl:'https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save', - beforeSave: fucntion (eventArgs) { + beforeSave: function (eventArgs) { if (!saveInitiated) { eventArgs.cancel = true; // Preventing default save action. saveInitiated = true; // The "beforeSave" event will trigger for "saveAsJson" action also, so we are preventing for the "saveAsJson". @@ -644,7 +658,7 @@ public string Save([FromForm]SaveSettings saveSettings) In the Spreadsheet control, there is currently no direct option to save data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`. -> You can get the Spreadsheet data as blob in the [saveComplete](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#savecomplete) event when you set the `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://helpej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event. +> You can get the Spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#savecomplete) event when you set the `needBlobData` to **true** and `isFullPost` to **false** in the [beforeSave](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event. The following code example shows how to save the spreadsheet data as base64 string. @@ -742,10 +756,10 @@ You can add your own custom header to the save action in the Spreadsheet. For pr By default, the PDF document is created in **Portrait** orientation. You can change the orientation of the PDF document by using the `args.pdfLayoutSettings.orientation` argument settings in the [`beforeSave`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#beforesave) event. -The possible values are: +The possible values for the `pdfLayoutSettings` object are: -* **Portrait** - Used to display content in a vertical layout. -* **Landscape** - Used to display content in a horizontal layout. +* **orientation** - Specifies the page orientation. Accepted values are `Portrait` (vertical layout) and `Landscape` (horizontal layout). +* **fitSheetOnOnePage** - If `true`, scales the sheet content to fit on a single PDF page. If `false`, the content flows across multiple pages based on page size. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -769,7 +783,17 @@ The following list of Excel file formats are supported in Spreadsheet: ### Methods -To save the Spreadsheet document as an `xlsx, xls, csv, or pdf` file, by using [`save`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#save) method should be called with the `url`, `fileName` and `saveType` as parameters. The following code example shows to save the spreadsheet file as an `xlsx, xls, csv, or pdf` in the button click event. +To save the Spreadsheet document as an `xlsx`, `xls`, `csv`, or `pdf` file, the [`save`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#save) method should be called with the `url`, `fileName`, and `saveType` as parameters. + +> **Method signature:** `save(options: { url: string, fileName: string, saveType: SaveType }): void` +> +> - `url` — The server-side save endpoint URL that processes and returns the file. +> - `fileName` — The name of the downloaded file (without extension). +> - `saveType` — The output format: `Xlsx`, `Xls`, `Csv`, or `Pdf`. +> +> The method returns `void`; the file is downloaded to the client. For programmatic access to the saved data, use [`saveAsJson`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet#saveasjson) instead. + +The following code example shows how to save the spreadsheet file as an `xlsx`, `xls`, `csv`, or `pdf` in the button click event. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -817,7 +841,7 @@ Import and export are processed in `server-side` using Spreadsheet server librar ## Server Dependencies -Open and save helper functions are shipped in the Syncfusion.EJ2.Spreadsheet package, which is available in Essential Studio® and [`nuget.org`](https://www.nuget.org/). Following list of dependencies required for Spreadsheet open and save operations. +Open and save helper functions are shipped in the Syncfusion.EJ2.Spreadsheet package, which is available in Essential Studio® and [`nuget.org`](https://www.nuget.org/). The following list of dependencies is required for Spreadsheet open and save operations. * Syncfusion.EJ2 * Syncfusion.EJ2.Spreadsheet diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/worksheet.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/worksheet.md index f345ac1ea6..4ca340a3b1 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/worksheet.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/worksheet.md @@ -3,22 +3,25 @@ layout: post title: Worksheet in EJ2 Javascript Spreadsheet control | Syncfusion description: Learn here all about Worksheet in Syncfusion EJ2 Javascript Spreadsheet control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Worksheet +control: Worksheet documentation: ug --- -# Worksheet in EJ2 Javascript Spreadsheet control +# Worksheet in EJ2 JavaScript Spreadsheet control -Worksheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. +A worksheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. + +> Before working with worksheet APIs, you must have a Spreadsheet control initialized in your application. For setup details, refer to the [getting started](https://ej2.syncfusion.com/javascript/documentation/spreadsheet/getting-started) documentation. ## Add sheet -You can dynamically add or insert a sheet by one of the following ways, -* Click the `Add Sheet` button in the sheet tab. This will add a new empty sheet next to current active sheet. -* Right-click on the sheet tab, and then select `Insert` option from the context menu to insert a new empty sheet before the current active sheet. -* Using [`insertSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at your desired index. +You can dynamically add or insert a sheet in one of the following ways: + +* Click the `Add Sheet` button in the sheet tab. This adds a new empty sheet next to the current active sheet. +* Right-click on the sheet tab, and then select the `Insert` option from the context menu to insert a new empty sheet before the current active sheet. +* Use the [`insertSheet`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#insertsheet) method to insert one or more sheets at your desired index. -The following code example shows the insert sheet operation in spreadsheet. +The following code example shows the insert sheet operation in the Spreadsheet. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -31,9 +34,9 @@ The following code example shows the insert sheet operation in spreadsheet. {% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es5/insert/sheet-cs1" %} -### Insert a sheet programmatically and make it active sheet +### Insert a sheet programmatically and make it the active sheet -A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using [insertSheet](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the [goTo](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#goto) method. +Using the [insertSheet](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at the desired index. You can then make the inserted sheet the active sheet by focusing on the start cell of that sheet using the [goTo](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#goto) method. The following code example shows how to insert a sheet programmatically and make it the active sheet. @@ -50,32 +53,36 @@ The following code example shows how to insert a sheet programmatically and make ## Delete sheet -The Spreadsheet has support for removing an existing worksheet. You can dynamically delete the existing sheet by the following way, +The Spreadsheet has support for removing an existing worksheet. You can dynamically delete a sheet in the following ways: -* Right-click on the sheet tab, and then select `Delete` option from context menu. -* Using [`delete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#delete ) method to delete the sheets. +* Right-click on the sheet tab, and then select the `Delete` option from the context menu. +* Use the [`delete`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/#delete) method to delete sheets programmatically. ## Rename sheet -You can dynamically rename an existing worksheet in the following way, +You can dynamically rename an existing worksheet in the following ways: -* Right-click on the sheet tab, and then select `Rename` option from the context menu. +* Right-click on the sheet tab, and then select the `Rename` option from the context menu. ## Headers -By default, the row and column headers are visible in worksheets. You can dynamically show or hide worksheet headers by using one of the following ways, +By default, the row and column headers are visible in worksheets. You can dynamically show or hide worksheet headers in one of the following ways: -* Switch to `View` tab, and then select `Hide Headers` option to hide both the row and column headers. -* Set `showHeaders` property in `sheets` as `true` or `false` to show or hide the headers at initial load. By default, the `showHeaders` property is enabled in each worksheet. +* Switch to the `View` tab, and then select the `Hide Headers` option to hide both the row and column headers. +* Set the [`showHeaders`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/sheetModel/#showheaders) property on a sheet in the `sheets` collection to `true` or `false` to show or hide the headers at initial load. By default, `showHeaders` is enabled in each worksheet. + +> To toggle headers at runtime, update the `showHeaders` property on the target sheet model and call `spreadsheet.dataBind()` to reflect the change. ## Gridlines -Gridlines act as a border like appearance of cells. They are used to distinguish cells on the worksheet. You can dynamically show or hide gridlines by using one of the following ways, +Gridlines appear as cell borders and are used to distinguish cells on the worksheet. You can dynamically show or hide gridlines in one of the following ways: + +* Switch to the `View` tab, and then select the `Hide Gridlines` option to hide the gridlines in the worksheet. +* Set the [`showGridLines`](https://ej2.syncfusion.com/javascript/documentation/api/spreadsheet/sheetModel/#showgridlines) property on a sheet in the `sheets` collection to `true` or `false` to show or hide the gridlines at initial load. By default, `showGridLines` is enabled in each worksheet. -* Switch to `View` tab, and then select `Hide Gridlines` option to hide the gridlines in worksheet. -* Set `showGridLines` property in `sheets` as `true` or `false` to show or hide the gridlines at initial load. By default, the `showGridLines` property is enabled in each worksheet. +> To toggle gridlines at runtime, update the `showGridLines` property on the target sheet model and call `spreadsheet.dataBind()` to reflect the change. -The following code example shows the headers and gridlines operation in spreadsheet. +The following code example demonstrates hiding both headers and gridlines on a single sheet at initial load. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -92,13 +99,13 @@ The following code example shows the headers and gridlines operation in spreadsh Hiding a worksheet can help prevent unauthorized or accidental changes to your file. -There are three visibility state as like Microsoft Excel, +There are three visibility states, similar to Microsoft Excel: | State | Description | |-------|---------| | `Visible` | You can see the worksheet once the component is loaded. | -| `Hidden` | This worksheet is not visible, but you can unhide by selecting the sheet from `List All Sheets` dropdown menu. | -| `VeryHidden` | This worksheet is not visible and cannot be unhidden. Changing the state property to `Visible` is the only way to view this sheet. | +| `Hidden` | This worksheet is not visible, but you can unhide it by selecting the sheet from the `List All Sheets` dropdown menu in the sheet tab area. | +| `VeryHidden` | This worksheet is not visible and cannot be unhidden. Setting the `state` property to `Visible` is the only way to view this sheet. | The following code example shows the three types of sheet visibility state.