You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit c669535
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: docs/angular_integration.md
+17-17Lines changed: 17 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,14 +18,14 @@ DHTMLX Spreadsheet is compatible with **Angular**. We have prepared code example
18
18
Before you start to create a new project, install [**Angular CLI**](https://angular.dev/tools/cli) and [**Node.js**](https://nodejs.org/en/).
19
19
:::
20
20
21
-
Create a new **my-angular-spreadsheet-app** project using Angular CLI. Run the following command for this purpose:
21
+
Create a new *my-angular-spreadsheet-app* project using Angular CLI. Run the following command:
22
22
23
23
~~~json
24
24
ng new my-angular-spreadsheet-app
25
25
~~~
26
26
27
27
:::note
28
-
If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
28
+
If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating a new Angular app.
29
29
:::
30
30
31
31
The command above installs all the necessary tools, so you don't need to run any additional commands.
@@ -45,25 +45,25 @@ yarn
45
45
yarn start
46
46
~~~
47
47
48
-
The app should run on a localhost (for instance `http://localhost:3000`).
48
+
The app should run on localhost (for instance `http://localhost:3000`).
49
49
50
50
## Creating Spreadsheet
51
51
52
-
Now you should get the DHTMLX Spreadsheet source code. First of all, stop the app and proceed with installing the Spreadsheet package.
52
+
Now you should get the DHTMLX Spreadsheet source code. First, stop the app and install the Spreadsheet package.
53
53
54
54
### Step 1. Package installation
55
55
56
-
Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only.
56
+
Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow the steps in the README file. Note that trial Spreadsheet is available for 30 days only.
57
57
58
58
### Step 2. Component creation
59
59
60
-
Now you need to create an Angular component, to add Spreadsheet into the application. Create the **spreadsheet** folder in the **src/app/** directory, add a new file into it and name it **spreadsheet.component.ts**. Then complete the steps described below.
60
+
Now you need to create an Angular component to add Spreadsheet into the application. Create the *spreadsheet* folder in the *src/app/* directory, add a new file into it and name it *spreadsheet.component.ts*. Then complete the steps described below.
61
61
62
62
#### Importing source files
63
63
64
64
Open the file and import Spreadsheet source files. Note that:
65
65
66
-
- if you use PRO version and install the Spreadsheet package from a local folder, the imported path looks like this:
66
+
- if you use the PRO version and install the Spreadsheet package from a local folder, the imported path looks like this:
To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the **spreadsheet.component.css** file in the **src/app/spreadsheet/** directory and specify important styles for Spreadsheet and its container:
114
+
To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the *spreadsheet.component.css* file in the *src/app/spreadsheet/* directory and specify important styles for Spreadsheet and its container:
115
115
116
116
~~~css title="spreadsheet.component.css"
117
117
/* import Spreadsheet styles */
@@ -133,7 +133,7 @@ body {
133
133
134
134
#### Loading data
135
135
136
-
To add data into Spreadsheet, you need to provide a data set. You can create the **data.ts** file in the **src/app/spreadsheet/** directory and add some data into it:
136
+
To add data into Spreadsheet, you need to provide a data set. You can create the *data.ts* file in the *src/app/spreadsheet/* directory and add some data into it:
137
137
138
138
~~~jsx title="data.ts"
139
139
exportfunctiongetData(): any {
@@ -178,7 +178,7 @@ export function getData(): any {
178
178
}
179
179
~~~
180
180
181
-
Then open the ***spreadsheet.component.ts*** file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below.
181
+
Then open the *spreadsheet.component.ts* file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below.
Now the Spreadsheet component is ready to use. When the element will be added to the page, it will initialize the Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties.
213
+
Now the Spreadsheet component is ready to use. When the element is added to the page, it initializes Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties.
214
214
215
215
#### Handling events
216
216
217
-
When a user makes some action in the Spreadsheet, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
217
+
When a user performs an action in Spreadsheet, the widget invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
218
218
219
-
Open the **spreadsheet.component.ts** file and complete the `ngOnInit()` method as in:
219
+
Open the *spreadsheet.component.ts* file and complete the `ngOnInit()` method as in:
220
220
221
221
~~~jsx {5-8} title="spreadsheet.component.ts"
222
222
// ...
@@ -236,7 +236,7 @@ ngOnDestroy() {
236
236
237
237
### Step 3. Adding Spreadsheet into the app
238
238
239
-
To add the ***SpreadsheetComponent*** component into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one:
239
+
To add the `SpreadsheetComponent` component into the app, open the *src/app/app.component.ts* file and replace the default code with the following one:
240
240
241
241
~~~jsx {5} title="app.component.ts"
242
242
import { Component } from"@angular/core";
@@ -250,7 +250,7 @@ export class AppComponent {
250
250
}
251
251
~~~
252
252
253
-
Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *SpreadsheetComponent* as shown below:
253
+
Then create the *app.module.ts* file in the *src/app/* directory and specify the `SpreadsheetComponent` as shown below:
254
254
255
255
~~~jsx {4-5,8} title="app.module.ts"
256
256
import { NgModule } from"@angular/core";
@@ -267,7 +267,7 @@ import { SpreadsheetComponent } from "./spreadsheet/spreadsheet.component";
267
267
exportclassAppModule {}
268
268
~~~
269
269
270
-
The last step is to open the ***src/main.ts*** file and replace the existing code with the following one:
270
+
The last step is to open the *src/main.ts* file and replace the existing code with the following one:
@@ -281,4 +281,4 @@ After that, you can start the app to see Spreadsheet loaded with data on a page.
281
281
282
282
283
283
284
-
Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo).
284
+
Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. You can find the final example on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo).
See the full list of the Spreadsheet events [here](api/api_overview.md#spreadsheet-events).
39
39
40
-
You can attach several handlers to the same event and all of them will be executed. If some ofhandlers return*false*, the related operations will beblocked. Event handlers are processed in the same order that they are attached.
40
+
You can attach several handlers to the same event and all of them are executed. If some handlers return`false`, the related operations areblocked. Event handlers are processed in the same order that they are attached.
Please note that the component supports export to Excel files with the **.xlsx** extension only.
39
+
Note that the component supports export to Excel files with the `.xlsx` extension only.
40
40
:::
41
41
42
42
:::info
43
-
DHTMLX Spreadsheet uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel)for export of data to Excel. [Check the details](loading_data.md#exporting-data).
43
+
DHTMLX Spreadsheet uses the WebAssembly-based library [Json2Excel](https://github.com/dhtmlx/json2excel)to export data to Excel. [Check the details](loading_data.md#exporting-data).
44
44
:::
45
45
46
-
**Related articles:**[Data loading and export](loading_data.md)
46
+
**Related article:**[Data loading and export](loading_data.md)
Copy file name to clipboardExpand all lines: docs/api/overview/actions_overview.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,9 @@ description: You can check an Actions overview of the DHTMLX JavaScript Spreadsh
6
6
7
7
# Actions overview
8
8
9
-
This section is dedicated to a new conception of interaction with Spreadsheet events.
9
+
This section describes a new approach to interacting with Spreadsheet events.
10
10
11
-
Starting from v4.3, DHTMLX Spreadsheet includes a pair of the [beforeAction](api/spreadsheet_beforeaction_event.md)/[afterAction](api/spreadsheet_afteraction_event.md) events that are intended to make your code simple and concise. They will fire right before an action is executed and indicate which exactly action has been performed.
11
+
Starting from v4.3, DHTMLX Spreadsheet includes a pair of [`beforeAction`](api/spreadsheet_beforeaction_event.md)/[`afterAction`](api/spreadsheet_afteraction_event.md) events that make your code simpler and more concise. They fire right before an action is executed and indicate exactly which action was performed.
[The full list of the available actions is given below.](#list-of-actions)
31
31
32
-
>It means, that you don't have to constantly add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events anymore to track and handle the actions which you execute when changing something in the spreadsheet.
32
+
>This means that you no longer have to add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events to track and handle the actions you execute when changing something in the spreadsheet.
33
33
34
-
>But if needed you can use an**old approach** because all the existing events will continue work as before:
34
+
>But if needed, you can use the**old approach**, because all the existing events continue to work as before:
|**deleteSheet**| The action is executed when removing a sheet |
62
62
|**filter**| The action is executed when filtering data in a sheet |
63
63
|**fitColumn**| The action is executed when auto-fitting the width of the column |
64
-
|**groupAction**| The action is executed when selecting a range of cells and applying to them some actions (for instance, change the style or format of cells, lock/unlock the cells, clear cells' value or styles, etc.) |
64
+
|**groupAction**| The action is executed when selecting a range of cells and applying to them some actions (for instance, change the style or format of cells, lock/unlock the cells, or clear cells' value or styles) |
65
65
|**insertLink**| The action is executed when inserting a hyperlink in a cell |
66
66
|**lockCell**| The action is executed when locking/unlocking a cell |
67
67
|**merge**| The action is executed when merging a range of cells |
0 commit comments