From 0862baac27b3377e985d763c2f95f220946a80cf Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 7 Jul 2026 13:43:21 +0530 Subject: [PATCH 01/26] Integrated latest changes at 07-07-2026 1:30:03 PM --- ej2-javascript-toc.html | 2 +- .../js/es5-collaborative-editing.md | 64 +++---- .../block-editor/ts/collaborative-editing.md | 103 ++++------ .../diagram/annotations-cs1/index.ts | 2 - .../diagram/er-diagram-1/index.js | 16 +- .../diagram/er-diagram-1/index.ts | 23 ++- .../diagram/er-diagram-1/js/index.html | 30 ++- .../diagram/er-diagram-1/ts/index.html | 2 - .../diagram/er-diagram-cardinality/index.js | 156 ++++++++------- .../diagram/er-diagram-cardinality/index.ts | 177 +++++++++++------- .../er-diagram-cardinality/js/index.html | 30 ++- .../er-diagram-cardinality/ts/index.html | 2 - .../diagram/er-diagram-fields/index.js | 16 +- .../diagram/er-diagram-fields/index.ts | 24 ++- .../diagram/er-diagram-fields/js/index.html | 30 ++- .../diagram/er-diagram-fields/ts/index.html | 2 - .../diagram/er-diagram-header/index.js | 25 ++- .../diagram/er-diagram-header/index.ts | 32 ++-- .../diagram/er-diagram-header/js/index.html | 30 ++- .../diagram/er-diagram-header/ts/index.html | 2 - .../diagram/er-diagram-styling/index.js | 48 +++-- .../diagram/er-diagram-styling/index.ts | 54 ++++-- .../diagram/er-diagram-styling/js/index.html | 30 ++- .../diagram/er-diagram-styling/ts/index.html | 2 - .../code-snippet/gantt/baseline-cs2/index.js | 14 +- .../code-snippet/gantt/baseline-cs2/index.ts | 18 +- .../gantt/baseline-cs2/js/index.html | 4 +- .../gantt/baseline-cs2/systemjs.config.js | 2 +- .../gantt/baseline-cs2/ts/index.html | 2 +- .../gantt/gantt-infinite-cs/js/index.html | 4 +- .../gantt-infinite-cs/systemjs.config.js | 2 +- .../gantt/gantt-infinite-cs/ts/index.html | 2 +- ej2-typescript-toc.html | 2 +- 33 files changed, 503 insertions(+), 449 deletions(-) diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html index cafb2120a..857fba0f2 100644 --- a/ej2-javascript-toc.html +++ b/ej2-javascript-toc.html @@ -318,7 +318,7 @@
  • Code Blocks
    • -
  • Collaborative Editing
    • +
  • Real-time collaboration
  • Editor Menus
  • Drag and drop
  • Paste Cleanup
    • diff --git a/ej2-javascript/block-editor/js/es5-collaborative-editing.md b/ej2-javascript/block-editor/js/es5-collaborative-editing.md index fbd4d8d3a..d81e2e449 100644 --- a/ej2-javascript/block-editor/js/es5-collaborative-editing.md +++ b/ej2-javascript/block-editor/js/es5-collaborative-editing.md @@ -50,14 +50,7 @@ A Yjs provider handles the transport of document updates between connected users ## Configure collaboration settings -Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor. It provides the following properties that allow you to customize the collaboration behavior: - -| Property | Type | Description | -| -------- | ---- | ----------- | -| `provider` | `any` | Real-time transport used to synchronize document changes. | -| `enableAwareness` | `boolean` | Enables user presence, remote cursors, and text selection overlays. | -| `adapter` | `CollaborationAdapter` | Provides the Yjs runtime and shared XML fragment. | -| `versionHistory` | `VersionHistorySettingsModel` | Configures document version history support. | +Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor. It provides properties such as `provider`, `enableAwareness`, `adapter` and `versionHistory` which allows to customize the collaboration behavior. ## Getting Started @@ -118,8 +111,7 @@ var provider = new WebrtcProvider('document-room-id', yDoc); ### Step 4: Enable Collaboration -Pass the adapter and provider to the Block Editor through the `collaborationSettings` -property. +Pass the adapter and provider to the Block Editor through the `collaborationSettings` property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -150,15 +142,7 @@ var blockEditor = new ej.blockeditor.BlockEditor({ ## Configure the current user -Set the current user's display name and cursor highlight color using the `users` and `currentUserId` properties. The `avatarBgColor` value is used for that user's remote cursor and text selection overlay. - -The following properties are available when configuring users via the `users` property. - -| Property | Type | Description | -| -------- | ---- | ----------- | -| `id` | `string` | Unique identifier for the user. | -| `user` | `string` | Display name shown on remote cursors and presence indicators. | -| `avatarBgColor` | `string` | Hex color used for this user's remote cursor and selection highlight. | +Set the current user's display name and cursor highlight color using the `users` and `currentUserId` properties. The `avatarBgColor` value is used for that user's remote cursor and text selection overlay. The users property includes `id`, `user` and `avatarBgColor`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -210,17 +194,6 @@ var blockEditor = new ej.blockeditor.BlockEditor({ {% endhighlight %} {% endtabs %} -### Access the version history instance - -After the Block Editor initializes, retrieve the version history instance and wait for snapshot data to load before calling any version history methods. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -var versionHistory = ej.blockeditor.getVersionHistory(); -await versionHistory.whenReady(); -{% endhighlight %} -{% endtabs %} - ### Configure snapshot storage Version snapshots need to be persisted to enable version history across browser sessions. Implement the `IVersionStorage` interface to provide a custom storage backend for managing snapshots. You can use IndexedDB, a backend database, or any other storage solution suitable for your deployment. @@ -235,8 +208,21 @@ The `IVersionStorage` interface defines the following methods: | `deleteSnapshot` | `(id: string): Promise` | Permanently remove a snapshot by id. | | `clearAll` | `(): Promise` | Remove all snapshots from storage. | +### Access the version history instance + +After the Block Editor initializes, retrieve the version history instance and wait for snapshot data to load before calling any version history methods. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var versionHistory = ej.blockeditor.getVersionHistory(); +await versionHistory.whenReady(); +{% endhighlight %} +{% endtabs %} + ### Methods +The following are the methods available in the `IVersionHistory`: + #### Create a snapshot Creates a new snapshot of the current document state with an optional label and metadata. @@ -297,8 +283,7 @@ var diff = versionHistory.compareVersions(snapshotIdA, snapshotIdB); {% endhighlight %} {% endtabs %} -The returned `VersionDiff` object provides a summary of the differences between the two -selected versions. +The returned `VersionDiff` object provides a summary of the differences between the two selected versions. #### Export a snapshot @@ -366,16 +351,11 @@ var blockEditor = new ej.blockeditor.BlockEditor({ ## Best Practices -* **Use WebRTC or PartyKit for development** — These providers require no server setup and - are ideal for local testing and prototyping before moving to a production provider. -* **Use WebSocket-based providers in production** — `y-websocket`, Hocuspocus, or a managed - service like Liveblocks provides reliable, low-latency, persistent synchronization at scale. -* **Use stable room identifiers** — Use a unique document ID as the collaboration room name - to prevent unintended document sharing between different documents. -* **Persist snapshots externally** — Store snapshots in a database or cloud storage to - preserve version history across sessions. -* **Enable awareness selectively** — Disable `enableAwareness` when user presence - information is not required to reduce network and processing overhead. +* **Use WebRTC or PartyKit for development** - These providers require no server setup and are ideal for local testing and prototyping before moving to a production provider. +* **Use WebSocket-based providers in production** - `y-websocket`, Hocuspocus, or a managed service like Liveblocks provides reliable, low-latency, persistent synchronization at scale. +* **Use stable room identifiers** - Use a unique document ID as the collaboration room name to prevent unintended document sharing between different documents. +* **Persist snapshots externally** - Store snapshots in a database or cloud storage to preserve version history across sessions. +* **Enable awareness selectively** - Disable `enableAwareness` when user presence information is not required to reduce network and processing overhead. ## Troubleshooting diff --git a/ej2-javascript/block-editor/ts/collaborative-editing.md b/ej2-javascript/block-editor/ts/collaborative-editing.md index 1f11d84f6..98c12ac78 100644 --- a/ej2-javascript/block-editor/ts/collaborative-editing.md +++ b/ej2-javascript/block-editor/ts/collaborative-editing.md @@ -11,10 +11,7 @@ domainurl: ##DomainURL## # Collaborative Editing in ##Platform_Name## Block Editor control -The Block Editor supports real-time collaborative editing, enabling multiple users to work -on the same document simultaneously. Collaboration is powered by **Yjs**, a Conflict-free -Replicated Data Type (CRDT) framework that synchronizes document changes across all -connected users and automatically resolves conflicts. +The Block Editor supports real-time collaborative editing, enabling multiple users to work on the same document simultaneously.Collaboration is powered by **Yjs**, a Conflict-free Replicated Data Type (CRDT) framework that synchronizes document changes across all connected users and automatically resolves conflicts. With collaboration enabled, users can: @@ -24,10 +21,11 @@ With collaboration enabled, users can: * Perform collaboration-aware undo and redo operations. * Create, restore, compare, export, and import document versions. +*Try the live demo [here](https://ej2.syncfusion.com/)* + ## Prerequisites -Before enabling collaboration, install the `yjs` library and a Yjs provider. See -[Yjs Providers](https://docs.yjs.dev/ecosystem/connection-provider) to choose the right provider for your use case. +Before enabling collaboration, install the `yjs` library and a Yjs provider. See [Yjs Providers](https://docs.yjs.dev/ecosystem/connection-provider) to choose the right provider for your use case. Inject the `Collaboration` module into the Block Editor before use. @@ -40,8 +38,7 @@ BlockEditor.Inject(Collaboration); ## Yjs Providers -A Yjs provider handles the transport of document updates between connected users. Choose a -provider based on your deployment requirements. +A Yjs provider handles the transport of document updates between connected users. Choose a provider based on your deployment requirements. | Provider | Type | Use Case | | -------- | ---- | -------- | @@ -56,14 +53,7 @@ provider based on your deployment requirements. ## Configure collaboration settings -Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor. It provides the following properties that allow you to customize the collaboration behavior: - -| Property | Type | Description | -| -------- | ---- | ----------- | -| `provider` | `any` | Real-time transport used to synchronize document changes. | -| `enableAwareness` | `boolean` | Enables user presence, remote cursors, and text selection overlays. | -| `adapter` | `CollaborationAdapter` | Provides the Yjs runtime and shared XML fragment. | -| `versionHistory` | `VersionHistorySettingsModel` | Configures document version history support. | +Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor. It provides properties such as `provider`, `enableAwareness`, `adapter` and `versionHistory` which allows to customize the collaboration behavior. ## Getting Started @@ -101,9 +91,7 @@ const adapter = new YjsAdapter({ ### Step 3: Configure a provider -Create a provider that connects users to the same shared document. The following example -uses `y-websocket` for production use. For local development, replace it with `y-webrtc` -or a PartyKit provider — no server setup is required. +Create a provider that connects users to the same shared document. The following example uses `y-websocket` for production use. For local development, replace it with `y-webrtc` or a PartyKit provider — no server setup is required. **Production (y-websocket):** @@ -133,8 +121,7 @@ const provider = new WebrtcProvider('document-room-id', yDoc); ### Step 4: Enable Collaboration -Pass the adapter and provider to the Block Editor through the `collaborationSettings` -property. +Pass the adapter and provider to the Block Editor through the `collaborationSettings` property. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -150,9 +137,7 @@ const blockEditor = new BlockEditor({ ## User presence and remote cursors -The Block Editor can display remote cursors, text selection overlays, and user details on -hover. To enable these user presence features, set `enableAwareness` to `true` in -`collaborationSettings` property. +The Block Editor can display remote cursors, text selection overlays, and user details on hover. To enable these user presence features, set `enableAwareness` to `true` in `collaborationSettings` property. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -169,17 +154,7 @@ const blockEditor = new BlockEditor({ ## Configure the current user -Set the current user's display name and cursor highlight color using the `users` and -`currentUserId` properties. The `avatarBgColor` value is used for that user's remote cursor and -text selection overlay. - -The following properties are available when configuring users via the `users` property. - -| Property | Type | Description | -| -------- | ---- | ----------- | -| `id` | `string` | Unique identifier for the user. | -| `user` | `string` | Display name shown on remote cursors and presence indicators. | -| `avatarBgColor` | `string` | Hex color used for this user's remote cursor and selection highlight. | +Set the current user's display name and cursor highlight color using the `users` and `currentUserId` properties. The `avatarBgColor` value is used for that user's remote cursor and text selection overlay. The users property includes `id`, `user` and `avatarBgColor`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -208,14 +183,11 @@ const users = blockEditor.users; ## Version history -`Version History` allows you to capture document snapshots and restore earlier versions. -This is a built-in capability of the Block Editor and does not require a third-party -service. +`Version History` allows you to capture document snapshots and restore earlier versions. This is a built-in capability of the Block Editor and does not require a third-party service. ### Enable version history -Inject the `VersionHistory` module and configure the `versionHistory` property under -`collaborationSettings` property. +Inject the `VersionHistory` module and configure the `versionHistory` property under `collaborationSettings` property. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -236,24 +208,9 @@ const blockEditor = new BlockEditor({ {% endhighlight %} {% endtabs %} - -### Access the version history instance - -After the Block Editor initializes, retrieve the version history instance and wait for -snapshot data to load before calling any version history methods. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -const versionHistory = blockEditor.getVersionHistory(); -await versionHistory.whenReady(); -{% endhighlight %} -{% endtabs %} - - ### Configure snapshot storage -Version snapshots need to be persisted to enable version history across browser sessions. -Implement the `IVersionStorage` interface to provide a custom storage backend for managing snapshots. You can use IndexedDB, a backend database, or any other storage solution suitable for your deployment. +Version snapshots need to be persisted to enable version history across browser sessions. Implement the `IVersionStorage` interface to provide a custom storage backend for managing snapshots. You can use IndexedDB, a backend database, or any other storage solution suitable for your deployment. The `IVersionStorage` interface defines the following methods: @@ -265,8 +222,21 @@ The `IVersionStorage` interface defines the following methods: | `deleteSnapshot` | `(id: string): Promise` | Permanently remove a snapshot by id. | | `clearAll` | `(): Promise` | Remove all snapshots from storage. | +### Access the version history instance + +After the Block Editor initializes, retrieve the version history instance and wait for snapshot data to load before calling any version history methods. + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +const versionHistory = blockEditor.getVersionHistory(); +await versionHistory.whenReady(); +{% endhighlight %} +{% endtabs %} + ### Methods +The following are the methods available in the `IVersionHistory`: + #### Create a snapshot Creates a new snapshot of the current document state with an optional label and metadata. @@ -332,8 +302,7 @@ const diff = versionHistory.compareVersions(snapshotIdA, snapshotIdB); {% endtabs %} -The returned `VersionDiff` object provides a summary of the differences between the two -selected versions. +The returned `VersionDiff` object provides a summary of the differences between the two selected versions. #### Export a snapshot @@ -361,8 +330,7 @@ const imported = await versionHistory.importSnapshot(exported); ### Events -Use the following event callbacks in `versionHistory` settings to respond to snapshot -life cycle events. +Use the following event callbacks in `versionHistory` settings to respond to snapshot life cycle events. #### snapshotCreated @@ -406,16 +374,11 @@ const blockEditor = new BlockEditor({ ## Best Practices -* **Use WebRTC or PartyKit for development** — These providers require no server setup and - are ideal for local testing and prototyping before moving to a production provider. -* **Use WebSocket-based providers in production** — `y-websocket`, Hocuspocus, or a managed - service like Liveblocks provides reliable, low-latency, persistent synchronization at scale. -* **Use stable room identifiers** — Use a unique document ID as the collaboration room name - to prevent unintended document sharing between different documents. -* **Persist snapshots externally** — Store snapshots in a database or cloud storage to - preserve version history across sessions. -* **Enable awareness selectively** — Disable `enableAwareness` when user presence - information is not required to reduce network and processing overhead. +* **Use WebRTC or PartyKit for development** - These providers require no server setup and are ideal for local testing and prototyping before moving to a production provider. +* **Use WebSocket-based providers in production** - `y-websocket`, Hocuspocus, or a managed service like Liveblocks provides reliable, low-latency, persistent synchronization at scale. +* **Use stable room identifiers** - Use a unique document ID as the collaboration room name to prevent unintended document sharing between different documents. +* **Persist snapshots externally** - Store snapshots in a database or cloud storage to preserve version history across sessions. +* **Enable awareness selectively** - Disable `enableAwareness` when user presence information is not required to reduce network and processing overhead. ## Troubleshooting diff --git a/ej2-javascript/code-snippet/diagram/annotations-cs1/index.ts b/ej2-javascript/code-snippet/diagram/annotations-cs1/index.ts index 5aace3b56..d46c28ba8 100644 --- a/ej2-javascript/code-snippet/diagram/annotations-cs1/index.ts +++ b/ej2-javascript/code-snippet/diagram/annotations-cs1/index.ts @@ -49,5 +49,3 @@ let diagram: Diagram = new Diagram({ }); // render initialized diagram diagram.appendTo('#element'); - - diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-1/index.js b/ej2-javascript/code-snippet/diagram/er-diagram-1/index.js index 188d2b659..17ea881a8 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-1/index.js +++ b/ej2-javascript/code-snippet/diagram/er-diagram-1/index.js @@ -1,12 +1,16 @@ +ej.diagrams.Diagram.Inject(ej.diagrams.ErDiagrams); + // Define a basic ER entity (Customer table) var customer = { id: 'Customer', - offsetX: 400, - offsetY: 300, + offsetX: 300, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'Customer' } + annotation: { + content: 'Customer' + } }, fields: [ { @@ -36,8 +40,8 @@ var customer = { var diagram = new ej.diagrams.Diagram( { width: '100%', - height: '600px', - nodes: [customer], + height: '400px', + nodes: [customer] }, '#element' -); +); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-1/index.ts b/ej2-javascript/code-snippet/diagram/er-diagram-1/index.ts index 12ce8ebe7..822262f87 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-1/index.ts +++ b/ej2-javascript/code-snippet/diagram/er-diagram-1/index.ts @@ -1,16 +1,23 @@ -import { Diagram, NodeModel, ErShapeModel, ErDiagrams } from "@syncfusion/ej2-diagrams"; +import { + Diagram, + NodeModel, + ErShapeModel, + ErDiagrams +} from '@syncfusion/ej2-diagrams'; Diagram.Inject(ErDiagrams); // Define a basic ER entity (Customer table) const customer: NodeModel = { id: 'Customer', - offsetX: 400, - offsetY: 300, + offsetX: 300, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'Customer' } + annotation: { + content: 'Customer' + } }, fields: [ { @@ -37,10 +44,10 @@ const customer: NodeModel = { }; // Initialize diagram control -let diagram: Diagram = new Diagram({ +const diagram: Diagram = new Diagram({ width: '100%', - height: '600px', - nodes: [customer], + height: '400px', + nodes: [customer] }); -diagram.appendTo("#element"); +diagram.appendTo('#element'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-1/js/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-1/js/index.html index 19c8db2e0..bfa190e10 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-1/js/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-1/js/index.html @@ -1,4 +1,6 @@ - + + + EJ2 Diagram @@ -6,28 +8,24 @@ - - - + - - +
    - - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-1/ts/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-1/ts/index.html index e6ed45d7c..c2dea0460 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-1/ts/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-1/ts/index.html @@ -1,6 +1,5 @@ - EJ2 Diagram @@ -24,5 +23,4 @@
    - \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/index.js b/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/index.js index dfd325bd9..69061c990 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/index.js +++ b/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/index.js @@ -1,79 +1,107 @@ -// Define ER connectors with all multiplicity types -var connectors = [ - // One - { - id: 'er_one', - sourcePoint: { x: 100, y: 100 }, - targetPoint: { x: 300, y: 100 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'One' }, - targetMultiplicity: { type: 'One' } - } +ej.diagrams.Diagram.Inject(ej.diagrams.ErDiagrams); + +var customer = { + id: 'Customer', + offsetX: 250, + offsetY: 100, + shape: { + type: 'Er', + header: { + annotation: { + content: 'Customer' + } + }, + fields: [ + { + id: 'customer_id', + name: 'CustomerID', + dataType: 'INT', + isPrimaryKey: true + } + ] }, - // Many - { - id: 'er_many', - sourcePoint: { x: 100, y: 140 }, - targetPoint: { x: 300, y: 140 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'Many' }, - targetMultiplicity: { type: 'Many' } - } + style: { + fill: '#ffffff', + strokeColor: '#7c3aed', + strokeWidth: 1.5 + } +}; + +var order = { + id: 'Order', + offsetX: 400, + offsetY: 250, + shape: { + type: 'Er', + header: { + annotation: { + content: 'Order' + } + }, + fields: [ + { + id: 'order_id', + name: 'OrderID', + dataType: 'INT', + isPrimaryKey: true + }, + { + id: 'customer_id_fk', + name: 'CustomerID', + dataType: 'INT', + isForeignKey: true + } + ] }, - // One and only one - { - id: 'er_one_or_one', - sourcePoint: { x: 100, y: 180 }, - targetPoint: { x: 300, y: 180 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'OneAndOnlyOne' }, - targetMultiplicity: { type: 'OneAndOnlyOne' } + style: { + fill: '#ffffff', + strokeColor: '#7c3aed', + strokeWidth: 1.5 + } +}; + +var relationship = { + id: 'customer_order', + sourceID: 'Customer', + targetID: 'Order', + shape: { + type: 'Er', + sourceMultiplicity: { + type: 'One' + }, + targetMultiplicity: { + type: 'OneOrMany' } }, - // One or many - { - id: 'er_one_or_many', - sourcePoint: { x: 100, y: 220 }, - targetPoint: { x: 300, y: 220 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'OneOrMany' }, - targetMultiplicity: { type: 'OneOrMany' } - } + style: { + strokeColor: '#7c3aed', + strokeWidth: 1.5 }, - // Zero or one - { - id: 'er_zero_or_one', - sourcePoint: { x: 100, y: 260 }, - targetPoint: { x: 300, y: 260 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'ZeroOrOne' }, - targetMultiplicity: { type: 'ZeroOrOne' } + sourceDecorator: { + style: { + strokeColor: '#7c3aed', + strokeWidth: 1.5 } }, - // Zero or many - { - id: 'er_zero_or_many', - sourcePoint: { x: 100, y: 300 }, - targetPoint: { x: 300, y: 300 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'ZeroOrMany' }, - targetMultiplicity: { type: 'ZeroOrMany' } + targetDecorator: { + style: { + strokeColor: '#7c3aed', + strokeWidth: 1.5 } } -]; +}; -// Initialize diagram control var diagram = new ej.diagrams.Diagram( { width: '100%', - height: '600px', - connectors: connectors, + height: '400px', + nodes: [customer, order], + connectors: [relationship], + getConnectorDefaults: (connector) => { + connector.cornerRadius = 10; + connector.type = 'Orthogonal'; + return connector; + } }, '#element' -); +); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/index.ts b/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/index.ts index 4d35e8e74..9229a5c2c 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/index.ts +++ b/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/index.ts @@ -1,82 +1,115 @@ -import { Diagram, ConnectorModel, ErConnectorShapeModel, ErDiagrams } from "@syncfusion/ej2-diagrams"; +import { + Diagram, + NodeModel, + ErShapeModel, + ErDiagrams, + ConnectorModel +} from '@syncfusion/ej2-diagrams'; Diagram.Inject(ErDiagrams); -// Define ER connectors with all multiplicity types -const connectors: ConnectorModel[] = [ - // One - { - id: 'er_one', - sourcePoint: { x: 100, y: 100 }, - targetPoint: { x: 300, y: 100 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'One' }, - targetMultiplicity: { type: 'One' } - } as ErConnectorShapeModel +const customer: NodeModel = { + id: 'Customer', + offsetX: 250, + offsetY: 100, + shape: { + type: 'Er', + header: { + annotation: { + content: 'Customer' + } + }, + fields: [ + { + id: 'customer_id', + name: 'CustomerID', + dataType: 'INT', + isPrimaryKey: true + } + ] }, - // Many - { - id: 'er_many', - sourcePoint: { x: 100, y: 140 }, - targetPoint: { x: 300, y: 140 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'Many' }, - targetMultiplicity: { type: 'Many' } - } as ErConnectorShapeModel + style: { + fill: '#ffffff', + strokeColor: '#7c3aed', + strokeWidth: 1.5 + } +}; + +const order: NodeModel = { + id: 'Order', + offsetX: 400, + offsetY: 250, + shape: { + type: 'Er', + header: { + annotation: { + content: 'Order' + } + }, + fields: [ + { + id: 'order_id', + name: 'OrderID', + dataType: 'INT', + isPrimaryKey: true + }, + { + id: 'customer_id_fk', + name: 'CustomerID', + dataType: 'INT', + isForeignKey: true + } + ] }, - // One and only one - { - id: 'er_one_or_one', - sourcePoint: { x: 100, y: 180 }, - targetPoint: { x: 300, y: 180 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'OneAndOnlyOne' }, - targetMultiplicity: { type: 'OneAndOnlyOne' } - } as ErConnectorShapeModel + style: { + fill: '#ffffff', + strokeColor: '#7c3aed', + strokeWidth: 1.5 + } +}; + +const relationship: ConnectorModel = { + id: 'customer_order', + sourceID: 'Customer', + targetID: 'Order', + shape: { + type: 'Er', + sourceMultiplicity: { + type: 'One' + }, + targetMultiplicity: { + type: 'OneOrMany' + } }, - // One or many - { - id: 'er_one_or_many', - sourcePoint: { x: 100, y: 220 }, - targetPoint: { x: 300, y: 220 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'OneOrMany' }, - targetMultiplicity: { type: 'OneOrMany' } - } as ErConnectorShapeModel + style: { + strokeColor: '#7c3aed', + strokeWidth: 1.5 }, - // Zero or one - { - id: 'er_zero_or_one', - sourcePoint: { x: 100, y: 260 }, - targetPoint: { x: 300, y: 260 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'ZeroOrOne' }, - targetMultiplicity: { type: 'ZeroOrOne' } - } as ErConnectorShapeModel + sourceDecorator: { + style: { + strokeColor: '#7c3aed', + strokeWidth: 1.5 + } }, - // Zero or many - { - id: 'er_zero_or_many', - sourcePoint: { x: 100, y: 300 }, - targetPoint: { x: 300, y: 300 }, - shape: { - type: 'Er', - sourceMultiplicity: { type: 'ZeroOrMany' }, - targetMultiplicity: { type: 'ZeroOrMany' } - } as ErConnectorShapeModel + targetDecorator: { + style: { + strokeColor: '#7c3aed', + strokeWidth: 1.5 + } } -]; +}; -// Initialize diagram control -let diagram: Diagram = new Diagram({ - width: '100%', - height: '600px', - connectors: connectors, -}); - -diagram.appendTo("#element"); +const diagram = new Diagram( + { + width: '100%', + height: '400px', + nodes: [customer, order], + connectors: [relationship], + getConnectorDefaults: (connector: ConnectorModel): ConnectorModel => { + connector.cornerRadius = 10; + connector.type = 'Orthogonal'; + return connector; + } + }, + '#element' +); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/js/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/js/index.html index 19c8db2e0..bfa190e10 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/js/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/js/index.html @@ -1,4 +1,6 @@ - + + + EJ2 Diagram @@ -6,28 +8,24 @@ - - - + - - +
    - - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/ts/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/ts/index.html index e6ed45d7c..c2dea0460 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/ts/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-cardinality/ts/index.html @@ -1,6 +1,5 @@ - EJ2 Diagram @@ -24,5 +23,4 @@
    - \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-fields/index.js b/ej2-javascript/code-snippet/diagram/er-diagram-fields/index.js index 424227462..584acef8e 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-fields/index.js +++ b/ej2-javascript/code-snippet/diagram/er-diagram-fields/index.js @@ -1,12 +1,16 @@ +ej.diagrams.Diagram.Inject(ej.diagrams.ErDiagrams); + // Define an ER entity with various field properties var product = { id: 'Product', - offsetX: 400, - offsetY: 350, + offsetX: 300, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'Product' } + annotation: { + content: 'Product' + } }, fields: [ { @@ -53,8 +57,8 @@ var product = { var diagram = new ej.diagrams.Diagram( { width: '100%', - height: '600px', - nodes: [product], + height: '400px', + nodes: [product] }, '#element' -); +); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-fields/index.ts b/ej2-javascript/code-snippet/diagram/er-diagram-fields/index.ts index b08d732bb..5d8286493 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-fields/index.ts +++ b/ej2-javascript/code-snippet/diagram/er-diagram-fields/index.ts @@ -1,16 +1,24 @@ -import { Diagram, NodeModel, ErShapeModel, ErFieldModel, ErDiagrams } from "@syncfusion/ej2-diagrams"; +import { + Diagram, + NodeModel, + ErShapeModel, + ErFieldModel, + ErDiagrams +} from "@syncfusion/ej2-diagrams"; Diagram.Inject(ErDiagrams); // Define an ER entity with various field properties const product: NodeModel = { id: 'Product', - offsetX: 400, - offsetY: 350, + offsetX: 300, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'Product' } + annotation: { + content: 'Product' + } }, fields: [ { @@ -54,10 +62,10 @@ const product: NodeModel = { }; // Initialize diagram control -let diagram: Diagram = new Diagram({ +const diagram: Diagram = new Diagram({ width: '100%', - height: '600px', - nodes: [product], + height: '400px', + nodes: [product] }); -diagram.appendTo("#element"); +diagram.appendTo("#element"); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-fields/js/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-fields/js/index.html index 19c8db2e0..bfa190e10 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-fields/js/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-fields/js/index.html @@ -1,4 +1,6 @@ - + + + EJ2 Diagram @@ -6,28 +8,24 @@ - - - + - - +
    - - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-fields/ts/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-fields/ts/index.html index e6ed45d7c..c2dea0460 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-fields/ts/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-fields/ts/index.html @@ -1,6 +1,5 @@ - EJ2 Diagram @@ -24,5 +23,4 @@
    - \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-header/index.js b/ej2-javascript/code-snippet/diagram/er-diagram-header/index.js index 3e5df603d..16ee02167 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-header/index.js +++ b/ej2-javascript/code-snippet/diagram/er-diagram-header/index.js @@ -1,17 +1,22 @@ +ej.diagrams.Diagram.Inject(ej.diagrams.ErDiagrams); + // Define an ER entity with customized header var customer = { id: 'Customer', - offsetX: 400, - offsetY: 300, + offsetX: 300, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'CUSTOMER TABLE', style: { - color: 'white', - fontSize: 13, - bold: true, - fontFamily: 'Arial' - }}, + annotation: { + content: 'CUSTOMER TABLE', + style: { + color: 'white', + fontSize: 13, + bold: true, + fontFamily: 'Arial' + } + }, height: 35, style: { fill: '#2E75B6' @@ -42,8 +47,8 @@ var customer = { var diagram = new ej.diagrams.Diagram( { width: '100%', - height: '600px', + height: '400px', nodes: [customer] }, '#element' -); +); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-header/index.ts b/ej2-javascript/code-snippet/diagram/er-diagram-header/index.ts index d905e9c26..6260a47dc 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-header/index.ts +++ b/ej2-javascript/code-snippet/diagram/er-diagram-header/index.ts @@ -1,21 +1,29 @@ -import { Diagram, NodeModel, ErShapeModel, ErDiagrams } from "@syncfusion/ej2-diagrams"; +import { + Diagram, + NodeModel, + ErShapeModel, + ErDiagrams +} from "@syncfusion/ej2-diagrams"; Diagram.Inject(ErDiagrams); // Define an ER entity with customized header const customer: NodeModel = { id: 'Customer', - offsetX: 400, - offsetY: 300, + offsetX: 300, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'CUSTOMER TABLE', style: { - color: 'white', - fontSize: 13, - bold: true, - fontFamily: 'Arial' - }}, + annotation: { + content: 'CUSTOMER TABLE', + style: { + color: 'white', + fontSize: 13, + bold: true, + fontFamily: 'Arial' + } + }, height: 35, style: { fill: '#2E75B6' @@ -43,10 +51,10 @@ const customer: NodeModel = { }; // Initialize diagram control -let diagram: Diagram = new Diagram({ +const diagram: Diagram = new Diagram({ width: '100%', - height: '600px', + height: '400px', nodes: [customer] }); -diagram.appendTo("#element"); +diagram.appendTo("#element"); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-header/js/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-header/js/index.html index 19c8db2e0..bfa190e10 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-header/js/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-header/js/index.html @@ -1,4 +1,6 @@ - + + + EJ2 Diagram @@ -6,28 +8,24 @@ - - - + - - +
    - - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-header/ts/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-header/ts/index.html index e6ed45d7c..c2dea0460 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-header/ts/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-header/ts/index.html @@ -1,6 +1,5 @@ - EJ2 Diagram @@ -24,5 +23,4 @@
    - \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-styling/index.js b/ej2-javascript/code-snippet/diagram/er-diagram-styling/index.js index 4006d7875..b20046825 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-styling/index.js +++ b/ej2-javascript/code-snippet/diagram/er-diagram-styling/index.js @@ -1,12 +1,20 @@ +ej.diagrams.Diagram.Inject(ej.diagrams.ErDiagrams); + // Define ER entities with custom styling var customer = { id: 'Customer', - offsetX: 300, - offsetY: 300, + offsetX: 200, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'CUSTOMER TABLE', style: { bold: true, color: 'white' } }, + annotation: { + content: 'CUSTOMER TABLE', + style: { + bold: true, + color: 'white' + } + }, height: 35, style: { fill: '#2E75B6', @@ -34,8 +42,8 @@ var customer = { } ], fieldDefaults: { - alternateRowColors: ['#ffffff', '#E7F0F7'] - }, + alternateRowColors: ['#E7F0F7', '#ffffff'] + } }, style: { fill: '#ffffff', @@ -46,12 +54,18 @@ var customer = { var product = { id: 'Product', - offsetX: 850, - offsetY: 300, + offsetX: 600, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'PRODUCT CATALOG', style: { bold: true, color: 'white' } }, + annotation: { + content: 'PRODUCT CATALOG', + style: { + bold: true, + color: 'white' + } + }, height: 35, style: { fill: '#70AD47', @@ -66,7 +80,9 @@ var product = { name: 'ProductID', dataType: 'INT', isPrimaryKey: true, - style: { fill: '#FFE699' } + style: { + fill: '#FFE699' + } }, { id: 'prod_name', @@ -77,17 +93,19 @@ var product = { id: 'prod_price', name: 'Price', dataType: 'DECIMAL(10,2)', - style: { fill: '#C6E0B4' } + style: { + fill: '#C6E0B4' + } } ], fieldDefaults: { alternateRowColors: ['#ffffff', '#F2F2F2'] - }, + } }, style: { fill: '#ffffff', strokeColor: '#70AD47', - strokeWidth: 1.5, + strokeWidth: 1.5 } }; @@ -95,8 +113,8 @@ var product = { var diagram = new ej.diagrams.Diagram( { width: '100%', - height: '600px', - nodes: [customer, product], + height: '400px', + nodes: [customer, product] }, '#element' -); +); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-styling/index.ts b/ej2-javascript/code-snippet/diagram/er-diagram-styling/index.ts index 59b43a01a..a2e31bedb 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-styling/index.ts +++ b/ej2-javascript/code-snippet/diagram/er-diagram-styling/index.ts @@ -1,16 +1,28 @@ -import { Diagram, NodeModel, ErShapeModel, ErFieldModel, ErDiagrams } from "@syncfusion/ej2-diagrams"; +import { + Diagram, + NodeModel, + ErShapeModel, + ErFieldModel, + ErDiagrams +} from '@syncfusion/ej2-diagrams'; Diagram.Inject(ErDiagrams); // Define ER entities with custom styling const customer: NodeModel = { id: 'Customer', - offsetX: 300, - offsetY: 300, + offsetX: 200, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'CUSTOMER TABLE', style: { bold: true, color: 'white' } }, + annotation: { + content: 'CUSTOMER TABLE', + style: { + bold: true, + color: 'white' + } + }, height: 35, style: { fill: '#2E75B6', @@ -38,24 +50,26 @@ const customer: NodeModel = { } ] as ErFieldModel[], fieldDefaults: { - alternateRowColors: ['#ffffff', '#E7F0F7'] - }, + alternateRowColors: ['#E7F0F7', '#ffffff'] + } } as ErShapeModel, style: { fill: '#ffffff', strokeColor: '#2E75B6', - strokeWidth: 1, + strokeWidth: 1 } }; const product: NodeModel = { id: 'Product', - offsetX: 850, - offsetY: 300, + offsetX: 600, + offsetY: 200, shape: { type: 'Er', header: { - annotation: { content: 'PRODUCT CATALOG' }, + annotation: { + content: 'PRODUCT CATALOG' + }, height: 35, style: { fill: '#70AD47', @@ -70,7 +84,9 @@ const product: NodeModel = { name: 'ProductID', dataType: 'INT', isPrimaryKey: true, - style: { fill: '#FFE699' } + style: { + fill: '#FFE699' + } }, { id: 'prod_name', @@ -81,25 +97,27 @@ const product: NodeModel = { id: 'prod_price', name: 'Price', dataType: 'DECIMAL(10,2)', - style: { fill: '#C6E0B4' } + style: { + fill: '#C6E0B4' + } } ] as ErFieldModel[], fieldDefaults: { alternateRowColors: ['#ffffff', '#F2F2F2'] - }, + } } as ErShapeModel, style: { fill: '#ffffff', strokeColor: '#70AD47', - strokeWidth: 1.5, + strokeWidth: 1.5 } }; // Initialize diagram control -let diagram: Diagram = new Diagram({ +const diagram: Diagram = new Diagram({ width: '100%', - height: '600px', - nodes: [customer, product], + height: '400px', + nodes: [customer, product] }); -diagram.appendTo("#element"); +diagram.appendTo('#element'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-styling/js/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-styling/js/index.html index 19c8db2e0..bfa190e10 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-styling/js/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-styling/js/index.html @@ -1,4 +1,6 @@ - + + + EJ2 Diagram @@ -6,28 +8,24 @@ - - - + - - +
    - - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/diagram/er-diagram-styling/ts/index.html b/ej2-javascript/code-snippet/diagram/er-diagram-styling/ts/index.html index e6ed45d7c..c2dea0460 100644 --- a/ej2-javascript/code-snippet/diagram/er-diagram-styling/ts/index.html +++ b/ej2-javascript/code-snippet/diagram/er-diagram-styling/ts/index.html @@ -1,6 +1,5 @@ - EJ2 Diagram @@ -24,5 +23,4 @@
    - \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/baseline-cs2/index.js b/ej2-javascript/code-snippet/gantt/baseline-cs2/index.js index abb236e4a..685073f23 100644 --- a/ej2-javascript/code-snippet/gantt/baseline-cs2/index.js +++ b/ej2-javascript/code-snippet/gantt/baseline-cs2/index.js @@ -50,19 +50,19 @@ function baselineTemplate(props) { } var taskRecord = props.taskData; var ganttProperties = taskRecord.ganttProperties; - var chartRowsModule = gantt.chartRowsModule; + var chartRowsModule = ganttChart.chartRowsModule; var baselineTop = chartRowsModule.baselineTop; var baselineHeight = chartRowsModule.baselineHeight; var taskBarHeight = chartRowsModule.taskBarHeight; var milestoneHeight = chartRowsModule.milestoneHeight; var milestoneMarginTop = chartRowsModule.milestoneMarginTop; - var rowHeight = gantt.rowHeight; - var renderBaseline = gantt.renderBaseline; - var enableRtl = gantt.enableRtl; + var rowHeight = ganttChart.rowHeight; + var renderBaseline = ganttChart.renderBaseline; + var enableRtl = ganttChart.enableRtl; var taskSpacing = 9; var baselineSpacing = 4; function getLeft(date) { - return gantt.dataOperation.getTaskLeft(new Date(date), false, ganttProperties.calendarContext); + return ganttChart.dataOperation.getTaskLeft(new Date(date), false, ganttProperties.calendarContext); } function getWidth(start, duration) { if (!start || duration == null || duration === 0) @@ -70,8 +70,8 @@ function baselineTemplate(props) { // Calculate end date based on start date and duration var end = new Date(start); end.setDate(end.getDate() + duration); - var leftStart = gantt.dataOperation.getTaskLeft(new Date(start), false, ganttProperties.calendarContext); - var leftEnd = gantt.dataOperation.getTaskLeft(end, false, ganttProperties.calendarContext); + var leftStart = ganttChart.dataOperation.getTaskLeft(new Date(start), false, ganttProperties.calendarContext); + var leftEnd = ganttChart.dataOperation.getTaskLeft(end, false, ganttProperties.calendarContext); return leftEnd - leftStart; } function render(start, duration, index) { diff --git a/ej2-javascript/code-snippet/gantt/baseline-cs2/index.ts b/ej2-javascript/code-snippet/gantt/baseline-cs2/index.ts index 53b18ac5c..c9a2d4d95 100644 --- a/ej2-javascript/code-snippet/gantt/baseline-cs2/index.ts +++ b/ej2-javascript/code-snippet/gantt/baseline-cs2/index.ts @@ -3,7 +3,7 @@ import { baselineTemplateData } from './datasource.ts'; Gantt.Inject(Selection, DayMarkers); -let gantt: Gantt = new Gantt({ +let ganttChart: Gantt = new Gantt({ dataSource: baselineTemplateData, taskFields: { id: 'TaskID', @@ -45,7 +45,7 @@ let gantt: Gantt = new Gantt({ height: '450px', baselineColor: 'red' }); -gantt.appendTo('#Gantt'); +ganttChart.appendTo('#Gantt'); function baselineTemplate(props: any): string { if (props.hasChildRecords || (props.data && props.data.hasChildRecords)) { @@ -55,7 +55,7 @@ function baselineTemplate(props: any): string { const taskRecord = props.taskData; const ganttProperties = taskRecord.ganttProperties; - const chartRowsModule = gantt.chartRowsModule; + const chartRowsModule = ganttChart.chartRowsModule; const baselineTop = chartRowsModule.baselineTop; const baselineHeight = chartRowsModule.baselineHeight; @@ -63,15 +63,15 @@ function baselineTemplate(props: any): string { const milestoneHeight = chartRowsModule.milestoneHeight; const milestoneMarginTop = chartRowsModule.milestoneMarginTop; - const rowHeight = gantt.rowHeight; - const renderBaseline = gantt.renderBaseline; - const enableRtl = gantt.enableRtl; + const rowHeight = ganttChart.rowHeight; + const renderBaseline = ganttChart.renderBaseline; + const enableRtl = ganttChart.enableRtl; const taskSpacing = 9; const baselineSpacing = 4; // spacing between baselines function getLeft(date: any): number { - return gantt.dataOperation.getTaskLeft( + return ganttChart.dataOperation.getTaskLeft( new Date(date), false, ganttProperties.calendarContext @@ -85,13 +85,13 @@ function baselineTemplate(props: any): string { const end = new Date(start); end.setDate(end.getDate() + duration); - const leftStart = gantt.dataOperation.getTaskLeft( + const leftStart = ganttChart.dataOperation.getTaskLeft( new Date(start), false, ganttProperties.calendarContext ); - const leftEnd = gantt.dataOperation.getTaskLeft( + const leftEnd = ganttChart.dataOperation.getTaskLeft( end, false, ganttProperties.calendarContext diff --git a/ej2-javascript/code-snippet/gantt/baseline-cs2/js/index.html b/ej2-javascript/code-snippet/gantt/baseline-cs2/js/index.html index b8fd2b436..c9f266382 100644 --- a/ej2-javascript/code-snippet/gantt/baseline-cs2/js/index.html +++ b/ej2-javascript/code-snippet/gantt/baseline-cs2/js/index.html @@ -8,8 +8,8 @@ - - + + diff --git a/ej2-javascript/code-snippet/gantt/baseline-cs2/systemjs.config.js b/ej2-javascript/code-snippet/gantt/baseline-cs2/systemjs.config.js index 122d44eed..16b417b14 100644 --- a/ej2-javascript/code-snippet/gantt/baseline-cs2/systemjs.config.js +++ b/ej2-javascript/code-snippet/gantt/baseline-cs2/systemjs.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/33.2.3/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/34.1.29/" }, map: { main: "index.ts", diff --git a/ej2-javascript/code-snippet/gantt/baseline-cs2/ts/index.html b/ej2-javascript/code-snippet/gantt/baseline-cs2/ts/index.html index a76086076..a171869a8 100644 --- a/ej2-javascript/code-snippet/gantt/baseline-cs2/ts/index.html +++ b/ej2-javascript/code-snippet/gantt/baseline-cs2/ts/index.html @@ -8,7 +8,7 @@ - + diff --git a/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/js/index.html b/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/js/index.html index 4be328b5f..ae1e0916e 100644 --- a/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/js/index.html +++ b/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/js/index.html @@ -8,8 +8,8 @@ - - + + diff --git a/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/systemjs.config.js b/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/systemjs.config.js index c617635de..ba212152e 100644 --- a/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/systemjs.config.js +++ b/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/systemjs.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/33.2.3/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/34.1.29/" }, map: { main: "index.ts", diff --git a/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/ts/index.html b/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/ts/index.html index 49996e944..ba2f0f28e 100644 --- a/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/ts/index.html +++ b/ej2-javascript/code-snippet/gantt/gantt-infinite-cs/ts/index.html @@ -8,7 +8,7 @@ - + diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html index 5efb2128f..b72ec45e1 100644 --- a/ej2-typescript-toc.html +++ b/ej2-typescript-toc.html @@ -328,7 +328,7 @@
  • Code Blocks
    • -
  • Collaborative Editing
    • +
  • Real-time collaboration
  • Editor Menus
  • Drag and drop
  • Paste Cleanup
    • From 037e3495548bb454e3fce857ac80bd80b5a599c1 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 8 Jul 2026 13:44:57 +0530 Subject: [PATCH 02/26] Integrated latest changes at 07-08-2026 1:30:21 PM --- ej2-javascript-toc.html | 11 +- ej2-javascript/circular-chart-3d/tooltip.md | 12 +- .../connecting-to-adaptors/custom-adaptor.md | 668 ++++++++++ .../connecting-to-adaptors/graphql-adaptor.md | 1126 +++++++++++++++++ .../connecting-to-adaptors/odatav4-adaptor.md | 417 ++++++ .../remote-save-adaptor.md | 514 ++++++++ .../web-method-adaptor.md | 454 +++++++ ej2-javascript/gantt/sorting.md | 6 + ej2-typescript-toc.html | 13 +- 9 files changed, 3212 insertions(+), 9 deletions(-) create mode 100644 ej2-javascript/gantt/connecting-to-adaptors/custom-adaptor.md create mode 100644 ej2-javascript/gantt/connecting-to-adaptors/graphql-adaptor.md create mode 100644 ej2-javascript/gantt/connecting-to-adaptors/odatav4-adaptor.md create mode 100644 ej2-javascript/gantt/connecting-to-adaptors/remote-save-adaptor.md create mode 100644 ej2-javascript/gantt/connecting-to-adaptors/web-method-adaptor.md diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html index 857fba0f2..67d244e49 100644 --- a/ej2-javascript-toc.html +++ b/ej2-javascript-toc.html @@ -1208,6 +1208,15 @@
  • Performance Best Practices
    • +
  • Connecting to Adaptors + +
  • Columns
    • -
  • Scrolling +
  • Scrolling diff --git a/ej2-javascript/circular-chart-3d/tooltip.md b/ej2-javascript/circular-chart-3d/tooltip.md index 2e746838a..33c68eb22 100644 --- a/ej2-javascript/circular-chart-3d/tooltip.md +++ b/ej2-javascript/circular-chart-3d/tooltip.md @@ -152,27 +152,27 @@ If the specified format does not match the resolved value type, the original val {% tabs %} {% highlight ts tabtitle="index.ts" %} -{% include code-snippet/circular-chart/user-interaction/inline-format/index.ts %} +{% include code-snippet/circular-chart/user-interaction/tooltip-inline-format/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/circular-chart/user-interaction/inline-format/index.html %} +{% include code-snippet/circular-chart/user-interaction/tooltip-inline-format/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/circular-chart/user-interaction/inline-format" %} +{% previewsample "page.domainurl/code-snippet/circular-chart/user-interaction/tooltip-inline-format" %} {% elsif page.publishingplatform == "javascript" %} {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/circular-chart/user-interaction/inline-format/index.js %} +{% include code-snippet/circular-chart/user-interaction/tooltip-inline-format/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/circular-chart/user-interaction/inline-format/index.html %} +{% include code-snippet/circular-chart/user-interaction/tooltip-inline-format/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/circular-chart/user-interaction/inline-format" %} +{% previewsample "page.domainurl/code-snippet/circular-chart/user-interaction/tooltip-inline-format" %} {% endif %} diff --git a/ej2-javascript/gantt/connecting-to-adaptors/custom-adaptor.md b/ej2-javascript/gantt/connecting-to-adaptors/custom-adaptor.md new file mode 100644 index 000000000..bd0bdcb0c --- /dev/null +++ b/ej2-javascript/gantt/connecting-to-adaptors/custom-adaptor.md @@ -0,0 +1,668 @@ +--- +layout: post +title: Custom Adaptor in ##Platform_Name## Gantt Chart Control | Syncfusion +description: CustomAdaptor in Syncfusion ##Platform_Name## Gantt Chart enables custom request and response handling for seamless backend integration. +control: Custom Adaptor +platform: ej2-javascript +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Custom Remote Data Binding in Syncfusion ##Platform_Name## Gantt Chart + +The `CustomAdaptor` in the Syncfusion® ##Platform_Name## Gantt Chart is a powerful extension mechanism that **customizes any existing adaptor** ([RemoteSaveAdaptor](./remote-save-adaptor), [WebMethodAdaptor](./web-method-adaptor), [ODataV4Adaptor](./odatav4-adaptor), [GraphQLAdaptor](./graphql-adaptor)) to meet specific application requirements. Use this adaptor when the built-in adaptors do not fully match backend requirements and need to customize request or response processing. Instead of creating an adaptor from scratch, `CustomAdaptor` intercepts and customizes the HTTP request/response pipeline used by the Syncfusion ##Platform_Name## Gantt Chart. + +Once the project creation and backend setup are complete, the next step is to render the Syncfusion® ##Platform_Name## Gantt Chart component on the client side. + +**Project structure:** + +- Frontend: A ##Platform_Name## Gantt Chart project that hosts the Gantt Chart component and configures the Custom DataManager by extending ODataV4Adaptor. +- Backend: An OData v4 service that exposes task entities and supports the query options that client will use. + +``` +CustomAdaptor/ +├── CustomAdaptor.client/ # Client-side app (HTML/JS or TS). +│ ├── index.html # Gantt Chart is rendered here. +│ ├── index.ts / index.js # Configure CustomAdaptor here. +│ └── CustomAdaptor.ts # Extend odatav4 adaptor here. +└── CustomAdaptor.Server/ # ASP.NET Core backend (API). + ├── Controllers/ # API controllers (will be created here). + ├── Models/ # Data models (will be created here). + └── Program.cs # Server configuration. +``` + +## Client-side setup with CustomAdaptor + +This section explains how the Gantt Chart interacts with a `CustomAdaptor` for extending OData v4 services. Implementation and package installation steps are covered in platform-specific setup guides and are intentionally omitted here. + +### Step 1: Packages and dependencies + +- Ensure ##Platform_Name## Gantt Chart project includes the Syncfusion Gantt Chart and data packages required to render the Gantt Chart and to use the DataManager and ODataV4Adaptor. +- Right-click the **CustomAdaptor.client** folder in **Solution Explorer** and select **Open in Terminal** (available in newer Visual Studio versions), or open a Developer Command prompt/PowerShell from the Start menu and navigate manually to the **CustomAdaptor.client** directory. Once inside the folder, confirm that **package.json** is present, then run the following commands to install the required Syncfusion® packages: + +```bash +npm install @syncfusion/ej2-gantt --save +npm install @syncfusion/ej2-data --save +``` + +### Step 2: CSS and component styling + +- Include the required Syncfusion theme and component styles so the Gantt Chart and its input controls render correctly. Add these imports to **styles.css**: + +```ts +/* Basic Gantt Chart styles */ +@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css"; + +/* For editing, toolbar, and dialog features */ +@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css"; + +/* For rich text editor in dialog notes tab */ +@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css"; +``` + +Reference the stylesheet in **index.html** along with the Gantt Chart container: + +```html + + + + ##Platform_Name## Gantt Chart - CustomAdaptor + + + +
    + + + +``` + +### Step 3: Create the Gantt Chart component with CustomAdaptor + +Integrating a `CustomAdaptor` with the Syncfusion® ##Platform_Name## Gantt Chart requires configuring the `DataManager` as the communication bridge between the Gantt Chart component and the backend data source. The `CustomAdaptor` serves as a powerful customization layer that provides complete control over how data operations are transmitted to the server. + +#### Step 3.1: Creating an Extended ODataV4Adaptor + +The first step involves creating a CustomAdaptor by extending the existing `ODataV4Adaptor` class. This extension allows modification of the default behavior to meet specific application requirements. + +Begin by creating a new file named **CustomAdaptor.ts** (or **CustomAdaptor.js**) in the project's source directory. This file will house the custom adaptor class definition. + +**Understanding the CustomAdaptor implementation:** + +The example below demonstrates a `CustomAdaptor` class that extends `ODataV4Adaptor`. + +The implementation requires importing specific modules from Syncfusion packages: + +- `ODataV4Adaptor` from `@syncfusion/ej2-data` - Core data management class + +The Syncfusion® DataManager provides built-in extensibility points that allow custom logic to be applied both before a request is sent to the server and after a response is received. This is achieved by overriding adaptor methods, ensuring that request customization and response transformation are handled consistently and centrally. The following table explains the overridden methods in a `CustomAdaptor` and their execution phases. + + +| Method | Execution Phase | Purpose & Key Actions | +|-------------------|------------------------------------------|---------------------------------------------------------------------------------------| +| `processResponse` | After receiving server response, before Gantt Chart rendering | | +| `processQuery` | Before sending request to server | Sets custom OData endpoint URL and adds extra query parameters → enables dynamic URLs and request tracking/identification | +| `beforeSend` | Immediately before the HTTP request is sent | Adds `Authorization: Bearer` header using token from `window` → automatically authenticates every API request | + + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="CustomAdaptor.ts" %} + +import { ODataV4Adaptor } from '@syncfusion/ej2-data'; + +export class CustomAdaptor extends ODataV4Adaptor { + processResponse() { + const original = super.processResponse.apply(this, arguments); + return original; + } + processQuery(dm, query) { + dm.dataSource.url = 'https://localhost:xxxx/odata/GanttTasks'; // Here xxxx represents the port number. + query.addParams('Syncfusion in Gantt Chart', 'true'); + const result = super.processQuery.apply(this, arguments); + return result; + } + beforeSend(dm, request, settings) { + request.headers.set('Authorization', `Bearer ${window.token}`); + super.beforeSend(dm, request, settings); + } +} + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="CustomAdaptor.js" %} + +var { ODataV4Adaptor } = require('@syncfusion/ej2-data'); + +class CustomAdaptor extends ODataV4Adaptor { + processResponse() { + const original = super.processResponse.apply(this, arguments); + return original; + } + processQuery(dm, query) { + dm.dataSource.url = 'https://localhost:xxxx/odata/GanttTasks'; // Here xxxx represents the port number. + query.addParams('Syncfusion in Gantt Chart', 'true'); + const result = super.processQuery.apply(this, arguments); + return result; + } + beforeSend(dm, request, settings) { + request.headers.set('Authorization', `Bearer ${window.token}`); + super.beforeSend(dm, request, settings); + } +} + +module.exports = { CustomAdaptor }; + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +#### Step 3.2: Integrating CustomAdaptor into the Gantt Chart + +After creating the custom adaptor class, integrate it with the Gantt Chart in the main application file (typically **index.ts** or **index.js**). This requires importing the necessary modules and configuring the Gantt Chart to use the `CustomAdaptor`: + +- Import `DataManager` from `@syncfusion/ej2-data` to act as the link between the Gantt Chart and the OData service. +- Import `CustomAdaptor` from the local **./CustomAdaptor** file to apply custom request and response logic. +- Create DataManager instance by setting the service endpoint URL **(e.g., https://localhost:xxxx/odata/GanttTasks)** in the `url` property. +- Assign `CustomAdaptor` to the `adaptor` property so that querying operations use the customized pipeline. +- Bind DataManager to the Gantt Chart `dataSource` property, enabling the Gantt Chart to automatically apply the custom logic during data communication. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} + +import { DataManager } from '@syncfusion/ej2-data'; +import { CustomAdaptor } from './CustomAdaptor'; +import { Gantt, Edit, Selection, Toolbar, ContextMenu, Filter, Sort, Reorder, Resize, ColumnMenu, VirtualScroll, RowDD } from '@syncfusion/ej2-gantt'; + +// Create DataManager with CustomAdaptor +let data: DataManager = new DataManager({ + url: 'https://localhost:xxxx/odata/GanttTasks', // Here xxxx represents the port number. + adaptor: new CustomAdaptor(), + key: 'TaskID', + crossDomain: true +}); + +Gantt.Inject(Edit, Selection, Toolbar, ContextMenu, Filter, Sort, Reorder, Resize, ColumnMenu, VirtualScroll, RowDD); + +let resourceFields: object = { + id: 'resourceId', + name: 'resourceName', + unit: 'resourceUnit', + group: 'resourceGroup' +}; + +let resources: object[] = [ + { resourceId: 1, resourceName: 'Martin Tamer' }, + { resourceId: 2, resourceName: 'Rose Fuller' }, + { resourceId: 3, resourceName: 'Margaret Buchanan' }, + { resourceId: 4, resourceName: 'Fuller King' }, + { resourceId: 5, resourceName: 'Davolio Fuller' }, + { resourceId: 6, resourceName: 'Van Jack' }, + { resourceId: 7, resourceName: 'Fuller Buchanan' }, + { resourceId: 8, resourceName: 'Jack Davolio' }, + { resourceId: 9, resourceName: 'Tamer Vinet' }, + { resourceId: 10, resourceName: 'Vinet Fuller' }, + { resourceId: 11, resourceName: 'Bergs Anton' }, + { resourceId: 12, resourceName: 'Construction Supervisor' } +]; + +let gantt: Gantt = new Gantt({ + dataSource: data, + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID', + segments: 'Segments', + resourceInfo: 'ResourceInfos' + }, + resourceFields: resourceFields, + resources: resources, + showColumnMenu: true, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'], + allowReordering: true, + allowResizing: true, + allowRowDragAndDrop: true, + enableContextMenu: true, + allowFiltering: true, + allowSorting: true, + height: '450px', + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number', isPrimaryKey: true }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +var { DataManager } = require('@syncfusion/ej2-data'); +var { CustomAdaptor } = require('./CustomAdaptor'); +var { Gantt, Edit, Selection, Toolbar, ContextMenu, Filter, Sort, Reorder, Resize, ColumnMenu, VirtualScroll, RowDD } = require('@syncfusion/ej2-gantt'); + +// Create DataManager with CustomAdaptor +var data = new DataManager({ + url: 'https://localhost:xxxx/odata/GanttTasks', // Here xxxx represents the port number. + adaptor: new CustomAdaptor(), + key: 'TaskID', + crossDomain: true +}); + +Gantt.Inject(Edit, Selection, Toolbar, ContextMenu, Filter, Sort, Reorder, Resize, ColumnMenu, VirtualScroll, RowDD); + +var resourceFields = { + id: 'resourceId', + name: 'resourceName', + unit: 'resourceUnit', + group: 'resourceGroup' +}; + +var resources = [ + { resourceId: 1, resourceName: 'Martin Tamer' }, + { resourceId: 2, resourceName: 'Rose Fuller' }, + { resourceId: 3, resourceName: 'Margaret Buchanan' }, + { resourceId: 4, resourceName: 'Fuller King' }, + { resourceId: 5, resourceName: 'Davolio Fuller' }, + { resourceId: 6, resourceName: 'Van Jack' }, + { resourceId: 7, resourceName: 'Fuller Buchanan' }, + { resourceId: 8, resourceName: 'Jack Davolio' }, + { resourceId: 9, resourceName: 'Tamer Vinet' }, + { resourceId: 10, resourceName: 'Vinet Fuller' }, + { resourceId: 11, resourceName: 'Bergs Anton' }, + { resourceId: 12, resourceName: 'Construction Supervisor' } +]; + +var gantt = new Gantt({ + dataSource: data, + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID', + segments: 'Segments', + resourceInfo: 'ResourceInfos' + }, + resourceFields: resourceFields, + resources: resources, + showColumnMenu: true, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'], + allowReordering: true, + allowResizing: true, + allowRowDragAndDrop: true, + enableContextMenu: true, + allowFiltering: true, + allowSorting: true, + height: '450px', + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number', isPrimaryKey: true }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +> Replace **https://localhost:xxxx/odata/GanttTasks** with the actual API endpoint that returns data in JSON format. + +**Server-side data operations** + +When tasks, dependencies or resource assignments are numerous or governed by centralized business rules, the server commonly performs processing that would be costly or inconsistent on the client. For Gantt Chart scenarios, server responsibilities typically include selecting tasks for a requested timeline range, applying visibility rules, resolving dependencies, and producing any roll-up or hierarchical values required by the client. The `Syncfusion.EJ2.AspNet.Core` package supports this approach by providing built-in methods that efficiently handle these operations on the server, ensuring smooth performance even with heavy data loads. + +## CRUD operations + +The DataManager with `CustomAdaptor` supports **Create** (add records), **Read** (view records), **Update** (modify records), and **Delete** (remove records) workflows for task entities. In Gantt Chart usage, these operations cover task creation, task edits (including taskbar edits and resulting scheduling recalculations), dependency creation or modification, and task deletion. + +**Mapping CRUD operations to service endpoints** + +CRUD operations are conveyed to the service using standard OData conventions. The `CustomAdaptor` works with ODataV4Adaptor with a single task endpoint and standard HTTP methods: + +| Operation | HTTP Method | URL Example | Description | +|-----------|-------------|-------------|------------| +| **Read** | GET | `/odata/GanttTasks` | Get all records. | +| **Create** | POST | `/odata/GanttTasks` | Add a new record. | +| **Update** | PATCH | `/odata/GanttTasks(1)` | Update record with key "1". | +| **Delete** | DELETE | `/odata/GanttTasks(1)` | Delete record with key "1". | + +### Step 1: Server-side controller + +Add the required controller method to **GanttController.cs**. Replace the entire controller with this complete version: + +{% tabs %} +{% highlight cs tabtitle="GanttController.cs - Complete CRUD Implementation" %} + +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.OData.Formatter; +using Microsoft.AspNetCore.OData.Query; +using Microsoft.AspNetCore.OData.Routing.Controllers; +using ODataV4Adaptor.Server.Models; + +[Route("[controller]")] +public class GanttTasksController : ODataController +{ + [EnableQuery] + [HttpGet] + public IActionResult Get() + { + var data = GanttDataAdaptor.GetAllRecords(); + return Ok(data.AsQueryable()); + } + + [HttpPost] + [EnableQuery] + public IActionResult Post([FromBody] GanttDataAdaptor task) + { + if (task == null) + return BadRequest(); + + GanttDataAdaptor.GetAllRecords().Add(task); + return Created(task); + } + + [HttpPatch("{key}")] + [EnableQuery] + public IActionResult Patch([FromODataUri] int key, [FromBody] GanttDataAdaptor updateRecord) + { + var task = GanttDataAdaptor.GetAllRecords() + .FirstOrDefault(t => t.TaskID == key); + + if (task == null || task.TaskID != updateRecord.TaskID) + return NotFound(); + task = updateRecord; + + return Ok(task); + } + + [HttpDelete("{key}")] + [EnableQuery] + public IActionResult Delete(int key) + { + var task = GanttDataAdaptor.GetAllRecords() + .FirstOrDefault(t => t.TaskID == key); + + if (task == null) + return NotFound(); + + GanttDataAdaptor.GetAllRecords().Remove(task); + return NoContent(); + } +} + +{% endhighlight %} +{% endtabs %} + +### Step 2: Client-side Gantt Chart configuration + +The ##Platform_Name## Gantt Chart enables full CRUD functionality by configuring the required [toolbar](https://ej2.syncfusion.com/javascript/documentation/api/gantt/index-default#toolbar) buttons (`Add`, `Edit`, `Update`, `Delete`, and `Cancel`) and enabling adding, editing, updating, and deleting through the `editSettings` property. This setup allows the Gantt Chart to handle all basic data operations directly from the UI. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} + +import { DataManager } from '@syncfusion/ej2-data'; +import { CustomAdaptor } from './CustomAdaptor'; +import { Gantt, Edit, Selection, Toolbar, ContextMenu, Filter, Sort, Reorder, Resize, ColumnMenu, VirtualScroll, RowDD } from '@syncfusion/ej2-gantt'; + +// Create DataManager with CustomAdaptor +let data: DataManager = new DataManager({ + url: 'https://localhost:xxxx/odata/GanttTasks', // Here xxxx represents the port number. + adaptor: new CustomAdaptor(), + key: 'TaskID', + crossDomain: true +}); + +Gantt.Inject(Edit, Selection, Toolbar, ContextMenu, Filter, Sort, Reorder, Resize, ColumnMenu, VirtualScroll, RowDD); + +let resourceFields: object = { + id: 'resourceId', + name: 'resourceName', + unit: 'resourceUnit', + group: 'resourceGroup' +}; + +let resources: object[] = [ + { resourceId: 1, resourceName: 'Martin Tamer' }, + { resourceId: 2, resourceName: 'Rose Fuller' }, + { resourceId: 3, resourceName: 'Margaret Buchanan' }, + { resourceId: 4, resourceName: 'Fuller King' }, + { resourceId: 5, resourceName: 'Davolio Fuller' }, + { resourceId: 6, resourceName: 'Van Jack' }, + { resourceId: 7, resourceName: 'Fuller Buchanan' }, + { resourceId: 8, resourceName: 'Jack Davolio' }, + { resourceId: 9, resourceName: 'Tamer Vinet' }, + { resourceId: 10, resourceName: 'Vinet Fuller' }, + { resourceId: 11, resourceName: 'Bergs Anton' }, + { resourceId: 12, resourceName: 'Construction Supervisor' } +]; + +let gantt: Gantt = new Gantt({ + dataSource: data, + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID', + segments: 'Segments', + resourceInfo: 'ResourceInfos' + }, + resourceFields: resourceFields, + resources: resources, + showColumnMenu: true, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'], + allowReordering: true, + allowResizing: true, + allowRowDragAndDrop: true, + enableContextMenu: true, + allowFiltering: true, + allowSorting: true, + height: '450px', + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number', isPrimaryKey: true }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); + +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} + +var { DataManager } = require('@syncfusion/ej2-data'); +var { CustomAdaptor } = require('./CustomAdaptor'); +var { Gantt, Edit, Selection, Toolbar, ContextMenu, Filter, Sort, Reorder, Resize, ColumnMenu, VirtualScroll, RowDD } = require('@syncfusion/ej2-gantt'); + +// Create DataManager with CustomAdaptor +var data = new DataManager({ + url: 'https://localhost:xxxx/odata/GanttTasks', // Here xxxx represents the port number. + adaptor: new CustomAdaptor(), + key: 'TaskID', + crossDomain: true +}); + +Gantt.Inject(Edit, Selection, Toolbar, ContextMenu, Filter, Sort, Reorder, Resize, ColumnMenu, VirtualScroll, RowDD); + +var resourceFields = { + id: 'resourceId', + name: 'resourceName', + unit: 'resourceUnit', + group: 'resourceGroup' +}; + +var resources = [ + { resourceId: 1, resourceName: 'Martin Tamer' }, + { resourceId: 2, resourceName: 'Rose Fuller' }, + { resourceId: 3, resourceName: 'Margaret Buchanan' }, + { resourceId: 4, resourceName: 'Fuller King' }, + { resourceId: 5, resourceName: 'Davolio Fuller' }, + { resourceId: 6, resourceName: 'Van Jack' }, + { resourceId: 7, resourceName: 'Fuller Buchanan' }, + { resourceId: 8, resourceName: 'Jack Davolio' }, + { resourceId: 9, resourceName: 'Tamer Vinet' }, + { resourceId: 10, resourceName: 'Vinet Fuller' }, + { resourceId: 11, resourceName: 'Bergs Anton' }, + { resourceId: 12, resourceName: 'Construction Supervisor' } +]; + +var gantt = new Gantt({ + dataSource: data, + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID', + segments: 'Segments', + resourceInfo: 'ResourceInfos' + }, + resourceFields: resourceFields, + resources: resources, + showColumnMenu: true, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'], + allowReordering: true, + allowResizing: true, + allowRowDragAndDrop: true, + enableContextMenu: true, + allowFiltering: true, + allowSorting: true, + height: '450px', + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number', isPrimaryKey: true }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); + +{% endhighlight %} +{% endtabs %} + +{% endif %} + +> For detailed editing setup, refer to the [editing documentation](https://ej2.syncfusion.com/javascript/documentation/gantt/managing-tasks/editing-tasks). + +## Run the application + +The solution contains two projects: **CustomAdaptor.Server** (ASP.NET Core backend) and **CustomAdaptor.client** (##Platform_Name## Gantt Chart client). Start the server first, then start the client. + +**Run the server** + +1. In **Solution Explorer**, set **CustomAdaptor.Server** as the startup project. +2. Press F5 (or click **Run**) to start the application in Visual Studio. +3. The server is accessible on a URL like **https://localhost:xxxx**. Verify the API returns data at **https://localhost:xxxx/odata/GanttTasks**, where **xxxx** is the port. + +**Run the client** + +1. Right-click the **CustomAdaptor.client** folder in **Solution Explorer** and select **Open in Terminal** (available in newer Visual Studio versions). You can also open a Developer Command prompt/PowerShell and navigate manually to the **CustomAdaptor.client** directory. +2. Confirm that **package.json** is present in the folder. +3. Run the following command to start the client application: + +```bash +npm start +``` + +4. The client app opens in the browser and the Gantt Chart displays data fetched from the backend API. + +## Troubleshooting + +| Issue | Cause | Solution | +|---------------------------|-----------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------| +| Empty response | Service not returning task records or required metadata | Verify service returns records with fields like parent ids, resources, and start/end dates | +| 404 responses | Incorrect route or endpoint configuration | Confirm DataManager URLs are correct and endpoints exist | +| 500 or server errors | Server-side exceptions or improper request handling | Check server logs, validate parameters, and ensure scheduling/dependency logic is error-free | +| Cross-origin errors | CORS not enabled or misconfiguration | Ensure cross-origin requests are allowed when frontend and backend are on different domains | +| Related data mismatches | Remote datasets not returning expected values | Confirm related endpoints return correct data for display and dependency mapping | + +## Complete sample repository + +For the complete working implementation of this example, refer to the [GitHub](https://github.com/SyncfusionExamples/ej2-javascript-gantt-chart-samples/tree/master/CustomAdaptor) repository. + + +## See also +- [Hybrid data binding](./remote-save-adaptor) +- [RESTful CRUD Operations in ASP.NET Web Forms](./web-method-adaptor) +- [Data binding](https://ej2.syncfusion.com/javascript/documentation/gantt/data-binding) diff --git a/ej2-javascript/gantt/connecting-to-adaptors/graphql-adaptor.md b/ej2-javascript/gantt/connecting-to-adaptors/graphql-adaptor.md new file mode 100644 index 000000000..ef2334284 --- /dev/null +++ b/ej2-javascript/gantt/connecting-to-adaptors/graphql-adaptor.md @@ -0,0 +1,1126 @@ +--- +layout: post +title: GraphQL Adaptor in ##Platform_Name## Gantt Chart Control | Syncfusion +description: GraphQL adaptor in Syncfusion ##Platform_Name## Gantt Chart enables fetching and updating task data through GraphQL services. +control: GraphQL Adaptor +platform: ej2-javascript +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# GraphQL Remote Data Binding in Syncfusion ##Platform_Name## Gantt Chart + +The `GraphQLAdaptor` in the Syncfusion® DataManager enables the ##Platform_Name## Gantt Chart to interact with GraphQL services by translating the Gantt's data requests and task update actions into GraphQL queries and mutations. Use this adaptor when backend exposes a GraphQL API and want flexible, efficient data fetching and mutation for Gantt tasks. `GraphQLAdaptor` is best for scenarios requiring precise data selection and real-time updates, offering capabilities not present in REST or OData adaptors. + +For server configuration and schema expectations (queries, mutations, and response shapes), consult the GraphQL backend documentation appropriate for stack. After the GraphQL service is available, configure the Gantt's DataManager to use the GraphQL adaptor as its task data source. + +[GraphQL](https://graphql.org/learn/introduction/) provides a single, flexible endpoint where clients specify the exact data shape required. For the Gantt Chart this means requesting task fields, parent/child relationships, resource assignments, and any server‑computed scheduling values in one query. Mutations allow the client to create, update, or delete tasks and dependencies while the server enforces scheduling rules and returns reconciled task states. + +**Key GraphQL concepts relevant to Gantt:** +- Queries: request task data and related entities; useful for timeline windowing and resolving related resources in a single request. +- Mutations: perform create, update, and delete operations for tasks and dependencies; the server performs validation and scheduling recalculation. +- Schema and resolvers: define how task queries and mutations are resolved and which fields (for example, start/end, duration, parentId, resources) are available. + +[Node.js](https://nodejs.org/learn) is a fast and efficient JavaScript runtime built on Google’s V8 engine. It enables JavaScript to run on the server, making it a popular platform for building web APIs, real‑time applications, and modern backend services. Node.js offers a non‑blocking, event‑driven architecture that supports high performance and scalability. + +## Prerequisites + +| Software / Package | Recommended version | Purpose | +|-----------------------------|------------------------------|-------------------------------------- | +| Node.js | 20.x LTS or later | Runtime | +| npm / yarn / pnpm | 11.x or later | Package manager | +| TypeScript | 5.x or later | Server‑side and client‑side type safety | + + +## Key topics + +| # | Topics | Link | +|---|--------|-------| +| 1 | Set up and configure the GraphQL backend using Node.js | [View](#setting-up-the-graphql-backend-using-nodejs) | +| 2 | Integrate the Syncfusion® ##Platform_Name## Gantt chart with the GraphQL API | [View](#integrating-syncfusion-gantt-chart-with-graphql) | +| 3 | Perform CRUD operations | [View](#step-4-perform-crud-operations) | +| 4 | Run the GraphQL application | [View](#running-the-application) | +| 5 | Explore a complete working sample available on GitHub | [View](#complete-sample-repository) | + +### GraphQL vs REST comparison + +Understanding the key differences between GraphQL and REST helps appreciate the benefits of using GraphQL with Syncfusion® Gantt Chart: + +| Aspect | REST API | GraphQL | +|--------|----------|---------| +| **Endpoints** | Multiple endpoints (/api/orders, /api/customers). | Single endpoint (/graphql). | +| **Data fetching** | Fixed data structure per endpoint. | Flexible, client specifies exact data needs. | +| **Over-fetching** | Common (gets unnecessary data). | Eliminated (requests only needed fields). | +| **Under-fetching** | Requires multiple requests. | Single request for complex data. | +| **Versioning** | Requires API versioning (v1, v2). | Schema evolution without versioning. | +| **Type system** | Not built-in | Strongly typed schema. | +| **Query format** | URL parameters | Structured query language. | +| **Real-time** | Requires separate solution. | Built-in subscriptions support. | + +**GraphQL Query example:** + +```ts +query { + getTasks { + result { + TaskID + TaskName + StartDate + } + count + } +} +``` +## Setting up the GraphQL backend using Node.js + +The GraphQL backend acts as the central data service, handling queries and mutations that power the Syncfusion ##Platform_Name## Gantt Chart. + +### Step 1: Create the GraphQL server and install required packages + +Before configuring the GraphQL API, a new folder must be created to host the GraphQL server. This folder will contain the server configuration, required dependencies, and sample data used for processing GraphQL queries. + +For this guide, a GraphQL server named **GraphQLServer** is created using Node.js and TypeScript. + +**Create project folder:** + +Open a terminal ( for example, an integrated terminal in Visual Studio Code or Windows Command Prompt opened with Win+R or macOS Terminal launched with Cmd+Space ) and run the following command to create and navigate to the project folder: + +```bash +mkdir GraphQLServer +cd GraphQLServer +mkdir src +cd src +``` +**Configure TypeScript:** + +TypeScript configuration tells the compiler to convert TypeScript to JavaScript and sets up the project structure. + +Create a new **tsconfig.json** file in the **GraphQLServer** folder using the below command: + +```bash +npx tsc --init +``` + +Replace (**GraphQLServer/tsconfig.json**) file content with the following configuration: + +```json +{ + "compilerOptions": { + "target": "ES2020", + "module": "NodeNext", + "moduleResolution": "NodeNext", + "lib": ["ES2020"], + "resolveJsonModule": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "skipLibCheck": true, + "strict": true, + "rootDir": "src", + "outDir": "dist" + }, + "include": ["src"] +} +``` + +**Install required packages:** + +The GraphQL server is set up using graphpack, a lightweight GraphQL development tool. TypeScript support is added to enable strongly typed development, and the Syncfusion® `ej2-data` package is installed to handle data operations such as filtering, sorting, and paging. + +Run the following commands in the terminal window to install the required packages: + +```bash +npm i graphpack +npm install -D typescript ts-node @types/node +npm install @syncfusion/ej2-data --save +``` +- `graphpack`: Lightweight GraphQL server and development environment. +- `typescript`, `ts-node`: Enables TypeScript-based development. +- `@syncfusion/ej2-data`: Provides data utilities for advanced data operations. + +**Create sample datasource:** + +After installing the required packages, create a new file named **data.ts** inside the **src** folder. This file acts as an in‑memory datasource for the GraphQL server. + +```ts +[data.ts] + +export const tasks: Task[] = [ + { + TaskID: 1, + TaskName: 'Planning and Permits', + StartDate: '2025-04-02', + EndDate: '2025-04-10', + Duration: 7, + Progress: 100 + }, + .... +]; +``` +The **GraphQLServer** folder is now created, required packages are installed, and a sample data source is configured. The project is ready for defining the GraphQL schema, resolvers, and server configuration. + +### Step 2: Configuring schema in GraphQL + +The GraphQL schema defines the structure of the "task" data model and the server‑side operations available for performing CRUD actions. + +**Instructions:** +1. Create a new schema file (**src/schema.graphql**) in the **GraphQLServer** folder. +2. Add type definition for **GanttTask**: + + ``` + #--- Task type definition --- + type GanttTask { + TaskID: Int! + TaskName: String! + StartDate: String + # include additional fields here. + } + ``` +3. Add type definition for **GanttReturnType**: + + ``` + # --- Return type for Gantt --- + type GanttReturnType { + result: [GanttTask!]! + count: Int! + } + ``` +4. Add type definition for **ResourceInfo**: + + ``` + # --- Resource type definition --- + type ResourceInfo { + resourceId: Int! + resourceName: String + resourceGroup: String + resourceUnit: Int + } + ``` +5. Add type definition for **ResourceInfoInput**: + + ``` + # --- Resource input --- + input ResourceInfoInput { + resourceId: Int! + resourceName: String + resourceGroup: String + resourceUnit: Int + } + ``` +6. Add type definition for **GanttTaskInput**: + + ``` + # --- Gantt task input for mutation operations --- + input GanttTaskInput { + TaskID: Int! + TaskName: String! + StartDate: String + # include additional fields here. + } + ``` +7. Define the Query type to expose the "getTasks" operation that returns the list of "tasks". + + ``` + type Query { + getTasks: GanttReturnType! + task(id: Int!): GanttTask + } + ``` +8. Define Mutation types for CRUD operations. + + ``` + type Mutation { + addTask(value: GanttTaskInput!): GanttTask! + updateTask(value: GanttTaskInput!): GanttTask! + deleteTask(key: ID!): Boolean! + } + ``` + **Key parameters definitions:** + - **key**: The unique identifier (primary key) of the task to be deleted. + - **value**: An object containing the created or updated task details. + +### Step 3: GraphQL - Query resolvers + +A resolver in GraphQL is a function responsible for fetching the data for a specific field in a GraphQL schema. + +When a client sends a GraphQL query, resolvers run behind the scenes to retrieve the requested information from a database, API, or any data source and return it in the format defined by the schema. + +**Instructions:** +1. Create a new resolver file (**src/resolvers.ts**) inside the **GraphQLServer** folder. +2. Import the required data source (**e.g., taskDetails**) from the data file. +3. Implement the "getTasks" resolver to handle the logic for the "getTasks" query defined in the schema. +4. Ensure the resolver returns the processed list of "tasks" in the structure specified by the schema. + +```ts +import { taskDetails } from './data'; +let tasks: GanttTask[] = [...taskDetails]; + +const resolvers = { + Query: { + getTasks: (): GanttReturnType => { + return { + result: tasks, + count: tasks.length + }; + }, + task: (_: unknown, { id }: { id: string | number }): GanttTask | null => { + return tasks.find(t => String(t.TaskID) === String(id)) || null; + }, + .... + } +} +``` + +### Step 4: GraphQL - Mutation resolvers + +Mutations in GraphQL are used to modify data on the server, such as creating, updating, or deleting records. + +Previously, the CRUD mutation types were defined in the **schema.graphql** file. The next step is to implement these mutation actions inside the **resolver.ts** file. + +**Instructions:** +1. Open the (**src/resolvers.ts**) file. +2. Implement the "addTask" mutation. + + ```ts + import { taskDetails } from './data'; + let tasks: GanttTask[] = [...taskDetails]; + .... + Mutation: { + addTask: (_: unknown, { value }: CreateTaskArgs): GanttTask => { + const exists = tasks.find(t => String(t.TaskID) === String(value.TaskID)); + if (exists) throw new Error('TaskID already exists'); + const newTask: GanttTask = { ...value }; + tasks.push(newTask); + return newTask; + }, + } + ``` + **"addTask" - code breakdown:** + + | Step | Purpose | Implementation | + |------|---------|-----------------| + | **1. Receive input** | Read incoming task details sent from the client. | `value` parameter inside "addTask" contains all submitted fields. | + | **2. Prepare record** | Store the incoming values as a new task object. | `const newTask = { ...value}` | + | **3. Insert record** | Add the "task" to the existing data collection. | use `tasks.push(newtask)` to add record. | + | **4. Return created** | Send the inserted record back to the client. | return `newTask` - returns the newly added "task" so the client can update the Gantt instantly. | + +3. Implement the "updateTask" mutation: + + ```ts + Mutation: { + updateTask: (_: unknown, { value }: UpdateTaskArgs): GanttTask => { + const taskIndex = tasks.findIndex(t => String(t.TaskID) === String(value.TaskID)); + if (taskIndex === -1) throw new Error('Task not found'); + tasks[taskIndex] = { ...tasks[taskIndex], ...value }; + return tasks[taskIndex]; + } + } + ``` + **"updateTask" - code breakdown:** + + | Step | Purpose | Implementation | + |------|---------|-----------------| + | **1. Receive input** | Accept the updated field values. | Resolver parameter `value`. | + | **2. Locate record** | Find the matching "task" index using a task ID. | `findIndex(t => String(t.TaskID) === String(value.TaskID))` | + | **3. Verification** | Fail fast if no matching task exists. | `if (taskIndex === -1) throw new Error('Task not found');` | + | **4. Apply updates** | Merge incoming fields into the located task. | `tasks[taskIndex] = { ...tasks[taskIndex], ...value }` | + | **5. Return updated** | Send back the modified "task" to the client. | return `tasks[taskIndex]` object with all updates applied. | + +4. Implement the "deleteTask" mutation. + + ```ts + Mutation: { + deleteTask: (_: unknown, { key }: DeleteTaskArgs): boolean => { + const taskIndex = tasks.findIndex(t => String(t.TaskID) === String(key)); + if (taskIndex === -1) return false; + tasks.splice(taskIndex, 1); // simple delete + return true; + } + + } + ``` + **"deleteTask" - code breakdown:** + + | Step | Purpose | Implementation | + |------|---------|-----------------| + | **1. Receive key** | Backend receives only the primary key value from client. | Resolver parameter `key` = `taskId` | + | **2. Locate index** | Identify the array index of the target record using the key. | `findIndex(t => String(t.TaskID) === String(key))` | + | **3. Validate existence** | Ensure a matching record exists before deletion. | `if (taskIndex === -1) return false` | + | **4. Remove record** | Delete the record from the data source at the located index. | `tasks.splice(taskIndex, 1)` | + | **5. Return status of deletion** | Return a boolean indicating whether the deletion was successful. | return `true` or `false`| + +Now all required GraphQL types, queries, and mutations have now been fully added. + +## Integrating Syncfusion Gantt Chart with GraphQL + +This section describes conceptually how the Gantt Chart consumes data through GraphQL. Implementation and installation steps are covered in platform‑specific setup guides and are intentionally excluded here. + +The integration process begins by installing the required Syncfusion® ##Platform_Name## Gantt Chart packages before establishing the GraphQL connection. + +### Step 1: Packages and dependencies + +Install the necessary Syncfusion® packages using the below command in Visual Studio Code terminal or Command Prompt: + +```bash +npm install @syncfusion/ej2-gantt --save +npm install @syncfusion/ej2-data --save +``` +- `@syncfusion/ej2-gantt` – required to use the Syncfusion® ##Platform_Name## Gantt Chart component. +- `@syncfusion/ej2-data` – Provides data utilities for binding and manipulating Gantt Chart data. + +### Step 2: CSS and component styling + +- Include the required Syncfusion theme and component styles so the Gantt Chart and its input controls render correctly. Add these imports to **styles.css**: + +```ts +/* Basic Gantt Chart styles */ +@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css"; + +/* For editing, toolbar, and dialog features */ +@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css"; + +/* For rich text editor in dialog notes tab */ +@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css"; +``` + +Reference the stylesheet in **index.html** along with the Gantt Chart container: + +```html + + + + ##Platform_Name## Gantt Chart - GraphQL Adaptor + + + +
    + + + +``` + +For this project, the "Tailwind3" theme is used. A different theme can be selected or the existing theme can be customized based on project requirements. Refer to the [Syncfusion® Components Appearance](https://ej2.syncfusion.com/javascript/documentation/appearance/theme) documentation to learn more about theming and customization options. + +### Step 3: Configure GraphQL Adaptor + +The `GraphQLAdaptor` needs to be configured on the Syncfusion® `DataManager` so that Gantt Chart interactions are translated into GraphQL‑compatible requests. Configure the `DataManager` with the adaptor, map the server's response paths (`result` and `count`), and assign the instance to the Gantt's `dataSource`. + +**Instructions:** +1. Open `index.ts` (or `index.js`) in the client folder. +2. Configure `DataManager` with `GraphQLAdaptor` and map the response (`result` and `count`). +3. Ensure the GraphQL schema exposes a query (for example, `getTasks`) that returns `{ count, result }`. +4. Render the Gantt Chart component with `dataSource` and define columns matching the fields returned by the query. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { DataManager, GraphQLAdaptor } from '@syncfusion/ej2-data'; +import { Gantt, Selection } from '@syncfusion/ej2-gantt'; + +let ganttDataManager: DataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLAdaptor({ + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + } + }), + crossDomain: true +}); + +Gantt.Inject(Selection); + +let gantt: Gantt = new Gantt({ + dataSource: ganttDataManager, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 80, type: 'number' }, + // Include additional columns here + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var { DataManager, GraphQLAdaptor } = require('@syncfusion/ej2-data'); +var { Gantt, Selection } = require('@syncfusion/ej2-gantt'); + +var ganttDataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLAdaptor({ + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + } + }), + crossDomain: true +}); + +Gantt.Inject(Selection); + +var gantt = new Gantt({ + dataSource: ganttDataManager, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 80, type: 'number' }, + // Include additional columns here + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +**GraphQL Query structure explained in detail** + +The Query property is critical for understanding the data flows. Let's break down each component: + +``` +query getTasks {} +``` + +**Line breakdown:** +- `query` - GraphQL keyword indicating a read operation. +- `getTasks` - Name of the query (must match resolver name with camelCase). + + +``` +getTasks{} +``` + +**Line breakdown:** +- `getTasks` - Calls the backend resolver to fetch task data. +- The resolver returns the requested `count` and `result` fields. + + +``` +count + result { + TaskID + TaskName + } +``` + +**Line breakdown:** +- `count` - Returns total number of records. +- Example: If "150" total "task" records exist, count = 150. +- `result` - Contains the array of "tasks" records. +- `{ ... }` - List of fields to return for each record. +- Only requested fields are returned (no over-fetching). + +**Response structure example** + +When the backend executes the query, it returns a JSON response in this structure (example): + +```json +{ + "data": { + "getTasks": { + "count": 1, + "result": [ + { + "TaskID": 1, + "TaskName": "Planning and Permits", + "StartDate": "2025-04-02", + "EndDate": "2025-04-10", + "Duration": 7, + "Progress": 100, + "ParentId": null, + "Predecessor": null + } + ] + } + } +} +``` + +**Response structure explanation:** + +| Part | Purpose | Example | +|------|---------|--------| +| `data` | Root object returned for every successful GraphQL query. | Always present in successful response. | +| `getTasks` | Matches the GraphQL query name; contains task data | Contains **count** and **result**. | +| `count` | Total number of records available. | 1 (in this example). | +| `result` | Array of "tasks" objects. | [ {...}, {...} ] | +| Each `field` in result | Matches GraphQL query field names. | Field values from database. | + +### Step 4: Perform CRUD operations + +CRUD operations (Create, Read, Update, Delete) are supported in the Gantt Chart for managing data. The Gantt Chart provides built-in dialogs and buttons to perform these operations, while the backend resolvers handle the actual data modifications. + +Enable editing operations in the Gantt Chart by configuring `editSettings` and setting `allowEditing`, `allowAdding`, and `allowDeleting` to `true`. + +The "getMutation" function in the `GraphQLAdaptor` handles the Gantt Chart CRUD actions by sending the appropriate mutation for each action (insert, update, or delete) to the GraphQL server. + +> Previously, the required mutation definitions and schema for CRUD operations were created in the **resolver.ts** and **schema.graphql** files. The next step is to enable CRUD actions in the client Gantt Chart by using the GraphQL adaptor. + +**Insert:** + +The Insert operation enables adding new "task" records to the task list. When the Add button in the toolbar is selected, the Gantt Chart opens a dialog that displays input fields for entering task details. + +After the required data is submitted, the GraphQL mutation sends the new "task" record to the backend for processing and storage. + +Open the client entry file and configure the `getMutation` function in the `GraphQLAdaptor` to return the GraphQL mutation for the insert action. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +let ganttDataManager: DataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLAdaptor({ + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + }, + // mutation for perform insert. + getMutation: function (action: any): string { + if (action === 'insert') { + return ` + mutation AddTask($value: GanttTaskInput!) { + addTask(value: $value) { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + }`; + } + } + }), + crossDomain: true +}); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var ganttDataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLAdaptor({ + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + }, + // mutation for perform insert. + getMutation: function (action) { + if (action === 'insert') { + return ` + mutation AddTask($value: GanttTaskInput!) { + addTask(value: $value) { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + }`; + } + } + }), + crossDomain: true +}); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +**Update:** + +The Update operation enables editing of existing records. When the Edit option in the toolbar is selected and a row is chosen, the Gantt Chart opens a dialog displaying the current values of the selected record. + +After the required modifications are submitted, a GraphQL mutation sends the updated record to the backend for processing. + +Open the client entry file and configure the `getMutation` function in the `GraphQLAdaptor` to return the appropriate GraphQL mutation for the update action (for example, `updateTask`). + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +let ganttDataManager: DataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLAdaptor({ + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + }, + // mutation for perform update. + getMutation: function (action: any): string { + if (action === 'update') { + return ` + mutation UpdateTask($value: GanttTaskInput!) { + updateTask(value: $value) { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + }`; + } + } + }), + crossDomain: true +}); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var ganttDataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLAdaptor({ + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + }, + // mutation for perform update. + getMutation: function (action) { + if (action === 'update') { + return ` + mutation UpdateTask($value: GanttTaskInput!) { + updateTask(value: $value) { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + }`; + } + } + }), + crossDomain: true +}); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +**Delete:** + +The Delete operation enables removal of records from the application. When the `Delete` option in the `toolbar` is selected and a row is marked for removal, a confirmation prompt appears. After confirmation, a GraphQL mutation sends a delete request to the backend containing only the primary key value. + +Open the client entry file and configure the `getMutation` function in the `GraphQLAdaptor` to return the delete mutation that matches the `deleteTask` mutation defined in the schema. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +let ganttDataManager: DataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLAdaptor({ + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + }, + // mutation for perform delete. + getMutation: function (action: any): string { + if (action === 'remove') { + return ` + mutation DeleteTask($key: ID!) { + deleteTask(key: $key) + }`; + } + } + }), + crossDomain: true +}); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var ganttDataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLAdaptor({ + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + }, + // mutation for perform delete. + getMutation: function (action) { + if (action === 'remove') { + return ` + mutation DeleteTask($key: ID!) { + deleteTask(key: $key) + }`; + } + } + }), + crossDomain: true +}); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## Overriding processResponse to handle mutation responses + +By default the `GraphQLAdaptor` maps read queries that return `{ result, count }`. For CRUD actions the server often returns a single object (insert/update), a boolean (delete) or a different wrapper. To ensure the Gantt's `DataManager` correctly updates after mutations, override `processResponse` to normalize server responses into the shapes the adaptor expects. + +Key points: +- Normalize single-item mutation responses into arrays when the client expects an array. +- Preserve the `{ result, count }` structure for reads so paging and counts continue to work. +- Fall back to `super.processResponse(...)` for any unhandled payloads. + +Recommended adaptor implementation (reviewed and improved): + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { DataManager, GraphQLAdaptor } from '@syncfusion/ej2-data'; + +class GraphQLCrudAdaptor extends GraphQLAdaptor { + processResponse(resData: any, ds: any, query: any, xhr: any, request: any): any { + if (resData && resData.data) { + const data = resData.data; + + // READ - expected shape: { result: [...], count: N } + if (data.getTasks) { + return data.getTasks; + } + + // UPDATE - normalize to array so DataManager can consume it + if (data.updateTask) { + const updated = Array.isArray(data.updateTask) ? data.updateTask : [data.updateTask]; + return { result: updated, count: updated.length }; + } + + // INSERT - normalize to array + if (data.addTask) { + const added = Array.isArray(data.addTask) ? data.addTask : [data.addTask]; + return { result: added, count: added.length }; + } + + // DELETE - server may return boolean; return as-is so calling code can handle it + if (typeof data.deleteTask !== 'undefined') { + return { result: data.deleteTask }; + } + } + + // Fallback to default behavior + return super.processResponse(resData, ds, query, xhr, request); + } +} + +let ganttDataManager: DataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLCrudAdaptor({ // Updated GraphQLAdaptor for CRUD operations + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + } + }), + crossDomain: true +}); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var { DataManager, GraphQLAdaptor } = require('@syncfusion/ej2-data'); + +class GraphQLCrudAdaptor extends GraphQLAdaptor { + processResponse(resData, ds, query, xhr, request) { + if (resData && resData.data) { + const data = resData.data; + + // READ - expected shape: { result: [...], count: N } + if (data.getTasks) { + return data.getTasks; + } + + // UPDATE - normalize to array so DataManager can consume it + if (data.updateTask) { + const updated = Array.isArray(data.updateTask) ? data.updateTask : [data.updateTask]; + return { result: updated, count: updated.length }; + } + + // INSERT - normalize to array + if (data.addTask) { + const added = Array.isArray(data.addTask) ? data.addTask : [data.addTask]; + return { result: added, count: added.length }; + } + + // DELETE - server may return boolean; return as-is so calling code can handle it + if (typeof data.deleteTask !== 'undefined') { + return { result: data.deleteTask }; + } + } + + // Fallback to default behavior + return super.processResponse(resData, ds, query, xhr, request); + } +} + +var ganttDataManager = new DataManager({ + url: 'http://localhost:xxxx/', // Here xxxx represents the port number. + adaptor: new GraphQLCrudAdaptor({ // Updated GraphQLAdaptor for CRUD operations + // Map to { result, count } in GraphQL payload + response: { + result: 'getTasks.result', + count: 'getTasks.count' + }, + // READ: fetch flat tasks (no DataManagerInput) + query: `query getTasks { + getTasks { + count + result { + TaskID + TaskName + // add additional fields to fetch initially, e.g.:StartDate + } + } + }`, + mutation: { + update: 'updateTask', + insert: 'addTask', + remove: 'deleteTask' + } + }), + crossDomain: true +}); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## Running the application + +The solution contains two projects: **GraphQLServer** (Node.js GraphQL backend) and **GanttClient** (##Platform_Name## Gantt Chart client). Start the server first, then start the client. + +**Run the GraphQL server** + +1. Open a terminal (for example, an integrated terminal in Visual Studio Code or Windows Command Prompt opened with Win+R or macOS Terminal launched with Cmd+Space). +2. Navigate to the **GraphQLServer** folder. +3. Confirm that **package.json** is present in the folder. +4. Run the following commands to install dependencies and start the server: + +```bash +npm install +npm run dev +``` + +**Run the client** + +1. Open a separate terminal (or another tab in the same terminal) and navigate to the **GanttClient** folder. +2. Confirm that **package.json** is present in the folder. +3. Run the following command to start the client application: + +```bash +npm start +``` + +4. The client app opens in the browser and the Gantt Chart displays data fetched from the GraphQL server. + +## Troubleshooting + +- Empty response: Verify the GraphQL query returns the expected fields and that the server resolves the requested entities for the requested timeline range. +- 404 or endpoint issues: Confirm the GraphQL endpoint URL configured in the DataManager is correct. +- Server errors: Check server logs and ensure mutations and resolvers handle requested payloads without exceptions. +- Cross-origin errors: Ensure cross‑origin requests are permitted when frontend and backend are hosted separately. +- Related data mismatches: When related datasets are fetched remotely, confirm the schema exposes the expected fields used for display and dependency resolution. + +## Complete sample repository (reference) + +For the complete working implementation of this example, refer to the [GitHub](https://github.com/SyncfusionExamples/ej2-javascript-gantt-chart-samples/tree/master/GraphQlAdaptor) repository. + + +## See also +- [Hybrid data binding](./remote-save-adaptor) +- [RESTful CRUD Operations in ASP.NET Web Forms](./web-method-adaptor) +- [Data binding](https://ej2.syncfusion.com/javascript/documentation/gantt/data-binding) diff --git a/ej2-javascript/gantt/connecting-to-adaptors/odatav4-adaptor.md b/ej2-javascript/gantt/connecting-to-adaptors/odatav4-adaptor.md new file mode 100644 index 000000000..717b7a076 --- /dev/null +++ b/ej2-javascript/gantt/connecting-to-adaptors/odatav4-adaptor.md @@ -0,0 +1,417 @@ +--- +layout: post +title: OData v4 Adaptor in ##Platform_Name## Gantt Chart Control | Syncfusion +description: OData v4 adaptor in Syncfusion ##Platform_Name## Gantt Chart integrates OData v4 services for task data retrieval, updates, and data operations. +control: ODataV4 Adaptor +platform: ej2-javascript +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# OData Remote Data Binding in Syncfusion ##Platform_Name## Gantt Chart + +The `ODataV4Adaptor` in the Syncfusion® DataManager enables seamless integration between the ##Platform_Name## Gantt Chart and OData v4 services by translating the Gantt's task data requests and update actions into OData‑formatted requests and by interpreting OData responses. Use this adaptor when backend exposes OData v4 endpoints and require standardized query capabilities with server-side processing. `ODataV4Adaptor` is intended specifically for OData-compliant services and is not required for standard REST or custom web-method endpoints. + +Once the project creation and backend setup are complete, the next step is to render the Syncfusion® ##Platform_Name## Gantt Chart component on the client side. + +**Project structure:** + +- Frontend: a ##Platform_Name## Gantt Chart project that configures the DataManager with an ODataV4Adaptor. +- Backend: an OData v4 service that exposes task entities and supports the query options the client will use. + +``` +ODataV4Adaptor/ +├── ODataV4Adaptor.client/ # Client-side app (HTML/JS or TS). +│ ├── index.html # Gantt Chart is rendered here. +│ ├── index.ts / index.js # Add odatav4 adaptor here. +│ └── styles.css # Gantt Chart styles. +└── ODataV4Adaptor.Server/ # ASP.NET Core backend (API). + ├── Controllers/ # API controllers (will be created here). + ├── Models/ # Data models (will be created here). + └── Program.cs # Server configuration. +``` + +## Client-side setup using Syncfusion ODataV4Adaptor + +This section explains how the Gantt Chart interacts with an OData v4 service. Implementation and package installation steps are covered in platform‑specific setup guides and are intentionally omitted here. + +### Step 1: Packages and dependencies + +- Ensure ##Platform_Name## Gantt Chart project includes the Syncfusion Gantt Chart and data packages required to render the Gantt Chart and to use the DataManager and ODataV4Adaptor. +- Right‑click the **ODataV4Adaptor.client** folder in **Solution Explorer** and select **Open in Terminal** (available in newer Visual Studio versions), or open a Developer Command prompt/PowerShell from the Start menu and navigate manually to the **ODataV4Adaptor.client directory**. Once inside the folder, confirm that **package.json** is present, then run the following commands to install the required Syncfusion® packages: + +```bash +npm install @syncfusion/ej2-gantt --save +npm install @syncfusion/ej2-data --save +``` + +### Step 2: CSS and component styling + +- Include the required Syncfusion theme and component styles so the Gantt Chart and its input controls render correctly. Add these imports to **styles.css** or include them via the theme bundle: + +```ts +/* Basic Gantt Chart styles */ +@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css"; + +/* For editing, toolbar, and dialog features */ +@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css"; + +/* For rich text editor in dialog notes tab */ +@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css"; +``` + +Reference the stylesheet in **index.html** along with the Gantt Chart container: + +```html + + + + ##Platform_Name## Gantt Chart - ODataV4 Adaptor + + + +
    + + + +``` + +### Step 3: Configure DataManager with ODataV4Adaptor + +- Configure a DataManager instance that points to the OData v4 task endpoint and specifies the ODataV4Adaptor. The Gantt Chart then uses that DataManager as its source for task records and related datasets. + +Conceptually, the adaptor formats timeline and task‑related requests (for example, requests scoped to a taskbar edit, requests to fetch related resources, or requests that convey task modifications) as OData v4 queries the server can process. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data'; +import { Gantt, Selection } from '@syncfusion/ej2-gantt'; + +// Create DataManager with ODataV4Adaptor +let data: DataManager = new DataManager({ + url: 'https://localhost:xxxx/odata/GanttTasks', // Here xxxx represents the port number. + adaptor: new ODataV4Adaptor(), // Handles all ODataV4 communication + key: 'TaskID', + crossDomain: true // Enables cross-domain requests +}); + +Gantt.Inject(Selection); + +let gantt: Gantt = new Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number', isPrimaryKey: true }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var { DataManager, ODataV4Adaptor } = require('@syncfusion/ej2-data'); +var { Gantt, Selection } = require('@syncfusion/ej2-gantt'); + +// Create DataManager with ODataV4Adaptor +var data = new DataManager({ + url: 'https://localhost:xxxx/odata/GanttTasks', // Here xxxx represents the port number. + adaptor: new ODataV4Adaptor(), // Handles all ODataV4 communication + key: 'TaskID', + crossDomain: true // Enables cross-domain requests +}); + +Gantt.Inject(Selection); + +var gantt = new Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number', isPrimaryKey: true }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +**Server-side data operations** + +When tasks, dependencies or resource assignments are numerous or governed by centralized business rules, the server commonly performs processing that would be costly or inconsistent on the client. For Gantt Chart scenarios, server responsibilities typically include selecting tasks for a requested timeline range, applying visibility rules, resolving dependencies, and producing any roll‑up or hierarchical values required by the client. The `Syncfusion.EJ2.AspNet.Core` package supports this approach by providing built‑in methods that efficiently handle these operations on the server, ensuring smooth performance even with heavy data loads. + +## CRUD operations + +The DataManager with ODataV4Adaptor supports **Create** (add records), **Read** (view records), **Update** (modify records), and **Delete** (remove records) workflows for task entities. In Gantt Chart usage, these operations cover task creation, task edits (including taskbar edits and resulting scheduling recalculations), dependency creation or modification, and task deletion. + +**Mapping CRUD operations to service endpoints** + +CRUD operations are conveyed to the service using standard OData conventions. The ODataV4Adaptor works with a single task endpoint and standard HTTP methods: + +| Operation | HTTP Method | URL Example | Description | +|-----------|-------------|-------------|------------| +| **Read** | GET | `/odata/GanttTasks` | Get all records. | +| **Create** | POST | `/odata/GanttTasks` | Add a new record. | +| **Update** | PATCH | `/odata/GanttTasks(1)` | Update record with key "1". | +| **Delete** | DELETE | `/odata/GanttTasks(1)` | Delete record with key "1". | + +### Step 1: Complete server-side controller + +Add the required controller method **GanttController.cs**. Replace the entire controller with this complete version: + +{% tabs %} +{% highlight cs tabtitle="GanttController.cs - Complete CRUD Implementation" %} + +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.OData.Formatter; +using Microsoft.AspNetCore.OData.Query; +using Microsoft.AspNetCore.OData.Routing.Controllers; +using ODataV4Adaptor.Server.Models; + +[Route("[controller]")] +public class GanttTasksController : ODataController +{ + [EnableQuery] + [HttpGet] + public IActionResult Get() + { + return Ok(GanttDataAdaptor.GetAllRecords().AsQueryable()); + } + + [HttpPost] + [EnableQuery] + public IActionResult Post([FromBody] GanttDataAdaptor task) + { + if (task == null) + return BadRequest(); + + GanttDataAdaptor.GetAllRecords().Add(task); + return Created(task); + } + + [HttpPatch("{key}")] + [EnableQuery] + public IActionResult Patch([FromODataUri] int key, [FromBody] GanttDataAdaptor updateRecord) + { + var task = GanttDataAdaptor.GetAllRecords() + .FirstOrDefault(t => t.TaskID == key); + + if (task == null || task.TaskID != updateRecord.TaskID) + return NotFound(); + task = updateRecord; + + return Ok(task); + } + + [HttpDelete("{key}")] + [EnableQuery] + public IActionResult Delete(int key) + { + var task = GanttDataAdaptor.GetAllRecords() + .FirstOrDefault(t => t.TaskID == key); + + if (task == null) + return NotFound(); + + GanttDataAdaptor.GetAllRecords().Remove(task); + return NoContent(); + } +} + +{% endhighlight %} +{% endtabs %} + +### Step 2: Client-side Gantt Chart configuration + +The ##Platform_Name## Gantt Chart enables full CRUD functionality by configuring the required [toolbar](https://ej2.syncfusion.com/javascript/documentation/api/gantt/index-default#toolbar) buttons (`Add`, `Edit`, `Update`, `Delete`, and `Cancel`) and enabling adding, editing, updating, and deleting through the `editSettings` property. This setup allows the Gantt Chart to handle all basic data operations directly from the UI. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data'; +import { Gantt, Edit, Selection, Toolbar } from '@syncfusion/ej2-gantt'; + +// Create DataManager with ODataV4Adaptor +let data: DataManager = new DataManager({ + url: 'https://localhost:xxxx/odata/GanttTasks', // Here xxxx represents the port number. + adaptor: new ODataV4Adaptor(), // Handles all ODataV4 communication + key: 'TaskID', + crossDomain: true // Enables cross-domain requests +}); + +Gantt.Inject(Edit, Selection, Toolbar); + +let gantt: Gantt = new Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'], + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number', isPrimaryKey: true }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var { DataManager, ODataV4Adaptor } = require('@syncfusion/ej2-data'); +var { Gantt, Edit, Selection, Toolbar } = require('@syncfusion/ej2-gantt'); + +// Create DataManager with ODataV4Adaptor +var data = new DataManager({ + url: 'https://localhost:xxxx/odata/GanttTasks', // Here xxxx represents the port number. + adaptor: new ODataV4Adaptor(), // Handles all ODataV4 communication + key: 'TaskID', + crossDomain: true // Enables cross-domain requests +}); + +Gantt.Inject(Edit, Selection, Toolbar); + +var gantt = new Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'], + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number', isPrimaryKey: true }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +> * For detailed editing setup, refer to the [editing documentation](https://ej2.syncfusion.com/javascript/documentation/gantt/managing-tasks/editing-tasks). + +## Run the application + +The solution contains two projects: **ODataV4Adaptor.Server** (ASP.NET Core backend) and **ODataV4Adaptor.client** (##Platform_Name## Gantt Chart client). Start the server first, then start the client. + +**Run the server** + +1. In **Solution Explorer**, set **ODataV4Adaptor.Server** as the startup project. +2. Press F5 (or click **Run**) to start the application in Visual Studio. +3. The server is accessible on a URL like **https://localhost:xxxx**. Verify the API returns data at **https://localhost:xxxx/odata/GanttTasks**, where **xxxx** is the port. + +**Run the client** + +1. Right-click the **ODataV4Adaptor.client** folder in **Solution Explorer** and select **Open in Terminal** (available in newer Visual Studio versions). You can also open a Developer Command prompt/PowerShell and navigate manually to the **ODataV4Adaptor.client** directory. +2. Confirm that **package.json** is present in the folder. +3. Run the following command to start the client application: + +```bash +npm start +``` + +4. The client app opens in the browser and the Gantt Chart displays data fetched from the backend API. + +## Troubleshooting + +| Issue | Cause | Solution | +|---------------------------|-----------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------| +| Empty response | Service not returning task records or required metadata | Verify service returns records with fields like parent ids, resources, and start/end dates | +| 404 responses | Incorrect route or endpoint configuration | Confirm DataManager URLs are correct and endpoints exist | +| 500 or server errors | Server-side exceptions or improper request handling | Check server logs, validate parameters, and ensure scheduling/dependency logic is error-free | +| Cross-origin errors | CORS not enabled or misconfiguration | Ensure cross-origin requests are allowed when frontend and backend are on different domains | +| Related data mismatches | Remote datasets not returning expected values | Confirm related endpoints return correct data for display and dependency mapping | + +## Complete sample repository + +For the complete working implementation of this example, refer to the [GitHub](https://github.com/SyncfusionExamples/ej2-javascript-gantt-chart-samples/tree/master/ODataV4Adaptor) repository. + + +## See also +- [Hybrid data binding](./remote-save-adaptor) +- [RESTful CRUD Operations in ASP.NET Web Forms](./web-method-adaptor) +- [Data binding](https://ej2.syncfusion.com/javascript/documentation/gantt/data-binding) diff --git a/ej2-javascript/gantt/connecting-to-adaptors/remote-save-adaptor.md b/ej2-javascript/gantt/connecting-to-adaptors/remote-save-adaptor.md new file mode 100644 index 000000000..281aa05d5 --- /dev/null +++ b/ej2-javascript/gantt/connecting-to-adaptors/remote-save-adaptor.md @@ -0,0 +1,514 @@ +--- +layout: post +title: Remote Save Adaptor in ##Platform_Name## Gantt Chart Control | Syncfusion +description: Remote Save adaptor in Syncfusion ##Platform_Name## Gantt Chart loads data once and persists CRUD operations through a batch endpoint. +control: RemoteSave Adaptor +platform: ej2-javascript +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# RemoteSaveAdaptor in Syncfusion ##Platform_Name## Gantt Chart + +The `RemoteSaveAdaptor` in the Syncfusion® ##Platform_Name## Gantt Chart provides a hybrid data workflow. Use this adaptor when want to fetch the complete task set once, perform client-side operations for responsiveness, and persist edits back to the server via batch CRUD requests. Choose `RemoteSaveAdaptor` when fast client-side interaction is required while maintaining server-side data persistence. Unlike fully remote adaptors, it combines local data operations with remote synchronization. + +This guide describes the conceptual project layout and patterns for wiring the Syncfusion® ##Platform_Name## Gantt Chart to a backend that implements a batch CRUD endpoint. + +**Project structure:** + +- Frontend: a ##Platform_Name## Gantt Chart project that hosts the Gantt Chart and loads the full task dataset into a `DataManager` configured with `RemoteSaveAdaptor`. +- Backend: a web API that serves the complete task list and exposes a batch endpoint that accepts added/changed/deleted records in a single payload. + +``` +RemoteSaveAdaptor/ +├── RemoteSaveAdaptor.client/ # Client-side app (HTML/JS or TS). +│ ├── index.html # Gantt Chart is rendered here. +│ ├── index.ts / index.js # Add RemoteSaveAdaptor here. +│ └── styles.css # Gantt Chart styles. +└── RemoteSaveAdaptor.Server/ # ASP.NET Core backend (API). + ├── Controllers/ # API controllers (will be created here). + ├── Models/ # Data models (will be created here). + └── Program.cs # Server configuration. +``` + +## Client-side setup using RemoteSave Adaptor + +This section describes at a conceptual level, how the Gantt Chart consumes task data from remote save and submits task changes. Implementation and package installation steps are covered in platform‑specific setup guides and are intentionally omitted here. + +### Step 1: Packages and dependencies + +- Ensure the ##Platform_Name## Gantt Chart project includes the Syncfusion Gantt Chart and data packages required to render the Gantt Chart and to use the DataManager and RemoteSave Adaptor. +- Right‑click the **RemoteSaveAdaptor.client** folder in **Solution Explorer** and select **Open in Terminal** (available in newer Visual Studio versions), or open a Developer Command prompt/PowerShell from the Start menu and navigate manually to the **RemoteSaveAdaptor.client**. Once inside the folder, confirm that **package.json** is present, then run the following commands to install the required Syncfusion® packages: + +```bash +npm install @syncfusion/ej2-gantt --save +npm install @syncfusion/ej2-data --save +``` + +### Step 2: CSS and component styling + +- Include the required Syncfusion theme and component styles so the Gantt Chart and its input controls render correctly. Add these imports to **styles.css**: + +```ts +/* Basic Gantt Chart styles */ +@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css"; + +/* For editing, toolbar, and dialog features */ +@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css"; + +/* For rich text editor in dialog notes tab */ +@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css"; +``` + +Reference the stylesheet in **index.html** along with the Gantt Chart container: + +```html + + + + ##Platform_Name## Gantt Chart - Remote Save Adaptor + + + +
    + + + +``` + +### Step 3: Configure DataManager with RemoteSave Adaptor + +In the client entry file **index.ts** (or **index.js**), import `DataManager` and `RemoteSaveAdaptor` from `@syncfusion/ej2-data`. The `DataManager` serves as an abstraction layer that manages the data source configuration and coordinates data operations with the Gantt Chart. + +**Configure the DataManager** + +1. **Assign RemoteSaveAdaptor:** Set the `adaptor` property within the `dataSource` configuration to `new RemoteSaveAdaptor()`. + +2. **Map CRUD operations**: CRUD operations within the Gantt Chart can be mapped to server-side controller actions using specific properties: + - `batchUrl`: Specifies the URL for batch editing + +3. **Load JSON data**: Fetch initial data from the server that contains all records. + +**Configure the Gantt chart** + +1. **Set dataSource:** Configure the `dataSource` property of Syncfusion® ##Platform_Name## Gantt Chart with a JSON object. + +2. **Enable editing:** Use [editSettings](https://ej2.syncfusion.com/javascript/documentation/api/gantt/index-default#editsettings) to allow CRUD actions (allowEditing, allowAdding, allowDeleting). + +3. **Add toolbar:** Configure [toolbar](https://ej2.syncfusion.com/javascript/documentation/api/gantt/index-default#toolbar) with items such as Add, Edit, Delete, Update, Cancel, and Search. + +4. **Enable client-side features:** + + - [allowAdding](https://ej2.syncfusion.com/javascript/documentation/api/gantt/editsettingsmodel#allowadding): Enables adding. + + - [allowDeleting](https://ej2.syncfusion.com/javascript/documentation/api/gantt/editsettingsmodel#allowdeleting): Enables deleting. + + - [allowTaskbarEditing](https://ej2.syncfusion.com/javascript/documentation/api/gantt/editsettingsmodel#allowtaskbarediting): Enables taskbar editing. + +In this example, data is fetched from the server using the `fetch` method and assigned to the Gantt Chart's [dataSource](https://ej2.syncfusion.com/javascript/documentation/api/gantt/index-default#datasource) property through the `DataManager` instance. + + + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { Gantt, Edit, Selection, Toolbar } from '@syncfusion/ej2-gantt'; +import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data'; + +Gantt.Inject(Edit, Selection, Toolbar); +const serviceUrl: string = 'https://localhost:xxxx/api/gantt'; // Here xxxx represents the port number. +let data: DataManager; + +function load() { + fetch(serviceUrl) + .then((response: Response) => response.json()) + .then((result: object[]) => { + data = new DataManager({ + json: result, + adaptor: new RemoteSaveAdaptor(), + batchUrl: `${serviceUrl}/Batch`, + }); + createGantt(); + + }) + .catch((error: Error) => console.error('Error fetching data:', error)); +} +function createGantt() { + let gantt: Gantt = new Gantt({ + dataSource: data, + height: '450px', + allowSelection: true, + taskFields: { + id: 'taskId', + name: 'taskName', + startDate: 'startDate', + endDate: 'endDate', + duration: 'duration', + progress: 'progress', + parentID: 'parentId' + }, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], + columns: [ + { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'taskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] + }); + gantt.appendTo('#Gantt'); +} + +load(); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import { Gantt, Edit, Selection, Toolbar } from '@syncfusion/ej2-gantt'; +import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data'; + +Gantt.Inject(Edit, Selection, Toolbar); +const serviceUrl = 'https://localhost:7260/api/gantt'; // Here 7260 represents the port number. +let data; + +function load() { + fetch(serviceUrl) + .then((response) => response.json()) + .then((result) => { + data = new DataManager({ + json: result, + adaptor: new RemoteSaveAdaptor(), + batchUrl: `${serviceUrl}/Batch`, + }); + createGantt(); + + }) + .catch((error) => console.error('Error fetching data:', error)); +} +function createGantt() { + const gantt = new Gantt({ + dataSource: data, + height: '450px', + allowSelection: true, + taskFields: { + id: 'taskId', + name: 'taskName', + startDate: 'startDate', + endDate: 'endDate', + duration: 'duration', + progress: 'progress', + parentID: 'parentId' + }, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], + columns: [ + { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'taskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] + }); + gantt.appendTo('#Gantt'); +} + +load(); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## CRUD operations + +The DataManager with RemoteSaveAdaptor supports Create, Read, Update, and Delete workflows for task entities. In Gantt Chart usage, these operations cover task creation, task edits (including taskbar edits and resulting scheduling recalculations), dependency creation or modification, and task deletion. + +**Server-side batch endpoint** + +The server receives a batch payload that contains `added`, `changed`, and `deleted` arrays. The batch endpoint applies each section in turn—assigning identifiers for new tasks if required, updating existing records, and removing deleted items—then returns a response the client can reconcile against its local state. + +### Step 1: Server-side controller + +Add the required controller method to **GanttController.cs**. Replace the entire controller with this complete version: + +{% tabs %} +{% highlight cs tabtitle="GanttController.cs - Batch Handler" %} +using GanttServerSample.Models; +using Microsoft.AspNetCore.Mvc; + +namespace GanttServerSample.Controllers +{ + [Route("api/[controller]")] + public class GanttController : ControllerBase + { + /// + /// GET endpoint – returns all Gantt tasks + /// Used by the client Gantt Chart for initial data load + /// + [HttpGet] + public List GetGanttData() + { + return GanttData.GetAllTasks().ToList(); + } + + [HttpPost("Batch")] + public IActionResult BatchUpdate([FromBody] CRUDModel crud) + { + // INSERT + if (crud.added != null && crud.added.Count > 0) + { + foreach (var task in crud.added) + { + task.TaskId = GanttData.GetAllTasks().Max(x => x.TaskId) + 1; + GanttData.GetAllTasks().Add(task); + } + } + // UPDATE + if (crud.changed != null && crud.changed.Count > 0) + { + foreach (var task in crud.changed) + { + var data = GanttData.GetAllTasks() + .FirstOrDefault(x => x.TaskId == task.TaskId); + if (data != null) + { + data.TaskName = task.TaskName; + data.StartDate = task.StartDate; + data.EndDate = task.EndDate; + data.Duration = task.Duration; + data.Progress = task.Progress; + data.ParentId = task.ParentId; + } + } + } + // DELETE + if (crud.deleted != null && crud.deleted.Count > 0) + { + foreach (var task in crud.deleted) + { + var data = GanttData.GetAllTasks() + .FirstOrDefault(x => x.TaskId == task.TaskId); + + if (data != null) + { + GanttData.GetAllTasks().Remove(data); + } + } + } + return Ok(crud); + } + + + } + public class CRUDModel where T : class + { + public string? action { get; set; } + public string? key { get; set; } + public string? table { get; set; } + public List? added { get; set; } + public List? changed { get; set; } + public List? deleted { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +> Note: The sample above is a focused illustration of the batch handler shape. Implement project‑specific scheduling, dependency validation, and identifier assignment logic inside the batch method so server rules remain authoritative. + +### Step 2: Client-side Gantt Chart configuration + +The ##Platform_Name## Gantt Chart enables full CRUD functionality by configuring the required [toolbar](https://ej2.syncfusion.com/javascript/documentation/api/gantt/index-default#toolbar) buttons (`Add`, `Edit`, `Update`, `Delete`, and `Cancel`) and enabling adding, editing, updating, and deleting through the `editSettings` property. This setup allows the Gantt Chart to handle all basic data operations directly from the UI. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { Gantt, Edit, Selection, Toolbar } from '@syncfusion/ej2-gantt'; +import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data'; + +Gantt.Inject(Edit, Selection, Toolbar); +const serviceUrl: string = 'https://localhost:xxxx/api/gantt'; // Here xxxx represents the port number. +let data: DataManager; + +function load() { + fetch(serviceUrl) + .then((response: Response) => response.json()) + .then((result: object[]) => { + data = new DataManager({ + json: result, + adaptor: new RemoteSaveAdaptor(), + batchUrl: `${serviceUrl}/Batch`, + }); + createGantt(); + + }) + .catch((error: Error) => console.error('Error fetching data:', error)); +} +function createGantt() { + let gantt: Gantt = new Gantt({ + dataSource: data, + height: '450px', + allowSelection: true, + taskFields: { + id: 'taskId', + name: 'taskName', + startDate: 'startDate', + endDate: 'endDate', + duration: 'duration', + progress: 'progress', + parentID: 'parentId' + }, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], + columns: [ + { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'taskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] + }); + gantt.appendTo('#Gantt'); +} + +load(); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import { Gantt, Edit, Selection, Toolbar } from '@syncfusion/ej2-gantt'; +import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data'; + +Gantt.Inject(Edit, Selection, Toolbar); +const serviceUrl = 'https://localhost:7260/api/gantt'; // Here 7260 represents the port number. +let data; + +function load() { + fetch(serviceUrl) + .then((response) => response.json()) + .then((result) => { + data = new DataManager({ + json: result, + adaptor: new RemoteSaveAdaptor(), + batchUrl: `${serviceUrl}/Batch`, + }); + createGantt(); + + }) + .catch((error) => console.error('Error fetching data:', error)); +} +function createGantt() { + const gantt = new Gantt({ + dataSource: data, + height: '450px', + allowSelection: true, + taskFields: { + id: 'taskId', + name: 'taskName', + startDate: 'startDate', + endDate: 'endDate', + duration: 'duration', + progress: 'progress', + parentID: 'parentId' + }, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], + columns: [ + { field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'taskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] + }); + gantt.appendTo('#Gantt'); +} + +load(); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## Run and verify (conceptual) + +The solution contains two projects: **RemoteSaveAdaptor.Server** (ASP.NET Core backend) and **RemoteSaveAdaptor.client** (##Platform_Name## Gantt Chart client). Start the server first, then start the client. + +### Run the server + +1. In **Solution Explorer**, set **RemoteSaveAdaptor.Server** as the startup project. +2. Press F5 (or click **Run**) to start the application in Visual Studio. +3. The server is accessible on a URL like **https://localhost:xxxx**. Verify the API returns data at **https://localhost:xxxx/api/gantt/Batch**, where **xxxx** is the port. + +### Run the client + +1. Right-click the **RemoteSaveAdaptor.client** folder in **Solution Explorer** and select **Open in Terminal** (available in newer Visual Studio versions). You can also open a Developer Command prompt/PowerShell and navigate manually to the **RemoteSaveAdaptor.client** directory. +2. Confirm that **package.json** is present in the folder. +3. Run the following command to start the client application: + +```bash +npm start +``` + +4. The client app opens in the browser and the Gantt Chart displays data fetched from the backend API. + +## Troubleshooting + +| Issue | Cause | Solution | +|---------------------------|------------------------------------------------------------|------------------------------------------------------------------------------------------| +| Empty initial load | GET task endpoint not returning required task records | Verify endpoint returns records with required fields (ids, start/end dates, parent ids) | +| Batch requests not applied| Incorrect batchUrl or unsupported server payload | Confirm `batchUrl` is correct and server accepts expected payload format | +| Identifier mismatches | Server not returning stable keys for new records | Ensure server returns assigned ids so client can replace temporary ids | +| CORS or network errors | Cross-origin requests blocked or misconfiguration | Confirm CORS is enabled when frontend and backend are hosted separately | + +## Complete sample repository + +For the complete working implementation of this example, refer to the [GitHub](https://github.com/SyncfusionExamples/ej2-javascript-gantt-chart-samples/tree/master/RemoteSaveAdaptor) repository. + +## See also +- [Connect to OdataV4 services](./odatav4-adaptor) +- [RESTful CRUD Operations in ASP.NET Web Forms](./web-method-adaptor) +- [Data binding](https://ej2.syncfusion.com/javascript/documentation/gantt/data-binding) diff --git a/ej2-javascript/gantt/connecting-to-adaptors/web-method-adaptor.md b/ej2-javascript/gantt/connecting-to-adaptors/web-method-adaptor.md new file mode 100644 index 000000000..c6d94a023 --- /dev/null +++ b/ej2-javascript/gantt/connecting-to-adaptors/web-method-adaptor.md @@ -0,0 +1,454 @@ +--- +layout: post +title: Web Method Adaptor in ##Platform_Name## Gantt Chart Control | Syncfusion +description: Web Method adaptor in Syncfusion ##Platform_Name## Gantt Chart sends task data requests and CRUD updates to server-side web methods. +control: WebMethod Adaptor +platform: ej2-javascript +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# WebMethodAdaptor in Syncfusion ##Platform_Name## Gantt Chart + +The `WebMethodAdaptor` enables the Syncfusion® ##Platform_Name## Gantt Chart to communicate with server web methods and legacy endpoints by packaging task data requests and task modification payloads into a structured request envelope the server can deserialize. Use this adaptor when backend exposes web methods that handle task requests and updates via HTTP POST operations, especially if need to integrate with legacy systems or custom endpoints. Unlike other adaptors, `WebMethodAdaptor` is designed for scenarios where standard REST or OData endpoints are not available. + +For backend configuration and expected request/response shapes, consult the WebMethod adaptor backend setup documentation for platform. After the backend is prepared, configure the DataManager in the application to use the WebMethod adaptor as the Gantt Chart data source. + +**Project structure (conceptual):** + +- Frontend: a ##Platform_Name## Gantt Chart project hosting the Gantt Chart and a DataManager configured for WebMethod endpoints. +- Backend: a web methods service that receives the adaptor's request envelope, processes task queries and mutation payloads, and returns JSON task records and related metadata. + + +``` +WebMethodAdaptor/ +├── WebMethodAdaptor.client/ # Client-side app (HTML/JS or TS). +│ ├── index.html # Gantt Chart is rendered here. +│ ├── index.ts / index.js # Add WebMethodAdaptor here. +│ └── styles.css # Gantt Chart styles. +└── WebMethodAdaptor.Server/ # ASP.NET Core backend (API). + ├── Controllers/ # API controllers (will be created here). + ├── Models/ # Data models (will be created here). + └── Program.cs # Server configuration. +``` + +## Client-side setup with WebMethod adaptor + +This section describes at a conceptual level, how the Gantt Chart consumes task data from web methods and submits task changes. Implementation and package installation steps are covered in platform‑specific setup guides and are intentionally omitted here. + +### Step 1: Packages and dependencies + +- Ensure the ##Platform_Name## Gantt Chart project includes the Syncfusion Gantt Chart and data packages required to render the Gantt Chart and to use the DataManager and WebMethod adaptor. +- Right‑click the **WebMethodAdaptor.client** folder in **Solution Explorer** and select **Open in Terminal** (available in newer Visual Studio versions), or open a Developer Command prompt/PowerShell from the Start menu and navigate manually to the **WebMethodAdaptor.client**. Once inside the folder, confirm that **package.json** is present, then run the following commands to install the required Syncfusion® packages: + +```bash +npm install @syncfusion/ej2-gantt --save +npm install @syncfusion/ej2-data --save +``` + +### Step 2: CSS and component styling + +- Include the required Syncfusion theme and component styles so the Gantt Chart and its input controls render correctly. Add these imports to **styles.css**: + +```ts +/* Basic Gantt Chart styles */ +@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css"; + +/* For editing, toolbar, and dialog features */ +@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css"; +@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css"; + +/* For rich text editor in dialog notes tab */ +@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css"; +``` + +Reference the stylesheet in **index.html** along with the Gantt Chart container: + +```html + + + + ##Platform_Name## Gantt Chart - WebMethod Adaptor + + + +
    + + + +``` + +### Step 3: Configure DataManager with WebMethod adaptor + +- Configure a DataManager instance that targets web method endpoints and specifies the WebMethod adaptor. The Gantt Chart uses that DataManager to fetch tasks, request related datasets, and submit task create/update/delete payloads wrapped in the expected envelope. + +Conceptually, the adaptor sends a request object that contains request metadata (for example, whether the client requires counts or which timeline range to return) together with task update payloads when the user performs create, update, or delete actions in the Gantt Chart. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data'; +import { Gantt, Selection } from '@syncfusion/ej2-gantt'; + +// Configure DataManager with WebMethodAdaptor +let data: DataManager = new DataManager({ + url: 'https://localhost:xxxx/api/Gantt', // Here xxxx represents the port number. + adaptor: new WebMethodAdaptor(), + crossDomain: true +}); + +Gantt.Inject(Selection); + +let gantt: Gantt = new Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'string' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var { DataManager, WebMethodAdaptor } = require('@syncfusion/ej2-data'); +var { Gantt, Selection } = require('@syncfusion/ej2-gantt'); + +// Configure DataManager with WebMethodAdaptor +var data = new DataManager({ + url: 'https://localhost:xxxx/api/Gantt', // Here xxxx represents the port number. + adaptor: new WebMethodAdaptor(), + crossDomain: true +}); + +Gantt.Inject(Selection); + +var gantt = new Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'string' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +**Server-side data operations** + +When task sets are large or when scheduling rules must be applied consistently, the server receives responsibility for processing task queries and task modifications. Using web methods, the server applies scheduling rules, dependency validation, and any project‑specific business logic before returning task records or acknowledging changes.The `Syncfusion.EJ2.AspNet.Core` package supports this approach by providing built‑in methods that efficiently handle these operations on the server, ensuring smooth performance even with heavy data loads. + +## CRUD operations + +The DataManager with WebMethodAdaptor supports Create, Read, Update, and Delete workflows for task entities. In Gantt Chart usage, these operations cover task creation, task edits (including taskbar edits and resulting scheduling recalculations), dependency creation or modification, and task deletion. + +**Mapping CRUD operations to service endpoints** + +CRUD operations are conveyed to the service using standard WebMethod conventions. The WebMethodAdaptor works with a single task endpoint for task operations: + +| Operation | HTTP Method | URL Example | Description | +|-----------|-------------|-------------|------------| +| **Read** | POST | `/api/Gantt` | Get all records. | +| **Create** | POST | `/api/Gantt` | Add a new record. | +| **Update** | POST | `/api/Gantt` | Update record. | +| **Delete** | POST | `/api/Gantt` | Delete record. | + +### Step 1: Server-side controller + +Add the required controller method to **GanttController.cs**. Replace the entire controller with this complete version: + +{% tabs %} +{% highlight cs tabtitle="GanttController.cs - Complete CRUD Implementation" %} +using Microsoft.AspNetCore.Mvc; +using Syncfusion.EJ2.Base; +using WebMethodAdaptorDemo.Server.Models; + +namespace WebMethodAdaptorDemo.Server.Controllers +{ + [Route("api/[controller]")] + [ApiController] + public class GanttController : ControllerBase + { + [HttpGet] + public List GetOrderData() + { + return GanttDataAdaptor.GetGanttTasks().ToList(); + } + + [HttpPost] + public object Post([FromBody] CRUDModel data) + { + + if (data == null) + return BadRequest(); + + // Work against the single backing list once + var tasks = GanttDataAdaptor.GetGanttTasks(); // assume List + + if (data.action == "batch") + { + // Added: assign TaskID if missing and add to backing list + if (data.added != null) + { + int nextId = tasks.Any() ? tasks.Max(t => t.TaskID) + 1 : 1; + foreach (var task in data.added) + { + if (task.TaskID == 0) + task.TaskID = nextId++; + tasks.Add(task); + } + } + + // Changed: update existing items safely (check for null) + if (data.changed != null) + { + foreach (var task in data.changed) + { + var existing = tasks.FirstOrDefault(t => t.TaskID == task.TaskID); + if (existing == null) continue; + + existing.TaskName = task.TaskName; + existing.StartDate = task.StartDate; + existing.EndDate = task.EndDate; + existing.Duration = task.Duration; + existing.Progress = task.Progress; + existing.Dependency = task.Dependency; + existing.ParentID = task.ParentID; + } + } + + // Deleted: remove by TaskID + if (data.deleted != null) + { + foreach (var task in data.deleted) + { + var existing = tasks.FirstOrDefault(t => t.TaskID == task.TaskID); + if (existing != null) + tasks.Remove(existing); + } + } + } + + // Return the updated data and count + var dataSource = tasks.AsQueryable(); + int totalRecordsCount = tasks.Count; + return Ok(new { result = dataSource, count = totalRecordsCount }); + } + } + + /// + /// Wrapper class for WebMethodAdaptor requests. + /// WebMethodAdaptor wraps DataManagerRequest inside a 'value' property. + /// + public class DataManager + { + public required DataManagerRequest Value { get; set; } + } + + public class CRUDModel + where T : class + { + public string? action { get; set; } + public string? keyColumn { get; set; } + public object? key { get; set; } + public T? value { get; set; } + public List? added { get; set; } + public List? changed { get; set; } + public List? deleted { get; set; } + public IDictionary? @params { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +### Step 2: Client-side Gantt Chart configuration + +The ##Platform_Name## Gantt Chart enables full CRUD functionality by configuring the required [toolbar](https://ej2.syncfusion.com/javascript/documentation/api/gantt/index-default#toolbar) buttons (`Add`, `Edit`, `Update`, `Delete`, and `Cancel`) and enabling adding, editing, updating, and deleting through the `editSettings` property. This setup allows the Gantt Chart to handle all basic data operations directly from the UI. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +import { DataManager, WebMethodAdaptor } from '@syncfusion/ej2-data'; +import { Gantt, Edit, Selection, Toolbar } from '@syncfusion/ej2-gantt'; + +// Configure DataManager with WebMethodAdaptor +let data: DataManager = new DataManager({ + url: 'https://localhost:xxxx/api/Gantt', // Here xxxx represents the port number. + adaptor: new WebMethodAdaptor(), + crossDomain: true +}); + +Gantt.Inject(Edit, Selection, Toolbar); + +let gantt: Gantt = new Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'], + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'string' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +var { DataManager, WebMethodAdaptor } = require('@syncfusion/ej2-data'); +var { Gantt, Edit, Selection, Toolbar } = require('@syncfusion/ej2-gantt'); + +// Configure DataManager with WebMethodAdaptor +var data = new DataManager({ + url: 'https://localhost:xxxx/api/Gantt', // Here xxxx represents the port number. + adaptor: new WebMethodAdaptor(), + crossDomain: true +}); + +Gantt.Inject(Edit, Selection, Toolbar); + +var gantt = new Gantt({ + dataSource: data, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + dependency: 'Dependency', + parentID: 'ParentID' + }, + editSettings: { + allowEditing: true, + allowAdding: true, + allowDeleting: true, + allowTaskbarEditing: true + }, + toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'], + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 90, type: 'number' }, + { field: 'TaskName', headerText: 'Task Name', textAlign: 'Left', width: 270, type: 'string' }, + { field: 'StartDate', headerText: 'Start Date', textAlign: 'Right', width: 150, format: 'yMd', type: 'dateTime' }, + { field: 'EndDate', headerText: 'End Date', textAlign: 'Right', width: 150, format: 'dd/MM/yyyy hh:mm', type: 'dateTime' }, + { field: 'Duration', headerText: 'Duration', textAlign: 'Right', width: 90, type: 'string' }, + { field: 'Progress', headerText: 'Progress', textAlign: 'Right', width: 120, type: 'number' } + ] +}); +gantt.appendTo('#Gantt'); +{% endhighlight %} +{% endtabs %} + +{% endif %} + +## Run the application (conceptual) + +The solution contains two projects: **WebMethodAdaptor.Server** (ASP.NET Core backend) and **WebMethodAdaptor.client** (##Platform_Name## Gantt Chart client). Start the server first, then start the client. + +**Run the server** + +1. In **Solution Explorer**, set **WebMethodAdaptor.Server** as the startup project. +2. Press F5 (or click **Run**) to start the application in Visual Studio. +3. The server is accessible on a URL like **https://localhost:xxxx**. Verify the API returns data at **https://localhost:xxxx/api/Gantt**, where **xxxx** is the port. + +**Run the client** + +1. Right-click the **WebMethodAdaptor.client** folder in **Solution Explorer** and select **Open in Terminal** (available in newer Visual Studio versions). You can also open a Developer Command prompt/PowerShell and navigate manually to the **WebMethodAdaptor.client** directory. +2. Confirm that **package.json** is present in the folder. +3. Run the following command to start the client application: + +```bash +npm start +``` + +4. The client app opens in the browser and the Gantt Chart displays data fetched from the backend API. + +## Troubleshooting + +| Issue | Cause | Solution | +|---------------------------|-----------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------| +| Empty response | Web method not returning task records or required metadata | Verify method returns records with parent ids, resource assignments, and start/end dates for the timeline range | +| 404 responses | Incorrect web method route or endpoint configuration | Confirm DataManager URLs and routes are correctly configured and accessible | +| 500 or server errors | Server-side exceptions or improper request parameter handling | Check server logs, validate parameter parsing, and ensure scheduling/dependency logic is error-free | +| CORS errors | Cross-origin requests blocked or not configured | Ensure CORS is enabled when frontend and backend are hosted on different origins | +| Related data mismatches | Remote datasets not returning expected values for relationships and dependencies | Confirm related endpoints return correct data required for display and dependency resolution | + +## Complete sample repository + +For the complete working implementation of this example, refer to the [GitHub](https://github.com/SyncfusionExamples/ej2-javascript-gantt-chart-samples/tree/master/WebMethodAdaptor) repository. + +## See also +- [Connect to OdataV4 services](./odatav4-adaptor) +- [Hybrid data binding](./remote-save-adaptor) +- [Data binding](https://ej2.syncfusion.com/javascript/documentation/gantt/data-binding) diff --git a/ej2-javascript/gantt/sorting.md b/ej2-javascript/gantt/sorting.md index ac0f9cb5e..612147265 100644 --- a/ej2-javascript/gantt/sorting.md +++ b/ej2-javascript/gantt/sorting.md @@ -263,6 +263,8 @@ You can customize the sorting behavior in the Syncfusion
  • Performance Best Practices
    • +
  • Connecting to Adaptors + +
  • Columns
    • -
  • Scrolling
    • -
  • Virtual Scrolling
    • +
  • Scrolling
    • +
  • Virtual Scrolling
  • Resources in Project View
    • Work
      • From 44e06c60c49177e22c38cdf539724f3a88f6e570 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 9 Jul 2026 13:44:57 +0530 Subject: [PATCH 03/26] Integrated latest changes at 07-09-2026 1:30:03 PM --- .../ai-assistview/ai-integrations/gemini-ai/systemjs.config.js | 1 + .../ai-assistview/ai-integrations/lite-llm/systemjs.config.js | 3 ++- .../ai-assistview/ai-integrations/llm-model/systemjs.config.js | 1 + .../ai-integrations/mcp-server/systemjs.config.js | 1 + .../ai-assistview/ai-integrations/open-ai/systemjs.config.js | 1 + .../ai-assistview/appearance/cssclass/systemjs.config.js | 3 ++- .../ai-assistview/appearance/height/systemjs.config.js | 3 ++- .../ai-assistview/appearance/width/systemjs.config.js | 3 ++- .../ai-assistview/assist-view/clearbutton/systemjs.config.js | 3 ++- .../assist-view/markdown-prompt/systemjs.config.js | 3 ++- .../ai-assistview/assist-view/placeholder/systemjs.config.js | 3 ++- .../ai-assistview/assist-view/prompt-icon/systemjs.config.js | 3 ++- .../ai-assistview/assist-view/prompt-text/systemjs.config.js | 3 ++- .../ai-assistview/assist-view/prompts/systemjs.config.js | 3 ++- .../ai-assistview/assist-view/response-icon/systemjs.config.js | 3 ++- .../assist-view/scroll-to-bottom/systemjs.config.js | 3 ++- .../assist-view/suggestions-header/systemjs.config.js | 3 ++- .../ai-assistview/assist-view/suggestions/systemjs.config.js | 3 ++- .../ai-assistview/chain-of-thoughts/basic/systemjs.config.js | 3 ++- .../chain-of-thoughts/block-template/systemjs.config.js | 3 ++- .../chain-of-thoughts/editable-context/systemjs.config.js | 3 ++- .../chain-of-thoughts/item-template/systemjs.config.js | 3 ++- .../chain-of-thoughts/stages-status/systemjs.config.js | 3 ++- .../code-snippet/ai-assistview/defaultprompts/js/index.html | 2 ++ .../ai-assistview/defaultprompts/systemjs.config.js | 3 ++- .../ai-assistview/events/attachment-click/systemjs.config.js | 3 ++- .../ai-assistview/events/attachment-failure/systemjs.config.js | 3 ++- .../ai-assistview/events/attachment-removed/systemjs.config.js | 3 ++- .../ai-assistview/events/attachment-success/systemjs.config.js | 3 ++- .../ai-assistview/events/before-attachment/systemjs.config.js | 3 ++- .../ai-assistview/events/created/systemjs.config.js | 3 ++- .../ai-assistview/events/prompt-changed/systemjs.config.js | 3 ++- .../ai-assistview/events/prompt-request/systemjs.config.js | 3 ++- .../file-attachments/enable-attachment/systemjs.config.js | 3 ++- .../file-attachments/file-size/systemjs.config.js | 3 ++- .../file-attachments/file-type/systemjs.config.js | 3 ++- .../file-attachments/maximum-count/systemjs.config.js | 3 ++- .../file-attachments/save-remove-url/systemjs.config.js | 3 ++- .../code-snippet/ai-assistview/gettingstarted/js/index.html | 1 + .../ai-assistview/gettingstarted/systemjs.config.js | 3 ++- .../ai-assistview/methods/execute-prompt/systemjs.config.js | 3 ++- .../ai-assistview/methods/response-object/systemjs.config.js | 3 ++- .../ai-assistview/methods/response-string/systemjs.config.js | 3 ++- .../ai-assistview/register-tool/systemjs.config.js | 1 + .../speech/speech-configuration/systemjs.config.js | 1 + .../ai-assistview/speech/speech-events/systemjs.config.js | 1 + .../code-snippet/ai-assistview/speech/stt/systemjs.config.js | 1 + .../ai-assistview/speech/tooltip-settings/systemjs.config.js | 1 + .../ai-assistview/speech/tts-settings/systemjs.config.js | 1 + .../code-snippet/ai-assistview/speech/tts/systemjs.config.js | 1 + .../ai-assistview/templates/banner/systemjs.config.js | 3 ++- .../ai-assistview/templates/footer-template/systemjs.config.js | 3 ++- .../ai-assistview/templates/prompt-item/systemjs.config.js | 3 ++- .../ai-assistview/templates/response-item/systemjs.config.js | 3 ++- .../templates/suggestions-template/systemjs.config.js | 3 ++- .../ai-assistview/toolbar-items/align/systemjs.config.js | 3 ++- .../ai-assistview/toolbar-items/cssclass/systemjs.config.js | 3 ++- .../ai-assistview/toolbar-items/disabled/systemjs.config.js | 3 ++- .../toolbar-items/footer-itemclick/systemjs.config.js | 3 ++- .../toolbar-items/footer-position/systemjs.config.js | 3 ++- .../toolbar-items/footer-settings/systemjs.config.js | 3 ++- .../ai-assistview/toolbar-items/item-type/systemjs.config.js | 3 ++- .../ai-assistview/toolbar-items/itemclick/systemjs.config.js | 3 ++- .../toolbar-items/prompt-itemclick/systemjs.config.js | 3 ++- .../toolbar-items/prompt-settings/systemjs.config.js | 3 ++- .../toolbar-items/regenerate-preload/systemjs.config.js | 3 ++- .../toolbar-items/regenerate-response/systemjs.config.js | 3 ++- .../toolbar-items/response-itemclick/systemjs.config.js | 3 ++- .../toolbar-items/response-settings/systemjs.config.js | 3 ++- .../ai-assistview/toolbar-items/template/systemjs.config.js | 3 ++- .../toolbar-items/toolbar-text/systemjs.config.js | 3 ++- .../ai-assistview/toolbar-items/tooltip/systemjs.config.js | 3 ++- .../ai-assistview/toolbar-items/visible/systemjs.config.js | 3 ++- .../ai-assistview/views/active-view/systemjs.config.js | 3 ++- .../code-snippet/ai-assistview/views/type/systemjs.config.js | 3 ++- .../ai-assistview/views/view-template/systemjs.config.js | 3 ++- ej2-javascript/grid/ts/getting-started.md | 2 +- 77 files changed, 141 insertions(+), 64 deletions(-) diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js index 0a1b55a51..087e234a2 100644 --- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/gemini-ai/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://cdn.jsdelivr.net/npm/@google/generative-ai@0.24.1/dist/index.min.js", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/systemjs.config.js index 64c4cbffe..864132a6a 100644 --- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/lite-llm/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js index 1d12861a5..f0509bf7e 100644 --- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/llm-model/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://www.npmjs.com/package/@google/generative-ai/v/0.24.1", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/systemjs.config.js index ffea49203..ba7e7cfef 100644 --- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/mcp-server/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js index 1d12861a5..f0509bf7e 100644 --- a/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/ai-integrations/open-ai/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://www.npmjs.com/package/@google/generative-ai/v/0.24.1", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/appearance/cssclass/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/height/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/appearance/height/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/appearance/height/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/appearance/height/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/appearance/width/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/appearance/width/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/appearance/width/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/appearance/width/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/clearbutton/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/systemjs.config.js index a233735d7..9583dccc2 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/markdown-prompt/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/placeholder/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-icon/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompt-text/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/prompts/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/response-icon/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/scroll-to-bottom/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions-header/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/assist-view/suggestions/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/basic/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/basic/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/basic/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/basic/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/block-template/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/block-template/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/block-template/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/block-template/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/editable-context/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/editable-context/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/editable-context/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/editable-context/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/item-template/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/item-template/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/item-template/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/item-template/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/stages-status/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/stages-status/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/stages-status/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/chain-of-thoughts/stages-status/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/defaultprompts/js/index.html b/ej2-javascript/code-snippet/ai-assistview/defaultprompts/js/index.html index 947ba45a1..5efc66609 100644 --- a/ej2-javascript/code-snippet/ai-assistview/defaultprompts/js/index.html +++ b/ej2-javascript/code-snippet/ai-assistview/defaultprompts/js/index.html @@ -23,6 +23,8 @@ + + diff --git a/ej2-javascript/code-snippet/ai-assistview/defaultprompts/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/defaultprompts/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/defaultprompts/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/defaultprompts/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/systemjs.config.js index 0969a8893..795a94e46 100644 --- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-click/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-failure/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-removed/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/events/attachment-success/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/events/before-attachment/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/events/created/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/events/created/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/events/created/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/events/created/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/events/prompt-changed/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/events/prompt-request/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/enable-attachment/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-size/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/file-type/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/maximum-count/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/file-attachments/save-remove-url/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/gettingstarted/js/index.html b/ej2-javascript/code-snippet/ai-assistview/gettingstarted/js/index.html index 6fdf693ec..0bb387443 100644 --- a/ej2-javascript/code-snippet/ai-assistview/gettingstarted/js/index.html +++ b/ej2-javascript/code-snippet/ai-assistview/gettingstarted/js/index.html @@ -24,6 +24,7 @@ + diff --git a/ej2-javascript/code-snippet/ai-assistview/gettingstarted/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/gettingstarted/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/gettingstarted/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/gettingstarted/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/methods/execute-prompt/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/response-object/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/methods/response-object/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/methods/response-object/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/methods/response-object/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/methods/response-string/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/methods/response-string/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/methods/response-string/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/methods/response-string/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/register-tool/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/register-tool/systemjs.config.js index 8d10874e5..0ae14e18f 100644 --- a/ej2-javascript/code-snippet/ai-assistview/register-tool/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/register-tool/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@syncfusion/ej2-circulargauge": "syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/systemjs.config.js index abad874ba..4d95811c7 100644 --- a/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/speech/speech-configuration/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://www.npmjs.com/package/@google/generative-ai/v/0.24.1", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/systemjs.config.js index abad874ba..4d95811c7 100644 --- a/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/speech/speech-events/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://www.npmjs.com/package/@google/generative-ai/v/0.24.1", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/stt/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/speech/stt/systemjs.config.js index f5020f593..37386c2b9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/speech/stt/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/speech/stt/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://www.npmjs.com/package/@google/generative-ai/v/0.24.1", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/systemjs.config.js index abad874ba..4d95811c7 100644 --- a/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/speech/tooltip-settings/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://www.npmjs.com/package/@google/generative-ai/v/0.24.1", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/tts-settings/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/speech/tts-settings/systemjs.config.js index 4780fbc8c..02a5abda9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/speech/tts-settings/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/speech/tts-settings/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://www.npmjs.com/package/@google/generative-ai/v/0.24.1", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/speech/tts/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/speech/tts/systemjs.config.js index 1d12861a5..f0509bf7e 100644 --- a/ej2-javascript/code-snippet/ai-assistview/speech/tts/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/speech/tts/systemjs.config.js @@ -27,6 +27,7 @@ System.config({ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", "@google/generative-ai": "https://www.npmjs.com/package/@google/generative-ai/v/0.24.1", "marked": "https://cdn.jsdelivr.net/npm/marked/marked.min.js" } diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/banner/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/templates/banner/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/templates/banner/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/templates/banner/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/templates/footer-template/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/templates/prompt-item/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/response-item/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/templates/response-item/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/templates/response-item/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/templates/response-item/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/templates/suggestions-template/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/align/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/cssclass/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/disabled/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-position/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-settings/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/item-type/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/itemclick/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-itemclick/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/prompt-settings/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/regenerate-preload/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/regenerate-preload/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/regenerate-preload/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/regenerate-preload/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/regenerate-response/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/regenerate-response/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/regenerate-response/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/regenerate-response/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-itemclick/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/response-settings/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/template/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/toolbar-text/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/tooltip/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/toolbar-items/visible/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/views/active-view/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/views/active-view/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/views/active-view/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/views/active-view/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/views/type/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/views/type/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/views/type/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/views/type/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/ai-assistview/views/view-template/systemjs.config.js b/ej2-javascript/code-snippet/ai-assistview/views/view-template/systemjs.config.js index 244fbecfd..390877ad9 100644 --- a/ej2-javascript/code-snippet/ai-assistview/views/view-template/systemjs.config.js +++ b/ej2-javascript/code-snippet/ai-assistview/views/view-template/systemjs.config.js @@ -26,7 +26,8 @@ System.config({ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", - "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js" + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js" } }); diff --git a/ej2-javascript/grid/ts/getting-started.md b/ej2-javascript/grid/ts/getting-started.md index 720234c2a..90dfaf101 100644 --- a/ej2-javascript/grid/ts/getting-started.md +++ b/ej2-javascript/grid/ts/getting-started.md @@ -58,7 +58,7 @@ Then add the following CSS reference to the **src/styles/styles.css** file: {% tabs %} {% highlight css tabtitle="style.css" %} -@import "../../node_modules/@syncfusion/ej2-material3-theme/grids/grid/index.css"; +@import "../../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css"; {% endhighlight %} {% endtabs %} From 86ef0cb09761661eaee47278788121eda1d4b3fe Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 10 Jul 2026 13:45:26 +0530 Subject: [PATCH 04/26] Integrated latest changes at 07-10-2026 1:30:23 PM --- .../rich-text-editor/keyboard-support.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/ej2-javascript/rich-text-editor/keyboard-support.md b/ej2-javascript/rich-text-editor/keyboard-support.md index 657f8702b..8c165aaff 100644 --- a/ej2-javascript/rich-text-editor/keyboard-support.md +++ b/ej2-javascript/rich-text-editor/keyboard-support.md @@ -167,6 +167,60 @@ Customize the key config for the keyboard interaction of Rich Text Editor, using In the below sample, you have customize the bold, italic, underline toolbar action with `ctrl+alt+b`, `ctrl+alt+i` and `ctrl+alt+u` respectively. +The following table lists all available `keyConfig` options in the Rich Text Editor along with their default keyboard shortcut values. You can customize these shortcut keys based on your requirements by using the `keyConfig` property. + +| Action | Default key config | +|----------------|---------| +| toolbar-focus | `alt+f10` | +| escape | `escape` | +| backspace | `backspace` | +| insert-link | `ctrl+k` | +| insert-image | `ctrl+shift+i` | +| insert-audio | `ctrl+shift+a` | +| insert-video | `ctrl+alt+v` | +| insert-table | `ctrl+shift+e` | +| undo | `ctrl+z` | +| redo | `ctrl+y` | +| copy | `ctrl+c` | +| cut | `ctrl+x` | +| paste | `ctrl+v` | +| bold | `ctrl+b` | +| italic | `ctrl+i` | +| underline | `ctrl+u` | +| strikethrough | `ctrl+shift+s` | +| uppercase | `ctrl+shift+u` | +| lowercase | `ctrl+shift+l` | +| superscript | `ctrl+shift+=` | +| subscript | `ctrl+=` | +| indents | `ctrl+]` | +| outdents | `ctrl+[` | +| html-source | `ctrl+shift+h` | +| full-screen | `ctrl+shift+f` | +| decrease-fontsize | `ctrl+shift+<` | +| increase-fontsize | `ctrl+shift+>` | +| justify-center | `ctrl+e` | +| justify-full | `ctrl+j` | +| justify-left | `ctrl+l` | +| justify-right | `ctrl+r` | +| clear-format | `ctrl+shift+r` | +| ordered-list | `ctrl+shift+o` | +| unordered-list | `ctrl+alt+o` | +| space | `space` | +| enter | `enter` | +| shift-enter | `shift+enter` | +| tab | `tab` | +| shift-tab | `shift+tab` | +| delete | `delete` | +| format-copy | `alt+shift+c` | +| format-paste | `alt+shift+v` | +| inlinecode | `` ctrl+` `` | +| code-block | `ctrl+shift+b` | +| ai-query | `alt+enter` | +| checklist | `ctrl+shift+9` | +| print | `ctrl+p` | +| checklist-toggle | `ctrl+enter` | +| select-all | `ctrl+a` | + {% if page.publishingplatform == "typescript" %} {% tabs %} From e8b36a9ce1baf7cbdaafc705667f9272c6e79f62 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sun, 12 Jul 2026 13:45:31 +0530 Subject: [PATCH 05/26] Integrated latest changes at 07-12-2026 1:30:05 PM --- .../button/repeat-button-cs2/index.ts | 2 +- .../textbox/max-length-cs1/systemjs.config.js | 30 +++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 ej2-javascript/code-snippet/textbox/max-length-cs1/systemjs.config.js diff --git a/ej2-javascript/code-snippet/button/repeat-button-cs2/index.ts b/ej2-javascript/code-snippet/button/repeat-button-cs2/index.ts index c0baeb717..5f9e68f69 100644 --- a/ej2-javascript/code-snippet/button/repeat-button-cs2/index.ts +++ b/ej2-javascript/code-snippet/button/repeat-button-cs2/index.ts @@ -37,7 +37,7 @@ btnObj.clicked = (args: ClickedEventArgs) => { btnObj.disabled = (e.target as HTMLInputElement).checked; }); -document.getElementById('reset-btn')?.addEventListener('click', () => { +(document.getElementById('reset-btn') as HTMLInputElement).addEventListener('click', () => { initialCount = 0; repeatCount = 0; (document.getElementById('initial-count') as HTMLElement).textContent = '0'; diff --git a/ej2-javascript/code-snippet/textbox/max-length-cs1/systemjs.config.js b/ej2-javascript/code-snippet/textbox/max-length-cs1/systemjs.config.js new file mode 100644 index 000000000..e23e6f5d2 --- /dev/null +++ b/ej2-javascript/code-snippet/textbox/max-length-cs1/systemjs.config.js @@ -0,0 +1,30 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-base/dom": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js" + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file From 788350cc350e4c4158ea139ada79de031b9e29f1 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 14 Jul 2026 13:43:15 +0530 Subject: [PATCH 06/26] Integrated latest changes at 07-14-2026 1:30:03 PM --- ej2-javascript-toc.html | 23 +- ej2-javascript/block-editor/accessibility.md | 20 +- ej2-javascript/block-editor/appearance.md | 6 +- .../built-in-blocks/built-in-blocks.md | 12 +- .../built-in-blocks/code-block.md | 10 +- .../block-editor/built-in-blocks/embed.md | 16 +- .../built-in-blocks/inline-content.md | 56 +- .../built-in-blocks/list-types.md | 18 +- .../built-in-blocks/nested-types.md | 14 +- .../built-in-blocks/table-block.md | 4 +- .../built-in-blocks/typography.md | 12 +- ej2-javascript/block-editor/drag-drop.md | 2 +- ej2-javascript/block-editor/editor-menus.md | 36 +- .../editor-security/cross-site-script.md | 3 +- .../editor-security/read-only-mode.md | 2 +- ej2-javascript/block-editor/events.md | 20 +- ej2-javascript/block-editor/globalization.md | 2 +- .../js/es5-collaborative-editing.md | 6 +- .../block-editor/keyboard-shortcuts.md | 2 +- ej2-javascript/block-editor/methods.md | 46 +- ej2-javascript/block-editor/paste-cleanup.md | 14 +- .../block-editor/ts/collaborative-editing.md | 6 +- ej2-javascript/block-editor/undo-redo.md | 2 +- .../grid/columnchooser-cs3/datasource.ts | 32 + .../grid/columnchooser-cs3/es5datasource.js | 32 + .../grid/columnchooser-cs3/index.css | 15 + .../grid/columnchooser-cs3/index.js | 30 + .../grid/columnchooser-cs3/index.ts | 27 + .../grid/columnchooser-cs3/js/index.html | 46 ++ .../grid/columnchooser-cs3/systemjs.config.js | 46 ++ .../grid/columnchooser-cs3/ts/index.html | 35 ++ .../grid/grid-celledit-cs1/datasource.ts | 32 + .../grid/grid-celledit-cs1/es5-datasource.js | 32 + .../grid/grid-celledit-cs1/index.css | 14 + .../grid/grid-celledit-cs1/index.js | 34 ++ .../grid/grid-celledit-cs1/index.ts | 36 ++ .../grid/grid-celledit-cs1/js/index.html | 42 ++ .../grid/grid-celledit-cs1/systemjs.config.js | 47 ++ .../grid/grid-celledit-cs1/ts/index.html | 34 ++ .../grid/grid-celledit-cs2/datasource.ts | 76 +++ .../grid/grid-celledit-cs2/es5-datasource.js | 76 +++ .../grid/grid-celledit-cs2/index.css | 15 + .../grid/grid-celledit-cs2/index.js | 38 ++ .../grid/grid-celledit-cs2/index.ts | 42 ++ .../grid/grid-celledit-cs2/js/index.html | 38 ++ .../grid/grid-celledit-cs2/systemjs.config.js | 47 ++ .../grid/grid-celledit-cs2/ts/index.html | 35 ++ .../grid/grid-celledit-cs3/datasource.ts | 552 ++++++++++++++++++ .../grid/grid-celledit-cs3/es5-datasource.js | 552 ++++++++++++++++++ .../grid/grid-celledit-cs3/index.css | 14 + .../grid/grid-celledit-cs3/index.js | 39 ++ .../grid/grid-celledit-cs3/index.ts | 41 ++ .../grid/grid-celledit-cs3/js/index.html | 42 ++ .../grid/grid-celledit-cs3/systemjs.config.js | 47 ++ .../grid/grid-celledit-cs3/ts/index.html | 34 ++ .../grid/undo-redo-cs1/datasource.ts | 302 ++++++++++ .../grid/undo-redo-cs1/es5-datasource.js | 302 ++++++++++ .../code-snippet/grid/undo-redo-cs1/index.css | 14 + .../code-snippet/grid/undo-redo-cs1/index.js | 19 + .../code-snippet/grid/undo-redo-cs1/index.ts | 23 + .../grid/undo-redo-cs1/js/index.html | 34 ++ .../grid/undo-redo-cs1/systemjs.config.js | 47 ++ .../grid/undo-redo-cs1/ts/index.html | 32 + ej2-javascript/grid/columns/column-chooser.md | 35 ++ ej2-javascript/grid/editing/batch-editing.md | 67 ++- ej2-javascript/grid/editing/cell-editing.md | 122 ++++ .../{mcp-server => ai-tools}/release-notes.md | 0 .../agentic-ui-builder/getting-started.md | 212 ------- .../agentic-ui-builder/prompt-library.md | 104 ---- .../ai-coding-assistant/getting-started.md | 188 ------ .../ai-coding-assistant/prompt-library.md | 285 --------- ej2-javascript/js/mcp-server/overview.md | 85 --- ej2-javascript/js/mcp.md | 264 +++++++++ .../stock-chart/ts/getting-started.md | 32 +- ej2-javascript/ts/agentic-ui-builder.md | 78 +-- .../ts/ai-tools/ai-powered-development.md | 2 +- .../ts/ai-tools/images/UI-Builder-Agent.png | Bin 20912 -> 21341 bytes .../agentic-ui-builder/getting-started.md | 212 ------- .../agentic-ui-builder/prompt-library.md | 104 ---- .../ai-coding-assistant/getting-started.md | 188 ------ .../ai-coding-assistant/prompt-library.md | 285 --------- ej2-javascript/ts/mcp-server/overview.md | 85 --- ej2-javascript/ts/mcp.md | 266 +++++++++ ej2-typescript-toc.html | 22 +- 84 files changed, 3967 insertions(+), 1996 deletions(-) create mode 100644 ej2-javascript/code-snippet/grid/columnchooser-cs3/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/columnchooser-cs3/es5datasource.js create mode 100644 ej2-javascript/code-snippet/grid/columnchooser-cs3/index.css create mode 100644 ej2-javascript/code-snippet/grid/columnchooser-cs3/index.js create mode 100644 ej2-javascript/code-snippet/grid/columnchooser-cs3/index.ts create mode 100644 ej2-javascript/code-snippet/grid/columnchooser-cs3/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/columnchooser-cs3/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/columnchooser-cs3/ts/index.html create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs1/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs1/es5-datasource.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs1/index.css create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs1/index.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs1/index.ts create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs1/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs1/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs1/ts/index.html create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs2/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs2/es5-datasource.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs2/index.css create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs2/index.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs2/index.ts create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs2/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs2/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs2/ts/index.html create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs3/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs3/es5-datasource.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.css create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.ts create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs3/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs3/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/grid-celledit-cs3/ts/index.html create mode 100644 ej2-javascript/code-snippet/grid/undo-redo-cs1/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/undo-redo-cs1/es5-datasource.js create mode 100644 ej2-javascript/code-snippet/grid/undo-redo-cs1/index.css create mode 100644 ej2-javascript/code-snippet/grid/undo-redo-cs1/index.js create mode 100644 ej2-javascript/code-snippet/grid/undo-redo-cs1/index.ts create mode 100644 ej2-javascript/code-snippet/grid/undo-redo-cs1/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/undo-redo-cs1/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/undo-redo-cs1/ts/index.html create mode 100644 ej2-javascript/grid/editing/cell-editing.md rename ej2-javascript/js/{mcp-server => ai-tools}/release-notes.md (100%) delete mode 100644 ej2-javascript/js/mcp-server/agentic-ui-builder/getting-started.md delete mode 100644 ej2-javascript/js/mcp-server/agentic-ui-builder/prompt-library.md delete mode 100644 ej2-javascript/js/mcp-server/ai-coding-assistant/getting-started.md delete mode 100644 ej2-javascript/js/mcp-server/ai-coding-assistant/prompt-library.md delete mode 100644 ej2-javascript/js/mcp-server/overview.md create mode 100644 ej2-javascript/js/mcp.md delete mode 100644 ej2-javascript/ts/mcp-server/agentic-ui-builder/getting-started.md delete mode 100644 ej2-javascript/ts/mcp-server/agentic-ui-builder/prompt-library.md delete mode 100644 ej2-javascript/ts/mcp-server/ai-coding-assistant/getting-started.md delete mode 100644 ej2-javascript/ts/mcp-server/ai-coding-assistant/prompt-library.md delete mode 100644 ej2-javascript/ts/mcp-server/overview.md create mode 100644 ej2-javascript/ts/mcp.md diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html index 67d244e49..46b346f62 100644 --- a/ej2-javascript-toc.html +++ b/ej2-javascript-toc.html @@ -14,23 +14,9 @@
  • -MCP Server - + AI and Smart Tooling +
  • MCP Server
    • +
  • Release Notes
  • Installation and upgrade @@ -1413,6 +1399,7 @@
  • Dialog Editing
  • Template Editing
  • Batch Editing
    • +
  • Cell Editing
  • Command Column Editing
  • Validation
  • Persisting Data in Server
    • @@ -2223,7 +2210,7 @@
  • API Reference
  • -RichTextEditor +Rich Text Editor
    • Getting Started
    • Managing Editor Value
      • diff --git a/ej2-javascript/block-editor/accessibility.md b/ej2-javascript/block-editor/accessibility.md index 263cd55b8..f80f7d87e 100644 --- a/ej2-javascript/block-editor/accessibility.md +++ b/ej2-javascript/block-editor/accessibility.md @@ -17,15 +17,15 @@ The accessibility compliance for the Block Editor control is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Yes | -| [Section 508 Support](../common/accessibility#accessibility-standards) |Intermediate | -| [Screen Reader Support](../common/accessibility#screen-reader-support) | Intermediate | -| [Right-To-Left Support](../common/accessibility#right-to-left-support) | Yes | -| [Color Contrast](../common/accessibility#color-contrast) | No | -| [Mobile Device Support](../common/accessibility#mobile-device-support) | Yes | -| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Yes | -| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | Yes | -| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | Yes | +| [WCAG 2.2 Support](https://ej2.syncfusion.com/documentation/common/accessibility#accessibility-standards) | Yes | +| [Section 508 Support](https://ej2.syncfusion.com/documentation/common/accessibility#accessibility-standards) |Intermediate | +| [Screen Reader Support](https://ej2.syncfusion.com/documentation/common/accessibility#screen-reader-support) | Intermediate | +| [Right-To-Left Support](https://ej2.syncfusion.com/documentation/common/accessibility#right-to-left-support) | Yes | +| [Color Contrast](https://ej2.syncfusion.com/documentation/common/accessibility#color-contrast) | No | +| [Mobile Device Support](https://ej2.syncfusion.com/documentation/common/accessibility#mobile-device-support) | Yes | +| [Keyboard Navigation Support](https://ej2.syncfusion.com/documentation/common/accessibility#keyboard-navigation-support) | Yes | +| [Accessibility Checker Validation](https://ej2.syncfusion.com/documentation/common/accessibility#ensuring-accessibility) | Yes | +| [Axe-core Accessibility Validation](https://ej2.syncfusion.com/documentation/common/accessibility#ensuring-accessibility) | Yes | + + +
      Loading....
      +
      + +

      +
      +
      + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/grid-celledit-cs3/datasource.ts b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/datasource.ts new file mode 100644 index 000000000..77635a1dd --- /dev/null +++ b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/datasource.ts @@ -0,0 +1,552 @@ +export const productDatas: object[] = [ + { + "ProductID": "PROD-001", + "ProductCategory": "Electronics", + "Revenue": 447.19, + "Discount": 23.26, + "TransactionDate": new Date(1735689600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 25, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-002", + "ProductCategory": "Clothing", + "Revenue": 128.543, + "Discount": 15.7, + "TransactionDate": new Date(1735776000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 60, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-003", + "ProductCategory": "Books", + "Revenue": 89.2, + "Discount": 10.45, + "TransactionDate": new Date(1735862400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 85, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-004", + "ProductCategory": "Garden", + "Revenue": 675.321, + "Discount": 27.8, + "TransactionDate": new Date(1735948800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 15, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-005", + "ProductCategory": "Toys", + "Revenue": 234.67, + "Discount": 19.12, + "TransactionDate": new Date(1736035200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 40, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-006", + "ProductCategory": "Electronics", + "Revenue": 512.098, + "Discount": 22.3, + "TransactionDate": new Date(1736121600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 20, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-007", + "ProductCategory": "Clothing", + "Revenue": 76.54, + "Discount": 8.9, + "TransactionDate": new Date(1736208000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 90, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-008", + "ProductCategory": "Books", + "Revenue": 345.231, + "Discount": 12.67, + "TransactionDate": new Date(1736294400000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 35, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-009", + "ProductCategory": "Garden", + "Revenue": 987.45, + "Discount": 25.4, + "TransactionDate": new Date(1736380800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 10, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-010", + "ProductCategory": "Toys", + "Revenue": 156.789, + "Discount": 17.23, + "TransactionDate": new Date(1736467200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 55, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-011", + "ProductCategory": "Electronics", + "Revenue": 623.12, + "Discount": 20.56, + "TransactionDate": new Date(1736553600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 18, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-012", + "ProductCategory": "Clothing", + "Revenue": 321.456, + "Discount": 14.89, + "TransactionDate": new Date(1736640000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 45, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-013", + "ProductCategory": "Books", + "Revenue": 78.9, + "Discount": 11.34, + "TransactionDate": new Date(1736726400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 80, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-014", + "ProductCategory": "Garden", + "Revenue": 456.789, + "Discount": 28.12, + "TransactionDate": new Date(1736812800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 22, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-015", + "ProductCategory": "Toys", + "Revenue": 234.56, + "Discount": 16.78, + "TransactionDate": new Date(1736899200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 50, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-016", + "ProductCategory": "Electronics", + "Revenue": 789.123, + "Discount": 21.45, + "TransactionDate": new Date(1736985600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 15, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-017", + "ProductCategory": "Clothing", + "Revenue": 198.76, + "Discount": 13.21, + "TransactionDate": new Date(1737072000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 65, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-018", + "ProductCategory": "Books", + "Revenue": 412.345, + "Discount": 18.9, + "TransactionDate": new Date(1737158400000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 30, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-019", + "ProductCategory": "Garden", + "Revenue": 567.89, + "Discount": 24.67, + "TransactionDate": new Date(1737244800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 20, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-020", + "ProductCategory": "Toys", + "Revenue": 345.12, + "Discount": 15.34, + "TransactionDate": new Date(1737331200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 45, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-021", + "ProductCategory": "Electronics", + "Revenue": 678.901, + "Discount": 19.78, + "TransactionDate": new Date(1737417600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 17, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-022", + "ProductCategory": "Clothing", + "Revenue": 234.567, + "Discount": 12.45, + "TransactionDate": new Date(1737504000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 55, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-023", + "ProductCategory": "Books", + "Revenue": 89.123, + "Discount": 9.8, + "TransactionDate": new Date(1737590400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 75, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-024", + "ProductCategory": "Garden", + "Revenue": 456.78, + "Discount": 26.12, + "TransactionDate": new Date(1737676800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 25, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-025", + "ProductCategory": "Toys", + "Revenue": 123.456, + "Discount": 14.56, + "TransactionDate": new Date(1737763200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 70, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-026", + "ProductCategory": "Electronics", + "Revenue": 789.01, + "Discount": 22.89, + "TransactionDate": new Date(1737849600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 12, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-027", + "ProductCategory": "Clothing", + "Revenue": 345.67, + "Discount": 17.23, + "TransactionDate": new Date(1737936000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 40, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-028", + "ProductCategory": "Books", + "Revenue": 67.89, + "Discount": 10.12, + "TransactionDate": new Date(1738022400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 80, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-029", + "ProductCategory": "Garden", + "Revenue": 543.21, + "Discount": 28.45, + "TransactionDate": new Date(1738108800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 18, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-030", + "ProductCategory": "Toys", + "Revenue": 234.789, + "Discount": 16.78, + "TransactionDate": new Date(1738195200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 50, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-031", + "ProductCategory": "Electronics", + "Revenue": 678.123, + "Discount": 21.34, + "TransactionDate": new Date(1738281600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 20, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-032", + "ProductCategory": "Clothing", + "Revenue": 123.456, + "Discount": 13.89, + "TransactionDate": new Date(1738368000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 65, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-033", + "ProductCategory": "Books", + "Revenue": 456.78, + "Discount": 18.23, + "TransactionDate": new Date(1738454400000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 30, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-034", + "ProductCategory": "Garden", + "Revenue": 789.12, + "Discount": 25.67, + "TransactionDate": new Date(1738540800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 15, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-035", + "ProductCategory": "Toys", + "Revenue": 234.56, + "Discount": 15.45, + "TransactionDate": new Date(1738627200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 55, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-036", + "ProductCategory": "Electronics", + "Revenue": 567.89, + "Discount": 20.12, + "TransactionDate": new Date(1738713600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 25, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-037", + "ProductCategory": "Clothing", + "Revenue": 345.67, + "Discount": 12.78, + "TransactionDate": new Date(1738800000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 50, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-038", + "ProductCategory": "Books", + "Revenue": 89.123, + "Discount": 9.34, + "TransactionDate": new Date(1738886400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 70, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-039", + "ProductCategory": "Garden", + "Revenue": 456.789, + "Discount": 26.89, + "TransactionDate": new Date(1738972800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 20, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-040", + "ProductCategory": "Toys", + "Revenue": 123.456, + "Discount": 14.12, + "TransactionDate": new Date(1739059200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 60, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-041", + "ProductCategory": "Electronics", + "Revenue": 789.01, + "Discount": 22.45, + "TransactionDate": new Date(1739145600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 15, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-042", + "ProductCategory": "Clothing", + "Revenue": 345.67, + "Discount": 17.89, + "TransactionDate": new Date(1739232000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 45, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-043", + "ProductCategory": "Books", + "Revenue": 67.89, + "Discount": 10.56, + "TransactionDate": new Date(1739318400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 75, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-044", + "ProductCategory": "Garden", + "Revenue": 543.21, + "Discount": 28.23, + "TransactionDate": new Date(1739404800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 18, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-045", + "ProductCategory": "Toys", + "Revenue": 234.789, + "Discount": 16.34, + "TransactionDate": new Date(1739491200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 50, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-046", + "ProductCategory": "Electronics", + "Revenue": 678.123, + "Discount": 21.78, + "TransactionDate": new Date(1739577600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 20, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-047", + "ProductCategory": "Clothing", + "Revenue": 123.456, + "Discount": 13.45, + "TransactionDate": new Date(1739664000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 70, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-048", + "ProductCategory": "Books", + "Revenue": 456.78, + "Discount": 18.67, + "TransactionDate": new Date(1739750400000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 35, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-049", + "ProductCategory": "Garden", + "Revenue": 789.12, + "Discount": 25.12, + "TransactionDate": new Date(1739836800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 15, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-050", + "ProductCategory": "Toys", + "Revenue": 234.56, + "Discount": 15.89, + "TransactionDate": new Date(1739923200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 55, + "OrderQuantity": 3 + } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/grid-celledit-cs3/es5-datasource.js b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/es5-datasource.js new file mode 100644 index 000000000..7246dc8dc --- /dev/null +++ b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/es5-datasource.js @@ -0,0 +1,552 @@ +export var productDatas = [ + { + "ProductID": "PROD-001", + "ProductCategory": "Electronics", + "Revenue": 447.19, + "Discount": 23.26, + "TransactionDate": new Date(1735689600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 25, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-002", + "ProductCategory": "Clothing", + "Revenue": 128.543, + "Discount": 15.7, + "TransactionDate": new Date(1735776000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 60, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-003", + "ProductCategory": "Books", + "Revenue": 89.2, + "Discount": 10.45, + "TransactionDate": new Date(1735862400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 85, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-004", + "ProductCategory": "Garden", + "Revenue": 675.321, + "Discount": 27.8, + "TransactionDate": new Date(1735948800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 15, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-005", + "ProductCategory": "Toys", + "Revenue": 234.67, + "Discount": 19.12, + "TransactionDate": new Date(1736035200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 40, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-006", + "ProductCategory": "Electronics", + "Revenue": 512.098, + "Discount": 22.3, + "TransactionDate": new Date(1736121600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 20, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-007", + "ProductCategory": "Clothing", + "Revenue": 76.54, + "Discount": 8.9, + "TransactionDate": new Date(1736208000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 90, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-008", + "ProductCategory": "Books", + "Revenue": 345.231, + "Discount": 12.67, + "TransactionDate": new Date(1736294400000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 35, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-009", + "ProductCategory": "Garden", + "Revenue": 987.45, + "Discount": 25.4, + "TransactionDate": new Date(1736380800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 10, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-010", + "ProductCategory": "Toys", + "Revenue": 156.789, + "Discount": 17.23, + "TransactionDate": new Date(1736467200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 55, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-011", + "ProductCategory": "Electronics", + "Revenue": 623.12, + "Discount": 20.56, + "TransactionDate": new Date(1736553600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 18, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-012", + "ProductCategory": "Clothing", + "Revenue": 321.456, + "Discount": 14.89, + "TransactionDate": new Date(1736640000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 45, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-013", + "ProductCategory": "Books", + "Revenue": 78.9, + "Discount": 11.34, + "TransactionDate": new Date(1736726400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 80, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-014", + "ProductCategory": "Garden", + "Revenue": 456.789, + "Discount": 28.12, + "TransactionDate": new Date(1736812800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 22, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-015", + "ProductCategory": "Toys", + "Revenue": 234.56, + "Discount": 16.78, + "TransactionDate": new Date(1736899200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 50, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-016", + "ProductCategory": "Electronics", + "Revenue": 789.123, + "Discount": 21.45, + "TransactionDate": new Date(1736985600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 15, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-017", + "ProductCategory": "Clothing", + "Revenue": 198.76, + "Discount": 13.21, + "TransactionDate": new Date(1737072000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 65, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-018", + "ProductCategory": "Books", + "Revenue": 412.345, + "Discount": 18.9, + "TransactionDate": new Date(1737158400000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 30, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-019", + "ProductCategory": "Garden", + "Revenue": 567.89, + "Discount": 24.67, + "TransactionDate": new Date(1737244800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 20, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-020", + "ProductCategory": "Toys", + "Revenue": 345.12, + "Discount": 15.34, + "TransactionDate": new Date(1737331200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 45, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-021", + "ProductCategory": "Electronics", + "Revenue": 678.901, + "Discount": 19.78, + "TransactionDate": new Date(1737417600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 17, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-022", + "ProductCategory": "Clothing", + "Revenue": 234.567, + "Discount": 12.45, + "TransactionDate": new Date(1737504000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 55, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-023", + "ProductCategory": "Books", + "Revenue": 89.123, + "Discount": 9.8, + "TransactionDate": new Date(1737590400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 75, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-024", + "ProductCategory": "Garden", + "Revenue": 456.78, + "Discount": 26.12, + "TransactionDate": new Date(1737676800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 25, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-025", + "ProductCategory": "Toys", + "Revenue": 123.456, + "Discount": 14.56, + "TransactionDate": new Date(1737763200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 70, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-026", + "ProductCategory": "Electronics", + "Revenue": 789.01, + "Discount": 22.89, + "TransactionDate": new Date(1737849600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 12, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-027", + "ProductCategory": "Clothing", + "Revenue": 345.67, + "Discount": 17.23, + "TransactionDate": new Date(1737936000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 40, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-028", + "ProductCategory": "Books", + "Revenue": 67.89, + "Discount": 10.12, + "TransactionDate": new Date(1738022400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 80, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-029", + "ProductCategory": "Garden", + "Revenue": 543.21, + "Discount": 28.45, + "TransactionDate": new Date(1738108800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 18, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-030", + "ProductCategory": "Toys", + "Revenue": 234.789, + "Discount": 16.78, + "TransactionDate": new Date(1738195200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 50, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-031", + "ProductCategory": "Electronics", + "Revenue": 678.123, + "Discount": 21.34, + "TransactionDate": new Date(1738281600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 20, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-032", + "ProductCategory": "Clothing", + "Revenue": 123.456, + "Discount": 13.89, + "TransactionDate": new Date(1738368000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 65, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-033", + "ProductCategory": "Books", + "Revenue": 456.78, + "Discount": 18.23, + "TransactionDate": new Date(1738454400000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 30, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-034", + "ProductCategory": "Garden", + "Revenue": 789.12, + "Discount": 25.67, + "TransactionDate": new Date(1738540800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 15, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-035", + "ProductCategory": "Toys", + "Revenue": 234.56, + "Discount": 15.45, + "TransactionDate": new Date(1738627200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 55, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-036", + "ProductCategory": "Electronics", + "Revenue": 567.89, + "Discount": 20.12, + "TransactionDate": new Date(1738713600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 25, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-037", + "ProductCategory": "Clothing", + "Revenue": 345.67, + "Discount": 12.78, + "TransactionDate": new Date(1738800000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 50, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-038", + "ProductCategory": "Books", + "Revenue": 89.123, + "Discount": 9.34, + "TransactionDate": new Date(1738886400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 70, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-039", + "ProductCategory": "Garden", + "Revenue": 456.789, + "Discount": 26.89, + "TransactionDate": new Date(1738972800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 20, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-040", + "ProductCategory": "Toys", + "Revenue": 123.456, + "Discount": 14.12, + "TransactionDate": new Date(1739059200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 60, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-041", + "ProductCategory": "Electronics", + "Revenue": 789.01, + "Discount": 22.45, + "TransactionDate": new Date(1739145600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 15, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-042", + "ProductCategory": "Clothing", + "Revenue": 345.67, + "Discount": 17.89, + "TransactionDate": new Date(1739232000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 45, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-043", + "ProductCategory": "Books", + "Revenue": 67.89, + "Discount": 10.56, + "TransactionDate": new Date(1739318400000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 75, + "OrderQuantity": 1 + }, + { + "ProductID": "PROD-044", + "ProductCategory": "Garden", + "Revenue": 543.21, + "Discount": 28.23, + "TransactionDate": new Date(1739404800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 18, + "OrderQuantity": 5 + }, + { + "ProductID": "PROD-045", + "ProductCategory": "Toys", + "Revenue": 234.789, + "Discount": 16.34, + "TransactionDate": new Date(1739491200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 50, + "OrderQuantity": 3 + }, + { + "ProductID": "PROD-046", + "ProductCategory": "Electronics", + "Revenue": 678.123, + "Discount": 21.78, + "TransactionDate": new Date(1739577600000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 20, + "OrderQuantity": 6 + }, + { + "ProductID": "PROD-047", + "ProductCategory": "Clothing", + "Revenue": 123.456, + "Discount": 13.45, + "TransactionDate": new Date(1739664000000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 70, + "OrderQuantity": 2 + }, + { + "ProductID": "PROD-048", + "ProductCategory": "Books", + "Revenue": 456.78, + "Discount": 18.67, + "TransactionDate": new Date(1739750400000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 35, + "OrderQuantity": 4 + }, + { + "ProductID": "PROD-049", + "ProductCategory": "Garden", + "Revenue": 789.12, + "Discount": 25.12, + "TransactionDate": new Date(1739836800000), + "ShippingMethod": "Express", + "WarehouseLocation": "Warehouse A", + "StockQuantity": 15, + "OrderQuantity": 7 + }, + { + "ProductID": "PROD-050", + "ProductCategory": "Toys", + "Revenue": 234.56, + "Discount": 15.89, + "TransactionDate": new Date(1739923200000), + "ShippingMethod": "Standard", + "WarehouseLocation": "Warehouse B", + "StockQuantity": 55, + "OrderQuantity": 3 + } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.css b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.css new file mode 100644 index 000000000..3e3720eea --- /dev/null +++ b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} diff --git a/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.js b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.js new file mode 100644 index 000000000..6fb7cbec0 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.js @@ -0,0 +1,39 @@ +ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar); + +var grid = new ej.grids.Grid({ + dataSource: productDatas, + editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' }, + allowPaging: true, + toolbar: ['Add', 'Delete', 'Update', 'Cancel'], + created: created, + columns: [ + { + field: 'ProductID', isPrimaryKey: true, headerText: 'Product ID', textAlign: 'Right', + validationRules: { required: true }, width: 120 + }, + { + field: 'ProductCategory', headerText: 'Product Category', + validationRules: { required: true }, width: 140 + }, + { + field: 'ShippingMethod', headerText: 'Shipping Method', editType: 'dropdownedit', width: 140 + }, + { + field: 'StockQuantity', headerText: 'StockQuantity', editType: 'numericedit', width: 150, + format: 'N0' + }, + { field: 'Discount', headerText: 'Discount (%)', width: 170, editType: 'numericedit', format: 'C2' }, + { field: 'Revenue', headerText: 'Revenue', width: 170, editType: 'numericedit', format: 'C2' }, + { field: 'TransactionDate', headerText: 'TransactionDate', width: 170, editType: 'datetimepickeredit', format: 'yMd' }, + ], +}); +grid.appendTo('#Grid'); + +function created() { + grid.getContentTable().addEventListener('click', function (args) { + if ((args.target).classList.contains('e-rowcell')) { + grid.editCell(args.target.closest('tr').rowIndex, + grid.getColumnByIndex(parseInt((args.target).getAttribute('aria-colindex')) - 1).field); + } + }); +} diff --git a/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.ts b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.ts new file mode 100644 index 000000000..a0ad28efb --- /dev/null +++ b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/index.ts @@ -0,0 +1,41 @@ +import { Grid, Edit, Toolbar, Page , ClickEventArgs} from '@syncfusion/ej2-grids'; +import { productDatas } from './datasource.ts'; + +Grid.Inject(Edit, Toolbar, Page) +let grid: Grid = new Grid({ + dataSource: productDatas, + editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell' }, + allowPaging: true, + toolbar: ['Add', 'Delete', 'Update', 'Cancel'], + created: created, + columns: [ + { + field: 'ProductID', isPrimaryKey: true, headerText: 'Product ID', textAlign: 'Right', + validationRules: { required: true }, width: 120 + }, + { + field: 'ProductCategory', headerText: 'Product Category', + validationRules: { required: true }, width: 140 + }, + { + field: 'ShippingMethod', headerText: 'Shipping Method', editType: 'dropdownedit', width: 140 + }, + { + field: 'StockQuantity', headerText: 'StockQuantity', editType: 'numericedit', width: 150, + format: 'N0' + }, + { field: 'Discount', headerText: 'Discount (%)', width: 170, editType: 'numericedit', format: 'C2' }, + { field: 'Revenue', headerText: 'Revenue', width: 170, editType: 'numericedit', format: 'C2' }, + { field: 'TransactionDate', headerText: 'TransactionDate', width: 170, editType: 'datetimepickeredit', format: 'yMd' }, + ], +}); +grid.appendTo('#Grid'); + +function created() { + grid.getContentTable().addEventListener('click', function (args: ClickEventArgs) { + if ((args.target as HTMLElement).classList.contains('e-rowcell')) { + grid.editCell((args.target.closest('tr') as HTMLTableRowElement).rowIndex, + grid.getColumnByIndex(parseInt((args.target as HTMLElement).getAttribute('aria-colindex') as string) - 1).field); + } + }); +} diff --git a/ej2-javascript/code-snippet/grid/grid-celledit-cs3/js/index.html b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/js/index.html new file mode 100644 index 000000000..0efa4641b --- /dev/null +++ b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/js/index.html @@ -0,0 +1,42 @@ + + + + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + + + +
      +
      +
      + + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/grid-celledit-cs3/systemjs.config.js b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/systemjs.config.js new file mode 100644 index 000000000..7c936a0a6 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/systemjs.config.js @@ -0,0 +1,47 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/24.2.3/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js', + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js" + }, + meta: { + '*.json': { loader: 'plugin-json' } + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/grid-celledit-cs3/ts/index.html b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/ts/index.html new file mode 100644 index 000000000..eef98f024 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/grid-celledit-cs3/ts/index.html @@ -0,0 +1,34 @@ + + + + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + + +
      Loading....
      +
      +
      +
      + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/undo-redo-cs1/datasource.ts b/ej2-javascript/code-snippet/grid/undo-redo-cs1/datasource.ts new file mode 100644 index 000000000..6ed62cb5d --- /dev/null +++ b/ej2-javascript/code-snippet/grid/undo-redo-cs1/datasource.ts @@ -0,0 +1,302 @@ +export const inventoryStoreData: Object[] = [ + { + ID: 'ID-1001', + Product: 'MacBook Pro', + Category: 'IT Asset', + UnitPrice: 1200, + VendorA: 55, + VendorB: 40, + VendorC: 60, + VendorD: 35, + }, + { + ID: 'ID-1002', + Product: 'Wireless Mouse', + Category: 'IT Asset', + UnitPrice: 25, + VendorA: 120, + VendorB: 95, + VendorC: 110, + VendorD: 80, + }, + { + ID: 'ID-1003', + Product: '4K Monitor', + Category: 'IT Asset', + UnitPrice: 400, + VendorA: 45, + VendorB: 50, + VendorC: 38, + VendorD: 42, + }, + { + ID: 'ID-1004', + Product: 'WiFi Router', + Category: 'IT Infrastructure', + UnitPrice: 120, + VendorA: 75, + VendorB: 68, + VendorC: 80, + VendorD: 72, + }, + { + ID: 'ID-1005', + Product: 'SSD Drive', + Category: 'IT Asset', + UnitPrice: 150, + VendorA: 110, + VendorB: 90, + VendorC: 105, + VendorD: 88, + }, + { + ID: 'ID-1006', + Product: 'Laser Printer', + Category: 'Admin', + UnitPrice: 300, + VendorA: 35, + VendorB: 30, + VendorC: 28, + VendorD: 25, + }, + { + ID: 'ID-1007', + Product: 'Security Camera', + Category: 'Security', + UnitPrice: 120, + VendorA: 50, + VendorB: 45, + VendorC: 55, + VendorD: 48, + }, + { + ID: 'ID-1008', + Product: 'HP Laptop', + Category: 'IT Asset', + UnitPrice: 750, + VendorA: 65, + VendorB: 58, + VendorC: 70, + VendorD: 62, + }, + { + ID: 'ID-1009', + Product: 'UltraWide Monitor', + Category: 'IT Asset', + UnitPrice: 500, + VendorA: 48, + VendorB: 42, + VendorC: 50, + VendorD: 45, + }, + { + ID: 'ID-1010', + Product: 'Network Switch', + Category: 'IT Infrastructure', + UnitPrice: 220, + VendorA: 60, + VendorB: 55, + VendorC: 65, + VendorD: 58, + }, + { + ID: 'ID-1011', + Product: 'External Hard Drive', + Category: 'IT Asset', + UnitPrice: 130, + VendorA: 95, + VendorB: 88, + VendorC: 100, + VendorD: 90, + }, + { + ID: 'ID-1012', + Product: 'Standing Desk', + Category: 'Facilities', + UnitPrice: 350, + VendorA: 35, + VendorB: 30, + VendorC: 32, + VendorD: 28, + }, + { + ID: 'ID-1013', + Product: 'Scanner', + Category: 'Finance', + UnitPrice: 150, + VendorA: 25, + VendorB: 22, + VendorC: 28, + VendorD: 20, + }, + { + ID: 'ID-1014', + Product: 'Tablet Device', + Category: 'Sales', + UnitPrice: 220, + VendorA: 45, + VendorB: 40, + VendorC: 48, + VendorD: 42, + }, + { + ID: 'ID-1015', + Product: 'Dell Laptop', + Category: 'IT Asset', + UnitPrice: 800, + VendorA: 70, + VendorB: 65, + VendorC: 75, + VendorD: 60, + }, + { + ID: 'ID-1016', + Product: 'USB Hub', + Category: 'IT Asset', + UnitPrice: 20, + VendorA: 95, + VendorB: 85, + VendorC: 100, + VendorD: 88, + }, + { + ID: 'ID-1017', + Product: 'LED Screen', + Category: 'Marketing', + UnitPrice: 300, + VendorA: 55, + VendorB: 50, + VendorC: 60, + VendorD: 52, + }, + { + ID: 'ID-1018', + Product: 'Access Point', + Category: 'IT Infrastructure', + UnitPrice: 180, + VendorA: 58, + VendorB: 52, + VendorC: 60, + VendorD: 55, + }, + { + ID: 'ID-1019', + Product: 'NAS Storage', + Category: 'IT Infrastructure', + UnitPrice: 600, + VendorA: 65, + VendorB: 60, + VendorC: 70, + VendorD: 62, + }, + { + ID: 'ID-1020', + Product: 'Filing Cabinet', + Category: 'Facilities', + UnitPrice: 180, + VendorA: 45, + VendorB: 40, + VendorC: 50, + VendorD: 42, + }, + { + ID: 'ID-1021', + Product: 'Projector', + Category: 'Training', + UnitPrice: 450, + VendorA: 20, + VendorB: 18, + VendorC: 22, + VendorD: 19, + }, + { + ID: 'ID-1022', + Product: 'Smart Phone', + Category: 'IT Asset', + UnitPrice: 700, + VendorA: 75, + VendorB: 70, + VendorC: 80, + VendorD: 68, + }, + { + ID: 'ID-1023', + Product: 'Desktop Workstation', + Category: 'IT Asset', + UnitPrice: 950, + VendorA: 65, + VendorB: 60, + VendorC: 70, + VendorD: 55, + }, + { + ID: 'ID-1024', + Product: 'Laptop Stand', + Category: 'IT Asset', + UnitPrice: 35, + VendorA: 85, + VendorB: 75, + VendorC: 90, + VendorD: 80, + }, + { + ID: 'ID-1025', + Product: 'UltraWide Monitor', + Category: 'IT Asset', + UnitPrice: 520, + VendorA: 42, + VendorB: 38, + VendorC: 45, + VendorD: 40, + }, + { + ID: 'ID-1026', + Product: 'WiFi Router', + Category: 'IT Infrastructure', + UnitPrice: 125, + VendorA: 80, + VendorB: 75, + VendorC: 85, + VendorD: 70, + }, + { + ID: 'ID-1027', + Product: 'SSD Drive', + Category: 'IT Asset', + UnitPrice: 155, + VendorA: 100, + VendorB: 95, + VendorC: 105, + VendorD: 90, + }, + { + ID: 'ID-1028', + Product: 'Docking Station', + Category: 'IT Asset', + UnitPrice: 150, + VendorA: 60, + VendorB: 55, + VendorC: 65, + VendorD: 50, + }, + { + ID: 'ID-1029', + Product: 'Conference Speaker', + Category: 'Admin', + UnitPrice: 220, + VendorA: 30, + VendorB: 25, + VendorC: 28, + VendorD: 22, + }, + { + ID: 'ID-1030', + Product: 'Biometric Device', + Category: 'Security', + UnitPrice: 180, + VendorA: 40, + VendorB: 35, + VendorC: 45, + VendorD: 38, + }, +]; diff --git a/ej2-javascript/code-snippet/grid/undo-redo-cs1/es5-datasource.js b/ej2-javascript/code-snippet/grid/undo-redo-cs1/es5-datasource.js new file mode 100644 index 000000000..346aa8c71 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/undo-redo-cs1/es5-datasource.js @@ -0,0 +1,302 @@ +var inventoryStoreData = [ + { + ID: 'ID-1001', + Product: 'MacBook Pro', + Category: 'IT Asset', + UnitPrice: 1200, + VendorA: 55, + VendorB: 40, + VendorC: 60, + VendorD: 35, + }, + { + ID: 'ID-1002', + Product: 'Wireless Mouse', + Category: 'IT Asset', + UnitPrice: 25, + VendorA: 120, + VendorB: 95, + VendorC: 110, + VendorD: 80, + }, + { + ID: 'ID-1003', + Product: '4K Monitor', + Category: 'IT Asset', + UnitPrice: 400, + VendorA: 45, + VendorB: 50, + VendorC: 38, + VendorD: 42, + }, + { + ID: 'ID-1004', + Product: 'WiFi Router', + Category: 'IT Infrastructure', + UnitPrice: 120, + VendorA: 75, + VendorB: 68, + VendorC: 80, + VendorD: 72, + }, + { + ID: 'ID-1005', + Product: 'SSD Drive', + Category: 'IT Asset', + UnitPrice: 150, + VendorA: 110, + VendorB: 90, + VendorC: 105, + VendorD: 88, + }, + { + ID: 'ID-1006', + Product: 'Laser Printer', + Category: 'Admin', + UnitPrice: 300, + VendorA: 35, + VendorB: 30, + VendorC: 28, + VendorD: 25, + }, + { + ID: 'ID-1007', + Product: 'Security Camera', + Category: 'Security', + UnitPrice: 120, + VendorA: 50, + VendorB: 45, + VendorC: 55, + VendorD: 48, + }, + { + ID: 'ID-1008', + Product: 'HP Laptop', + Category: 'IT Asset', + UnitPrice: 750, + VendorA: 65, + VendorB: 58, + VendorC: 70, + VendorD: 62, + }, + { + ID: 'ID-1009', + Product: 'UltraWide Monitor', + Category: 'IT Asset', + UnitPrice: 500, + VendorA: 48, + VendorB: 42, + VendorC: 50, + VendorD: 45, + }, + { + ID: 'ID-1010', + Product: 'Network Switch', + Category: 'IT Infrastructure', + UnitPrice: 220, + VendorA: 60, + VendorB: 55, + VendorC: 65, + VendorD: 58, + }, + { + ID: 'ID-1011', + Product: 'External Hard Drive', + Category: 'IT Asset', + UnitPrice: 130, + VendorA: 95, + VendorB: 88, + VendorC: 100, + VendorD: 90, + }, + { + ID: 'ID-1012', + Product: 'Standing Desk', + Category: 'Facilities', + UnitPrice: 350, + VendorA: 35, + VendorB: 30, + VendorC: 32, + VendorD: 28, + }, + { + ID: 'ID-1013', + Product: 'Scanner', + Category: 'Finance', + UnitPrice: 150, + VendorA: 25, + VendorB: 22, + VendorC: 28, + VendorD: 20, + }, + { + ID: 'ID-1014', + Product: 'Tablet Device', + Category: 'Sales', + UnitPrice: 220, + VendorA: 45, + VendorB: 40, + VendorC: 48, + VendorD: 42, + }, + { + ID: 'ID-1015', + Product: 'Dell Laptop', + Category: 'IT Asset', + UnitPrice: 800, + VendorA: 70, + VendorB: 65, + VendorC: 75, + VendorD: 60, + }, + { + ID: 'ID-1016', + Product: 'USB Hub', + Category: 'IT Asset', + UnitPrice: 20, + VendorA: 95, + VendorB: 85, + VendorC: 100, + VendorD: 88, + }, + { + ID: 'ID-1017', + Product: 'LED Screen', + Category: 'Marketing', + UnitPrice: 300, + VendorA: 55, + VendorB: 50, + VendorC: 60, + VendorD: 52, + }, + { + ID: 'ID-1018', + Product: 'Access Point', + Category: 'IT Infrastructure', + UnitPrice: 180, + VendorA: 58, + VendorB: 52, + VendorC: 60, + VendorD: 55, + }, + { + ID: 'ID-1019', + Product: 'NAS Storage', + Category: 'IT Infrastructure', + UnitPrice: 600, + VendorA: 65, + VendorB: 60, + VendorC: 70, + VendorD: 62, + }, + { + ID: 'ID-1020', + Product: 'Filing Cabinet', + Category: 'Facilities', + UnitPrice: 180, + VendorA: 45, + VendorB: 40, + VendorC: 50, + VendorD: 42, + }, + { + ID: 'ID-1021', + Product: 'Projector', + Category: 'Training', + UnitPrice: 450, + VendorA: 20, + VendorB: 18, + VendorC: 22, + VendorD: 19, + }, + { + ID: 'ID-1022', + Product: 'Smart Phone', + Category: 'IT Asset', + UnitPrice: 700, + VendorA: 75, + VendorB: 70, + VendorC: 80, + VendorD: 68, + }, + { + ID: 'ID-1023', + Product: 'Desktop Workstation', + Category: 'IT Asset', + UnitPrice: 950, + VendorA: 65, + VendorB: 60, + VendorC: 70, + VendorD: 55, + }, + { + ID: 'ID-1024', + Product: 'Laptop Stand', + Category: 'IT Asset', + UnitPrice: 35, + VendorA: 85, + VendorB: 75, + VendorC: 90, + VendorD: 80, + }, + { + ID: 'ID-1025', + Product: 'UltraWide Monitor', + Category: 'IT Asset', + UnitPrice: 520, + VendorA: 42, + VendorB: 38, + VendorC: 45, + VendorD: 40, + }, + { + ID: 'ID-1026', + Product: 'WiFi Router', + Category: 'IT Infrastructure', + UnitPrice: 125, + VendorA: 80, + VendorB: 75, + VendorC: 85, + VendorD: 70, + }, + { + ID: 'ID-1027', + Product: 'SSD Drive', + Category: 'IT Asset', + UnitPrice: 155, + VendorA: 100, + VendorB: 95, + VendorC: 105, + VendorD: 90, + }, + { + ID: 'ID-1028', + Product: 'Docking Station', + Category: 'IT Asset', + UnitPrice: 150, + VendorA: 60, + VendorB: 55, + VendorC: 65, + VendorD: 50, + }, + { + ID: 'ID-1029', + Product: 'Conference Speaker', + Category: 'Admin', + UnitPrice: 220, + VendorA: 30, + VendorB: 25, + VendorC: 28, + VendorD: 22, + }, + { + ID: 'ID-1030', + Product: 'Biometric Device', + Category: 'Security', + UnitPrice: 180, + VendorA: 40, + VendorB: 35, + VendorC: 45, + VendorD: 38, + }, +]; diff --git a/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.css b/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.css new file mode 100644 index 000000000..0fba63172 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.js b/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.js new file mode 100644 index 000000000..c2c371278 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.js @@ -0,0 +1,19 @@ +ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar, ej.grids.Page); + +var grid = new ej.grids.Grid({ + dataSource: inventoryStoreData, + editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch', enableUndoRedo: true }, + allowPaging: true, + toolbar: ['Add', 'Delete', 'Update', 'Cancel', 'Undo', 'Redo'], + columns: [ + { field: 'ID', headerText: 'ID', width: 120, textAlign: 'Right', isPrimaryKey: true, validationRules: { required: true } }, + { field: 'Product', headerText: 'Product Name', width: 180, editType: 'dropdownedit', edit: { params: { popupHeight: '200px' } } }, + { field: 'VendorA', headerText: 'Vendor A (units)', width: 160, textAlign: 'Right', editType: 'numericedit', edit: { params: { showSpinButton: false } } }, + { field: 'VendorB', headerText: 'Vendor B (units)', width: 160, textAlign: 'Right', editType: 'numericedit', edit: { params: { showSpinButton: false } } }, + { field: 'VendorC', headerText: 'Vendor C (units)', width: 160, textAlign: 'Right', editType: 'numericedit', edit: { params: { showSpinButton: false } } }, + { field: 'VendorD', headerText: 'Vendor D (units)', width: 160, textAlign: 'Right', editType: 'numericedit', edit: { params: { showSpinButton: false } } }, + { field: 'UnitPrice', headerText: 'Price (per unit)', width: 160, textAlign: 'Right', format: 'C2', editType: 'numericedit', edit: { params: { showSpinButton: false } }, validationRules: { required: true, min: 1 } } + ], + height: 240 +}); +grid.appendTo('#Grid'); diff --git a/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.ts b/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.ts new file mode 100644 index 000000000..0620a00a9 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/undo-redo-cs1/index.ts @@ -0,0 +1,23 @@ + +import { Grid, Edit, Toolbar, Page } from '@syncfusion/ej2-grids'; +import { inventoryStoreData } from './datasource.ts'; + +Grid.Inject(Edit, Toolbar, Page); + +let grid: Grid = new Grid({ + dataSource: inventoryStoreData, + editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch', enableUndoRedo: true }, + allowPaging: true, + toolbar: ['Add', 'Delete', 'Update', 'Cancel', 'Undo', 'Redo'], + columns: [ + { field: 'ID', headerText: 'ID', width: 120, textAlign: 'Right', isPrimaryKey: true, validationRules: { required: true } }, + { field: 'Product', headerText: 'Product Name', width: 180, editType: 'dropdownedit', edit: { params: { popupHeight: '200px' } } }, + { field: 'VendorA', headerText: 'Vendor A (units)', width: 160, textAlign: 'Right', editType: 'numericedit', edit: { params: { showSpinButton: false } } }, + { field: 'VendorB', headerText: 'Vendor B (units)', width: 160, textAlign: 'Right', editType: 'numericedit', edit: { params: { showSpinButton: false } } }, + { field: 'VendorC', headerText: 'Vendor C (units)', width: 160, textAlign: 'Right', editType: 'numericedit', edit: { params: { showSpinButton: false } } }, + { field: 'VendorD', headerText: 'Vendor D (units)', width: 160, textAlign: 'Right', editType: 'numericedit', edit: { params: { showSpinButton: false } } }, + { field: 'UnitPrice', headerText: 'Price (per unit)', width: 160, textAlign: 'Right', format: 'C2', editType: 'numericedit', edit: { params: { showSpinButton: false } }, validationRules: { required: true, min: 1 } } + ], + height: 240 +}); +grid.appendTo('#Grid'); diff --git a/ej2-javascript/code-snippet/grid/undo-redo-cs1/js/index.html b/ej2-javascript/code-snippet/grid/undo-redo-cs1/js/index.html new file mode 100644 index 000000000..8540a623d --- /dev/null +++ b/ej2-javascript/code-snippet/grid/undo-redo-cs1/js/index.html @@ -0,0 +1,34 @@ + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + +
      +
      +
      + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/undo-redo-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/undo-redo-cs1/systemjs.config.js new file mode 100644 index 000000000..efb9d392c --- /dev/null +++ b/ej2-javascript/code-snippet/grid/undo-redo-cs1/systemjs.config.js @@ -0,0 +1,47 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js', + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js" + }, + meta: { + '*.json': { loader: 'plugin-json' } + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/undo-redo-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/undo-redo-cs1/ts/index.html new file mode 100644 index 000000000..f7e2d7112 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/undo-redo-cs1/ts/index.html @@ -0,0 +1,32 @@ + + + + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + +
      Loading....
      +
      +
      +
      + + \ No newline at end of file diff --git a/ej2-javascript/grid/columns/column-chooser.md b/ej2-javascript/grid/columns/column-chooser.md index a659224fc..995a808ed 100644 --- a/ej2-javascript/grid/columns/column-chooser.md +++ b/ej2-javascript/grid/columns/column-chooser.md @@ -44,6 +44,41 @@ To use the column chooser, inject the **ColumnChooser** module in the grid. > The column chooser dialog displays the header text of each column by default. If the header text is not defined for a column, the corresponding column field name is displayed instead. +## Column chooser modes + +The Grid column chooser supports two modes, `Default` and `Immediate`. In `Default` mode, column visibility changes are applied only after clicking the "OK" button in the column chooser dialog. In `Immediate` mode, column visibility changes are applied automatically when columns are checked or unchecked through the checkboxes in the column chooser. + +The following example enables immediate mode by setting the `columnChooserSettings.mode` property to `Immediate`: + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/columnchooser-cs3/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/columnchooser-cs3/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/columnchooser-cs3" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/columnchooser-cs3/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/columnchooser-cs3/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/columnchooser-cs3" %} +{% endif %} + +> The `columnChooserSettings.immediateModeDelay` property can be used to control how quickly visibility changes are applied in immediate mode. This property specifies the delay interval, in milliseconds, before the update is executed. The default value is `0`, which applies changes immediately. + ## Hide column in column chooser dialog You can hide the column names in column chooser by defining the [columns->showInColumnChooser](../../api/grid/column#showincolumnchooser) as **false**. This feature is useful when working with a large number of columns or when you want to limit the number of columns that are available for selection in the column chooser dialog. diff --git a/ej2-javascript/grid/editing/batch-editing.md b/ej2-javascript/grid/editing/batch-editing.md index 6d4f82e96..4979deb5d 100644 --- a/ej2-javascript/grid/editing/batch-editing.md +++ b/ej2-javascript/grid/editing/batch-editing.md @@ -13,9 +13,9 @@ domainurl: ##DomainURL## Batch editing is a powerful feature in the Grid control that allows you to edit multiple cells simultaneously. It provides a convenient way to make changes to multiple cells and save them in a single request to the data source. This feature is particularly useful when dealing with large datasets or when you need to update multiple cells at once. -In batch edit mode, when you double-click on a grid cell, the target cell changes to an editable state. You can perform bulk update of the added, changed, and deleted data by either clicking on the toolbar's **Update** button or by externally invoking the [batchSave](../../api/grid/edit/#batchsave) method. +In batch edit mode, when you double-click on a grid cell, the target cell changes to an editable state. You can perform bulk update of the added, changed, and deleted data by either clicking on the toolbar's **Update** button or by externally invoking the [batchSave](../../api/grid/edit#batchsave) method. -To enable batch editing mode, you need to set the [editSettings->mode](../../api/grid/editSettings/#mode) property to **Batch**. This property determines the editing mode of the Grid and allows you to activate the batch editing feature. +To enable batch editing mode, you need to set the [editSettings->mode](../../api/grid/editSettings#mode) property to **Batch**. This property determines the editing mode of the Grid and allows you to activate the batch editing feature. Here's an example how to enable batch editing in the javascript grid control: @@ -87,17 +87,17 @@ In the following example, the **TotalCost** column value is updated based on cha {% previewsample "page.domainurl/code-snippet/grid/grid-cs18" %} {% endif %} -> * You can utilize the [updateCell](../../api/grid/#updatecell) method to update cells in batch mode. +> * You can utilize the [updateCell](../../api/grid#updatecell) method to update cells in batch mode. ## Cancel edit based on condition The Grid control provides to cancel the CRUD operations (Edit, Add, Delete) for particular row or cell in batch edit mode based on specific conditions. This feature allows you to control over whether editing should be allowed or prevented for certain rows or cells in the grid. -To cancel the edit action, you need to handle the [cellEdit](../../api/grid/#cellEdit) event. This event is triggered when a cell enters the edit mode. Within the event handler, you can add a condition to check whether the edit operation should be allowed or canceled. If the condition is met, set the `args.cancel` property to **true** to cancel the edit operation. +To cancel the edit action, you need to handle the [cellEdit](../../api/grid#cellEdit) event. This event is triggered when a cell enters the edit mode. Within the event handler, you can add a condition to check whether the edit operation should be allowed or canceled. If the condition is met, set the `args.cancel` property to **true** to cancel the edit operation. -To cancel the add action, you need to handle the [beforeBatchAdd](../../api/grid/#beforeBatchAdd) event. This event is triggered before a new record is added to the batch changes. Within the event handler, you can add a condition to determine whether the add operation should proceed or be canceled. If the condition is met, set the `args.cancel` property to **true** to cancel the add operation. +To cancel the add action, you need to handle the [beforeBatchAdd](../../api/grid#beforeBatchAdd) event. This event is triggered before a new record is added to the batch changes. Within the event handler, you can add a condition to determine whether the add operation should proceed or be canceled. If the condition is met, set the `args.cancel` property to **true** to cancel the add operation. -To cancel the delete action, you need to handle the [beforeBatchDelete](../../api/grid/#beforeBatchDelete) event. This event is triggered before a record is deleted from the batch changes. Within the event handler, you can add a condition to control whether the delete operation should take place or be canceled. If the condition is met, set the `args.cancel` property to **true** to cancel the delete operation. +To cancel the delete action, you need to handle the [beforeBatchDelete](../../api/grid#beforeBatchDelete) event. This event is triggered before a record is deleted from the batch changes. Within the event handler, you can add a condition to control whether the delete operation should take place or be canceled. If the condition is met, set the `args.cancel` property to **true** to cancel the delete operation. In the below demo, prevent the CRUD operation based on the **Role** column value. If the Role Column is **Admin**, then edit/delete action is prevented for that row. @@ -130,7 +130,7 @@ In the below demo, prevent the CRUD operation based on the **Role** column value ## Adding a new row at the bottom of the grid -The grid control allows you to add a new row at the bottom of the grid, allowing you to insert a new record at the end of the existing data set. This feature is particularly useful when you want to conveniently add new records without the need to scroll up or manually reposition the newly added row. To achieve this, you can make use of the [newRowPosition](../../api/grid/editSettings/#newrowposition) property in the `editSettings` configuration and set it to **Bottom**. +The grid control allows you to add a new row at the bottom of the grid, allowing you to insert a new record at the end of the existing data set. This feature is particularly useful when you want to conveniently add new records without the need to scroll up or manually reposition the newly added row. To achieve this, you can make use of the [newRowPosition](../../api/grid/editSettings#newrowposition) property in the `editSettings` configuration and set it to **Bottom**. >* If you set `newRowPosition` as **Bottom**, you can use the **TAB** key to easily move between cells or rows in edit mode. As you enter data in each cell and press **TAB**, the grid will automatically create new rows below the current row, allowing you to conveniently add data for multiple rows without having to leave the edit mode. >* If you set `newRowPosition` as **Top**, the grid will display a blank row form at the top by default, allowing you to enter data for the new record. However, when the data is saved or updated, it will be inserted at the bottom of the grid ,ensuring the new record appears at the end of the existing data set. @@ -171,9 +171,9 @@ Here's an example that demonstrates how to enable adding new rows at the bottom Displaying a confirmation dialog provides an additional layer of confirmation when performing actions like saving a record or canceling changes in the grid. This dialog prompts for confirmation before proceeding with the action, ensuring that accidental or undesired changes are avoided. The grid control offers a built-in confirmation dialog that can be used to confirm save, cancel, and other actions. -To enable the confirmation dialog, you can set the [editSettings->showConfirmDialog](../../api/grid/editSettings/#showconfirmdialog) property of the `editSettings` configuration to **true**. The default value is **true**. +To enable the confirmation dialog, you can set the [editSettings->showConfirmDialog](../../api/grid/editSettings#showconfirmdialog) property of the `editSettings` configuration to **true**. The default value is **true**. -> * `editSettings.showConfirmDialog` requires the [editSettings->mode](../../api/grid/editSettings/#mode) to be **Batch** +> * `editSettings.showConfirmDialog` requires the [editSettings->mode](../../api/grid/editSettings#mode) to be **Batch** > * If `editSettings.showConfirmDialog` set to **false**, then confirmation dialog does not display in batch editing. > * While performing both update and delete operations, a separate delete confirmation dialog is shown at the time of clicking the delete button or pressing the delete key itself. @@ -210,9 +210,9 @@ Here's an example that demonstrates how to enable/disable the confirmation dialo You can enable editing in a single click and navigate between cells or rows using arrow keys without having to double-click or use the mouse for navigation. By default, in batch mode, the **TAB** key can be used to edit or move to the next cell or row and the **Enter** key is used to move to the next row cell. However, you can customize this behavior to enable editing with a single click or using arrow keys. -To enable editing in a single click, you can handle the [created](../../api/grid/#created) event of the Grid. Within the event handler,bind the click event to the grid cells and call the `editCell` method to make the clicked cell editable. +To enable editing in a single click, you can handle the [created](../../api/grid#created) event of the Grid. Within the event handler,bind the click event to the grid cells and call the `editCell` method to make the clicked cell editable. -To enable editing using arrow keys, you can handle the [load](../../api/grid/#load) event of the Grid control. Inside the event handler, you can bind the keydown event to the grid element and check for arrow key presses. Based on the arrow key pressed, you can identify the next or previous cell using the `editCell` method and make it editable. +To enable editing using arrow keys, you can handle the [load](../../api/grid#load) event of the Grid control. Inside the event handler, you can bind the keydown event to the grid element and check for arrow key presses. Based on the arrow key pressed, you can identify the next or previous cell using the `editCell` method and make it editable. Here's an example that demonstrates how to achieve both single-click editing and arrow key navigation using the `created` and `load` events in conjunction with the `editCell` method: @@ -247,7 +247,7 @@ Here's an example that demonstrates how to achieve both single-click editing and You can prevent editing of specific cells based on certain conditions in the Grid control. This feature is useful when you want to restrict editing for certain cells, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid. -To disable editing for a particular cell in batch mode, use the [cellEdit](../../api/grid/#celledit) event of the grid. You can then use the **args.cancel** property and set it to **true** to prevent editing for that cell. +To disable editing for a particular cell in batch mode, use the [cellEdit](../../api/grid#celledit) event of the grid. You can then use the **args.cancel** property and set it to **true** to prevent editing for that cell. Here's an example demonstrating how you can disable editing for cells containing the value **France** using the `cellEdit` event: @@ -280,7 +280,7 @@ Here's an example demonstrating how you can disable editing for cells containing ## Save or update the changes immediately -The Grid control provides a convenient way to save or update changes immediately in batch mode without the need for a separate Save button. This feature is particularly useful when you want to allow you to edit data efficiently without having to manually trigger a save action. You can achieve this by utilizing the [cellSaved](../../api/grid/#cellsaved) event and the [batchSave](../../api/grid/edit/#batchsave) method. +The Grid control provides a convenient way to save or update changes immediately in batch mode without the need for a separate Save button. This feature is particularly useful when you want to allow you to edit data efficiently without having to manually trigger a save action. You can achieve this by utilizing the [cellSaved](../../api/grid#cellsaved) event and the [batchSave](../../api/grid/edit#batchsave) method. By default, when you use the `batchSave` method to save or update data, a confirmation dialog is displayed. This dialog prompts for confirmation before proceeding with the save or cancel action, ensuring that accidental or undesired changes are avoided. @@ -317,4 +317,43 @@ Here's an example that demonstrates how to achieve immediate saving or updating {% endtabs %} {% previewsample "page.domainurl/code-snippet/grid/grid-cs21-SaveUpdate" %} -{% endif %} \ No newline at end of file +{% endif %} + +## Enable Undo / Redo + +The Grid supports Undo / Redo actions in batch editing, allowing changes such as cell edits, row additions, and row deletions to be reverted or reapplied before saving. This feature can be enabled by setting the `editSettings.enableUndoRedo` property to **true**. + +Undo and redo operations can be performed using keyboard shortcuts. Press Ctrl + Z to undo an action, and Ctrl + Y to redo an action. + +In addition, **Undo** and **Redo** toolbar items can be added to the Grid toolbar to perform these actions through the user interface. + +Here's an example that demonstrates how to enable Undo / Redo in batch editing: + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/undo-redo-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/undo-redo-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/undo-redo-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/undo-redo-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/undo-redo-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/undo-redo-cs1" %} +{% endif %} + +> Note: The maximum number of undo and redo actions stored in the stack can be controlled using the `editSettings.undoRedoLimit` property. This property limits the number of actions that can be reverted or reapplied during a batch editing session. The default value is `20`. diff --git a/ej2-javascript/grid/editing/cell-editing.md b/ej2-javascript/grid/editing/cell-editing.md new file mode 100644 index 000000000..17ab312bb --- /dev/null +++ b/ej2-javascript/grid/editing/cell-editing.md @@ -0,0 +1,122 @@ +--- +layout: post +title: Cell editing in ##Platform_Name## Grid control | Syncfusion +description: Learn here all about Cell editing in Syncfusion ##Platform_Name## Grid control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: Cell editing +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Cell editing in ##Platform_Name## Grid control + +Cell editing provides a streamlined way to update individual cell values directly within the grid. Cell editing is designed for quick, inline modifications, making data entry and corrections more efficient. This approach ensures that changes are applied seamlessly to large datasets while maintaining consistency with the Grid’s overall editing experience. + +To enable cell editing in the Data Grid, configure the [editSettings->mode](../../api/grid/editSettings#mode) property to `Cell` and allow editing through the [editSettings->allowEditing](../../api/grid/editSettingsModel#allowediting) in editSettings property. This setup provides a seamless inline editing experience, letting users quickly update individual cell values directly within the grid. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/grid-celledit-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/grid-celledit-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/grid-celledit-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/grid-celledit-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/grid-celledit-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/grid-celledit-cs1" %} +{% endif %} + +> When editing is enabled, it is necessary to set the [isPrimaryKey](../../api/grid/columnModel#isprimarykey) property value to `true` for the unique column to ensure accurate data updates. + +## Cancel edit based on condition + +The Grid provides the ability to cancel the edit operations for particular cell based on specific conditions. This feature allows controlling whether editing should be allowed or prevented for certain cells in the grid. This functionality is achieved by leveraging the [actionBegin](../../api/grid#actionbegin) event of the Grid component. This event is triggered when a CRUD (Create, Read, Update, Delete) operation is initiated in the grid. + +This customization is useful when restricting editing for certain cells, such as read-only data, calculated values, or protected information. It helps maintain data integrity and ensures that only authorized changes can be made in the grid. + +To cancel the edit operation based on a specific condition, handle the `actionBegin` event of the Grid component and check the `requestType` parameter. This parameter indicates the type of action being performed: + +| Request Type | Description | +|--------------|-------------| +| `beginEdit` | Editing an existing record | +| `add` | Creating a new record | +| `save` | Updating a new or existing record | +| `delete` | Deleting an existing record | + +Apply the desired condition and cancel the operation by setting the `args.cancel` property to `true`. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/grid-celledit-cs2/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/grid-celledit-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/grid-celledit-cs2" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/grid-celledit-cs2/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/grid-celledit-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/grid-celledit-cs2" %} +{% endif %} + +## Single-click editing + +Enabling single-click editing in the Syncfusion® React Grid’s `Cell` editing mode is a valuable and intuitive feature that makes a cell editable with just one click. This seamless experience is achieved by using the `editCell` method for rapid, efficient data modification. + +To implement this, bind the `onClick` event for the grid and, within the event handler, call the `editCell` method based on the clicked target element. This ensures that the editing mode is triggered when clicking on a specific element within the grid. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/grid-celledit-cs3/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/grid-celledit-cs3/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/grid-celledit-cs3" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/grid-celledit-cs3/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/grid-celledit-cs3/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/grid-celledit-cs3" %} +{% endif %} \ No newline at end of file diff --git a/ej2-javascript/js/mcp-server/release-notes.md b/ej2-javascript/js/ai-tools/release-notes.md similarity index 100% rename from ej2-javascript/js/mcp-server/release-notes.md rename to ej2-javascript/js/ai-tools/release-notes.md diff --git a/ej2-javascript/js/mcp-server/agentic-ui-builder/getting-started.md b/ej2-javascript/js/mcp-server/agentic-ui-builder/getting-started.md deleted file mode 100644 index b9101642f..000000000 --- a/ej2-javascript/js/mcp-server/agentic-ui-builder/getting-started.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -layout: post -title: Getting Started with Agentic UI Builder | Syncfusion -description: Set up and use the Syncfusion JavaScript UI Builder MCP Server for AI-powered assistance in building JavaScript applications. -control: Getting started with Syncfusion JavaScript UI Builder MCP Server -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Getting Started with Agentic UI Builder - -The **Syncfusion® JavaScript UI Builder** uses AI to help you build JavaScript applications with natural language commands. Simply describe what you want to create, and it generates complete UI implementations with Syncfusion controls. - -## Prerequisites - -Before you begin, ensure you have: - -* Required [Node.js](https://nodejs.org/en/) version >= 18 -* A **compatible MCP client** (VS Code, Syncfusion® Code Studio, Cursor, etc.) -* Active [Syncfusion® API key](https://syncfusion.com/account/api-key) -* JavaScript application (existing or new); see [Quick Start](https://ej2.syncfusion.com/javascript/documentation/getting-started/quick-start) -* Active Syncfusion® license(any of the following): - - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - - [Free Community License](https://www.syncfusion.com/products/communitylicense) - - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) - -## Installation - -This section guides you through installing and configuring the Syncfusion MCP Server in your development environment. - -### Getting your API Key - -Before proceeding with the MCP installation, generate your Syncfusion API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file: - -```json -"env": { - "Syncfusion_API_Key_Path": "D:\\syncfusion-key.txt" -} -``` - -> Users can also set the API key directly using `"Syncfusion_API_Key": "YOUR_API_KEY"` in the env configuration. - -### Setting up in MCP Clients - -Create a configuration file in your project folder to install the server for your workspace as shown below: - -**Important:** Replace `YOUR_API_KEY_FILE_PATH` with the path to your API key file. - -{% tabs %} -{% highlight bash tabtitle="VS Code" %} - -// Create a `.vscode/mcp.json` file in your workspace with the MCP server configuration: - -{ - "servers": { - "sf-javascript-mcp": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@syncfusion/javascript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -{% endhighlight %} -{% highlight bash tabtitle="Cursor" %} - -// Create a `.cursor/mcp.json` file in your workspace with the MCP server configuration: - -{ - "mcpServers": { - "sf-javascript-mcp": { - "command": "npx", - "args": ["-y", "@syncfusion/javascript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -{% endhighlight %} -{% highlight bash tabtitle="Code Studio" %} - -// Create a `.codestudio/mcp.json` file in your workspace with the MCP server configuration: - -{ - "servers": { - "sf-javascript-mcp": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@syncfusion/javascript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -// After creating the file, click Start in the inline action to install the server. - -{% endhighlight %} -{% highlight bash tabtitle="JetBrains" %} - -// Open AI Assistant chat, type /, and select Add Command -// Click ➕ Add on the MCP settings page -// Choose STDIO and select JSON configuration - -{ - "mcpServers": { - "sf-javascript-mcp": { - "command": "npx.cmd", - "args": [ - "-y", - "@syncfusion/javascript-assistant@latest" - ], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -// Click OK, then click Apply. The server starts and shows Connected status. - -{% endhighlight %} -{% endtabs %} - -**Verify Installation:** Check your editor's MCP Server list for `sf-javascript-mcp` with "Connected" status to confirm successful installation. - -## Usage - -Once installed, open your AI assistant in the IDE and describe what you want to build with the `#sf_javascript_ui_builder` command: - -``` -#sf_javascript_ui_builder Create a dashboard with a sales data grid and monthly trend chart. -``` - -The UI Builder generates complete implementations including controls and styling. - -> Note: Using the `#sf_javascript_ui_builder` tool ensures the Agentic UI Builder is invoked directly. Alternatively, you can use natural language without the tool—just make sure to include the "Syncfusion" keyword in your prompt so the AI model can automatically recognize and call the appropriate generator. - -## Individual Tools - -For targeted assistance, you can call individual tools directly using their specific tool names. This is useful when you need specialized help from a particular tool. - -### Control Tool (`#sf_javascript_control`) - -Provides quick reference guidelines for Syncfusion JavaScript controls, including properties, event handlers, methods, and usage examples. - -**When to use:** To get basic control API information and structure details for implementing specific controls correctly. - -**Example:** -``` -#sf_javascript_control How do I integrate a data table? -``` - -### Style Tool (`#sf_javascript_style`) - -Provides theme configuration, styling setup, and icon integration for Syncfusion JavaScript controls. Supports multiple themes (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), light/dark mode implementation, and icon patterns for consistent UI styling. - -**When to use:** To apply themes, customize colors, modify the visual design of controls, or integrate icons into your UI. - -**Example:** -``` -#sf_javascript_style How do I apply the Syncfusion Tailwind 3 dark theme and add a communication icon inside a button? -``` - -## Best Practices - -To maximize the effectiveness of the Agentic UI Builder and achieve optimal results: - -- **Minimize active tools:** Limit the number of active MCP tools in your IDE to prevent tool-selection ambiguity and improve response accuracy. -- **Start simple:** Begin with straightforward prompts and progressively add complexity as needed. -- **Be specific:** Provide clear, specific descriptions of your control behavior and design preferences. -- **Reference patterns:** Mention existing design systems, control libraries, or specific patterns you want to replicate. -- **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards throughout your JavaScript project. -- **Use advanced AI models:** For best results, use **Claude Sonnet 4.5 or higher** models. Other compatible models include **GPT-5 and Gemini 3 Pro**. Higher-capability models produce better code quality and more accurate control implementations. - -> Always review AI-generated code before using it in production. - -## Troubleshooting - -If you encounter issues during installation or while using the MCP server, refer to the solutions below: - -| Issue | Solution | -|-------|----------| -| **Clear npm cache** | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues | -| **Server failed to start** | Update to Node.js 18+, verify JSON syntax in config file, and restart your IDE | -| **Invalid API key** | Verify your key is active at [Syncfusion Account Page](https://syncfusion.com/account/api-key) | -| **Incorrect API key config** | For the file path: Verify file location and content. For inline key: Check key is properly updated | -| **Wrong config file location** | VS Code: `.vscode/mcp.json`
      CodeStudio: `.codestudio/mcp.json`
      Cursor: `.cursor/mcp.json` in the workspace root | -| **Check IDE logs** | VS Code/CodeStudio: Output panel → "MCP" • Cursor: Developer Console for MCP errors | - -## What's Next - -Now that you've set up the Agentic UI Builder, explore these resources: - -* **[Prompt Library](./prompt-library)** - Ready-to-use prompts for common scenarios -* **[Showcase Sample Projects](https://www.syncfusion.com/showcase-apps/javascript)** - Full application examples -* **[Control Examples](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/grid/overview)** - Interactive demos of all Syncfusion JavaScript controls diff --git a/ej2-javascript/js/mcp-server/agentic-ui-builder/prompt-library.md b/ej2-javascript/js/mcp-server/agentic-ui-builder/prompt-library.md deleted file mode 100644 index 329399928..000000000 --- a/ej2-javascript/js/mcp-server/agentic-ui-builder/prompt-library.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -layout: post -title: Agentic UI Builder Prompt Library | Syncfusion -description: Explore the Agentic UI Builder Prompt Library to enhance JavaScript productivity with layout blocks, control guidance, styling, and icons. -control: Syncfusion Agentic UI Builder Prompt Library -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Prompt Library - Agentic UI Builder - -Speed up JavaScript development with ready-made prompts for common scenarios. Use them to generate complete applications, controls, and custom styling. - -## How to Use - -Ensure that the Syncfusion MCP Server is configured and running before executing prompts. - -* Select a prompt that aligns with your development requirements. -* Copy the complete prompt, including the tool (e.g., #sf_vue_ui_builder). -* Customize the prompt for your specific use case. -* Execute the prompt through the MCP Server. -* Validate all generated code through thorough testing before production deployment. - -## General Project Prompts - -These flexible prompts address common application development scenarios using intuitive natural language descriptions. - -{% promptcards %} -{% promptcard Authentication %} -#sf_javascript_ui_builder Create a login page with the Tailwind 3 theme using a centered card layout containing email and password input fields with validation. Include a "Remember Me" checkbox, a forgot password link, and a primary login button. Add a secondary "Create Account" button below. Ensure the layout is responsive and works on mobile, tablet, and desktop. -{% endpromptcard %} -{% promptcard Book Library Dashboard %} -#sf_javascript_ui_builder Create a book library dashboard page with the Bootstrap 5.3 theme displaying a grid of book cards showing cover images, titles, authors, and reading progress bars. Add a search box and genre filter dropdown at the top. Include a sidebar showing reading statistics with charts for books completed this month, reading streaks, and favorite genres. Make the grid responsive (4 columns on desktop, 2 on tablet, 1 on mobile). -{% endpromptcard %} -{% promptcard Product Listing %} -#sf_javascript_ui_builder Create a product catalog page with the Fluent 2 theme featuring a left sidebar containing category filters and a price range slider. The main content area should display product cards in a responsive grid layout (4 columns on desktop, 2 on tablet, 1 on mobile). Add a search box and sort dropdown at the top of the main content area. Include pagination at the bottom. -{% endpromptcard %} -{% promptcard Course Details Page %} -#sf_javascript_ui_builder Create a course details page with the Material 3 theme, including a video player section at the top. Below the video, display the course overview; curriculum using a TreeView control with expandable chapters and lessons; student reviews with rating distribution; and frequently asked questions in separate card sections. Add a right sidebar with a course enrollment card showing price, an enroll button, instructor details with avatar and bio, and a course progress indicator. -{% endpromptcard %} -{% promptcard Task Management %} -#sf_javascript_ui_builder Build a task board page using a Kanban layout with columns for To Do, In Progress, and Completed. Add an "Add Task" button and a search field at the top. Each task card should show title, assignee avatar, due date, and priority badge. Make the columns scrollable, with drag-and-drop functionality. Include filter dropdowns for priority and assignee. -{% endpromptcard %} -{% promptcard Order Tracking %} -#sf_javascript_ui_builder Create an order tracking page with the Tailwind 3 theme featuring a search bar at the top to look up orders by ID. Display order details in a card layout showing customer info, order items in a grid, and order status using a stepper control. Add a timeline on the right showing shipping updates and delivery progress. -{% endpromptcard %} -{% endpromptcards %} - -## Tool-Specific Prompts - -This section provides targeted prompt examples for directly invoking individual specialized tools, offering more precise control over specific aspects of your application. - -### Control Tool - -The Control tool implements specific Syncfusion JavaScript controls with configured properties and event handlers. Use #sf_javascript_control for targeted control integration. - -{% promptcards %} -{% promptcard Advanced Data Grid Setup %} -#sf_javascript_control Create a Grid with paging (20 per page), sorting, and filtering. Columns: product image, name (link), category, price (currency), stock status (badge), actions (edit/delete). Enable row selection and Excel export. -{% endpromptcard %} -{% promptcard Event Calendar Integration %} -#sf_javascript_control Add a Scheduler with month/day/week/agenda views. Toolbar with date navigation, view switcher, and an "Add Event" button. Color-coded categories and drag-and-drop rescheduling. -{% endpromptcard %} -{% promptcard Multi-Step Form Wizard %} -#sf_javascript_control Build a step-by-step registration form with validation per step. Steps: TextBox (personal info), DropDownList (preferences), FileUpload (documents), summary. Add progress indicators and navigation with validation. -{% endpromptcard %} -{% promptcard Real-Time Chart Dashboard %} -#sf_javascript_control Create a Chart control with a line series for real-time data visualization. Configure multiple y-axes, a tooltip with custom formatting, a legend with toggling, and zoom/pan functionality. Update data every 5 seconds. -{% endpromptcard %} -{% endpromptcards %} - -### Styling Tool - -The Styling tool applies custom themes, color schemes, visual treatments, and iconography across your application. Use #sf_javascript_style for branding, aesthetic customization, and icon integration. - -{% promptcards %} -{% promptcard Tailwind3 Dark Mode Setup %} -#sf_javascript_style Apply the Syncfusion Tailwind 3 dark theme to the application. Configure CSS variables for the dark mode color scheme and enable theme toggle functionality. -{% endpromptcard %} -{% promptcard Bootstrap5.3 Theme Customization %} -#sf_javascript_style Customize the Syncfusion Bootstrap 5.3 theme using CSS variables. Modify primary colors, control spacing, and typography to match brand guidelines. -{% endpromptcard %} -{% promptcard Fluent2 Responsive Styling %} -#sf_javascript_style Apply the Syncfusion Fluent 2 theme with responsive adjustments. Customize control sizes, spacing, and layout breakpoints for mobile, tablet, and desktop views. -{% endpromptcard %} -{% promptcard Material3 CSS Variables %} -#sf_javascript_style Configure the Syncfusion Material 3 theme CSS variables for a custom color palette, elevation shadows, border radius, and control-specific styling properties. -{% endpromptcard %} -{% promptcard User Actions & Navigation %} -#sf_javascript_style Add appropriate icons for common user interactions in the application toolbar, including editing capabilities, navigation controls, and accessing various options. -{% endpromptcard %} -{% promptcard Content Editor Toolbar %} -#sf_javascript_style Implement icons for text formatting operations, table manipulation, and image editing tools in the Rich Text Editor. -{% endpromptcard %} -{% promptcard Document Management %} -#sf_javascript_style Find icons for file operations, document processing, printing capabilities, and export functionality in the File Manager toolbar. -{% endpromptcard %} -{% endpromptcards %} - -## See also - -* [Agentic UI Builder - Getting Started](./getting-started) -* [AI Coding Assistant - Getting Started](../ai-coding-assistant/getting-started) \ No newline at end of file diff --git a/ej2-javascript/js/mcp-server/ai-coding-assistant/getting-started.md b/ej2-javascript/js/mcp-server/ai-coding-assistant/getting-started.md deleted file mode 100644 index cb930a047..000000000 --- a/ej2-javascript/js/mcp-server/ai-coding-assistant/getting-started.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -layout: post -title: Getting Started with the AI Coding Assistant | Syncfusion -description: Learn how to configure and use AI Coding Assistant for intelligent code generation, documentation, and troubleshooting in JavaScript apps. -control: Getting Started with the AI Coding Assistant -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Getting Started with the AI Coding Assistant - -The **Syncfusion® AI Coding Assistant** is designed to streamline the development workflow for JavaScript applications that use Syncfusion® controls. It leverages contextual knowledge of the Syncfusion control library to generate code snippets, configuration examples, and guided explanations—reducing documentation lookups and increasing productivity. - -## Prerequisites - -Before you begin, ensure you have: - -* Required [Node.js](https://nodejs.org/en/) version >= 18 -* A **compatible MCP client** (VS Code, Syncfusion® Code Studio, Cursor, etc.) -* Active [Syncfusion® API key](https://syncfusion.com/account/api-key) -* JavaScript application (existing or new); see [Quick Start](https://ej2.syncfusion.com/javascript/documentation/getting-started/quick-start) -* Active Syncfusion® license(any of the following): - - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - - [Free Community License](https://www.syncfusion.com/products/communitylicense) - - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) - -## Installation - -This section guides you through installing and configuring the Syncfusion MCP Server in your development environment. - -### Getting your API Key - -Before proceeding with the MCP installation, generate your Syncfusion API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file: - -```json -"env": { - "Syncfusion_API_Key_Path": "D:\\syncfusion-key.txt" -} -``` - -> Users can also set the API key directly using `"Syncfusion_API_Key": "YOUR_API_KEY"` in the env configuration. - -### Setting up in MCP Clients - -Create a configuration file in your project folder to install the server for your workspace as shown below: - -**Important:** Replace `YOUR_API_KEY_FILE_PATH` with the path to your API key file. - -{% tabs %} -{% highlight bash tabtitle="VS Code" %} - -// Create a `.vscode/mcp.json` file in your workspace with the MCP server configuration: - -{ - "servers": { - "sf-javascript-mcp": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@syncfusion/javascript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -{% endhighlight %} -{% highlight bash tabtitle="Cursor" %} - -// Create a `.cursor/mcp.json` file in your workspace with the MCP server configuration: - -{ - "mcpServers": { - "sf-javascript-mcp": { - "command": "npx", - "args": ["-y", "@syncfusion/javascript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -{% endhighlight %} -{% highlight bash tabtitle="Code Studio" %} - -// Create a `.codestudio/mcp.json` file in your workspace with the MCP server configuration: - -{ - "servers": { - "sf-javascript-mcp": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@syncfusion/javascript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -// After creating the file, click Start in the inline action to install the server. - -{% endhighlight %} -{% highlight bash tabtitle="JetBrains" %} - -// Open AI Assistant chat, type /, and select Add Command -// Click ➕ Add on the MCP settings page -// Choose STDIO and select JSON configuration - -{ - "mcpServers": { - "sf-javascript-mcp": { - "command": "npx.cmd", - "args": [ - "-y", - "@syncfusion/javascript-assistant@latest" - ], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -// Click OK, then click Apply. The server starts and shows Connected status. - -{% endhighlight %} -{% endtabs %} - -**Verify Installation:** Check your editor's MCP Server list for `sf-javascript-mcp` with "Connected" status to confirm successful installation. - -## Usage - -Activate the AI Coding Assistant in your IDE by using the `#sf_javascript_assistant` command followed by your query: - -``` -#sf_javascript_assistant How do I enable paging and sorting in the Syncfusion JavaScript Grid? -``` - -### Common Use Cases - -| Use Case | Description | Example Query | -|----------|-------------|---------------| -| **Control Generation** | Generate complete control implementations with configurations | `#sf_javascript_assistant Create a data grid with inline editing, paging, and toolbar options for CRUD operations` | -| **Feature Implementation** | Get specific feature implementations for existing controls | `#sf_javascript_assistant Add export to Excel functionality in my existing Grid control` | -| **Troubleshooting** | Resolve issues by describing the problem | `#sf_javascript_assistant Scheduler is not displaying events properly. What could be wrong with the data binding?` | -| **API Reference** | Quickly access API information | `#sf_javascript_assistant What are the available event arguments for the Grid's actionComplete event?` | - -### Best Practices - -1. **Be Specific**: Include platform and control (e.g., "Create a Syncfusion JavaScript Grid with paging and filtering"). -2. **Provide Context**: Share versions, desired behavior, and constraints. -3. **Use Descriptive Queries**: Avoid vague questions. -4. **Troubleshooting**: Use AI suggestions for common issues; consult official [documentation](https://ej2.syncfusion.com/vue/documentation) or [support](https://support.syncfusion.com/support/tickets/create) for complex problems. -5. **Start Fresh**: Begin a new chat for new topics to maintain clean context. - -> Always review AI-generated code before using it in production. - -## Troubleshooting - -If you encounter issues during installation or while using the MCP server, refer to the solutions below: - -| Issue | Solution | -|-------|----------| -| **Clear npm cache** | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues | -| **Server failed to start** | Update to Node.js 18+, verify JSON syntax in config file, and restart your IDE | -| **Invalid API key** | Verify your key is active at [Syncfusion Account Page](https://syncfusion.com/account/api-key) | -| **Incorrect API key config** | For the file path: Verify file location and content. For inline key: Check key is properly updated | -| **Wrong config file location** | VS Code: `.vscode/mcp.json`
      CodeStudio: `.codestudio/mcp.json`
      Cursor: `.cursor/mcp.json` in the workspace root | -| **Check IDE logs** | VS Code/CodeStudio: Output panel → "MCP" • Cursor: Developer Console for MCP errors | - -## What's Next - -Now that you've set up the AI Coding Assistant, explore these resources: - -* **[Prompt Library](./prompt-library)** - Ready-to-use prompts for common scenarios -* **[Control Examples](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/grid/overview)** - Interactive demos of all Syncfusion JavaScript controls -* **[API Documentation](https://ej2.syncfusion.com/javascript/documentation/api)** - Complete API reference diff --git a/ej2-javascript/js/mcp-server/ai-coding-assistant/prompt-library.md b/ej2-javascript/js/mcp-server/ai-coding-assistant/prompt-library.md deleted file mode 100644 index 27ad9400b..000000000 --- a/ej2-javascript/js/mcp-server/ai-coding-assistant/prompt-library.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -layout: post -title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion -description: Explore ready-made prompts for Syncfusion JavaScript controls to boost productivity with code generation, configuration, and troubleshooting. -control: Syncfusion AI Coding Assistant Prompt Library -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Prompt Library - AI Coding Assistant - -Speed up JavaScript development using these ready-made prompts for popular Syncfusion controls. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. - -## How to use - -Before starting, make sure your MCP server is set up and running. - -* Choose a prompt that fits your needs. -* Copy the full prompt, including the `#sf_javascript_assistant` tool. -* Customize the prompt for your specific use case. -* Execute the prompt via the MCP Server. -* Always review and test the generated code before adding it to your project. - -## Control-specific Prompts - -### Grid - -The Syncfusion JavaScript Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. - -{% promptcards %} -{% promptcard Paging and Sorting %} -#sf_javascript_assistant How do I enable paging and sorting in the Syncfusion JavaScript Grid? -{% endpromptcard %} -{% promptcard Grouping and Filtering %} -#sf_javascript_assistant Show me an example of grouping and filtering data in the Grid control. -{% endpromptcard %} -{% promptcard CRUD Operations %} -#sf_javascript_assistant What's the code to implement full CRUD operations in Syncfusion JavaScript Grid? -{% endpromptcard %} -{% promptcard Grid Export to PDF and Excel %} -#sf_javascript_assistant How can I add PDF and Excel export options to the Grid toolbar? -{% endpromptcard %} -{% promptcard Virtual Scrolling %} -#sf_javascript_assistant How do I configure virtual scrolling for large datasets in the Grid? -{% endpromptcard %} -{% promptcard Multicolumn Grid Setup %} -#sf_javascript_assistant Create a multicolumn Grid to display product details with sorting and filtering. -{% endpromptcard %} -{% promptcard Chat Integration %} -#sf_javascript_assistant How can I integrate a chat widget inside each row of the Syncfusion Grid? -{% endpromptcard %} -{% promptcard Advanced Grid Features %} -#sf_javascript_assistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling. -{% endpromptcard %} -{% promptcard Troubleshooting Grid Export %} -#sf_javascript_assistant Why isn't my Grid exporting to PDF and Excel correctly? -{% endpromptcard %} -{% promptcard Inline Editing %} -#sf_javascript_assistant How do I enable inline editing for CRUD operations in the Grid? -{% endpromptcard %} -{% promptcard Custom Toolbar %} -#sf_javascript_assistant Add custom toolbar buttons for PDF and Excel export in the Grid. -{% endpromptcard %} -{% promptcard Dynamic Column Configuration %} -#sf_javascript_assistant How can I dynamically configure multicolumn layout with filtering and sorting? -{% endpromptcard %} -{% endpromptcards %} - -### Chart - -The Syncfusion JavaScript Chart suite offers versatile visualization tools across various series types for insightful data representation. - -{% promptcards %} -{% promptcard Local and Remote Data %} -#sf_javascript_assistant How do I bind both local and remote data sources to a Syncfusion Chart? -{% endpromptcard %} -{% promptcard Range Selection %} -#sf_javascript_assistant Show me how to enable range selection in a Syncfusion JavaScript Chart. -{% endpromptcard %} -{% promptcard Chart Types Overview %} -#sf_javascript_assistant What chart types are available in Syncfusion JavaScript Chart, and how do I configure them? -{% endpromptcard %} -{% promptcard Markers and Data Labels %} -#sf_javascript_assistant How can I display markers and data labels on a line chart? -{% endpromptcard %} -{% promptcard Annotations %} -#sf_javascript_assistant Add custom annotations to highlight specific data points in a chart. -{% endpromptcard %} -{% promptcard Chart Export to Image or PDF %} -#sf_javascript_assistant How do I export a Syncfusion Chart to PDF or image format? -{% endpromptcard %} -{% promptcard Print Support %} -#sf_javascript_assistant Enable print functionality for a Syncfusion JavaScript Chart control. -{% endpromptcard %} -{% promptcard Dynamic Chart with Remote Data %} -#sf_javascript_assistant Create a chart that updates dynamically with remote API data. -{% endpromptcard %} -{% promptcard Multiple Series Types %} -#sf_javascript_assistant How do I combine bar and line chart types in a single Syncfusion Chart? -{% endpromptcard %} -{% promptcard Troubleshooting Chart Data Binding %} -#sf_javascript_assistant Why isn't my remote data showing up in the Syncfusion Chart? -{% endpromptcard %} -{% promptcard Interactive Range Selector %} -#sf_javascript_assistant Configure a range selector for zooming and filtering in a time-series chart. -{% endpromptcard %} -{% promptcard Custom Markers and Labels %} -#sf_javascript_assistant Show me an example of customizing chart markers and data label styles. -{% endpromptcard %} -{% endpromptcards %} - -### Schedule - -The Syncfusion JavaScript Schedule control helps manage events, resources, and timelines with powerful views and customization. - -{% promptcards %} -{% promptcard Module Injection %} -#sf_javascript_assistant How do I inject required modules into the Syncfusion JavaScript Schedule control? -{% endpromptcard %} -{% promptcard Remote Data Binding %} -#sf_javascript_assistant Bind the Schedule control to a remote API for dynamic event loading. -{% endpromptcard %} -{% promptcard CRUD Actions %} -#sf_javascript_assistant Show me how to implement full CRUD operations in the Schedule control. -{% endpromptcard %} -{% promptcard Virtual Scrolling %} -#sf_javascript_assistant Enable virtual scrolling for large event datasets in the Schedule view. -{% endpromptcard %} -{% promptcard Timezone Support %} -#sf_javascript_assistant How can I configure timezone support in the Syncfusion JavaScript Schedule? -{% endpromptcard %} -{% promptcard Export Schedule to PDF or Excel %} -#sf_javascript_assistant Add export functionality to download the Schedule view as PDF or Excel. -{% endpromptcard %} -{% promptcard Timeline Header Rows %} -#sf_javascript_assistant How do I customize timeline header rows in the Schedule control. -{% endpromptcard %} -{% promptcard Multiple Module Injection %} -#sf_javascript_assistant Inject multiple modules like Day, Week, and Timeline views into the Schedule control. -{% endpromptcard %} -{% promptcard Troubleshooting Schedule CRUD %} -#sf_javascript_assistant Why aren't my CRUD actions working correctly in the Schedule control? -{% endpromptcard %} -{% promptcard Local and Remote Data %} -#sf_javascript_assistant Bind both local and remote event data to the Schedule control. -{% endpromptcard %} -{% promptcard Export and Timezone %} -#sf_javascript_assistant Configure timezone-aware exporting for the Schedule view. -{% endpromptcard %} -{% promptcard Advanced Schedule Setup %} -#sf_javascript_assistant Create a Schedule with module injection, CRUD, virtual scrolling, and exporting. -{% endpromptcard %} -{% endpromptcards %} - -### Kanban - -The Syncfusion JavaScript Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. - -{% promptcards %} -{% promptcard Data Binding %} -#sf_javascript_assistant How do I bind local or remote data to the Syncfusion JavaScript Kanban board? -{% endpromptcard %} -{% promptcard Sorting %} -#sf_javascript_assistant Enable sorting of cards within columns in the Kanban control. -{% endpromptcard %} -{% promptcard Swimlane View %} -#sf_javascript_assistant Show me how to group Kanban cards using swimlane headers. -{% endpromptcard %} -{% promptcard Kanban Card Editing %} -#sf_javascript_assistant How can I enable inline editing of Kanban cards? -{% endpromptcard %} -{% promptcard Virtualization %} -#sf_javascript_assistant Configure virtualization for performance with large Kanban datasets. -{% endpromptcard %} -{% promptcard Localization %} -#sf_javascript_assistant How do I localize labels and messages in the Kanban control? -{% endpromptcard %} -{% promptcard Drag and Drop %} -#sf_javascript_assistant Enable drag-and-drop functionality for moving cards between columns. -{% endpromptcard %} -{% promptcard Sorting and Swimlane %} -#sf_javascript_assistant Create a Kanban board with swimlane grouping and sortable cards. -{% endpromptcard %} -{% promptcard Editable Cards and Localization %} -#sf_javascript_assistant Show me how to edit cards and apply localization in the Kanban control. -{% endpromptcard %} -{% promptcard Troubleshooting Kanban Drag and Drop %} -#sf_javascript_assistant Why isn't drag-and-drop working correctly in my Kanban board? -{% endpromptcard %} -{% promptcard Remote Data and Virtualization %} -#sf_javascript_assistant Bind remote data to the Kanban control and enable virtualization for performance. -{% endpromptcard %} -{% promptcard Advanced Kanban Setup %} -#sf_javascript_assistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. -{% endpromptcard %} -{% endpromptcards %} - -### RichTextEditor - -The Syncfusion JavaScript RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. - -{% promptcards %} -{% promptcard Toolbar Configuration %} -#sf_javascript_assistant How do I customize the toolbar options in the Syncfusion RichTextEditor? -{% endpromptcard %} -{% promptcard Link Manipulation %} -#sf_javascript_assistant Show me how to add, edit, and remove hyperlinks in the RichTextEditor content. -{% endpromptcard %} -{% promptcard Iframe Mode %} -#sf_javascript_assistant How can I render the RichTextEditor inside an iframe for isolated styling? -{% endpromptcard %} -{% promptcard Module Injection %} -#sf_javascript_assistant Inject feature modules like toolbar, link, and image into the RichTextEditor. -{% endpromptcard %} -{% promptcard Undo and Redo %} -#sf_javascript_assistant Enable undo and redo functionality in the RichTextEditor toolbar. -{% endpromptcard %} -{% promptcard Forms Integration %} -#sf_javascript_assistant How do I integrate a JavaScript form and validate input? -{% endpromptcard %} -{% promptcard Content Import and Export %} -#sf_javascript_assistant Export RichTextEditor content to HTML or import existing HTML content. -{% endpromptcard %} -{% promptcard Advanced Toolbar %} -#sf_javascript_assistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. -{% endpromptcard %} -{% promptcard Iframe and Forms Support %} -#sf_javascript_assistant Use the RichTextEditor in iframe mode and bind it to a form for submission. -{% endpromptcard %} -{% promptcard Undo/Redo and Export %} -#sf_javascript_assistant Enable undo/redo and export content to HTML in the RichTextEditor. -{% endpromptcard %} -{% promptcard Module Injection and Link Editing %} -#sf_javascript_assistant Inject toolbar and link modules to enable rich link editing in the editor. -{% endpromptcard %} -{% endpromptcards %} - -### Calendar - -The Syncfusion JavaScript Calendar supports flexible date selection, localization, and custom rendering. - -{% promptcards %} -{% promptcard Date Range Selection %} -#sf_javascript_assistant How do I enable date range selection in the Syncfusion JavaScript Calendar? -{% endpromptcard %} -{% promptcard Globalization Support %} -#sf_javascript_assistant Configure the Calendar to support multiple cultures and languages. -{% endpromptcard %} -{% promptcard Multi-Date Selection %} -#sf_javascript_assistant Show me how to allow users to select multiple dates in the Calendar. -{% endpromptcard %} -{% promptcard Islamic Calendar Support %} -#sf_javascript_assistant How can I switch the Calendar to use the Islamic calendar system? -{% endpromptcard %} -{% promptcard Skip Months Feature %} -#sf_javascript_assistant Enable skipping months in the Calendar navigation for faster browsing. -{% endpromptcard %} -{% promptcard Calendar Showing Other Month Days %} -#sf_javascript_assistant How do I show days from adjacent months in the current Calendar view? -{% endpromptcard %} -{% promptcard Custom Day Cell Format %} -#sf_javascript_assistant Customize the day cell format in the Calendar to show short weekday names. -{% endpromptcard %} -{% promptcard Calendar Highlighting Weekends %} -#sf_javascript_assistant Highlight weekends in the Calendar with a different background color. -{% endpromptcard %} -{% promptcard Globalization and Islamic Calendar %} -#sf_javascript_assistant Configure the Calendar for Arabic culture using the Islamic calendar and localization. -{% endpromptcard %} -{% promptcard Multi-Selection and Range %} -#sf_javascript_assistant Enable both multi-date selection and range selection in the Calendar. -{% endpromptcard %} -{% promptcard Troubleshooting Calendar Date Range %} -#sf_javascript_assistant Why isn't my Calendar selecting the correct date range? -{% endpromptcard %} -{% promptcard Advanced Calendar Setup %} -#sf_javascript_assistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. -{% endpromptcard %} -{% endpromptcards %} - -## See also - -* [AI Coding Assistant - Getting Started](./getting-started) -* [Agentic UI Builder - Getting Started](../agentic-ui-builder/getting-started) \ No newline at end of file diff --git a/ej2-javascript/js/mcp-server/overview.md b/ej2-javascript/js/mcp-server/overview.md deleted file mode 100644 index d06d2d64c..000000000 --- a/ej2-javascript/js/mcp-server/overview.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -layout: post -title: MCP Server for JavaScript Development | Syncfusion -description: Accelerate JavaScript development with Syncfusion MCP Server - instant access to control APIs, UI blocks, themes, and 600+ icons via MCP in your IDE. -control: Syncfusion MCP Server Overview -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Syncfusion MCP Server Overview - -Syncfusion® MCP Server accelerate JavaScript application development by providing deep knowledge directly in your AI-powered IDE. Through Model Context Protocol (MCP) integration, you get instant access to control APIs, pre-built UI blocks, styling configurations, icon libraries, and code generation - all without leaving your development environment. - -Use these tools to speed up development and follow best practices when building dashboards, interfaces, or integrating controls. - -## Key Benefits - -* **Expert Control Knowledge** - Deep understanding of 145+ JavaScript controls and their implementation patterns. -* **Design System Integration** - Guidance for Tailwind3 CSS, Bootstrap 5.3, Material 3, and Fluent 2 design systems with utility-based styling. -* **Comprehensive Icon Library** - 600+ icons with control integration and accessibility guidance. -* **Unlimited Usage** - No request limits, time restrictions, or query caps. -* **Privacy-Focused** - Your data remains secure. The tools do not access files, store data, or use your prompts for training purposes. - -## How it works - -Syncfusion MCP Server are delivered as an npm-based Model Context Protocol (MCP) server that integrates seamlessly with AI-powered development environments. The server provides two specialized modes tailored to different development workflows: - -**Agentic UI Builder** (`#sf_javascript_ui_builder`) -Build complete UIs with coordinated tools for controls, styling, and icons. Perfect for creating pages, dashboards, and complex sections from scratch. - -**AI Coding Assistant** (`#sf_javascript_assistant`) -Implement individual controls with focused API guidance. Ideal for adding controls to existing projects and troubleshooting integration issues. - -## Getting Started - -1. **Install** the [Syncfusion JavaScript MCP server](https://www.npmjs.com/package/@syncfusion/javascript-assistant) package in your AI-powered IDE. -2. **Choose your mode** - `#sf_javascript_ui_builder` for complete UIs or `#sf_javascript_assistant` for control-specific tasks. -3. **Describe** what you want to build - the AI generates production-ready code that follows best practices. - -For detailed setup instructions, see the [Installation Guide](./installation). - -## Available Tools - -Syncfusion MCP Server includes four specialized tools that work together to streamline your development workflow: - -* **UI Builder Orchestrator** - Analyzes requirements and coordinates multiple tools to build complete UIs -* **Control Tool** - Delivers API and implementation guidance for Syncfusion JavaScript controls -* **Styling Tool** - Generates theme configurations for Tailwind CSS, Bootstrap, Material, and Fluent with light/dark mode support, and also provides a comprehensive icon library with control‑level integration patterns and accessibility guidance. -* **Coding Assistant Tool** - Provides contextual control documentation, code snippets, and configuration examples for individual Syncfusion JavaScript controls - -## Unlimited Access - -Syncfusion provides unlimited access to the MCP server with no restrictions on: - -* Number of requests -* Tool usage -* Query caps -* Usage duration - -This unlimited access empowers you to experiment freely, iterate rapidly, and fully leverage the tool's capabilities throughout your development process. - -## Best Practices - -For optimal results, use high-performance AI models like **Claude Sonnet 4.5** (recommended), GPT-5, or Gemini 3 Pro. These models understand complex control relationships better and generate more accurate JavaScript code. - -> Always review AI-generated code before using it in production. - -## Privacy & Security - -The Syncfusion MCP Server are designed with privacy considerations: - -* The tools do not access project files or workspace contents directly. -* User prompts are not stored or used for other purposes. -* Prompts are not used to train Syncfusion models. -* The assistant provides context; the final output is produced by the selected AI model. - -The MCP Server acts purely as a knowledge bridge, connecting your AI model with Syncfusion-specific expertise while respecting your privacy and maintaining security. - -## See also - -* [Installation](./installation) -* [Agentic UI Builder - Getting Started](./agentic-ui-builder/getting-started) -* [AI Coding Assistant - Getting Started](./ai-coding-assistant/getting-started) -* [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) \ No newline at end of file diff --git a/ej2-javascript/js/mcp.md b/ej2-javascript/js/mcp.md new file mode 100644 index 000000000..af1433ea6 --- /dev/null +++ b/ej2-javascript/js/mcp.md @@ -0,0 +1,264 @@ +--- +layout: post +title: Syncfusion JavaScript MCP Server | AI Coding Assistant +description: Accelerate JavaScript development with Syncfusion MCP Server—access docs, APIs, code snippets, and release history in your AI IDE. +control: Syncfusion JavaScript MCP Server +platform: ej2-javascript +documentation: ug +domainurl: ##DomainURL## +--- + +# Syncfusion JavaScript MCP Server + +Syncfusion® MCP Server accelerate JavaScript application development by providing deep knowledge directly in your AI-powered IDE. [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) (MCP) integration enables quick access to documentation, API references, and code-generation features from within the development environment. + +These tools speed up development and reinforce best practices for Syncfusion component integration. + +## Key Benefits + +- **Expert Component Knowledge** - Deep understanding of 145+ JavaScript components and their implementation patterns. +- **Release Insights** - Access the Syncfusion JavaScript release history and produce clear change logs between any two versions. +- **Unlimited Usage** - No request limits, time restrictions, or query caps. +- **Privacy-Focused** - The tools operate based on the user's query and do not store any content, data, or prompts. + +## Installation + +### Prerequisites + +Before beginning, ensure the following prerequisites are met: + +- **Node.js** version 18 or higher +- A **compatible MCP client** (VS Code, Syncfusion® Code Studio, Cursor, JetBrains, etc.) +- An active [Syncfusion® API key](https://syncfusion.com/account/api-key) +- A **JavaScript application** (existing or new); see [Quick Start](https://ej2.syncfusion.com/javascript/documentation/introduction) +- An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) + +### Getting Your API Key + +Generate the Syncfusion® API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file. The saved file will be referenced in the MCP configuration: + +````json +"env": { + "Syncfusion_API_Key_Path": "D:\\syncfusion-key.txt" +} +```` + +> Alternatively, the API key can also be set directly using `"Syncfusion_API_Key": "YOUR_API_KEY"` in the env configuration. Using a file path is recommended to keep the key out of source control. + +### Setting Up in MCP Clients + +Create a configuration file in your project folder to install the server for your workspace. **Replace `YOUR_API_KEY_FILE_PATH` with the path to your API key file.** + +{% tabs %} +{% highlight bash tabtitle="VS Code" %} + +// Create a `.vscode/mcp.json` file in your workspace: + +{ + "servers": { + "sf-javascript-mcp": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@syncfusion/javascript-mcp@latest"], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" + // or + // "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} + +{% endhighlight %} +{% highlight bash tabtitle="Code Studio" %} + +// Create a `.codestudio/mcp.json` file in your workspace: + +{ + "servers": { + "sf-javascript-mcp": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@syncfusion/javascript-mcp@latest"], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" + // or + // "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} + +// After creating the file, click Start in the inline action to install the server. + +{% endhighlight %} +{% highlight bash tabtitle="Cursor" %} + +// Create a `.cursor/mcp.json` file in your workspace: + +{ + "mcpServers": { + "sf-javascript-mcp": { + "command": "npx", + "args": ["-y", "@syncfusion/javascript-mcp@latest"], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" + // or + // "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} + +{% endhighlight %} +{% highlight bash tabtitle="JetBrains" %} + +// Open AI Assistant chat, type /, and select Add Command. +// Click ➕ Add on the MCP settings page. +// Choose STDIO and select JSON configuration: + +{ + "mcpServers": { + "sf-javascript-mcp": { + "command": "npx.cmd", + "args": [ + "-y", + "@syncfusion/javascript-mcp@latest" + ], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" + // or + // "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} + +// Click OK, then click Apply. The server starts and shows Connected status. + +{% endhighlight %} +{% endtabs %} + +**Verifying Installation** Check your editor's MCP Server list for `sf-javascript-mcp` with a **Connected** status to confirm a successful installation. + +## Available Tools + +The Syncfusion® MCP servers exposes a set of specialized tools for retrieving different types of product knowledge and resources. Tools can be called directly for specific information, or an assistant can choose the most relevant tool automatically. + +| # | Tool | Description | +|---|------|-------------| +| 1 | `search_docs` | Search Syncfusion JavaScript documentation for features, examples, and configuration help. | +| 2 | `get_changelog ` | Get upgrade steps and breaking changes for moving between Syncfusion JavaScript versions. | +| 3 | `list_versions` | List all Syncfusion JavaScript release versions available. | + +## Common use cases + +The examples below showcase how the different MCP tools handle real-world JavaScript development scenarios. Tools can be invoked directly, as shown in the examples below, for specific needs. Alternatively, an AI assistant can automatically select the most appropriate tool based on the request. + +**Get Started** + +Use `search_docs` to get contextual guidance, code snippets, and configuration examples for any component. + +{% promptcards %} +{% promptcard Grid with Paging & Sorting %} +#search_docs Create a Syncfusion JavaScript Grid with paging, sorting, and filtering enabled. +{% endpromptcard %} +{% endpromptcards %} + +{% promptcards %} +{% promptcard RichTextEditor Setup %} +#search_docs How do I set up the Syncfusion JavaScript RichTextEditor with a custom toolbar and form integration? +{% endpromptcard %} +{% endpromptcards %} + +**Implement Features** + +Get step-by-step help for adding specific features to components that are already in the project. + +{% promptcards %} +{% promptcard Grid Export %} +#search_docs How can I add PDF and Excel export options to my existing Grid's toolbar? +{% endpromptcard %} +{% endpromptcards %} + +{% promptcards %} +{% promptcard Kanban Features %} +#search_docs How do I enable drag-and-drop and swimlane grouping in the Kanban component? +{% endpromptcard %} +{% endpromptcards %} + +**Troubleshooting** + +Describe the problem in plain language, and let `search_docs` help resolve it. +{% promptcards %} +{% promptcard Grid Issues %} +#search_docs Why isn't my Grid loading or rendering data correctly? +{% endpromptcard %} +{% endpromptcards %} + +{% promptcards %} +{% promptcard Schedule Issues %} +#search_docs Why aren't my Schedule events displaying or saving correctly? +{% endpromptcard %} +{% endpromptcards %} + +**Version History** + +Use `list_versions` and `get_changelog` to explore available releases and review what changed. +{% promptcards %} +{% promptcard List Versions %} +#list_versions Which Syncfusion JavaScript release versions are available? +{% endpromptcard %} +{% endpromptcards %} + +{% promptcards %} +{% promptcard Migration Guide %} +#get_changelog Show me the new features and breaking changes in the latest Syncfusion JavaScript release. +{% endpromptcard %} +{% endpromptcards %} + +## Best Practices + +To get the most out of the Syncfusion® JavaScript MCP Servers: + +- **Be Specific** - Include the platform and component in your queries (for example, *"Create a Syncfusion JavaScript Grid with paging and filtering"*). +- **Provide Context** - Include applicable versions, expected outcomes, and any requirements or limitations that may affect the request. +- **Use Descriptive Queries** - Avoid overly brief or ambiguous requests. Providing sufficient detail helps improve the accuracy and relevance of the response. +- **Stay Consistent** - Keep file organization, naming conventions, and coding standards consistent throughout your JavaScript project. +- **Start Fresh for New Topics** - Begin a new chat when switching to a different component or task to maintain clean context. +- **Use Advanced AI Models** - For best results, use **Claude Sonnet 4.5 or higher**. Other compatible models include **GPT-5 and Gemini 3 Pro**. Higher-capability models produce more accurate component implementations. +- **For Troubleshooting** - Use AI suggestions for common issues; consult the [official documentation](https://ej2.syncfusion.com/javascript/documentation) or [support](https://support.syncfusion.com/support/tickets/create) for complex problems. +- **Minimize Active Tools** - Limit the number of active MCP tools in your IDE to prevent tool-selection ambiguity and improve response accuracy. + +> Always review AI-generated code before using it in production. + +## Troubleshooting + +The table below lists frequently encountered issues and suggested resolutions to help diagnose and address common setup or usage challenges. + +| Issue | Solution | +|-------|----------| +| **Clear npm cache** | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues. | +| **Server failed to start** | Update to Node.js 18+, verify JSON syntax in the config file, and restart your IDE. | +| **Invalid API key** | Verify your key is active at the [Syncfusion Account Page](https://syncfusion.com/account/api-key). | +| **Incorrect API key config** | For the file path: verify file location and content. For inline key: check the key is correctly updated. | +| **Wrong config file location** | VS Code: `.vscode/mcp.json` • Code Studio: `.codestudio/mcp.json` • Cursor: `.cursor/mcp.json` in the workspace root. | +| **Check IDE logs** | VS Code / Code Studio: Output panel → "MCP" • Cursor: Developer Console for MCP errors. | + +## Privacy & Security + +The Syncfusion® MCP Servers are designed with privacy considerations: + +* The tools process requests according to the user's query without storing any content or prompts. +* User prompts are not stored or used for other purposes. +* Prompts are not used to train Syncfusion models. +* The assistant provides context; the final output is produced by the selected AI model. + +The MCP Server acts purely as a knowledge bridge, connecting your AI model with Syncfusion-specific expertise while respecting your privacy and maintaining security. + +## See Also + +- [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) \ No newline at end of file diff --git a/ej2-javascript/stock-chart/ts/getting-started.md b/ej2-javascript/stock-chart/ts/getting-started.md index a40515797..1fa83271f 100644 --- a/ej2-javascript/stock-chart/ts/getting-started.md +++ b/ej2-javascript/stock-chart/ts/getting-started.md @@ -99,7 +99,31 @@ npm install This command will download and install all necessary dependencies for your project. -### Step 6: Update the HTML Template +### Step 6: Import Syncfusion® CSS styles + +Syncfusion® JavaScript Stock Chart controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-fluent2-theme --save + +{% endhighlight %} +{% endtabs %} + +Then add the following CSS reference to the **src/styles/styles.css** file: + +{% tabs %} +{% highlight css tabtitle="style.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/stock-chart/index.css"; + +{% endhighlight %} +{% endtabs %} + +### Step 7: Update the HTML Template Open the `ej2-quickstart` folder in Visual Studio Code or any text editor of your choice. @@ -135,7 +159,7 @@ Locate the `~/src/index.html` file in the project. Add the HTML div tag with its {% endhighlight %} {% endtabs %} -### Step 7: Create the Stock Chart Component with Data +### Step 8: Create the Stock Chart Component with Data Locate the `src/app/app.ts` file in your project and add the Stock Chart component with module injection and sample data. @@ -177,7 +201,7 @@ stockchart.appendTo("#element"); {% endhighlight %} {% endtabs %} -### Step 8: Run the Application +### Step 9: Run the Application Open the integrated terminal in Visual Studio Code or use your command prompt to run the application. Use the `npm run start` command: @@ -191,7 +215,7 @@ npm run start The application will compile and automatically start in your default web browser. The application typically runs at `http://localhost:4000`. You should see the Syncfusion® Stock Chart control displayed on the page. -### Step 9: View Your Chart +### Step 10: View Your Stock Chart Wait for the webpack dev server to complete the build process. Once completed, you will see the Stock Chart control rendering in your browser with candlestick data visualization. The chart is now successfully initialized and ready for further customization. diff --git a/ej2-javascript/ts/agentic-ui-builder.md b/ej2-javascript/ts/agentic-ui-builder.md index 1ad9a9612..919eac2ff 100644 --- a/ej2-javascript/ts/agentic-ui-builder.md +++ b/ej2-javascript/ts/agentic-ui-builder.md @@ -1,23 +1,23 @@ --- layout: post -title: Getting Started with JavaScript UI Composer Skill | Syncfusion® -description: Install Syncfusion® JavaScript UI Composer to generate production-ready JavaScript controls from natural-language prompts. +title: Syncfusion JavaScript UI Builder Skill for AI Assistants | Syncfusion® +description: Install Syncfusion® JavaScript UI Builder to generate production-ready JavaScript controls from natural-language prompts. control: Skills platform: ej2-javascript documentation: ug domainurl: ##DomainURL## --- -# Syncfusion® JavaScript UI Composer Skill for AI Assistants +# Syncfusion® JavaScript UI Builder Skill for AI Assistants -**Syncfusion® JavaScript UI Composer** is an AI-powered skill and companion agent that accelerates JavaScript application development by transforming natural-language UI requirements into production-ready code using Syncfusion® JavaScript UI libraries. +**Syncfusion® JavaScript UI Builder** is an AI-powered agent skill that accelerates JavaScript application development by transforming natural-language UI requirements into production-ready code using Syncfusion® JavaScript UI controls. Integrated with your AI-powered IDE, it leverages deep knowledge of **Syncfusion® controls** to deliver accurate and ready-to-use code. -By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, JavaScript UI Composer helps you rapidly build scalable dashboards and user interfaces without leaving your development workflow. +By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, JavaScript UI Builder helps you rapidly build scalable dashboards and user interfaces without leaving your development workflow. ## Prerequisites -Before installing JavaScript UI Composer, ensure the following: +Before installing JavaScript UI Builder, ensure the following: - Install [APM (Agent Package Manager)](https://microsoft.github.io/apm/getting-started/installation/#quick-install-recommended) - Required [Node.js](https://nodejs.org/en) version ≥ 18 @@ -30,33 +30,33 @@ Before installing JavaScript UI Composer, ensure the following: ## Key Benefits -### **AI-Driven UI Generation** -- Converts prompts into complete JavaScript controls—not just snippets +**AI-Driven UI Generation** +- Transforms prompts into fully developed JavaScript controls rather than just partial code snippets. - Automatically selects appropriate Syncfusion® controls and features - Produces structured, maintainable code -### **Component Usage & API Accuracy** +**Component Usage & API Accuracy** - Uses correct Syncfusion® component APIs - Injects required feature modules (paging, sorting, filtering, etc.) - Avoids unsupported or deprecated patterns -### **Patterns & Best Practices** +**Patterns & Best Practices** - Recommended component composition and state management - Event handling aligned with JavaScript standards - Secure and scalable coding patterns -### **Accessibility & Responsiveness** +**Accessibility & Responsiveness** - WCAG 2.1 AA–aligned output - Semantic HTML with ARIA support - Mobile-first responsive layouts -### **Design-System Integration** +**Design-System Integration** - Supports Tailwind, Bootstrap, Material, or custom themes - Ensures consistent Syncfusion® styling and theme usage ## Installation -Before installing JavaScript UI Composer, ensure that APM (Agent Package Manager) is installed and available in your environment. +Before installing JavaScript UI Builder, ensure that APM (Agent Package Manager) is installed and available in your environment. ### Verify APM Installation @@ -66,29 +66,29 @@ Run the following command to confirm APM is installed: apm --version ``` -### Install the Syncfusion® JavaScript UI Composer package using APM +### Install the Syncfusion® JavaScript UI Builder package using APM -Use the APM CLI to install the JavaScript UI Composer skill for your preferred environment: +Use the APM CLI to install the JavaScript UI Builder skill for your preferred environment: {% tabs %} {% highlight bash tabtitle="Copilot" %} -apm install syncfusion/javascript-ui-composer -t copilot +apm install syncfusion/javascript-ui-builder -t copilot {% endhighlight %} {% highlight bash tabtitle="Cursor" %} -apm install syncfusion/javascript-ui-composer -t cursor +apm install syncfusion/javascript-ui-builder -t cursor {% endhighlight %} {% highlight bash tabtitle="Codex" %} -apm install syncfusion/javascript-ui-composer -t codex +apm install syncfusion/javascript-ui-builder -t codex {% endhighlight %} {% highlight bash tabtitle="Claude" %} -apm install syncfusion/javascript-ui-composer -t claude +apm install syncfusion/javascript-ui-builder -t claude {% endhighlight %} {% endtabs %} @@ -100,23 +100,23 @@ After installation, the following artifacts are added to your project for the Gi Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets. -> For Syncfusion® Code Studio, use the Copilot command above to install the JavaScript UI Composer. +> For Syncfusion® Code Studio, use the Copilot command above to install the JavaScript UI Builder. -## How the Syncfusion® JavaScript UI Composer Skill Works +## How the Syncfusion® JavaScript UI Builder Skill Works -1. **Intent Analysis** — Parse the user's prompt to identify component types and high-level layout intent. -2. **Project Detection** — Automatically detects project framework, package manager, and existing themes. -3. **Component Mapping** — Map intent to Syncfusion® controls and required feature modules. +1. **Intent Analysis:** Parse the user's prompt to identify component types and high-level layout intent. +2. **Project Detection:** Automatically detects project framework, package manager, and existing themes. +3. **Component Mapping:** Map intent to Syncfusion® controls and required icons. 4. **Theming & Design System** Load required theming guidelines and confirm key design choices: - - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option—proceed with this or change the theme as preferred. + - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option, which can be used as is or changed based on preference. - Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2) - Light and Dark Mode - Core design basics (colors, spacing, typography, responsiveness, accessibility) -5. **Code Generation** — Produce JavaScript controls with HTML templates and CSS styling. -6. **Dependency Management** — Recommend or install required Syncfusion® packages and peer dependencies. -7. **Validation** — Run accessibility and basic security checks, request confirmation for changes. -8. **Code Insertion** — Create files or patch existing files following project structure and conventions. +5. **Code Generation:** Produce JavaScript controls with HTML templates and CSS styling. +6. **Dependency Management:** Recommend or install required Syncfusion® packages and peer dependencies. +7. **Validation:** Run accessibility and basic security checks, request confirmation for changes. +8. **Code Insertion:** Create files or patch existing files following project structure and conventions. Key enforcement points: @@ -129,28 +129,30 @@ Key enforcement points: ## Using the AI Assistant -After installing JavaScript UI Composer with APM, the relevant agent and skill files are added to your project under: +After installing JavaScript UI Builder with APM, the relevant agent and skill files are added to your project under: - `.agent/skills/` (skill files) -- `.github/agents/` (JavaScript UI composer agent configuration, based on the selected target) +- `.github/agents/` (JavaScript UI builder agent configuration, based on the selected target) To start using the skill: 1. Open your supported IDE. -2. In the chat panel, select the `syncfusion-javascript-ui-composer` agent from the **Agent dropdown**. +2. In the chat panel, select the `syncfusion-javascript-ui-builder` agent from the **Agent dropdown**. ![Set Agent](ai-tools/images/UI-Builder-Agent.png) 3. Start prompting the agent with a clear description of your UI requirements. -Examples Prompts: +> For Syncfusion® Code Studio, If the ui builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) for configure the agent location properly. + +**Examples Prompts:** {% promptcards %} {% promptcard Authentication %} Create a login page with the Tailwind 3 theme using a centered card layout containing email and password input fields with validation. Include a "Remember Me" checkbox, a forgot password link, and a primary login button. Add a secondary "Create Account" button below. Ensure the layout is responsive and works on mobile, tablet, and desktop. {% endpromptcard %} {% promptcard Admin Dashboard %} -Create a CMS Admin Dashboard UI featuring a collapsible sidebar with navigation items for Dashboard, Content, Users, Analytics, and Settings; a top header (AppBar) showing the title "CMS Admin Dashboard" on the left and a user name with profile icon on the right; and a main content area that includes three compact summary cards in a single row displaying Total Content, Total Users, and Active Sessions (each card showing a label, relevant icon, prominent count value, and percentage change from last month), followed by a "Content Management" section with a filterable and data grid containing columns for Title, Author, Status, Date, and Actions (with edit and delete buttons), and finally two charts displayed side by side—a bar chart titled "Content Over Time" and a donut chart titled "Content by Category"—using realistic sample data for both the grid (10–12 rows) and the charts. +Design a full-viewport premium admin dashboard that feels fluid, spacious, and visually rich—avoid boxed or narrow layouts. Use a soft neutral background (#F8FAFC) with layered white surfaces, subtle shadows, soft borders, and light gradients to create depth. Include a floating glass-style header (logo, search, notifications, avatar dropdown) and a stylish collapsible sidebar with tinted background, smooth animations, and highlighted active states. Structure the main area with an asymmetrical, responsive grid layout using generous spacing (24–32px), featuring larger, visually dominant cards (with icons, gradients, trend indicators, and hover lift), charts (line/bar/pie in cards), and an enhanced data grid (sticky header, sorting, filtering, badges, hover states, pagination). Apply a modern design system (Inter font, 4/8px spacing, muted grays, indigo/blue accents, semantic colors) with smooth 150–250ms transitions, micro-interactions, tooltips, and high accessibility (WCAG AA, ≥44px targets). {% endpromptcard %} {% endpromptcards %} @@ -158,11 +160,11 @@ Generated code follows best practices with accessible, semantic HTML, responsive ## Best Practices -Follow these guidelines to get the most out of UI Composer and ensure high-quality production-ready result: +Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result: -- **Stay consistent** — Maintain consistent file organization, naming conventions, and coding standards throughout your project. -- **Use advanced AI models** — For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations. -- **Review all content and assets before production** — Replace any placeholder images or icons (e.g., from Unsplash or emoji sets) with your brand assets. Also validate the logic, security, and compatibility with your existing code before deployment. +- **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards throughout your project. +- **Use advanced AI models:** For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations. +- **Review all content and assets before production:** Replace any placeholder images or icons (e.g., from Unsplash or emoji sets) with your brand assets. Also validate the logic, security, and compatibility with your existing code before deployment. ## Troubleshooting diff --git a/ej2-javascript/ts/ai-tools/ai-powered-development.md b/ej2-javascript/ts/ai-tools/ai-powered-development.md index e9792e649..b70ba184c 100644 --- a/ej2-javascript/ts/ai-tools/ai-powered-development.md +++ b/ej2-javascript/ts/ai-tools/ai-powered-development.md @@ -3,7 +3,7 @@ layout: post title: AI-Powered Development with JavaScript Controls | Syncfusion description: Master AI-powered development with Syncfusion JavaScript controls using MCP Server and skills. Learn which approach fits the workflow and get better results. platform: ej2-javascript -control: AI AssistView +control: AI Assist documentation: ug domainurl: ##DomainURL## --- diff --git a/ej2-javascript/ts/ai-tools/images/UI-Builder-Agent.png b/ej2-javascript/ts/ai-tools/images/UI-Builder-Agent.png index 0a24b4680a4f3330ebaf3b6103c061a4ff8ddd66..f15084769d373ee24646cdd227384a53a4c282d2 100644 GIT binary patch literal 21341 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 M07*qoM6N<$g63BuwEzGB diff --git a/ej2-javascript/ts/mcp-server/agentic-ui-builder/getting-started.md b/ej2-javascript/ts/mcp-server/agentic-ui-builder/getting-started.md deleted file mode 100644 index f6de2d65d..000000000 --- a/ej2-javascript/ts/mcp-server/agentic-ui-builder/getting-started.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -layout: post -title: Getting Started with TypeScript Agentic UI Builder | Syncfusion -description: Set up and use the Syncfusion TypeScript UI Builder MCP Server for AI-powered assistance in building TypeScript applications. -control: Getting started with Syncfusion TypeScript UI Builder MCP Server -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Getting Started with TypeScript Agentic UI Builder - -The **Syncfusion® TypeScript UI Builder** uses AI to help you build TypeScript applications with natural language commands. Simply describe what you want to create, and it generates complete UI implementations with Syncfusion controls. - -## Prerequisites - -Before you begin, ensure you have: - -* Required [Node.js](https://nodejs.org/en/) version >= 18 -* A **compatible MCP client** (VS Code, Syncfusion® Code Studio, Cursor, etc.) -* Active [Syncfusion® API key](https://syncfusion.com/account/api-key) -* TypeScript application (existing or new); see [Quick Start](https://ej2.syncfusion.com/documentation/getting-started/quick-start) -* Active Syncfusion® license(any of the following): - - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - - [Free Community License](https://www.syncfusion.com/products/communitylicense) - - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) - -## Installation - -This section guides you through installing and configuring the Syncfusion MCP Server in your development environment. - -### Getting your API Key - -Before proceeding with the MCP installation, generate your Syncfusion API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file: - -```json -"env": { - "Syncfusion_API_Key_Path": "D:\\syncfusion-key.txt" -} -``` - -> Users can also set the API key directly using `"Syncfusion_API_Key": "YOUR_API_KEY"` in the env configuration. - -### Setting up in MCP Clients - -Create a configuration file in your project folder to install the server for your workspace as shown below: - -**Important:** Replace `YOUR_API_KEY_FILE_PATH` with the path to your API key file. - -{% tabs %} -{% highlight bash tabtitle="VS Code" %} - -// Create a `.vscode/mcp.json` file in your workspace with the MCP server configuration: - -{ - "servers": { - "sf-typescript-mcp": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@syncfusion/typescript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -{% endhighlight %} -{% highlight bash tabtitle="Cursor" %} - -// Create a `.cursor/mcp.json` file in your workspace with the MCP server configuration: - -{ - "mcpServers": { - "sf-typescript-mcp": { - "command": "npx", - "args": ["-y", "@syncfusion/typescript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -{% endhighlight %} -{% highlight bash tabtitle="Code Studio" %} - -// Create a `.codestudio/mcp.json` file in your workspace with the MCP server configuration: - -{ - "servers": { - "sf-typescript-mcp": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@syncfusion/typescript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -// After creating the file, click Start in the inline action to install the server. - -{% endhighlight %} -{% highlight bash tabtitle="JetBrains" %} - -// Open AI Assistant chat, type /, and select Add Command -// Click ➕ Add on the MCP settings page -// Choose STDIO and select JSON configuration - -{ - "mcpServers": { - "sf-typescript-mcp": { - "command": "npx.cmd", - "args": [ - "-y", - "@syncfusion/typescript-assistant@latest" - ], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -// Click OK, then click Apply. The server starts and shows Connected status. - -{% endhighlight %} -{% endtabs %} - -**Verify Installation:** Check your editor's MCP Server list for `sf-typescript-mcp` with "Connected" status to confirm successful installation. - -## Usage - -Once installed, open your AI assistant in the IDE and describe what you want to build with the `#sf_typescript_ui_builder` command: - -``` -#sf_typescript_ui_builder Create a dashboard with a sales data grid and monthly trend chart. -``` - -The UI Builder generates complete implementations including controls and styling. - -> Note: Using the `#sf_typescript_ui_builder` tool ensures the Agentic UI Builder is invoked directly. Alternatively, you can use natural language without the tool—just make sure to include the "Syncfusion" keyword in your prompt so the AI model can automatically recognize and call the appropriate generator. - -## Individual Tools - -For targeted assistance, you can call individual tools directly using their specific tool names. This is useful when you need specialized help from a particular tool. - -### Control Tool (`#sf_typescript_control`) - -Provides quick reference guidelines for Syncfusion TypeScript controls, including properties, event handlers, methods, and usage examples. - -**When to use:** To get basic control API information and structure details for implementing specific controls correctly. - -**Example:** -``` -#sf_typescript_control How do I integrate a data table? -``` - -### Style Tool (`#sf_typescript_style`) - -Provides theme configuration, styling setup, and icon integration for Syncfusion TypeScript controls. Supports multiple themes (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), light/dark mode implementation, and icon patterns for consistent UI styling. - -**When to use:** To apply themes, customize colors, modify the visual design of controls, or integrate icons into your UI. - -**Example:** -``` -#sf_typescript_style How do I apply the Syncfusion Tailwind 3 dark theme and add a communication icon inside a button? -``` - -## Best Practices - -To maximize the effectiveness of the Agentic UI Builder and achieve optimal results: - -- **Minimize active tools:** Limit the number of active MCP tools in your IDE to prevent tool-selection ambiguity and improve response accuracy. -- **Start simple:** Begin with straightforward prompts and progressively add complexity as needed. -- **Be specific:** Provide clear, specific descriptions of your control behavior and design preferences. -- **Reference patterns:** Mention existing design systems, control libraries, or specific patterns you want to replicate. -- **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards throughout your TypeScript project. -- **Use advanced AI models:** For best results, use **Claude Sonnet 4.5 or higher** models. Other compatible models include **GPT-5 and Gemini 3 Pro**. Higher-capability models produce better code quality and more accurate control implementations. - -> Always review AI-generated code before using it in production. - -## Troubleshooting - -If you encounter issues during installation or while using the MCP server, refer to the solutions below: - -| Issue | Solution | -|-------|----------| -| **Clear npm cache** | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues | -| **Server failed to start** | Update to Node.js 18+, verify JSON syntax in config file, and restart your IDE | -| **Invalid API key** | Verify your key is active at [Syncfusion Account Page](https://syncfusion.com/account/api-key) | -| **Incorrect API key config** | For the file path: Verify file location and content. For inline key: Check key is properly updated | -| **Wrong config file location** | VS Code: `.vscode/mcp.json`
      CodeStudio: `.codestudio/mcp.json`
      Cursor: `.cursor/mcp.json` in the workspace root | -| **Check IDE logs** | VS Code/CodeStudio: Output panel → "MCP" • Cursor: Developer Console for MCP errors | - -## What's Next - -Now that you've set up the Agentic UI Builder, explore these resources: - -* **[Prompt Library](./prompt-library)** - Ready-to-use prompts for common scenarios -* **[Showcase Sample Projects](https://www.syncfusion.com/showcase-apps/javascript)** - Full application examples -* **[Control Examples](https://ej2.syncfusion.com/demos/#/tailwind3/grid/overview)** - Interactive demos of all Syncfusion TypeScript controls diff --git a/ej2-javascript/ts/mcp-server/agentic-ui-builder/prompt-library.md b/ej2-javascript/ts/mcp-server/agentic-ui-builder/prompt-library.md deleted file mode 100644 index f6e869c11..000000000 --- a/ej2-javascript/ts/mcp-server/agentic-ui-builder/prompt-library.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -layout: post -title: TypeScript Agentic UI Builder Prompt Library | Syncfusion -description: Explore the Agentic UI Builder Prompt Library to enhance TypeScript productivity with layout blocks, control guidance, styling, and icons. -control: Syncfusion Agentic UI Builder Prompt Library -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Prompt Library - TypeScript Agentic UI Builder - -Speed up TypeScript development with ready-made prompts for common scenarios. Use them to generate complete applications, controls, and custom styling. - -## How to Use - -Ensure that the Syncfusion MCP Server is configured and running before executing prompts. - -* Select a prompt that aligns with your development requirements. -* Copy the complete prompt, including the tool (e.g., #sf_vue_ui_builder). -* Customize the prompt for your specific use case. -* Execute the prompt through the MCP Server. -* Validate all generated code through thorough testing before production deployment. - -## General Project Prompts - -These flexible prompts address common application development scenarios using intuitive natural language descriptions. - -{% promptcards %} -{% promptcard Authentication %} -#sf_typescript_ui_builder Create a login page with the Tailwind 3 theme using a centered card layout containing email and password input fields with validation. Include a "Remember Me" checkbox, a forgot password link, and a primary login button. Add a secondary "Create Account" button below. Ensure the layout is responsive and works on mobile, tablet, and desktop. -{% endpromptcard %} -{% promptcard Book Library Dashboard %} -#sf_typescript_ui_builder Create a book library dashboard page with the Bootstrap 5.3 theme displaying a grid of book cards showing cover images, titles, authors, and reading progress bars. Add a search box and genre filter dropdown at the top. Include a sidebar showing reading statistics with charts for books completed this month, reading streaks, and favorite genres. Make the grid responsive (4 columns on desktop, 2 on tablet, 1 on mobile). -{% endpromptcard %} -{% promptcard Product Listing %} -#sf_typescript_ui_builder Create a product catalog page with the Fluent 2 theme featuring a left sidebar containing category filters and a price range slider. The main content area should display product cards in a responsive grid layout (4 columns on desktop, 2 on tablet, 1 on mobile). Add a search box and sort dropdown at the top of the main content area. Include pagination at the bottom. -{% endpromptcard %} -{% promptcard Course Details Page %} -#sf_typescript_ui_builder Create a course details page with the Material 3 theme, including a video player section at the top. Below the video, display the course overview; curriculum using a TreeView control with expandable chapters and lessons; student reviews with rating distribution; and frequently asked questions in separate card sections. Add a right sidebar with a course enrollment card showing price, an enroll button, instructor details with avatar and bio, and a course progress indicator. -{% endpromptcard %} -{% promptcard Task Management %} -#sf_typescript_ui_builder Build a task board page using a Kanban layout with columns for To Do, In Progress, and Completed. Add an "Add Task" button and a search field at the top. Each task card should show title, assignee avatar, due date, and priority badge. Make the columns scrollable, with drag-and-drop functionality. Include filter dropdowns for priority and assignee. -{% endpromptcard %} -{% promptcard Order Tracking %} -#sf_typescript_ui_builder Create an order tracking page with the Tailwind 3 theme featuring a search bar at the top to look up orders by ID. Display order details in a card layout showing customer info, order items in a grid, and order status using a stepper control. Add a timeline on the right showing shipping updates and delivery progress. -{% endpromptcard %} -{% endpromptcards %} - -## Tool-Specific Prompts - -This section provides targeted prompt examples for directly invoking individual specialized tools, offering more precise control over specific aspects of your application. - -### Control Tool - -The Control tool implements specific Syncfusion TypeScript controls with configured properties and event handlers. Use #sf_typescript_control for targeted control integration. - -{% promptcards %} -{% promptcard Advanced Data Grid Setup %} -#sf_typescript_control Create a Grid with paging (20 per page), sorting, and filtering. Columns: product image, name (link), category, price (currency), stock status (badge), actions (edit/delete). Enable row selection and Excel export. -{% endpromptcard %} -{% promptcard Event Calendar Integration %} -#sf_typescript_control Add a Scheduler with month/day/week/agenda views. Toolbar with date navigation, view switcher, and an "Add Event" button. Color-coded categories and drag-and-drop rescheduling. -{% endpromptcard %} -{% promptcard Multi-Step Form Wizard %} -#sf_typescript_control Build a step-by-step registration form with validation per step. Steps: TextBox (personal info), DropDownList (preferences), FileUpload (documents), summary. Add progress indicators and navigation with validation. -{% endpromptcard %} -{% promptcard Real-Time Chart Dashboard %} -#sf_typescript_control Create a Chart control with a line series for real-time data visualization. Configure multiple y-axes, a tooltip with custom formatting, a legend with toggling, and zoom/pan functionality. Update data every 5 seconds. -{% endpromptcard %} -{% endpromptcards %} - -### Styling Tool - -The Styling tool applies custom themes, color schemes, visual treatments, and iconography across your application. Use #sf_typescript_style for branding, aesthetic customization, and icon integration. - -{% promptcards %} -{% promptcard Tailwind3 Dark Mode Setup %} -#sf_typescript_style Apply the Syncfusion Tailwind 3 dark theme to the application. Configure CSS variables for the dark mode color scheme and enable theme toggle functionality. -{% endpromptcard %} -{% promptcard Bootstrap5.3 Theme Customization %} -#sf_typescript_style Customize the Syncfusion Bootstrap 5.3 theme using CSS variables. Modify primary colors, control spacing, and typography to match brand guidelines. -{% endpromptcard %} -{% promptcard Fluent2 Responsive Styling %} -#sf_typescript_style Apply the Syncfusion Fluent 2 theme with responsive adjustments. Customize control sizes, spacing, and layout breakpoints for mobile, tablet, and desktop views. -{% endpromptcard %} -{% promptcard Material3 CSS Variables %} -#sf_typescript_style Configure the Syncfusion Material 3 theme CSS variables for a custom color palette, elevation shadows, border radius, and control-specific styling properties. -{% endpromptcard %} -{% promptcard User Actions & Navigation %} -#sf_typescript_style Add appropriate icons for common user interactions in the application toolbar, including editing capabilities, navigation controls, and accessing various options. -{% endpromptcard %} -{% promptcard Content Editor Toolbar %} -#sf_typescript_style Implement icons for text formatting operations, table manipulation, and image editing tools in the Rich Text Editor. -{% endpromptcard %} -{% promptcard Document Management %} -#sf_typescript_style Find icons for file operations, document processing, printing capabilities, and export functionality in the File Manager toolbar. -{% endpromptcard %} -{% endpromptcards %} - -## See also - -* [Agentic UI Builder - Getting Started](./getting-started) -* [AI Coding Assistant - Getting Started](../ai-coding-assistant/getting-started) \ No newline at end of file diff --git a/ej2-javascript/ts/mcp-server/ai-coding-assistant/getting-started.md b/ej2-javascript/ts/mcp-server/ai-coding-assistant/getting-started.md deleted file mode 100644 index 7380f46c4..000000000 --- a/ej2-javascript/ts/mcp-server/ai-coding-assistant/getting-started.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -layout: post -title: Getting Started with the TypeScript AI Coding Assistant | Syncfusion -description: Learn how to configure and use AI Coding Assistant for intelligent code generation, documentation, and troubleshooting in TypeScript apps. -control: Getting Started with the AI Coding Assistant -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Getting Started with the TypeScript AI Coding Assistant - -The **Syncfusion® AI Coding Assistant** is designed to streamline the development workflow for TypeScript applications that use Syncfusion® controls. It leverages contextual knowledge of the Syncfusion control library to generate code snippets, configuration examples, and guided explanations—reducing documentation lookups and increasing productivity. - -## Prerequisites - -Before you begin, ensure you have: - -* Required [Node.js](https://nodejs.org/en/) version >= 18 -* A **compatible MCP client** (VS Code, Syncfusion® Code Studio, Cursor, etc.) -* Active [Syncfusion® API key](https://syncfusion.com/account/api-key) -* TypeScript application (existing or new); see [Quick Start](https://ej2.syncfusion.com/documentation/getting-started/quick-start) -* Active Syncfusion® license(any of the following): - - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - - [Free Community License](https://www.syncfusion.com/products/communitylicense) - - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) - -## Installation - -This section guides you through installing and configuring the Syncfusion MCP Server in your development environment. - -### Getting your API Key - -Before proceeding with the MCP installation, generate your Syncfusion API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file: - -```json -"env": { - "Syncfusion_API_Key_Path": "D:\\syncfusion-key.txt" -} -``` - -> Users can also set the API key directly using `"Syncfusion_API_Key": "YOUR_API_KEY"` in the env configuration. - -### Setting up in MCP Clients - -Create a configuration file in your project folder to install the server for your workspace as shown below: - -**Important:** Replace `YOUR_API_KEY_FILE_PATH` with the path to your API key file. - -{% tabs %} -{% highlight bash tabtitle="VS Code" %} - -// Create a `.vscode/mcp.json` file in your workspace with the MCP server configuration: - -{ - "servers": { - "sf-typescript-mcp": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@syncfusion/typescript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -{% endhighlight %} -{% highlight bash tabtitle="Cursor" %} - -// Create a `.cursor/mcp.json` file in your workspace with the MCP server configuration: - -{ - "mcpServers": { - "sf-typescript-mcp": { - "command": "npx", - "args": ["-y", "@syncfusion/typescript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -{% endhighlight %} -{% highlight bash tabtitle="Code Studio" %} - -// Create a `.codestudio/mcp.json` file in your workspace with the MCP server configuration: - -{ - "servers": { - "sf-typescript-mcp": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@syncfusion/typescript-assistant@latest"], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -// After creating the file, click Start in the inline action to install the server. - -{% endhighlight %} -{% highlight bash tabtitle="JetBrains" %} - -// Open AI Assistant chat, type /, and select Add Command -// Click ➕ Add on the MCP settings page -// Choose STDIO and select JSON configuration - -{ - "mcpServers": { - "sf-typescript-mcp": { - "command": "npx.cmd", - "args": [ - "-y", - "@syncfusion/typescript-assistant@latest" - ], - "env": { - "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" - // or - // "Syncfusion_API_Key": "YOUR_API_KEY" - } - } - } -} - -// Click OK, then click Apply. The server starts and shows Connected status. - -{% endhighlight %} -{% endtabs %} - -**Verify Installation:** Check your editor's MCP Server list for `sf-typescript-mcp` with "Connected" status to confirm successful installation. - -## Usage - -Activate the AI Coding Assistant in your IDE by using the `#sf_typescript_assistant` command followed by your query: - -``` -#sf_typescript_assistant How do I enable paging and sorting in the Syncfusion TypeScript Grid? -``` - -### Common Use Cases - -| Use Case | Description | Example Query | -|----------|-------------|---------------| -| **Control Generation** | Generate complete control implementations with configurations | `#sf_typescript_assistant Create a data grid with inline editing, paging, and toolbar options for CRUD operations` | -| **Feature Implementation** | Get specific feature implementations for existing controls | `#sf_typescript_assistant Add export to Excel functionality in my existing Grid control` | -| **Troubleshooting** | Resolve issues by describing the problem | `#sf_typescript_assistant Scheduler is not displaying events properly. What could be wrong with the data binding?` | -| **API Reference** | Quickly access API information | `#sf_typescript_assistant What are the available event arguments for the Grid's actionComplete event?` | - -### Best Practices - -1. **Be Specific**: Include platform and control (e.g., "Create a Syncfusion TypeScript Grid with paging and filtering"). -2. **Provide Context**: Share versions, desired behavior, and constraints. -3. **Use Descriptive Queries**: Avoid vague questions. -4. **Troubleshooting**: Use AI suggestions for common issues; consult official [documentation](https://ej2.syncfusion.com/documentation) or [support](https://support.syncfusion.com/support/tickets/create) for complex problems. -5. **Start Fresh**: Begin a new chat for new topics to maintain clean context. - -> Always review AI-generated code before using it in production. - -## Troubleshooting - -If you encounter issues during installation or while using the MCP server, refer to the solutions below: - -| Issue | Solution | -|-------|----------| -| **Clear npm cache** | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues | -| **Server failed to start** | Update to Node.js 18+, verify JSON syntax in config file, and restart your IDE | -| **Invalid API key** | Verify your key is active at [Syncfusion Account Page](https://syncfusion.com/account/api-key) | -| **Incorrect API key config** | For the file path: Verify file location and content. For inline key: Check key is properly updated | -| **Wrong config file location** | VS Code: `.vscode/mcp.json`
      CodeStudio: `.codestudio/mcp.json`
      Cursor: `.cursor/mcp.json` in the workspace root | -| **Check IDE logs** | VS Code/CodeStudio: Output panel → "MCP" • Cursor: Developer Console for MCP errors | - -## What's Next - -Now that you've set up the AI Coding Assistant, explore these resources: - -* **[Prompt Library](./prompt-library)** - Ready-to-use prompts for common scenarios -* **[Control Examples](https://ej2.syncfusion.com/demos/#/tailwind3/grid/overview)** - Interactive demos of all Syncfusion TypeScript controls -* **[API Documentation](https://ej2.syncfusion.com/documentation/api)** - Complete API reference diff --git a/ej2-javascript/ts/mcp-server/ai-coding-assistant/prompt-library.md b/ej2-javascript/ts/mcp-server/ai-coding-assistant/prompt-library.md deleted file mode 100644 index 26265f97e..000000000 --- a/ej2-javascript/ts/mcp-server/ai-coding-assistant/prompt-library.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -layout: post -title: Syncfusion TypeScript AI Coding Assistant Prompt Library | Syncfusion -description: Explore ready-made prompts for Syncfusion TypeScript controls to boost productivity with code generation, configuration, and troubleshooting. -control: Syncfusion AI Coding Assistant Prompt Library -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Prompt Library - TypeScript AI Coding Assistant - -Speed up TypeScript development using these ready-made prompts for popular Syncfusion controls. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. - -## How to use - -Before starting, make sure your MCP server is set up and running. - -* Choose a prompt that fits your needs. -* Copy the full prompt, including the `#sf_typescript_assistant` tool. -* Customize the prompt for your specific use case. -* Execute the prompt via the MCP Server. -* Always review and test the generated code before adding it to your project. - -## Control-specific Prompts - -### Grid - -The Syncfusion TypeScript Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. - -{% promptcards %} -{% promptcard Paging and Sorting %} -#sf_typescript_assistant How do I enable paging and sorting in the Syncfusion TypeScript Grid? -{% endpromptcard %} -{% promptcard Grouping and Filtering %} -#sf_typescript_assistant Show me an example of grouping and filtering data in the Grid control. -{% endpromptcard %} -{% promptcard CRUD Operations %} -#sf_typescript_assistant What's the code to implement full CRUD operations in Syncfusion TypeScript Grid? -{% endpromptcard %} -{% promptcard Grid Export to PDF and Excel %} -#sf_typescript_assistant How can I add PDF and Excel export options to the Grid toolbar? -{% endpromptcard %} -{% promptcard Virtual Scrolling %} -#sf_typescript_assistant How do I configure virtual scrolling for large datasets in the Grid? -{% endpromptcard %} -{% promptcard Multicolumn Grid Setup %} -#sf_typescript_assistant Create a multicolumn Grid to display product details with sorting and filtering. -{% endpromptcard %} -{% promptcard Chat Integration %} -#sf_typescript_assistant How can I integrate a chat widget inside each row of the Syncfusion Grid? -{% endpromptcard %} -{% promptcard Advanced Grid Features %} -#sf_typescript_assistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling. -{% endpromptcard %} -{% promptcard Troubleshooting Grid Export %} -#sf_typescript_assistant Why isn't my Grid exporting to PDF and Excel correctly? -{% endpromptcard %} -{% promptcard Inline Editing %} -#sf_typescript_assistant How do I enable inline editing for CRUD operations in the Grid? -{% endpromptcard %} -{% promptcard Custom Toolbar %} -#sf_typescript_assistant Add custom toolbar buttons for PDF and Excel export in the Grid. -{% endpromptcard %} -{% promptcard Dynamic Column Configuration %} -#sf_typescript_assistant How can I dynamically configure multicolumn layout with filtering and sorting? -{% endpromptcard %} -{% endpromptcards %} - -### Chart - -The Syncfusion TypeScript Chart suite offers versatile visualization tools across various series types for insightful data representation. - -{% promptcards %} -{% promptcard Local and Remote Data %} -#sf_typescript_assistant How do I bind both local and remote data sources to a Syncfusion Chart? -{% endpromptcard %} -{% promptcard Range Selection %} -#sf_typescript_assistant Show me how to enable range selection in a Syncfusion TypeScript Chart. -{% endpromptcard %} -{% promptcard Chart Types Overview %} -#sf_typescript_assistant What chart types are available in Syncfusion TypeScript Chart, and how do I configure them? -{% endpromptcard %} -{% promptcard Markers and Data Labels %} -#sf_typescript_assistant How can I display markers and data labels on a line chart? -{% endpromptcard %} -{% promptcard Annotations %} -#sf_typescript_assistant Add custom annotations to highlight specific data points in a chart. -{% endpromptcard %} -{% promptcard Chart Export to Image or PDF %} -#sf_typescript_assistant How do I export a Syncfusion Chart to PDF or image format? -{% endpromptcard %} -{% promptcard Print Support %} -#sf_typescript_assistant Enable print functionality for a Syncfusion TypeScript Chart control. -{% endpromptcard %} -{% promptcard Dynamic Chart with Remote Data %} -#sf_typescript_assistant Create a chart that updates dynamically with remote API data. -{% endpromptcard %} -{% promptcard Multiple Series Types %} -#sf_typescript_assistant How do I combine bar and line chart types in a single Syncfusion Chart? -{% endpromptcard %} -{% promptcard Troubleshooting Chart Data Binding %} -#sf_typescript_assistant Why isn't my remote data showing up in the Syncfusion Chart? -{% endpromptcard %} -{% promptcard Interactive Range Selector %} -#sf_typescript_assistant Configure a range selector for zooming and filtering in a time-series chart. -{% endpromptcard %} -{% promptcard Custom Markers and Labels %} -#sf_typescript_assistant Show me an example of customizing chart markers and data label styles. -{% endpromptcard %} -{% endpromptcards %} - -### Schedule - -The Syncfusion TypeScript Schedule control helps manage events, resources, and timelines with powerful views and customization. - -{% promptcards %} -{% promptcard Module Injection %} -#sf_typescript_assistant How do I inject required modules into the Syncfusion TypeScript Schedule control? -{% endpromptcard %} -{% promptcard Remote Data Binding %} -#sf_typescript_assistant Bind the Schedule control to a remote API for dynamic event loading. -{% endpromptcard %} -{% promptcard CRUD Actions %} -#sf_typescript_assistant Show me how to implement full CRUD operations in the Schedule control. -{% endpromptcard %} -{% promptcard Virtual Scrolling %} -#sf_typescript_assistant Enable virtual scrolling for large event datasets in the Schedule view. -{% endpromptcard %} -{% promptcard Timezone Support %} -#sf_typescript_assistant How can I configure timezone support in the Syncfusion TypeScript Schedule? -{% endpromptcard %} -{% promptcard Export Schedule to PDF or Excel %} -#sf_typescript_assistant Add export functionality to download the Schedule view as PDF or Excel. -{% endpromptcard %} -{% promptcard Timeline Header Rows %} -#sf_typescript_assistant How do I customize timeline header rows in the Schedule control. -{% endpromptcard %} -{% promptcard Multiple Module Injection %} -#sf_typescript_assistant Inject multiple modules like Day, Week, and Timeline views into the Schedule control. -{% endpromptcard %} -{% promptcard Troubleshooting Schedule CRUD %} -#sf_typescript_assistant Why aren't my CRUD actions working correctly in the Schedule control? -{% endpromptcard %} -{% promptcard Local and Remote Data %} -#sf_typescript_assistant Bind both local and remote event data to the Schedule control. -{% endpromptcard %} -{% promptcard Export and Timezone %} -#sf_typescript_assistant Configure timezone-aware exporting for the Schedule view. -{% endpromptcard %} -{% promptcard Advanced Schedule Setup %} -#sf_typescript_assistant Create a Schedule with module injection, CRUD, virtual scrolling, and exporting. -{% endpromptcard %} -{% endpromptcards %} - -### Kanban - -The Syncfusion TypeScript Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. - -{% promptcards %} -{% promptcard Data Binding %} -#sf_typescript_assistant How do I bind local or remote data to the Syncfusion TypeScript Kanban board? -{% endpromptcard %} -{% promptcard Sorting %} -#sf_typescript_assistant Enable sorting of cards within columns in the Kanban control. -{% endpromptcard %} -{% promptcard Swimlane View %} -#sf_typescript_assistant Show me how to group Kanban cards using swimlane headers. -{% endpromptcard %} -{% promptcard Kanban Card Editing %} -#sf_typescript_assistant How can I enable inline editing of Kanban cards? -{% endpromptcard %} -{% promptcard Virtualization %} -#sf_typescript_assistant Configure virtualization for performance with large Kanban datasets. -{% endpromptcard %} -{% promptcard Localization %} -#sf_typescript_assistant How do I localize labels and messages in the Kanban control? -{% endpromptcard %} -{% promptcard Drag and Drop %} -#sf_typescript_assistant Enable drag-and-drop functionality for moving cards between columns. -{% endpromptcard %} -{% promptcard Sorting and Swimlane %} -#sf_typescript_assistant Create a Kanban board with swimlane grouping and sortable cards. -{% endpromptcard %} -{% promptcard Editable Cards and Localization %} -#sf_typescript_assistant Show me how to edit cards and apply localization in the Kanban control. -{% endpromptcard %} -{% promptcard Troubleshooting Kanban Drag and Drop %} -#sf_typescript_assistant Why isn't drag-and-drop working correctly in my Kanban board? -{% endpromptcard %} -{% promptcard Remote Data and Virtualization %} -#sf_typescript_assistant Bind remote data to the Kanban control and enable virtualization for performance. -{% endpromptcard %} -{% promptcard Advanced Kanban Setup %} -#sf_typescript_assistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. -{% endpromptcard %} -{% endpromptcards %} - -### RichTextEditor - -The Syncfusion TypeScript RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. - -{% promptcards %} -{% promptcard Toolbar Configuration %} -#sf_typescript_assistant How do I customize the toolbar options in the Syncfusion RichTextEditor? -{% endpromptcard %} -{% promptcard Link Manipulation %} -#sf_typescript_assistant Show me how to add, edit, and remove hyperlinks in the RichTextEditor content. -{% endpromptcard %} -{% promptcard Iframe Mode %} -#sf_typescript_assistant How can I render the RichTextEditor inside an iframe for isolated styling? -{% endpromptcard %} -{% promptcard Module Injection %} -#sf_typescript_assistant Inject feature modules like toolbar, link, and image into the RichTextEditor. -{% endpromptcard %} -{% promptcard Undo and Redo %} -#sf_typescript_assistant Enable undo and redo functionality in the RichTextEditor toolbar. -{% endpromptcard %} -{% promptcard Forms Integration %} -#sf_typescript_assistant How do I integrate a TypeScript form and validate input? -{% endpromptcard %} -{% promptcard Content Import and Export %} -#sf_typescript_assistant Export RichTextEditor content to HTML or import existing HTML content. -{% endpromptcard %} -{% promptcard Advanced Toolbar %} -#sf_typescript_assistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. -{% endpromptcard %} -{% promptcard Iframe and Forms Support %} -#sf_typescript_assistant Use the RichTextEditor in iframe mode and bind it to a form for submission. -{% endpromptcard %} -{% promptcard Undo/Redo and Export %} -#sf_typescript_assistant Enable undo/redo and export content to HTML in the RichTextEditor. -{% endpromptcard %} -{% promptcard Module Injection and Link Editing %} -#sf_typescript_assistant Inject toolbar and link modules to enable rich link editing in the editor. -{% endpromptcard %} -{% endpromptcards %} - -### Calendar - -The Syncfusion TypeScript Calendar supports flexible date selection, localization, and custom rendering. - -{% promptcards %} -{% promptcard Date Range Selection %} -#sf_typescript_assistant How do I enable date range selection in the Syncfusion TypeScript Calendar? -{% endpromptcard %} -{% promptcard Globalization Support %} -#sf_typescript_assistant Configure the Calendar to support multiple cultures and languages. -{% endpromptcard %} -{% promptcard Multi-Date Selection %} -#sf_typescript_assistant Show me how to allow users to select multiple dates in the Calendar. -{% endpromptcard %} -{% promptcard Islamic Calendar Support %} -#sf_typescript_assistant How can I switch the Calendar to use the Islamic calendar system? -{% endpromptcard %} -{% promptcard Skip Months Feature %} -#sf_typescript_assistant Enable skipping months in the Calendar navigation for faster browsing. -{% endpromptcard %} -{% promptcard Calendar Showing Other Month Days %} -#sf_typescript_assistant How do I show days from adjacent months in the current Calendar view? -{% endpromptcard %} -{% promptcard Custom Day Cell Format %} -#sf_typescript_assistant Customize the day cell format in the Calendar to show short weekday names. -{% endpromptcard %} -{% promptcard Calendar Highlighting Weekends %} -#sf_typescript_assistant Highlight weekends in the Calendar with a different background color. -{% endpromptcard %} -{% promptcard Globalization and Islamic Calendar %} -#sf_typescript_assistant Configure the Calendar for Arabic culture using the Islamic calendar and localization. -{% endpromptcard %} -{% promptcard Multi-Selection and Range %} -#sf_typescript_assistant Enable both multi-date selection and range selection in the Calendar. -{% endpromptcard %} -{% promptcard Troubleshooting Calendar Date Range %} -#sf_typescript_assistant Why isn't my Calendar selecting the correct date range? -{% endpromptcard %} -{% promptcard Advanced Calendar Setup %} -#sf_typescript_assistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. -{% endpromptcard %} -{% endpromptcards %} - -## See also - -* [AI Coding Assistant - Getting Started](./getting-started) -* [Agentic UI Builder - Getting Started](../agentic-ui-builder/getting-started) \ No newline at end of file diff --git a/ej2-javascript/ts/mcp-server/overview.md b/ej2-javascript/ts/mcp-server/overview.md deleted file mode 100644 index 24092d0e5..000000000 --- a/ej2-javascript/ts/mcp-server/overview.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -layout: post -title: MCP Server for TypeScript Development | Syncfusion -description: Accelerate TypeScript development with Syncfusion MCP Server - instant access to control APIs, UI blocks, themes, and 600+ icons via MCP in your IDE. -control: Syncfusion MCP Server Overview -platform: ej2-javascript -documentation: ug -domainurl: ##DomainURL## ---- - -# Syncfusion TypeScript MCP Server Overview - -Syncfusion® MCP Server accelerate TypeScript application development by providing deep knowledge directly in your AI-powered IDE. Through Model Context Protocol (MCP) integration, you get instant access to control APIs, pre-built UI blocks, styling configurations, icon libraries, and code generation - all without leaving your development environment. - -Use these tools to speed up development and follow best practices when building dashboards, interfaces, or integrating controls. - -## Key Benefits - -* **Expert Control Knowledge** - Deep understanding of 145+ TypeScript controls and their implementation patterns. -* **Design System Integration** - Guidance for Tailwind3 CSS, Bootstrap 5.3, Material 3, and Fluent 2 design systems with utility-based styling. -* **Comprehensive Icon Library** - 600+ icons with control integration and accessibility guidance. -* **Unlimited Usage** - No request limits, time restrictions, or query caps. -* **Privacy-Focused** - Your data remains secure. The tools do not access files, store data, or use your prompts for training purposes. - -## How it works - -Syncfusion MCP Server are delivered as an npm-based Model Context Protocol (MCP) server that integrates seamlessly with AI-powered development environments. The server provides two specialized modes tailored to different development workflows: - -**Agentic UI Builder** (`#sf_typescript_ui_builder`) -Build complete UIs with coordinated tools for controls, styling, and icons. Perfect for creating pages, dashboards, and complex sections from scratch. - -**AI Coding Assistant** (`#sf_typescript_assistant`) -Implement individual controls with focused API guidance. Ideal for adding controls to existing projects and troubleshooting integration issues. - -## Getting Started - -1. **Install** the [Syncfusion TypeScript MCP server](https://www.npmjs.com/package/@syncfusion/typescript-assistant) package in your AI-powered IDE. -2. **Choose your mode** - `#sf_typescript_ui_builder` for complete UIs or `#sf_typescript_assistant` for control-specific tasks. -3. **Describe** what you want to build - the AI generates production-ready code that follows best practices. - -For detailed setup instructions, see the [Installation Guide](./installation). - -## Available Tools - -Syncfusion MCP Server includes four specialized tools that work together to streamline your development workflow: - -* **UI Builder Orchestrator** - Analyzes requirements and coordinates multiple tools to build complete UIs -* **Control Tool** - Delivers API and implementation guidance for Syncfusion TypeScript controls -* **Styling Tool** - Generates theme configurations for Tailwind CSS, Bootstrap, Material, and Fluent with light/dark mode support, and also provides a comprehensive icon library with control‑level integration patterns and accessibility guidance. -* **Coding Assistant Tool** - Provides contextual control documentation, code snippets, and configuration examples for individual Syncfusion TypeScript controls - -## Unlimited Access - -Syncfusion provides unlimited access to the MCP server with no restrictions on: - -* Number of requests -* Tool usage -* Query caps -* Usage duration - -This unlimited access empowers you to experiment freely, iterate rapidly, and fully leverage the tool's capabilities throughout your development process. - -## Best Practices - -For optimal results, use high-performance AI models like **Claude Sonnet 4.5** (recommended), GPT-5, or Gemini 3 Pro. These models understand complex control relationships better and generate more accurate TypeScript code. - -> Always review AI-generated code before using it in production. - -## Privacy & Security - -The Syncfusion MCP Server are designed with privacy considerations: - -* The tools do not access project files or workspace contents directly. -* User prompts are not stored or used for other purposes. -* Prompts are not used to train Syncfusion models. -* The assistant provides context; the final output is produced by the selected AI model. - -The MCP Server acts purely as a knowledge bridge, connecting your AI model with Syncfusion-specific expertise while respecting your privacy and maintaining security. - -## See also - -* [Installation](./installation) -* [Agentic UI Builder - Getting Started](./agentic-ui-builder/getting-started) -* [AI Coding Assistant - Getting Started](./ai-coding-assistant/getting-started) -* [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) \ No newline at end of file diff --git a/ej2-javascript/ts/mcp.md b/ej2-javascript/ts/mcp.md new file mode 100644 index 000000000..b2989f479 --- /dev/null +++ b/ej2-javascript/ts/mcp.md @@ -0,0 +1,266 @@ +--- +layout: post +title: Syncfusion TypeScript MCP Server | AI Coding Assistant +description: Accelerate TypeScript development with Syncfusion MCP Server—access docs, APIs, code snippets, and release history in your AI IDE. +control: Syncfusion TypeScript MCP Server +platform: ej2-typescript +documentation: ug +domainurl: ##DomainURL## +--- + +# Syncfusion TypeScript MCP Server + +Syncfusion® MCP Server accelerate TypeScript application development by providing deep knowledge directly in your AI-powered IDE. [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) (MCP) integration enables quick access to documentation, API references, and code-generation features from within the development environment. + +These tools speed up development and reinforce best practices for Syncfusion component integration. + +> The previously available **Agentic UI Builder** (`#sf_typescript_ui_builder`) has been upgraded to an **Agent skill-based experience** and is no longer part of the MCP Server. To learn more about the new **Agentic UI Builder**, see the [documentation](https://ej2.syncfusion.com/documentation/agentic-ui-builder). The **AI Coding Assistant** (#sf_typescript_assistant) has been **renamed** to **search_docs** (`#search_docs`) to ensure the tool name follows MCP naming conventions. + +## Key Benefits + +- **Expert Component Knowledge** - Deep understanding of 145+ TypeScript components and their implementation patterns. +- **Release Insights** - Access the Syncfusion TypeScript release history and produce clear change logs between any two versions. +- **Unlimited Usage** - No request limits, time restrictions, or query caps. +- **Privacy-Focused** - The tools operate based on the user's query and do not store any content, data, or prompts. + +## Installation + +### Prerequisites + +Before beginning, ensure the following prerequisites are met: + +- **Node.js** version 18 or higher +- A **compatible MCP client** (VS Code, Syncfusion® Code Studio, Cursor, JetBrains, etc.) +- An active [Syncfusion® API key](https://syncfusion.com/account/api-key) +- A **TypeScript application** (existing or new); see [Quick Start](https://ej2.syncfusion.com/documentation/diagram/getting-started) +- An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) + +### Getting Your API Key + +Generate the Syncfusion® API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file. The saved file will be referenced in the MCP configuration: + +````json +"env": { + "Syncfusion_API_Key_Path": "D:\\syncfusion-key.txt" +} +```` + +> Alternatively, the API key can also be set directly using `"Syncfusion_API_Key": "YOUR_API_KEY"` in the env configuration. Using a file path is recommended to keep the key out of source control. + +### Setting Up in MCP Clients + +Create a configuration file in your project folder to install the server for your workspace. **Replace `YOUR_API_KEY_FILE_PATH` with the path to your API key file.** + +{% tabs %} +{% highlight bash tabtitle="VS Code" %} + +// Create a `.vscode/mcp.json` file in your workspace: + +{ + "servers": { + "sf-typescript-mcp": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@syncfusion/typescript-mcp@latest"], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" + // or + // "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} + +{% endhighlight %} +{% highlight bash tabtitle="Code Studio" %} + +// Create a `.codestudio/mcp.json` file in your workspace: + +{ + "servers": { + "sf-typescript-mcp": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@syncfusion/typescript-mcp@latest"], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" + // or + // "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} + +// After creating the file, click Start in the inline action to install the server. + +{% endhighlight %} +{% highlight bash tabtitle="Cursor" %} + +// Create a `.cursor/mcp.json` file in your workspace: + +{ + "mcpServers": { + "sf-typescript-mcp": { + "command": "npx", + "args": ["-y", "@syncfusion/typescript-mcp@latest"], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" + // or + // "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} + +{% endhighlight %} +{% highlight bash tabtitle="JetBrains" %} + +// Open AI Assistant chat, type /, and select Add Command. +// Click ➕ Add on the MCP settings page. +// Choose STDIO and select JSON configuration: + +{ + "mcpServers": { + "sf-typescript-mcp": { + "command": "npx.cmd", + "args": [ + "-y", + "@syncfusion/typescript-mcp@latest" + ], + "env": { + "Syncfusion_API_Key_Path": "YOUR_API_KEY_FILE_PATH" + // or + // "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} + +// Click OK, then click Apply. The server starts and shows Connected status. + +{% endhighlight %} +{% endtabs %} + +**Verifying Installation** Check your editor's MCP Server list for `sf-typescript-mcp` with a **Connected** status to confirm a successful installation. + +## Available Tools + +The Syncfusion® MCP servers exposes a set of specialized tools for retrieving different types of product knowledge and resources. Tools can be called directly for specific information, or an assistant can choose the most relevant tool automatically. + +| # | Tool | Description | +|---|------|-------------| +| 1 | `search_docs` | Search Syncfusion TypeScript documentation for features, examples, and configuration help. | +| 2 | `get_changelog ` | Get upgrade steps and breaking changes for moving between Syncfusion TypeScript versions. | +| 3 | `list_versions` | List all Syncfusion TypeScript release versions available. | + +## Common use cases + +The examples below showcase how the different MCP tools handle real-world TypeScript development scenarios. Tools can be invoked directly, as shown in the examples below, for specific needs. Alternatively, an AI assistant can automatically select the most appropriate tool based on the request. + +**Get Started** + +Use `search_docs` to get contextual guidance, code snippets, and configuration examples for any component. + +{% promptcards %} +{% promptcard Grid with Paging & Sorting %} +#search_docs Create a Syncfusion TypeScript Grid with paging, sorting, and filtering enabled. +{% endpromptcard %} +{% endpromptcards %} + +{% promptcards %} +{% promptcard RichTextEditor Setup %} +#search_docs How do I set up the Syncfusion TypeScript RichTextEditor with a custom toolbar and form integration? +{% endpromptcard %} +{% endpromptcards %} + +**Implement Features** + +Get step-by-step help for adding specific features to components that are already in the project. + +{% promptcards %} +{% promptcard Grid Export %} +#search_docs How can I add PDF and Excel export options to my existing Grid's toolbar? +{% endpromptcard %} +{% endpromptcards %} + +{% promptcards %} +{% promptcard Kanban Features %} +#search_docs How do I enable drag-and-drop and swimlane grouping in the Kanban component? +{% endpromptcard %} +{% endpromptcards %} + +**Troubleshooting** + +Describe the problem in plain language, and let `search_docs` help resolve it. +{% promptcards %} +{% promptcard Grid Issues %} +#search_docs Why isn't my Grid loading or rendering data correctly? +{% endpromptcard %} +{% endpromptcards %} + +{% promptcards %} +{% promptcard Schedule Issues %} +#search_docs Why aren't my Schedule events displaying or saving correctly? +{% endpromptcard %} +{% endpromptcards %} + +**Version History** + +Use `list_versions` and `get_changelog` to explore available releases and review what changed. +{% promptcards %} +{% promptcard List Versions %} +#list_versions Which Syncfusion TypeScript release versions are available? +{% endpromptcard %} +{% endpromptcards %} + +{% promptcards %} +{% promptcard Migration Guide %} +#get_changelog Show me the new features and breaking changes in the latest Syncfusion TypeScript release. +{% endpromptcard %} +{% endpromptcards %} + +## Best Practices + +To get the most out of the Syncfusion® TypeScript MCP Servers: + +- **Be Specific** - Include the platform and component in your queries (for example, *"Create a Syncfusion TypeScript Grid with paging and filtering"*). +- **Provide Context** - Include applicable versions, expected outcomes, and any requirements or limitations that may affect the request. +- **Use Descriptive Queries** - Avoid overly brief or ambiguous requests. Providing sufficient detail helps improve the accuracy and relevance of the response. +- **Stay Consistent** - Keep file organization, naming conventions, and coding standards consistent throughout your TypeScript project. +- **Start Fresh for New Topics** - Begin a new chat when switching to a different component or task to maintain clean context. +- **Use Advanced AI Models** - For best results, use **Claude Sonnet 4.5 or higher**. Other compatible models include **GPT-5 and Gemini 3 Pro**. Higher-capability models produce more accurate component implementations. +- **For Troubleshooting** - Use AI suggestions for common issues; consult the [official documentation](https://ej2.syncfusion.com/documentation/introduction) or [support](https://support.syncfusion.com/support/tickets/create) for complex problems. +- **Minimize Active Tools** - Limit the number of active MCP tools in your IDE to prevent tool-selection ambiguity and improve response accuracy. + +> Always review AI-generated code before using it in production. + +## Troubleshooting + +The table below lists frequently encountered issues and suggested resolutions to help diagnose and address common setup or usage challenges. + +| Issue | Solution | +|-------|----------| +| **Clear npm cache** | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues. | +| **Server failed to start** | Update to Node.js 18+, verify JSON syntax in the config file, and restart your IDE. | +| **Invalid API key** | Verify your key is active at the [Syncfusion Account Page](https://syncfusion.com/account/api-key). | +| **Incorrect API key config** | For the file path: verify file location and content. For inline key: check the key is correctly updated. | +| **Wrong config file location** | VS Code: `.vscode/mcp.json` • Code Studio: `.codestudio/mcp.json` • Cursor: `.cursor/mcp.json` in the workspace root. | +| **Check IDE logs** | VS Code / Code Studio: Output panel → "MCP" • Cursor: Developer Console for MCP errors. | + +## Privacy & Security + +The Syncfusion® MCP Servers are designed with privacy considerations: + +* The tools process requests according to the user's query without storing any content or prompts. +* User prompts are not stored or used for other purposes. +* Prompts are not used to train Syncfusion models. +* The assistant provides context; the final output is produced by the selected AI model. + +The MCP Server acts purely as a knowledge bridge, connecting your AI model with Syncfusion-specific expertise while respecting your privacy and maintaining security. + +## See Also + +- [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) \ No newline at end of file diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html index 1d37e83a0..5cf0e07f1 100644 --- a/ej2-typescript-toc.html +++ b/ej2-typescript-toc.html @@ -9,24 +9,7 @@
    • Knowledge Base
    • AI and Smart Tooling
    • -RichTextEditor +Rich Text Editor
      • Getting Started
      • Feature Module Injection
        • From e2c421756f8dbe6cdf667be3a072f158fd5e1a7b Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 15 Jul 2026 13:45:46 +0530 Subject: [PATCH 07/26] Integrated latest changes at 07-15-2026 1:30:45 PM --- ej2-javascript-toc.html | 1 + .../datasource.ts | 36 ++ .../es5-datasource.js | 36 ++ .../dom-virtualization-buffer-cs1/index.css | 91 ++++ .../dom-virtualization-buffer-cs1/index.js | 152 +++++++ .../dom-virtualization-buffer-cs1/index.ts | 158 +++++++ .../js/index.html | 60 +++ .../systemjs.config.js | 45 ++ .../ts/index.html | 54 +++ .../datasource.ts | 54 +++ .../es5-datasource.js | 54 +++ .../dom-virtualization-massive-cs1/index.css | 152 +++++++ .../dom-virtualization-massive-cs1/index.js | 139 ++++++ .../dom-virtualization-massive-cs1/index.ts | 142 +++++++ .../js/index.html | 55 +++ .../systemjs.config.js | 43 ++ .../ts/index.html | 47 ++ .../grid/excel-filter-cs6/datasource.ts | 402 ++++++++++++++++++ .../grid/excel-filter-cs6/es5-datasource.js | 402 ++++++++++++++++++ .../grid/excel-filter-cs6/index.css | 14 + .../grid/excel-filter-cs6/index.js | 35 ++ .../grid/excel-filter-cs6/index.ts | 39 ++ .../grid/excel-filter-cs6/js/index.html | 42 ++ .../grid/excel-filter-cs6/systemjs.config.js | 46 ++ .../grid/excel-filter-cs6/ts/index.html | 38 ++ .../grid/virtual-scroll-cs1/index.css | 30 ++ .../grid/virtual-scroll-cs1/index.js | 112 +++++ .../grid/virtual-scroll-cs1/index.ts | 115 +++++ .../grid/virtual-scroll-cs1/js/index.html | 54 +++ .../virtual-scroll-cs1/systemjs.config.js | 43 ++ .../grid/virtual-scroll-cs1/ts/index.html | 47 ++ .../grid/filtering/excel-like-filter.md | 49 ++- .../grid/scrolling/dom-virtualization.md | 327 ++++++++++++++ ej2-javascript/js/mcp.md | 26 -- .../markdown-editor/ts/getting-started.md | 36 +- .../pivotview/ts/getting-started-vite.md | 32 +- .../pivotview/ts/getting-started.md | 26 +- .../rich-text-editor/ts/getting-started.md | 38 +- ej2-javascript/treegrid/js/getting-started.md | 58 +-- ej2-javascript/ts/mcp.md | 26 -- ej2-typescript-toc.html | 1 + 41 files changed, 3203 insertions(+), 154 deletions(-) create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/es5-datasource.js create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.css create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.js create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.ts create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/ts/index.html create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/es5-datasource.js create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.css create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.js create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.ts create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/ts/index.html create mode 100644 ej2-javascript/code-snippet/grid/excel-filter-cs6/datasource.ts create mode 100644 ej2-javascript/code-snippet/grid/excel-filter-cs6/es5-datasource.js create mode 100644 ej2-javascript/code-snippet/grid/excel-filter-cs6/index.css create mode 100644 ej2-javascript/code-snippet/grid/excel-filter-cs6/index.js create mode 100644 ej2-javascript/code-snippet/grid/excel-filter-cs6/index.ts create mode 100644 ej2-javascript/code-snippet/grid/excel-filter-cs6/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/excel-filter-cs6/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/excel-filter-cs6/ts/index.html create mode 100644 ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.css create mode 100644 ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.js create mode 100644 ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.ts create mode 100644 ej2-javascript/code-snippet/grid/virtual-scroll-cs1/js/index.html create mode 100644 ej2-javascript/code-snippet/grid/virtual-scroll-cs1/systemjs.config.js create mode 100644 ej2-javascript/code-snippet/grid/virtual-scroll-cs1/ts/index.html create mode 100644 ej2-javascript/grid/scrolling/dom-virtualization.md diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html index 46b346f62..590219974 100644 --- a/ej2-javascript-toc.html +++ b/ej2-javascript-toc.html @@ -1421,6 +1421,7 @@
      • Scrolling diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/datasource.ts b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/datasource.ts new file mode 100644 index 000000000..576c2a33f --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/datasource.ts @@ -0,0 +1,36 @@ +// Data generation for buffer configuration sample +const productNames: string[] = [ + 'Business Strategy', 'Dumbbell Set', 'Portable SSD', 'Running Shorts', 'Whole Wheat Bread', + 'Cooking Basics', 'Resistance Bands', 'Monitor Stand', 'Athletic Shoes', 'Yoga Mat', + 'Protein Powder', 'Gaming Mouse', 'Coffee Maker', 'Winter Jacket', 'Smart Watch', + 'Desk Lamp', 'Wireless Earbuds', 'Office Chair', 'Water Bottle', 'Laptop Bag', + 'Keyboard', 'USB Cable', 'Power Bank', 'Notebook Set', 'Pen Collection', + 'Tennis Racket', 'Basketball', 'Soccer Ball', 'Headphones', 'Tablet Stand', + 'Phone Case', 'Screen Protector', 'Camera Lens', 'Backpack', 'Travel Mug', + 'Blender', 'Toaster', 'Rice Cooker', 'Air Fryer', 'Mixer', + 'Cutting Board', 'Knife Set', 'Pan Set', 'Dish Rack', 'Storage Box', + 'Pillow', 'Blanket', 'Towel Set', 'Bath Mat', 'Shower Curtain' +]; + +const categories: string[] = ['Books', 'Sports', 'Electronics', 'Clothing', 'Food']; + +function generateProductData(count: number): Object[] { + const data: Object[] = []; + for (let i = 0; i < count; i++) { + const category = categories[i % categories.length]; + const productName = productNames[i % productNames.length]; + const availableStock = Math.floor(Math.random() * 1500) + 50; + const unitPrice = Math.floor(Math.random() * 450) + 50; + + data.push({ + SKUID: `SKU-${String(i + 1).padStart(5, '0')}`, + ProductName: productName, + Category: category, + AvailableStock: availableStock, + UnitPrice: unitPrice + }); + } + return data; +} + +export let productData: Object[] = generateProductData(1000); diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/es5-datasource.js b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/es5-datasource.js new file mode 100644 index 000000000..b82a2dbc5 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/es5-datasource.js @@ -0,0 +1,36 @@ +// Data generation for buffer configuration sample +var productNames = [ + 'Business Strategy', 'Dumbbell Set', 'Portable SSD', 'Running Shorts', 'Whole Wheat Bread', + 'Cooking Basics', 'Resistance Bands', 'Monitor Stand', 'Athletic Shoes', 'Yoga Mat', + 'Protein Powder', 'Gaming Mouse', 'Coffee Maker', 'Winter Jacket', 'Smart Watch', + 'Desk Lamp', 'Wireless Earbuds', 'Office Chair', 'Water Bottle', 'Laptop Bag', + 'Keyboard', 'USB Cable', 'Power Bank', 'Notebook Set', 'Pen Collection', + 'Tennis Racket', 'Basketball', 'Soccer Ball', 'Headphones', 'Tablet Stand', + 'Phone Case', 'Screen Protector', 'Camera Lens', 'Backpack', 'Travel Mug', + 'Blender', 'Toaster', 'Rice Cooker', 'Air Fryer', 'Mixer', + 'Cutting Board', 'Knife Set', 'Pan Set', 'Dish Rack', 'Storage Box', + 'Pillow', 'Blanket', 'Towel Set', 'Bath Mat', 'Shower Curtain' +]; + +var categories = ['Books', 'Sports', 'Electronics', 'Clothing', 'Food']; + +function generateProductData(count) { + var data = []; + for (var i = 0; i < count; i++) { + var category = categories[i % categories.length]; + var productName = productNames[i % productNames.length]; + var availableStock = Math.floor(Math.random() * 1500) + 50; + var unitPrice = Math.floor(Math.random() * 450) + 50; + + data.push({ + SKUID: 'SKU-' + String(i + 1).padStart(5, '0'), + ProductName: productName, + Category: category, + AvailableStock: availableStock, + UnitPrice: unitPrice + }); + } + return data; +} + +var productData = generateProductData(1000); diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.css b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.css new file mode 100644 index 000000000..90fc20fe1 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.css @@ -0,0 +1,91 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +.category-badge { + display: inline-block; + padding: 12px; + border-radius: 12px; + text-align: center; + width: 100px; +} + +.category-books { + background-color: #FEF7E0; + color: #EA8600; +} + +.category-sports { + background-color: #FEF7E0; + color: #EA8600; +} + +.category-electronics { + background-color: #FEF7E0; + color: #EA8600; +} + +.category-clothing { + background-color: #FEF7E0; + color: #EA8600; +} + +.category-food { + background-color: #FEF7E0; + color: #EA8600; +} + +/* Dark theme overrides for category badges */ +.fabric-dark .category-books, +.material-dark .category-books, +.bootstrap-dark .category-books, +.tailwind-dark .category-books, +.bootstrap5-dark .category-books, +.fluent-dark .category-books, +.fluent2-dark .category-books, +.highcontrast .category-books, +.fabric-dark .category-sports, +.material-dark .category-sports, +.bootstrap-dark .category-sports, +.tailwind-dark .category-sports, +.bootstrap5-dark .category-sports, +.fluent-dark .category-sports, +.fluent2-dark .category-sports, +.highcontrast .category-sports, +.fabric-dark .category-electronics, +.material-dark .category-electronics, +.bootstrap-dark .category-electronics, +.tailwind-dark .category-electronics, +.bootstrap5-dark .category-electronics, +.fluent-dark .category-electronics, +.fluent2-dark .category-electronics, +.highcontrast .category-electronics, +.fabric-dark .category-clothing, +.material-dark .category-clothing, +.bootstrap-dark .category-clothing, +.tailwind-dark .category-clothing, +.bootstrap5-dark .category-clothing, +.fluent-dark .category-clothing, +.fluent2-dark .category-clothing, +.highcontrast .category-clothing, +.fabric-dark .category-food, +.material-dark .category-food, +.bootstrap-dark .category-food, +.tailwind-dark .category-food, +.bootstrap5-dark .category-food, +.fluent-dark .category-food, +.fluent2-dark .category-food, +.highcontrast .category-food { + background-color: #534514; + color: #FDD663; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.js b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.js new file mode 100644 index 000000000..fe4c1490e --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.js @@ -0,0 +1,152 @@ +// Template function for SKU ID with icon +window.skuTemplate = function(data) { + if (!data || !data.SKUID) { + return ''; + } + return '
        ' + + '' + + '' + + '' + + '' + + '' + data.SKUID + '' + + '
        '; +}; + +// Template function for Product Name with icon +window.productTemplate = function(data) { + if (!data || !data.ProductName) { + return ''; + } + return '
        ' + + '' + + '' + + '' + + '' + + '' + + '' + data.ProductName + '' + + '
        '; +}; + +// Template function for category badges +window.categoryTemplate = function(data) { + if (!data || !data.Category) { + return ''; + } + var category = data.Category; + var className = 'category-' + category.toLowerCase(); + return '
        ' + category + '
        '; +}; + +// Template function for available stock progress bars +window.stockTemplate = function(data) { + var stock = data.AvailableStock; + var progressId = 'progress-' + data.SKUID.replace(/[^a-zA-Z0-9]/g, ''); + + return '
        ' + + '
        ' + + '' + stock + '' + + '
        '; +}; + +var grid = new ej.grids.Grid({ + dataSource: productData, + enableDomVirtualization: true, + allowFiltering: true, + allowSorting: true, + filterSettings: { type: 'Menu' }, + height: 500, + rowHeight: 50, + domVirtualizationSettings: { + rowBuffer: 5 + }, + queryCellInfo: function(args) { + if (args.column.field === 'AvailableStock' && args.data) { + var stock = args.data.AvailableStock; + var maxStock = 1500; + var percentage = Math.min((stock / maxStock) * 100, 100); + + var progressColor = '#e74c3c'; + if (percentage > 60) { + progressColor = '#27ae60'; + } else if (percentage > 30) { + progressColor = '#f39c12'; + } + + var progressId = 'progress-' + args.data.SKUID.replace(/[^a-zA-Z0-9]/g, ''); + var element = args.cell.querySelector('#' + progressId); + + if (element && !element.classList.contains('e-progressbar')) { + var progressBar = new ej.progressbar.ProgressBar({ + type: 'Linear', + height: '8', + value: percentage, + trackColor: '#ecf0f1', + progressColor: progressColor, + cornerRadius: 'Round', + animation: { + enable: true, + duration: 300, + delay: 0 + } + }); + progressBar.appendTo(element); + } + } + }, + columns: [ + { + field: 'SKUID', + headerText: 'SKU ID', + width: 160, + isPrimaryKey: true, + template: '#skuTemplate' + }, + { + field: 'ProductName', + headerText: 'Product Name', + width: 220, + template: '#productTemplate' + }, + { + field: 'Category', + headerText: 'Category', + width: 160, + template: '#categoryTemplate' + }, + { + field: 'AvailableStock', + headerText: 'Available Stock', + width: 200, + template: '#stockTemplate' + }, + { + field: 'UnitPrice', + headerText: 'Unit Price', + width: 140, + format: 'C2', + textAlign: 'Right' + } + ] +}); + +grid.appendTo('#Grid'); + +// Initialize Slider for row buffer size +var rowBufferSlider = new ej.inputs.Slider({ + min: 1, + max: 20, + value: 5, + type: 'MinRange', + tooltip: { isVisible: true, placement: 'Before' }, + change: function(args) { + var bufferValue = document.getElementById('bufferValue'); + if (bufferValue) { + bufferValue.textContent = args.value.toString(); + } + if (grid && grid.domVirtualizationSettings) { + grid.domVirtualizationSettings.rowBuffer = args.value; + } + } +}); + +rowBufferSlider.appendTo('#rowBuffer'); diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.ts b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.ts new file mode 100644 index 000000000..8b28d2077 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/index.ts @@ -0,0 +1,158 @@ +import { Grid, Toolbar, Filter, Sort, DomVirtualization } from '@syncfusion/ej2-grids'; +import { Slider } from '@syncfusion/ej2-inputs'; +import { ProgressBar } from '@syncfusion/ej2-progressbar'; +import { productData } from './datasource.ts'; + +Grid.Inject(Toolbar, Filter, Sort, DomVirtualization); + +// Template function for SKU ID with icon +(<{ skuTemplate?: Function }>window).skuTemplate = (data: any): string => { + if (!data || !data.SKUID) { + return ''; + } + return `
        + + + + + ${data.SKUID} +
        `; +}; + +// Template function for Product Name with icon +(<{ productTemplate?: Function }>window).productTemplate = (data: any): string => { + if (!data || !data.ProductName) { + return ''; + } + return `
        + + + + + + ${data.ProductName} +
        `; +}; + +// Template function for category badges +(<{ categoryTemplate?: Function }>window).categoryTemplate = (data: any): string => { + if (!data || !data.Category) { + return ''; + } + const category = data.Category; + const className = `category-${category.toLowerCase()}`; + return `
        ${category}
        `; +}; + +// Template function for available stock progress bars +(<{ stockTemplate?: Function }>window).stockTemplate = (data: any): string => { + const stock = data.AvailableStock; + const progressId = 'progress-' + data.SKUID.replace(/[^a-zA-Z0-9]/g, ''); + + return `
        +
        + ${stock} +
        `; +}; + +let grid: Grid = new Grid({ + dataSource: productData, + enableDomVirtualization: true, + allowFiltering: true, + allowSorting: true, + filterSettings: { type: 'Menu' }, + height: 500, + rowHeight: 50, + domVirtualizationSettings: { + rowBuffer: 5 + }, + queryCellInfo: (args: any) => { + if (args.column.field === 'AvailableStock' && args.data) { + const stock = args.data.AvailableStock; + const maxStock = 1500; + const percentage = Math.min((stock / maxStock) * 100, 100); + + let progressColor = '#e74c3c'; + if (percentage > 60) { + progressColor = '#27ae60'; + } else if (percentage > 30) { + progressColor = '#f39c12'; + } + + const progressId = 'progress-' + args.data.SKUID.replace(/[^a-zA-Z0-9]/g, ''); + const element = args.cell.querySelector('#' + progressId); + + if (element && !element.classList.contains('e-progressbar')) { + const progressBar = new ProgressBar({ + type: 'Linear', + height: '8', + value: percentage, + trackColor: '#ecf0f1', + progressColor: progressColor, + cornerRadius: 'Round', + animation: { + enable: true, + duration: 300, + delay: 0 + } + }); + progressBar.appendTo(element as HTMLElement); + } + } + }, + columns: [ + { + field: 'SKUID', + headerText: 'SKU ID', + width: 160, + isPrimaryKey: true, + template: '#skuTemplate' + }, + { + field: 'ProductName', + headerText: 'Product Name', + width: 220, + template: '#productTemplate' + }, + { + field: 'Category', + headerText: 'Category', + width: 160, + template: '#categoryTemplate' + }, + { + field: 'AvailableStock', + headerText: 'Available Stock', + width: 200, + template: '#stockTemplate' + }, + { + field: 'UnitPrice', + headerText: 'Unit Price', + width: 140, + format: 'C2', + textAlign: 'Right' + } + ] +}); + +grid.appendTo('#Grid'); + +// Initialize Slider for row buffer size +const rowBufferSlider: Slider = new Slider({ + min: 1, + max: 20, + value: 5, + type: 'MinRange', + change: (args: any) => { + const bufferValue = document.getElementById('bufferValue'); + if (bufferValue) { + bufferValue.textContent = args.value.toString(); + } + if (grid && grid.domVirtualizationSettings) { + grid.domVirtualizationSettings.rowBuffer = args.value; + } + } +}); + +rowBufferSlider.appendTo('#rowBuffer'); diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/js/index.html b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/js/index.html new file mode 100644 index 000000000..4615b0d53 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/js/index.html @@ -0,0 +1,60 @@ + + + + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + +
        + +
        +
        + + + + + + + + +
        + + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/systemjs.config.js new file mode 100644 index 000000000..11d2e15bc --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/systemjs.config.js @@ -0,0 +1,45 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/24.2.3/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js', + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-progressbar": "syncfusion:ej2-progressbar/dist/ej2-progressbar.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js" + }, + meta: { + '*.json': { loader: 'plugin-json' } + } +}); +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/ts/index.html new file mode 100644 index 000000000..6dd13ccc1 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-buffer-cs1/ts/index.html @@ -0,0 +1,54 @@ + + + + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + + + +
        Loading....
        +
        + +
        +
        + + + + + + + +
        + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/datasource.ts b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/datasource.ts new file mode 100644 index 000000000..07059ba13 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/datasource.ts @@ -0,0 +1,54 @@ +// Static transaction data generator for massive datasets +export function generateTransactionData(count: number) { + const merchants = [ + 'TestVendor Pharma', 'SampleCorp Tours15', 'DemoSoft Airline22', 'TestVendor Mall04', + 'SampleCorp Taxi11', 'DemoSoft Creator18', 'MockData Carrier25', 'TechStore Market', + 'FastFoods Delivery', 'ShopHub Express', 'TravelMax Booking', 'PaymentGateway Pro' + ]; + + const categories = [ + 'Airlines', 'Streaming', 'Travel', 'Ride Share', 'Home & Garden', + 'Retail', 'Entertainment', 'Food & Drink', 'Shopping', 'Utilities' + ]; + + const statuses = ['Declined', 'Pending', 'Cancelled', 'Completed']; + + const data = []; + // Calculate last 6 months date range + const today = new Date(2026, 6, 1); + const sixMonthsAgo = new Date(2026, 0, 1); + + for (let i = 1; i <= count; i++) { + const merchantIdx = (i - 1) % merchants.length; + const categoryIdx = (i - 1) % categories.length; + const statusIdx = (i - 1) % statuses.length; + const amount = 50 + ((i * 17) % 450); + const paddedId = ('00000000' + i).slice(-8); + + // Generate static 4-digit card numbers + const digit1 = (i * 13) % 10; + const digit2 = (i * 23) % 10; + const digit3 = (i * 31) % 10; + const digit4 = (i * 41) % 10; + const cardNum = `${digit1}${digit2}${digit3}${digit4}`; + + // Generate dates within last 6 months + const daysInRange = Math.floor((today.getTime() - sixMonthsAgo.getTime()) / (1000 * 60 * 60 * 24)); + const daysOffset = (i * 41) % daysInRange; + const timestamp = new Date(sixMonthsAgo); + timestamp.setDate(timestamp.getDate() + daysOffset); + timestamp.setHours((i * 2) % 24); + timestamp.setMinutes((i * 13) % 60); + + data.push({ + TransactionID: `TXN-${paddedId}`, + MerchantName: merchants[merchantIdx], + Category: categories[categoryIdx], + Card: `****${cardNum}`, + Amount: amount, + Timestamp: timestamp, + Status: statuses[statusIdx] + }); + } + return data; +} diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/es5-datasource.js b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/es5-datasource.js new file mode 100644 index 000000000..86e5e02ff --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/es5-datasource.js @@ -0,0 +1,54 @@ +// Static transaction data generator for massive datasets +function generateTransactionData(count) { + var merchants = [ + 'TestVendor Pharma', 'SampleCorp Tours15', 'DemoSoft Airline22', 'TestVendor Mall04', + 'SampleCorp Taxi11', 'DemoSoft Creator18', 'MockData Carrier25', 'TechStore Market', + 'FastFoods Delivery', 'ShopHub Express', 'TravelMax Booking', 'PaymentGateway Pro' + ]; + + var categories = [ + 'Airlines', 'Streaming', 'Travel', 'Ride Share', 'Home & Garden', + 'Retail', 'Entertainment', 'Food & Drink', 'Shopping', 'Utilities' + ]; + + var statuses = ['Declined', 'Pending', 'Cancelled', 'Completed']; + + var data = []; + // Calculate last 6 months date range + var today = new Date(2026, 6, 1); + var sixMonthsAgo = new Date(2026, 0, 1); + + for (var i = 1; i <= count; i++) { + var merchantIdx = (i - 1) % merchants.length; + var categoryIdx = (i - 1) % categories.length; + var statusIdx = (i - 1) % statuses.length; + var amount = 50 + ((i * 17) % 450); + var paddedId = ('00000000' + i).slice(-8); + + // Generate static 4-digit card numbers + var digit1 = (i * 13) % 10; + var digit2 = (i * 23) % 10; + var digit3 = (i * 31) % 10; + var digit4 = (i * 41) % 10; + var cardNum = digit1.toString() + digit2.toString() + digit3.toString() + digit4.toString(); + + // Generate dates within last 6 months + var daysInRange = Math.floor((today.getTime() - sixMonthsAgo.getTime()) / (1000 * 60 * 60 * 24)); + var daysOffset = (i * 41) % daysInRange; + var timestamp = new Date(sixMonthsAgo); + timestamp.setDate(timestamp.getDate() + daysOffset); + timestamp.setHours((i * 2) % 24); + timestamp.setMinutes((i * 13) % 60); + + data.push({ + TransactionID: 'TXN-' + paddedId, + MerchantName: merchants[merchantIdx], + Category: categories[categoryIdx], + Card: '****' + cardNum, + Amount: amount, + Timestamp: timestamp, + Status: statuses[statusIdx] + }); + } + return data; +} diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.css b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.css new file mode 100644 index 000000000..379e90032 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.css @@ -0,0 +1,152 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +/* Transaction and Merchant cell styles */ +.transaction-cell, .merchant-cell { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; +} + +.transaction-cell svg, .merchant-cell svg { + flex-shrink: 0; +} + +/* Category badge styles */ +.category-badge { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 8px; + border-radius: 12px; +} + +.category-badge.category-cell { + background-color: #FEF3C7; + color: #D97706; +} + +/* Status badge styles */ +.status-badge { + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 4px 12px; + border-radius: 4px; +} + +.status-declined { + background-color: rgba(255, 107, 107, 0.1); + color: #FF6B6B; +} + +.status-pending { + background-color: rgba(255, 217, 61, 0.1); + color: #FFD93D; +} + +.status-cancelled { + background-color: rgba(107, 203, 119, 0.1); + color: #6BCB77; +} + +.status-completed { + background-color: rgba(77, 150, 255, 0.1); + color: #4D96FF; +} + +.status-badge svg { + flex-shrink: 0; +} + +/* Amount cell styling */ +.e-grid .e-rowcell[aria-colindex="5"] { + color: #10B981; + font-weight: 600; +} + +/* Timestamp cell styling */ +.timestamp-cell { + font-size: 13px; + color: #4B5563; +} + +/* Description section styling */ +.control-section { + padding: 20px; +} + +.description { + background-color: #F3F4F6; + padding: 16px; + border-radius: 8px; + margin-bottom: 16px; + border-left: 4px solid #6366F1; +} + +.description h4 { + margin: 0 0 12px 0; + color: #1F2937; + font-size: 16px; + font-weight: 600; +} + +.description p { + margin: 8px 0; + color: #4B5563; + font-size: 14px; + line-height: 1.5; +} + +.description strong { + color: #1F2937; + font-weight: 600; +} + +/* Dark theme support */ +.e-bigger.e-dark .category-badge.category-cell, +.e-dark .category-badge.category-cell { + background-color: rgba(251, 191, 36, 0.2); + color: #FCD34D; +} + +.e-bigger.e-dark .description, +.e-dark .description { + background-color: #1F2937; + border-left-color: #818CF8; +} + +.e-bigger.e-dark .description h4, +.e-dark .description h4 { + color: #F9FAFB; +} + +.e-bigger.e-dark .description p, +.e-dark .description p { + color: #D1D5DB; +} + +.e-bigger.e-dark .description strong, +.e-dark .description strong { + color: #F3F4F6; +} + +.e-bigger.e-dark .timestamp-cell, +.e-dark .timestamp-cell { + color: #9CA3AF; +} diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.js b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.js new file mode 100644 index 000000000..3b1e8400f --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.js @@ -0,0 +1,139 @@ +// Template function for Transaction ID with icon +window.transactionTemplate = function(data) { + if (!data || !data.TransactionID) { + return ''; + } + return '
        ' + + '' + + '' + + '' + + '' + + '' + data.TransactionID + '' + + '
        '; +}; + +// Template function for Merchant Name with icon +window.merchantTemplate = function(data) { + if (!data || !data.MerchantName) { + return ''; + } + return '
        ' + + '' + + '' + data.MerchantName + '' + + '
        '; +}; + +// Template function for Category badges with SVG icons +window.categoryTemplate = function(data) { + if (!data || !data.Category) { + return ''; + } + return '
        ' + + '' + + '' + data.Category + '' + + '
        '; +}; + +// Template function for Status with SVG badges +window.statusTemplate = function(data) { + if (!data || !data.Status) { + return ''; + } + var status = data.Status; + var statusClass = 'status-' + status.toLowerCase(); + var svg = ''; + + switch(status) { + case 'Declined': + svg = '' + + '' + + '' + + ''; + break; + case 'Pending': + svg = '' + + '' + + '' + + ''; + break; + case 'Cancelled': + svg = '' + + '' + + '' + + ''; + break; + case 'Completed': + svg = '' + + '' + + '' + + ''; + break; + } + + return '
        ' + svg + '' + status + '
        '; +}; + +// Generate 100,000 transaction records +var transactionData = generateTransactionData(100000); + +ej.grids.Grid.Inject(ej.grids.Selection, ej.grids.DomVirtualization); + +var grid = new ej.grids.Grid({ + dataSource: transactionData, + enableDomVirtualization: true, + height: '500px', + columns: [ + { + field: 'TransactionID', + width: 140, + headerText: 'Transaction ID', + textAlign: 'Left', + template: '#transactionTemplate' + }, + { + field: 'MerchantName', + width: 180, + headerText: 'Merchant Name', + textAlign: 'Left', + template: '#merchantTemplate' + }, + { + field: 'Category', + width: 150, + headerText: 'Category', + textAlign: 'Center', + template: '#categoryTemplate' + }, + { + field: 'Card', + width: 120, + headerText: 'Card', + textAlign: 'Center' + }, + { + field: 'Amount', + width: 110, + headerText: 'Amount', + textAlign: 'Right', + format: 'C2' + }, + { + field: 'Timestamp', + width: 180, + headerText: 'Timestamp', + type: 'datetime', + format: 'yMd', + template: '${Timestamp.toLocaleDateString()}, ${Timestamp.toLocaleTimeString()}' + }, + { + field: 'Status', + width: 140, + headerText: 'Status', + textAlign: 'Center', + template: '#statusTemplate' + } + ], + rowHeight: 50 +}); + +grid.appendTo('#Grid'); diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.ts b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.ts new file mode 100644 index 000000000..83ff88ab6 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/index.ts @@ -0,0 +1,142 @@ +import { Grid, Selection, DomVirtualization } from '@syncfusion/ej2-grids'; +import { generateTransactionData } from './datasource'; + +Grid.Inject(Selection, DomVirtualization); + +// Template function for Transaction ID with icon +(<{ transactionTemplate?: Function }>window).transactionTemplate = (data: any): string => { + if (!data || !data.TransactionID) { + return ''; + } + return `
        + + + + + ${data.TransactionID} +
        `; +}; + +// Template function for Merchant Name with icon +(<{ merchantTemplate?: Function }>window).merchantTemplate = (data: any): string => { + if (!data || !data.MerchantName) { + return ''; + } + return `
        + + ${data.MerchantName} +
        `; +}; + +// Template function for Category badges with SVG icons +(<{ categoryTemplate?: Function }>window).categoryTemplate = (data: any): string => { + if (!data || !data.Category) { + return ''; + } + return `
        + + ${data.Category} +
        `; +}; + +// Template function for Status with SVG badges +(<{ statusTemplate?: Function }>window).statusTemplate = (data: any): string => { + if (!data || !data.Status) { + return ''; + } + const status = data.Status; + const statusClass = `status-${status.toLowerCase()}`; + let svg = ''; + + switch(status) { + case 'Declined': + svg = ` + + + `; + break; + case 'Pending': + svg = ` + + + `; + break; + case 'Cancelled': + svg = ` + + + `; + break; + case 'Completed': + svg = ` + + + `; + break; + } + + return `
        ${svg}${status}
        `; +}; + +// Generate 100,000 transaction records +const transactionData = generateTransactionData(100000); + +let grid: Grid = new Grid({ + dataSource: transactionData, + enableDomVirtualization: true, + height: '500px', + columns: [ + { + field: 'TransactionID', + width: 140, + headerText: 'Transaction ID', + textAlign: 'Left', + template: '#transactionTemplate' + }, + { + field: 'MerchantName', + width: 180, + headerText: 'Merchant Name', + textAlign: 'Left', + template: '#merchantTemplate' + }, + { + field: 'Category', + width: 150, + headerText: 'Category', + textAlign: 'Center', + template: '#categoryTemplate' + }, + { + field: 'Card', + width: 120, + headerText: 'Card', + textAlign: 'Center' + }, + { + field: 'Amount', + width: 110, + headerText: 'Amount', + textAlign: 'Right', + format: 'C2' + }, + { + field: 'Timestamp', + width: 180, + headerText: 'Timestamp', + type: 'datetime', + format: 'yMd', + template: '${Timestamp.toLocaleDateString()}, ${Timestamp.toLocaleTimeString()}' + }, + { + field: 'Status', + width: 140, + headerText: 'Status', + textAlign: 'Center', + template: '#statusTemplate' + } + ], + rowHeight: 50 +}); + +grid.appendTo('#Grid'); diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/js/index.html b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/js/index.html new file mode 100644 index 000000000..a48ffc7c1 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/js/index.html @@ -0,0 +1,55 @@ + + + + + EJ2 Grid - DOM Virtualization Massive Dataset + + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + +
        +
        + + + + + + diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/systemjs.config.js new file mode 100644 index 000000000..8d9de17ae --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/24.2.3/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js', + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js" + }, + meta: { + '*.json': { loader: 'plugin-json' } + } +}); +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); diff --git a/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/ts/index.html new file mode 100644 index 000000000..9d36948a5 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/dom-virtualization-massive-cs1/ts/index.html @@ -0,0 +1,47 @@ + + + + + EJ2 Grid - DOM Virtualization Massive Dataset + + + + + + + + + + + + + + + + + + + + +
        Loading....
        +
        + + + + + + + + +
        +
        + + diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/datasource.ts b/ej2-javascript/code-snippet/grid/excel-filter-cs6/datasource.ts new file mode 100644 index 000000000..91469ad24 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/datasource.ts @@ -0,0 +1,402 @@ +export let ordersTrackData: Object[] = [ + { + "OrderID": "ORD1001", + "CustomerName": "Eve Green", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-04-25"), + "Amount": 148.14 + }, + { + "OrderID": "ORD1002", + "CustomerName": "Jack Black", + "Product": "Bag", + "Status": "Canceled", + "OrderDate": new Date("2025-01-17"), + "Amount": 39.50 + }, + { + "OrderID": "ORD1003", + "CustomerName": "David Brown", + "Product": "Shoe", + "Status": "Pending", + "OrderDate": new Date("2025-10-15"), + "Amount": 206.85 + }, + { + "OrderID": "ORD1004", + "CustomerName": "Olivia Purple", + "Product": "Headphone", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-10-29"), + "Amount": 285.41 + }, + { + "OrderID": "ORD1005", + "CustomerName": "Alice Johnson", + "Product": "Tablet", + "Status": "In Transit", + "OrderDate": new Date("2025-05-23"), + "Amount": 163.92 + }, + { + "OrderID": "ORD1006", + "CustomerName": "Grace Lee", + "Product": "Bag", + "Status": "In Transit", + "OrderDate": new Date("2025-02-19"), + "Amount": 365.39 + }, + { + "OrderID": "ORD1007", + "CustomerName": "Noah Green", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-08-24"), + "Amount": 540.87 + }, + { + "OrderID": "ORD1008", + "CustomerName": "Henry Taylor", + "Product": "Shoe", + "Status": "Pending", + "OrderDate": new Date("2025-11-18"), + "Amount": 622.33 + }, + { + "OrderID": "ORD1009", + "CustomerName": "Kelly Gray", + "Product": "Headphone", + "Status": "Pending", + "OrderDate": new Date("2025-01-24"), + "Amount": 664.65 + }, + { + "OrderID": "ORD1010", + "CustomerName": "Henry Taylor", + "Product": "Headphone", + "Status": "Pending", + "OrderDate": new Date("2025-07-14"), + "Amount": 285.19 + }, + { + "OrderID": "ORD1011", + "CustomerName": "Alice Johnson", + "Product": "Phone", + "Status": "Out For Delivery", + "OrderDate": new Date("2025-04-18"), + "Amount": 673.47 + }, + { + "OrderID": "ORD1012", + "CustomerName": "Noah Green", + "Product": "Watch", + "Status": "Canceled", + "OrderDate": new Date("2025-03-25"), + "Amount": 467.64 + }, + { + "OrderID": "ORD1013", + "CustomerName": "Jack Black", + "Product": "Headphone", + "Status": "In Transit", + "OrderDate": new Date("2025-01-29"), + "Amount": 236.76 + }, + { + "OrderID": "ORD1014", + "CustomerName": "Mia Blue", + "Product": "Tablet", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-02-03"), + "Amount": 218.87 + }, + { + "OrderID": "ORD1015", + "CustomerName": "Carol Davis", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-11-26"), + "Amount": 464.26 + }, + { + "OrderID": "ORD1016", + "CustomerName": "Frank Miller", + "Product": "Headphone", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-10-27"), + "Amount": 434.15 + }, + { + "OrderID": "ORD1017", + "CustomerName": "Rose Pink", + "Product": "Headphone", + "Status": "Shipped", + "OrderDate": new Date("2025-09-18"), + "Amount": 498.58 + }, + { + "OrderID": "ORD1018", + "CustomerName": "Grace Lee", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-12-15"), + "Amount": 427.94 + }, + { + "OrderID": "ORD1019", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-09-28"), + "Amount": 258.90 + }, + { + "OrderID": "ORD1020", + "CustomerName": "Grace Lee", + "Product": "Shoe", + "Status": "Shipped", + "OrderDate": new Date("2025-11-25"), + "Amount": 346.77 + }, + { + "OrderID": "ORD1021", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-01-02"), + "Amount": 954.28 + }, + { + "OrderID": "ORD1022", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-11-17"), + "Amount": 305.46 + }, + { + "OrderID": "ORD1023", + "CustomerName": "Noah Green", + "Product": "Headphone", + "Status": "Shipped", + "OrderDate": new Date("2025-07-11"), + "Amount": 764.89 + }, + { + "OrderID": "ORD1024", + "CustomerName": "Ivy White", + "Product": "Shirt", + "Status": "Out For Delivery", + "OrderDate": new Date("2025-09-08"), + "Amount": 29.28 + }, + { + "OrderID": "ORD1025", + "CustomerName": "Bob Wilson", + "Product": "Headphone", + "Status": "Pending", + "OrderDate": new Date("2025-05-04"), + "Amount": 879.23 + }, + { + "OrderID": "ORD1026", + "CustomerName": "Henry Taylor", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-09-30"), + "Amount": 768.18 + }, + { + "OrderID": "ORD1027", + "CustomerName": "Paul Orange", + "Product": "Shoe", + "Status": "Shipped", + "OrderDate": new Date("2025-05-16"), + "Amount": 532.40 + }, + { + "OrderID": "ORD1028", + "CustomerName": "Carol Davis", + "Product": "Shoe", + "Status": "Canceled", + "OrderDate": new Date("2025-06-09"), + "Amount": 405.00 + }, + { + "OrderID": "ORD1029", + "CustomerName": "Leo Red", + "Product": "Shoe", + "Status": "Shipped", + "OrderDate": new Date("2025-03-03"), + "Amount": 255.43 + }, + { + "OrderID": "ORD1030", + "CustomerName": "Mia Blue", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-10-29"), + "Amount": 228.02 + }, + { + "OrderID": "ORD1031", + "CustomerName": "Jane Smith", + "Product": "Headphone", + "Status": "Pending", + "OrderDate": new Date("2025-01-17"), + "Amount": 861.04 + }, + { + "OrderID": "ORD1032", + "CustomerName": "Ivy White", + "Product": "Headphone", + "Status": "Shipped", + "OrderDate": new Date("2025-12-09"), + "Amount": 490.56 + }, + { + "OrderID": "ORD1033", + "CustomerName": "Frank Miller", + "Product": "Book", + "Status": "Canceled", + "OrderDate": new Date("2025-05-05"), + "Amount": 786.77 + }, + { + "OrderID": "ORD1034", + "CustomerName": "Carol Davis", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-12-04"), + "Amount": 436.74 + }, + { + "OrderID": "ORD1035", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-12-11"), + "Amount": 656.92 + }, + { + "OrderID": "ORD1036", + "CustomerName": "Jane Smith", + "Product": "Tablet", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-02-25"), + "Amount": 256.17 + }, + { + "OrderID": "ORD1037", + "CustomerName": "Jack Black", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-08-05"), + "Amount": 191.65 + }, + { + "OrderID": "ORD1038", + "CustomerName": "David Brown", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-10-09"), + "Amount": 106.93 + }, + { + "OrderID": "ORD1039", + "CustomerName": "Eve Green", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-03-27"), + "Amount": 412.35 + }, + { + "OrderID": "ORD1040", + "CustomerName": "Carol Davis", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-03-26"), + "Amount": 385.18 + }, + { + "OrderID": "ORD1041", + "CustomerName": "John Doe", + "Product": "Camera", + "Status": "In Transit", + "OrderDate": new Date("2025-08-05"), + "Amount": 699.63 + }, + { + "OrderID": "ORD1042", + "CustomerName": "Frank Miller", + "Product": "Headphone", + "Status": "Out For Delivery", + "OrderDate": new Date("2025-04-22"), + "Amount": 969.02 + }, + { + "OrderID": "ORD1043", + "CustomerName": "Jane Smith", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-01-26"), + "Amount": 588.34 + }, + { + "OrderID": "ORD1044", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-09-18"), + "Amount": 89.31 + }, + { + "OrderID": "ORD1045", + "CustomerName": "Henry Taylor", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-12-12"), + "Amount": 863.20 + }, + { + "OrderID": "ORD1046", + "CustomerName": "Grace Lee", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-10-24"), + "Amount": 598.57 + }, + { + "OrderID": "ORD1047", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "In Transit", + "OrderDate": new Date("2025-05-14"), + "Amount": 212.22 + }, + { + "OrderID": "ORD1048", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-03-09"), + "Amount": 674.97 + }, + { + "OrderID": "ORD1049", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-01-05"), + "Amount": 463.70 + }, + { + "OrderID": "ORD1050", + "CustomerName": "Henry Taylor", + "Product": "Shoe", + "Status": "Shipped", + "OrderDate": new Date("2025-09-17"), + "Amount": 272.55 + } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/es5-datasource.js b/ej2-javascript/code-snippet/grid/excel-filter-cs6/es5-datasource.js new file mode 100644 index 000000000..abee84ec1 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/es5-datasource.js @@ -0,0 +1,402 @@ +var ordersTrackData = [ + { + "OrderID": "ORD1001", + "CustomerName": "Eve Green", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-04-25"), + "Amount": 148.14 + }, + { + "OrderID": "ORD1002", + "CustomerName": "Jack Black", + "Product": "Bag", + "Status": "Canceled", + "OrderDate": new Date("2025-01-17"), + "Amount": 39.50 + }, + { + "OrderID": "ORD1003", + "CustomerName": "David Brown", + "Product": "Shoe", + "Status": "Pending", + "OrderDate": new Date("2025-10-15"), + "Amount": 206.85 + }, + { + "OrderID": "ORD1004", + "CustomerName": "Olivia Purple", + "Product": "Headphone", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-10-29"), + "Amount": 285.41 + }, + { + "OrderID": "ORD1005", + "CustomerName": "Alice Johnson", + "Product": "Tablet", + "Status": "In Transit", + "OrderDate": new Date("2025-05-23"), + "Amount": 163.92 + }, + { + "OrderID": "ORD1006", + "CustomerName": "Grace Lee", + "Product": "Bag", + "Status": "In Transit", + "OrderDate": new Date("2025-02-19"), + "Amount": 365.39 + }, + { + "OrderID": "ORD1007", + "CustomerName": "Noah Green", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-08-24"), + "Amount": 540.87 + }, + { + "OrderID": "ORD1008", + "CustomerName": "Henry Taylor", + "Product": "Shoe", + "Status": "Pending", + "OrderDate": new Date("2025-11-18"), + "Amount": 622.33 + }, + { + "OrderID": "ORD1009", + "CustomerName": "Kelly Gray", + "Product": "Headphone", + "Status": "Pending", + "OrderDate": new Date("2025-01-24"), + "Amount": 664.65 + }, + { + "OrderID": "ORD1010", + "CustomerName": "Henry Taylor", + "Product": "Headphone", + "Status": "Pending", + "OrderDate": new Date("2025-07-14"), + "Amount": 285.19 + }, + { + "OrderID": "ORD1011", + "CustomerName": "Alice Johnson", + "Product": "Phone", + "Status": "Out For Delivery", + "OrderDate": new Date("2025-04-18"), + "Amount": 673.47 + }, + { + "OrderID": "ORD1012", + "CustomerName": "Noah Green", + "Product": "Watch", + "Status": "Canceled", + "OrderDate": new Date("2025-03-25"), + "Amount": 467.64 + }, + { + "OrderID": "ORD1013", + "CustomerName": "Jack Black", + "Product": "Headphone", + "Status": "In Transit", + "OrderDate": new Date("2025-01-29"), + "Amount": 236.76 + }, + { + "OrderID": "ORD1014", + "CustomerName": "Mia Blue", + "Product": "Tablet", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-02-03"), + "Amount": 218.87 + }, + { + "OrderID": "ORD1015", + "CustomerName": "Carol Davis", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-11-26"), + "Amount": 464.26 + }, + { + "OrderID": "ORD1016", + "CustomerName": "Frank Miller", + "Product": "Headphone", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-10-27"), + "Amount": 434.15 + }, + { + "OrderID": "ORD1017", + "CustomerName": "Rose Pink", + "Product": "Headphone", + "Status": "Shipped", + "OrderDate": new Date("2025-09-18"), + "Amount": 498.58 + }, + { + "OrderID": "ORD1018", + "CustomerName": "Grace Lee", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-12-15"), + "Amount": 427.94 + }, + { + "OrderID": "ORD1019", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-09-28"), + "Amount": 258.90 + }, + { + "OrderID": "ORD1020", + "CustomerName": "Grace Lee", + "Product": "Shoe", + "Status": "Shipped", + "OrderDate": new Date("2025-11-25"), + "Amount": 346.77 + }, + { + "OrderID": "ORD1021", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-01-02"), + "Amount": 954.28 + }, + { + "OrderID": "ORD1022", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-11-17"), + "Amount": 305.46 + }, + { + "OrderID": "ORD1023", + "CustomerName": "Noah Green", + "Product": "Headphone", + "Status": "Shipped", + "OrderDate": new Date("2025-07-11"), + "Amount": 764.89 + }, + { + "OrderID": "ORD1024", + "CustomerName": "Ivy White", + "Product": "Shirt", + "Status": "Out For Delivery", + "OrderDate": new Date("2025-09-08"), + "Amount": 29.28 + }, + { + "OrderID": "ORD1025", + "CustomerName": "Bob Wilson", + "Product": "Headphone", + "Status": "Pending", + "OrderDate": new Date("2025-05-04"), + "Amount": 879.23 + }, + { + "OrderID": "ORD1026", + "CustomerName": "Henry Taylor", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-09-30"), + "Amount": 768.18 + }, + { + "OrderID": "ORD1027", + "CustomerName": "Paul Orange", + "Product": "Shoe", + "Status": "Shipped", + "OrderDate": new Date("2025-05-16"), + "Amount": 532.40 + }, + { + "OrderID": "ORD1028", + "CustomerName": "Carol Davis", + "Product": "Shoe", + "Status": "Canceled", + "OrderDate": new Date("2025-06-09"), + "Amount": 405.00 + }, + { + "OrderID": "ORD1029", + "CustomerName": "Leo Red", + "Product": "Shoe", + "Status": "Shipped", + "OrderDate": new Date("2025-03-03"), + "Amount": 255.43 + }, + { + "OrderID": "ORD1030", + "CustomerName": "Mia Blue", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-10-29"), + "Amount": 228.02 + }, + { + "OrderID": "ORD1031", + "CustomerName": "Jane Smith", + "Product": "Headphone", + "Status": "Pending", + "OrderDate": new Date("2025-01-17"), + "Amount": 861.04 + }, + { + "OrderID": "ORD1032", + "CustomerName": "Ivy White", + "Product": "Headphone", + "Status": "Shipped", + "OrderDate": new Date("2025-12-09"), + "Amount": 490.56 + }, + { + "OrderID": "ORD1033", + "CustomerName": "Frank Miller", + "Product": "Book", + "Status": "Canceled", + "OrderDate": new Date("2025-05-05"), + "Amount": 786.77 + }, + { + "OrderID": "ORD1034", + "CustomerName": "Carol Davis", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-12-04"), + "Amount": 436.74 + }, + { + "OrderID": "ORD1035", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-12-11"), + "Amount": 656.92 + }, + { + "OrderID": "ORD1036", + "CustomerName": "Jane Smith", + "Product": "Tablet", + "Status": "Ready To Ship", + "OrderDate": new Date("2025-02-25"), + "Amount": 256.17 + }, + { + "OrderID": "ORD1037", + "CustomerName": "Jack Black", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-08-05"), + "Amount": 191.65 + }, + { + "OrderID": "ORD1038", + "CustomerName": "David Brown", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-10-09"), + "Amount": 106.93 + }, + { + "OrderID": "ORD1039", + "CustomerName": "Eve Green", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-03-27"), + "Amount": 412.35 + }, + { + "OrderID": "ORD1040", + "CustomerName": "Carol Davis", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-03-26"), + "Amount": 385.18 + }, + { + "OrderID": "ORD1041", + "CustomerName": "John Doe", + "Product": "Camera", + "Status": "In Transit", + "OrderDate": new Date("2025-08-05"), + "Amount": 699.63 + }, + { + "OrderID": "ORD1042", + "CustomerName": "Frank Miller", + "Product": "Headphone", + "Status": "Out For Delivery", + "OrderDate": new Date("2025-04-22"), + "Amount": 969.02 + }, + { + "OrderID": "ORD1043", + "CustomerName": "Jane Smith", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-01-26"), + "Amount": 588.34 + }, + { + "OrderID": "ORD1044", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-09-18"), + "Amount": 89.31 + }, + { + "OrderID": "ORD1045", + "CustomerName": "Henry Taylor", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-12-12"), + "Amount": 863.20 + }, + { + "OrderID": "ORD1046", + "CustomerName": "Grace Lee", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-10-24"), + "Amount": 598.57 + }, + { + "OrderID": "ORD1047", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "In Transit", + "OrderDate": new Date("2025-05-14"), + "Amount": 212.22 + }, + { + "OrderID": "ORD1048", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-03-09"), + "Amount": 674.97 + }, + { + "OrderID": "ORD1049", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-01-05"), + "Amount": 463.70 + }, + { + "OrderID": "ORD1050", + "CustomerName": "Henry Taylor", + "Product": "Shoe", + "Status": "Shipped", + "OrderDate": new Date("2025-09-17"), + "Amount": 272.55 + } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.css b/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.css new file mode 100644 index 000000000..09c8e70c4 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue', 'calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.js b/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.js new file mode 100644 index 000000000..a865b50dd --- /dev/null +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.js @@ -0,0 +1,35 @@ +ej.grids.Grid.Inject(ej.grids.Filter); + +var filtertype = [ + { id: 'CheckBox', type: 'CheckBox' }, + { id: 'Excel', type: 'Excel' } +]; + +var grid = new ej.grids.Grid({ + dataSource: ordersTrackData, + allowFiltering: true, + filterSettings: { type: 'CheckBox', mode: 'Immediate' }, + columns: [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true }, + { field: 'CustomerName', headerText: 'Customer Name', width: 120 }, + { field: 'OrderDate', headerText: 'Order Date', width: 100, format: 'yMd', textAlign: 'Right' }, + { field: 'Product', headerText: 'Product', width: 80 }, + { field: 'Status', headerText: 'Status', width: 80 }, + { field: 'Amount', headerText: 'Amount', textAlign: 'Right', width: 80 } + ] +}); +grid.appendTo('#Grid'); + +let dropDownFilterType = new ej.dropdowns.DropDownList({ + dataSource: filtertype, + width: '150px', + fields: { text: 'type', value: 'id' }, + value: 'CheckBox', + change: (e) => { + let dropSelectedValue = e.value; + grid.filterSettings.type = dropSelectedValue; + grid.filterSettings.mode = 'Immediate'; + grid.clearFiltering(); + } +}); +dropDownFilterType.appendTo('#filterType'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.ts b/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.ts new file mode 100644 index 000000000..14d0ebe4f --- /dev/null +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/index.ts @@ -0,0 +1,39 @@ +import { Grid, Filter, Page, FilterType } from '@syncfusion/ej2-grids'; +import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; +import { ordersTrackData } from './datasource.ts'; + +Grid.Inject(Filter, Page); + +let filtertype: { [key: string]: Object }[] = [ + { id: 'CheckBox', type: 'CheckBox' }, + { id: 'Excel', type: 'Excel' } +]; + +let grid: Grid = new Grid({ + dataSource: ordersTrackData, + allowFiltering: true, + filterSettings: { type: 'CheckBox', mode: 'Immediate' }, + columns: [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true }, + { field: 'CustomerName', headerText: 'Customer Name', width: 120 }, + { field: 'OrderDate', headerText: 'Order Date', width: 100, format: 'yMd', textAlign: 'Right' }, + { field: 'Product', headerText: 'Product', width: 80 }, + { field: 'Status', headerText: 'Status', width: 80 }, + { field: 'Amount', headerText: 'Amount', textAlign: 'Right', width: 80 } + ] +}); +grid.appendTo('#Grid'); + +let dropDownFilterType: DropDownList = new DropDownList({ + dataSource: filtertype, + width: '150px', + fields: { text: 'type', value: 'id' }, + value: 'CheckBox', + change: (e: ChangeEventArgs) => { + let dropSelectedValue: FilterType = e.value; + grid.filterSettings.type = dropSelectedValue; + grid.filterSettings.mode = 'Immediate'; + grid.clearFiltering(); + } +}); +dropDownFilterType.appendTo('#filterType'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/js/index.html b/ej2-javascript/code-snippet/grid/excel-filter-cs6/js/index.html new file mode 100644 index 000000000..caabe2e42 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/js/index.html @@ -0,0 +1,42 @@ + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + + + + + +
        +
        + + +
        +
        +
        + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/systemjs.config.js b/ej2-javascript/code-snippet/grid/excel-filter-cs6/systemjs.config.js new file mode 100644 index 000000000..7fa0fa10b --- /dev/null +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/systemjs.config.js @@ -0,0 +1,46 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/24.2.3/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js', + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + }, + meta: { + '*.json': { loader: 'plugin-json' } + } +}); +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/ts/index.html b/ej2-javascript/code-snippet/grid/excel-filter-cs6/ts/index.html new file mode 100644 index 000000000..3f976c45c --- /dev/null +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/ts/index.html @@ -0,0 +1,38 @@ + + + + EJ2 Grid + + + + + + + + + + + + + + + + + + + + + + + + + +
        +
        + + +
        +
        +
        + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.css b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.css new file mode 100644 index 000000000..629958c3b --- /dev/null +++ b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.css @@ -0,0 +1,30 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#Grid .emp-id-cell, +#Grid .emp-name-cell, +#Grid .designation-cell, +#Grid .location-cell { + display: flex; + align-items: center; + gap: 8px; +} + +#Grid .emp-id-cell svg, +#Grid .emp-name-cell svg, +#Grid .designation-cell svg, +#Grid .location-cell svg { + flex-shrink: 0; + } \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.js b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.js new file mode 100644 index 000000000..582282cbb --- /dev/null +++ b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.js @@ -0,0 +1,112 @@ +// Template function for Employee ID with icon +window.employeeIDDetail = function(e) { + var container = document.createElement('div'); + container.className = 'emp-id-cell'; + container.innerHTML = '' + + '' + + '' + + '' + + '' + e.EmployeeID + ''; + return container.outerHTML; +}; + +// Template function for Employee Name with icon +window.employeeNameDetail = function(e) { + var container = document.createElement('div'); + container.className = 'emp-name-cell'; + container.innerHTML = '' + + '' + + '' + + '' + + '' + e.Employees + ''; + return container.outerHTML; +}; + +// Template function for Designation with icon +window.designationDetail = function(e) { + var container = document.createElement('div'); + container.className = 'designation-cell'; + container.innerHTML = '' + + '' + + '' + + '' + + '' + + '' + e.Designation + ''; + return container.outerHTML; +}; + +// Template function for Location with icon +window.locationDetail = function(e) { + var container = document.createElement('div'); + container.className = 'location-cell'; + container.innerHTML = '' + + '' + + '' + + '' + + '' + e.Location + ''; + return container.outerHTML; +}; + +// Remote data service URL - fetches 100,000 employee records +var urlapi = new ej.data.DataManager({ + url: 'https://services.syncfusion.com/js/production/api/UrlDataSource', + adaptor: new ej.data.UrlAdaptor() +}); + +ej.grids.Grid.Inject(ej.grids.Selection, ej.grids.Sort, ej.grids.Filter, ej.grids.VirtualScroll, ej.grids.DomVirtualization); + +var grid = new ej.grids.Grid({ + dataSource: urlapi, + query: new ej.data.Query().addParams('dataCount', '100000'), + allowSelection: true, + allowFiltering: true, + allowSorting: true, + enableVirtualization: true, + enableDomVirtualization: true, + domVirtualizationSettings: { rowBuffer: 10 }, + pageSettings: { pageSize: 50 }, + filterSettings: { type: 'CheckBox' }, + height: 400, + rowHeight: 50, + clipMode: 'EllipsisWithTooltip', + columns: [ + { + field: 'EmployeeID', + visible: true, + headerText: 'Employee ID', + isPrimaryKey: true, + width: 150, + template: '#employeeIDTemplate' + }, + { + field: 'Employees', + headerText: 'Employee Name', + width: 220, + template: '#employeeNameTemplate' + }, + { + field: 'Designation', + headerText: 'Designation', + width: 180, + template: '#designationTemplate' + }, + { + field: 'Mail', + headerText: 'Email', + width: 230 + }, + { + field: 'Address', + headerText: 'Address', + width: 240 + }, + { + field: 'Location', + width: 160, + headerText: 'Location', + template: '#locationTemplate' + } + ] +}); + +grid.appendTo('#Grid'); diff --git a/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.ts b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.ts new file mode 100644 index 000000000..79b88e81e --- /dev/null +++ b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/index.ts @@ -0,0 +1,115 @@ +import { Grid, Selection, Sort, Filter, DomVirtualization } from '@syncfusion/ej2-grids'; +import { DataManager, UrlAdaptor, Query } from '@syncfusion/ej2-data'; + +Grid.Inject(Selection, Sort, Filter, DomVirtualization); + +// Template function for Employee ID with icon +(<{ employeeIDDetail?: Function }>window).employeeIDDetail = (e: any): any => { + const container: HTMLElement = document.createElement('div'); + container.className = 'emp-id-cell'; + container.innerHTML = ` + + + + ${e.EmployeeID}`; + return container.outerHTML; +}; + +// Template function for Employee Name with icon +(<{ employeeNameDetail?: Function }>window).employeeNameDetail = (e: any): any => { + const container: HTMLElement = document.createElement('div'); + container.className = 'emp-name-cell'; + container.innerHTML = ` + + + + ${e.Employees}`; + return container.outerHTML; +}; + +// Template function for Designation with icon +(<{ designationDetail?: Function }>window).designationDetail = (e: any): any => { + const container: HTMLElement = document.createElement('div'); + container.className = 'designation-cell'; + container.innerHTML = ` + + + + + ${e.Designation}`; + return container.outerHTML; +}; + +// Template function for Location with icon +(<{ locationDetail?: Function }>window).locationDetail = (e: any): any => { + const container: HTMLDivElement = document.createElement('div'); + container.className = 'location-cell'; + container.innerHTML = ` + + + + ${e.Location}`; + return container.outerHTML; +}; + +// Remote data service URL - fetches 100,000 employee records +let urlapi: DataManager = new DataManager({ + url: 'https://services.syncfusion.com/js/production/api/UrlDataSource', + adaptor: new UrlAdaptor() +}); + +let grid: Grid = new Grid({ + dataSource: urlapi, + query: new Query().addParams('dataCount', '100000'), + allowSelection: true, + allowFiltering: true, + allowSorting: true, + enableVirtualization: true, + enableDomVirtualization: true, + domVirtualizationSettings: { rowBuffer: 10 }, + pageSettings: { pageSize: 50 }, + filterSettings: { type: 'CheckBox' }, + height: 400, + rowHeight: 50, + clipMode: 'EllipsisWithTooltip', + columns: [ + { + field: 'EmployeeID', + visible: true, + headerText: 'Employee ID', + isPrimaryKey: true, + width: 150, + template: '#employeeIDTemplate' + }, + { + field: 'Employees', + headerText: 'Employee Name', + width: 220, + template: '#employeeNameTemplate' + }, + { + field: 'Designation', + headerText: 'Designation', + width: 180, + template: '#designationTemplate' + }, + { + field: 'Mail', + headerText: 'Email', + width: 230 + }, + { + field: 'Address', + headerText: 'Address', + width: 240 + }, + { + field: 'Location', + width: 160, + headerText: 'Location', + template: '#locationTemplate' + } + ] +}); + +grid.appendTo('#Grid'); diff --git a/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/js/index.html b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/js/index.html new file mode 100644 index 000000000..b6c6d7988 --- /dev/null +++ b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/js/index.html @@ -0,0 +1,54 @@ + + + + + EJ2 Grid - Virtual Scroll Mode + + + + + + + + + + + + + + + + + + + +
        + + + + + + + + +
        +
        + + + + + + diff --git a/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/systemjs.config.js b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/systemjs.config.js new file mode 100644 index 000000000..8d9de17ae --- /dev/null +++ b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/systemjs.config.js @@ -0,0 +1,43 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/24.2.3/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js', + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js" + }, + meta: { + '*.json': { loader: 'plugin-json' } + } +}); +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); diff --git a/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/ts/index.html b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/ts/index.html new file mode 100644 index 000000000..d8f3b35be --- /dev/null +++ b/ej2-javascript/code-snippet/grid/virtual-scroll-cs1/ts/index.html @@ -0,0 +1,47 @@ + + + + + EJ2 Grid - Virtual Scroll Mode + + + + + + + + + + + + + + + + + + + + +
        Loading....
        +
        + + + + + + + + +
        +
        + + diff --git a/ej2-javascript/grid/filtering/excel-like-filter.md b/ej2-javascript/grid/filtering/excel-like-filter.md index d8edbbb87..0baa6d4d6 100644 --- a/ej2-javascript/grid/filtering/excel-like-filter.md +++ b/ej2-javascript/grid/filtering/excel-like-filter.md @@ -78,15 +78,48 @@ Here is an example that showcasing how to render the check box filter within the {% previewsample "page.domainurl/code-snippet/grid/excel-filter-cs1" %} {% endif %} +## Filter modes + +The Grid `Excel` and `CheckBox` filtering features support two modes, `Default` and `Immediate`. In `Default` mode, filter changes are applied only after clicking the "Filter" or "OK" button in the filter dialog, which is the default behavior. In `Immediate` mode, filters are applied automatically when filter items are checked or unchecked in the filter dialog. + +The following example enables immediate mode by setting the `filterSettings.mode` property to `Immediate`: + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/excel-filter-cs6/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/excel-filter-cs6/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/excel-filter-cs6" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/excel-filter-cs6/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/excel-filter-cs6/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/excel-filter-cs6" %} +{% endif %} + ## Customize the filter choice count By default, the filter choice count is set to 1000, which means that the filter dialog will display a maximum of 1000 distinct values for each column as a checkbox list data. This default value ensures that the filter operation remains efficient, even with large datasets. Additionally, the filter dialog retrieves and displays distinct data from the first 1000 records bind to the Grid to optimize performance, while the remaining records are returned as a result of the search option within the filter dialog. The Grid control allows you to customize the number of distinct data displayed in the checkbox list of the excel/checkbox type filter dialog. This can be useful when you want to customize the default filter choice count values while using large datasets. -However, you have the flexibility to increase or decrease the filter choice count based on your specific requirements. This can be achieved by adjusting the [filterChoiceCount](../../api/grid/filterSearchBeginEventArgs/#filterchoicecount) value. +However, you have the flexibility to increase or decrease the filter choice count based on your specific requirements. This can be achieved by adjusting the [filterChoiceCount](../../api/grid/filterSearchBeginEventArgs#filterchoicecount) value. -The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [actionBegin](../../api/grid/#actionbegin) event, you need to check if the [requestType](../../api/grid/filterEventArgs/#requesttype) is either `filterChoiceRequest` or `filterSearchBegin`, and then you can set the `filterChoiceCount` property to the desired value. +The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [actionBegin](../../api/grid#actionbegin) event, you need to check if the [requestType](../../api/grid/filterEventArgs#requesttype) is either `filterChoiceRequest` or `filterSearchBegin`, and then you can set the `filterChoiceCount` property to the desired value. {% if page.publishingplatform == "typescript" %} @@ -239,7 +272,7 @@ The following example demonstrates how to remove the context menu option in the ## Bind custom remote datasource for excel/checkbox filtering -The ##Platform_Name## Grid allows you to dynamically change the filter data source for the Excel or checkbox filter module using custom remote data as well. This can be done by either assigning a custom remote [DataManager](../../data/getting-started) as the [dataSource](../../api/grid/#datasource) or by fetching the data initially and storing it in a global variable. This data can then be bound directly to the filter module's `dataSource` in the [actionBegin](../../api/grid/#actionbegin) event for the `filterBeforeOpen` [requestType](../../api/grid/filterEventArgs/#requesttype), as detailed in our [knowledge base](https://support.syncfusion.com/kb/article/10065/how-to-change-the-data-source-for-checkbox-filter-popup-in-grid). +The ##Platform_Name## Grid allows you to dynamically change the filter data source for the Excel or checkbox filter module using custom remote data as well. This can be done by either assigning a custom remote [DataManager](../../data/getting-started) as the [dataSource](../../api/grid#datasource) or by fetching the data initially and storing it in a global variable. This data can then be bound directly to the filter module's `dataSource` in the [actionBegin](../../api/grid#actionbegin) event for the `filterBeforeOpen` [requestType](../../api/grid/filterEventArgs#requesttype), as detailed in our [knowledge base](https://support.syncfusion.com/kb/article/10065/how-to-change-the-data-source-for-checkbox-filter-popup-in-grid). The following example demonstrates how to dynamically change the remote custom data source for all columns in the Excel or checkbox filter dialog using a `DataManager` with `WebApiAdaptor`. @@ -315,13 +348,13 @@ Here is a simple example demonstrating how to hide the sorting options in the Ex The Excel/Checkbox filter type of Grid has a restriction where only the first 1000 unique sorted items are accessible to view in the filter dialog checkbox list content by scrolling. This limitation is in place to avoid any rendering delays when opening the filter dialog. However, the searching and filtering processes consider all unique items in that particular column. -The Excel/Checkbox filter in the Grid provides an option to load large data sets on-demand during scrolling to improve scrolling limitation functionality. This is achieved by setting the [filterSettings->enableInfiniteScrolling](../../api/grid/filterSettings/#enableinfinitescrolling) property to **true**. This feature proves especially beneficial for managing extensive datasets, enhancing data loading performance in the checkbox list, and allowing interactive checkbox selection with persistence for the selection based on filtering criteria. +The Excel/Checkbox filter in the Grid provides an option to load large data sets on-demand during scrolling to improve scrolling limitation functionality. This is achieved by setting the [filterSettings->enableInfiniteScrolling](../../api/grid/filterSettings#enableinfinitescrolling) property to **true**. This feature proves especially beneficial for managing extensive datasets, enhancing data loading performance in the checkbox list, and allowing interactive checkbox selection with persistence for the selection based on filtering criteria. -The Excel/Checkbox filter retrieves distinct data in ascending order, governed by its [filterSettings->itemsCount](../../api/grid/filterSettings/#itemscount) property, with a default value of **50**. As the checkbox list data scroller reaches its end, the next dataset is fetched and displayed, with the notable advantage that this process only requests new checkbox list data without redundantly fetching the existing loaded dataset. +The Excel/Checkbox filter retrieves distinct data in ascending order, governed by its [filterSettings->itemsCount](../../api/grid/filterSettings#itemscount) property, with a default value of **50**. As the checkbox list data scroller reaches its end, the next dataset is fetched and displayed, with the notable advantage that this process only requests new checkbox list data without redundantly fetching the existing loaded dataset. ### Customize the items count for initial rendering -Based on the items count value, the Excel/Checkbox filter gets unique data and displayed in Excel/Checkbox filter content dialog. You can customize the count of on-demand data rendering for Excel/Checkbox filter by adjusting the [filterSettings->itemsCount](../../api/grid/filterSettings/#itemscount) property. The default value is `50` +Based on the items count value, the Excel/Checkbox filter gets unique data and displayed in Excel/Checkbox filter content dialog. You can customize the count of on-demand data rendering for Excel/Checkbox filter by adjusting the [filterSettings->itemsCount](../../api/grid/filterSettings#itemscount) property. The default value is `50` ```ts grid.filterSettings = { enableInfiniteScrolling = true, itemsCount = 40 }; @@ -331,7 +364,7 @@ grid.filterSettings = { enableInfiniteScrolling = true, itemsCount = 40 }; ### Customize the loading animation effect -A loading effect is presented to signify that loading is in progress when the checkbox list data scroller reaches the end, and there is a delay in receiving the data response from the server. The loading effect during on-demand data retrieval for Excel/Checkbox filter can be customized using the [filterSettings->loadingIndicator](../../api/grid/filterSettings/#loadingindicator) property. The default value is `Shimmer`. +A loading effect is presented to signify that loading is in progress when the checkbox list data scroller reaches the end, and there is a delay in receiving the data response from the server. The loading effect during on-demand data retrieval for Excel/Checkbox filter can be customized using the [filterSettings->loadingIndicator](../../api/grid/filterSettings#loadingindicator) property. The default value is `Shimmer`. ```ts grid.filterSettings = { enableInfiniteScrolling = true, loadingIndicator = 'Spinner' }; @@ -368,4 +401,4 @@ In the provided example, On-Demand Excel filter has been enabled for the ##Platf ## See also -* [How to perform filter by using Wildcard and LIKE operator filter](./filtering/#wildcard-and-like-operator-filter) +* [How to perform filter by using Wildcard and LIKE operator filter](./filtering#wildcard-and-like-operator-filter) diff --git a/ej2-javascript/grid/scrolling/dom-virtualization.md b/ej2-javascript/grid/scrolling/dom-virtualization.md new file mode 100644 index 000000000..fac319aa0 --- /dev/null +++ b/ej2-javascript/grid/scrolling/dom-virtualization.md @@ -0,0 +1,327 @@ +--- +layout: post +title: DOM virtualization in ##Platform_Name## Grid control | Syncfusion +description: Learn here all about DOM virtualization in Syncfusion ##Platform_Name## Grid control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: DOM virtualization +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# DOM virtualization in ##Platform_Name## Grid control + +DOM virtualization is a rendering technique that improves performance by displaying only the visible portion of data in the viewport, plus a configurable buffer zone. The Syncfusion® ##Platform_Name## Grid implements DOM virtualization to handle datasets ranging from thousands to millions of rows while maintaining smooth grid interactions. + +Rendering every row and column in the DOM creates performance and memory challenges. Consider a dataset with 100,000 rows and 50 columns: without virtualization, the grid would create 5 million DOM elements. Modern browsers impose limits on DOM div heights (approximately 17.5-33.5 million pixels depending on the browser), constraining the maximum number of rows displayable at once. DOM virtualization addresses these constraints by rendering only cells within the current viewport, plus configurable buffer rows. Memory and processing requirements remain constant regardless of dataset size since only viewport and buffer cells render at any given time. + +To enable DOM virtualization in the Grid, you need to inject the **DomVirtualization** module. This module is responsible for managing the DOM pooling behavior and optimizing the rendering of data to enhance performance. + +DOM virtualization can be enabled by setting the [enableDomVirtualization](../../api/grid#enabledomvirtualization) property to `true`. + +## Height configuration requirement + +You must define a fixed height using the [height](../../api/grid#height) property in the Grid configuration. The height property is mandatory for DOM virtualization because virtualization calculations depend on a defined viewport height to determine how many rows are visible. + +## DOM virtualization settings + +The `domVirtualizationSettings` property allows you to configure various aspects of Dom virtualization behavior. All settings are optional with sensible defaults. + +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| **virtualDomType** | string | 'Row' | Specifies the virtualization dimension. Currently supports 'Row' only | +| **rowBuffer** | number | 5 | Number of extra rows to render above and below the viewport | +| **scrollThrottle** | number | 0 | Scroll event debounce in milliseconds | +| **maxPoolSize** | number | 500 | Maximum number of DOM rows to render at once | +| **autoRowHeight** | boolean | false | Enable automatic row height measurement for variable-height rows with column templates and text wrap features | + +### Row virtualization + +DOM row virtualization renders only rows visible in the viewport, plus configurable buffer rows above and below, while all columns remain in the DOM at all times. This approach improves vertical scrolling while keeping all column headers visible and accessible. + +Row virtualization is ideal for datasets with many rows (10,000+) but manageable column counts (fewer than 30). It simplifies horizontal scrolling since no columns are hidden, and ensures all columns remain accessible. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/dom-virtualization-massive-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/dom-virtualization-massive-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/dom-virtualization-massive-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/dom-virtualization-massive-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/dom-virtualization-massive-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/dom-virtualization-massive-cs1" %} +{% endif %} + +## Viewport buffer configuration + +Buffer configuration defines how many extra rows the Grid renders beyond the visible viewport. The [rowBuffer](../../api/grid/domVirtualizationSettings#rowbuffer) property controls this behavior. The default buffer value is `rowBuffer: 5`, which balances scroll smoothness against DOM size. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/dom-virtualization-buffer-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/dom-virtualization-buffer-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/dom-virtualization-buffer-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/dom-virtualization-buffer-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/dom-virtualization-buffer-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/dom-virtualization-buffer-cs1" %} +{% endif %} + +> Buffer Tuning: Larger buffers (5-10) reduce visible gaps during fast scrolling but increase DOM nodes and memory. Smaller buffers (2-3) minimize DOM nodes but may show gaps during very fast scrolling. Start with default values and adjust based on scroll speed and device constraints. + +## Row height configuration impact on virtualization + +Row height configuration affects how virtualization performs. Different row height approaches have different implications for virtualization and memory usage. + +### Static row height + +The [rowHeight](../../api/grid#rowheight) property allows you to set a fixed height for all rows in the Grid. This performs virtualization calculations instantly without measurement overhead, ideal for large datasets since all rows have equal height. + +### Dynamic row height with lazy height calculation + +DOM virtualization also supports variable row heights through automatic height measurement and custom height callbacks. The Grid measures row heights only for visible and buffer rows, not upfront for all rows, providing optimal performance with large datasets containing templates or custom height calculations. + +#### Automatic row height measurement + +Enable [autoRowHeight](../../api/grid/domVirtualizationSettings#autorowheight) to have the Grid automatically measure each visible row's height after rendering. This is useful when using column templates or text wrap features that result in varying row heights. + +**Scenarios with lazy height calculation:** + +- Auto height enabled (`autoRowHeight: true`): The grid renders content dynamically and measures heights as rows enter the viewport. +- Dynamic row height callbacks (`setRowHeight` callback): The grid calls the callback function to calculate heights incrementally for visible rows during scrolling. + +**Lazy height behavior during scrolling:** + +- Dynamic scroll range: As new rows are measured, the vertical scroll range adjusts. The scroll thumb may lag or jump if row heights vary significantly. +- Row position shifts: When scrolling up and revealing previously unmeasured rows, their calculated heights may cause rows below to shift down. +- Variable scroll speed: Scrolling speed appears variable if row heights differ substantially due to content variation or callback-determined heights. + +These behaviors are inherent to lazy height calculation and occur because heights are measured incrementally as rows enter the DOM, not calculated upfront. This trade-off enables efficient handling of large datasets with complex templates or custom height logic. + +#### Custom row height callback + +Use the [setRowHeight](../../api/grid#setrowheight) callback to programmatically define row heights based on row data. This approach provides control over row sizing logic without DOM measurement overhead. + +```javascript +var grid = new ej.grids.Grid({ + enableDomVirtualization: true, + setRowHeight: function(row) { + // Return custom height in pixels based on row data + return row.data['Priority'] === 'High' ? 80 : 40; + } +}); +grid.appendTo('#Grid'); +``` + + +## Limit maximum rendered rows + +The [maxPoolSize](../../api/grid/domVirtualizationSettings#maxpoolsize) property sets a hard cap on the maximum number of DOM rows rendered at any time, preventing performance issues from excessive DOM nodes. The default value is `500`. + +When `maxPoolSize: 500` (default), the Grid automatically limits DOM rendering to 500 rows maximum. If `rowBuffer` is set, calculated buffer rows are capped at 500. + +When you set a custom `maxPoolSize` value, more rows render to DOM. Use larger values for tall viewports on high-performance devices: + +Configuration options: + +- Keep default `maxPoolSize: 500` for optimal performance. Avoid values >1000 as they increase memory usage. + +## Scroll event throttling + +The [scrollThrottle](../../api/grid/domVirtualizationSettings#scrollthrottle) property controls the debounce delay for scroll events in milliseconds, reducing re-render frequency during fast scrolling. The default value is `0` (synchronous, no throttle). + +When `scrollThrottle: 0` (default), DOM virtualization uses synchronous scroll handling for immediate responsiveness, ideal for local data on modern devices. + +**Comparison:** Virtual scroll uses automatic throttle (200ms Chrome, 100ms others) for data fetching. DOM virtualization defaults to 0 for pre-loaded datasets. + +When you set a custom `scrollThrottle` value, it reduces CPU usage during rapid scrolling: + +Configuration options: + +- Keep default `scrollThrottle: 0` for local data with DOM virtualization. For virtual scroll mode (`enableVirtualization: true`) with slower networks, set 300ms to handle data fetching delays. + +## Virtual scroll mode + +Virtual scroll mode seamlessly enables server-side data loading for handling massive datasets by calculating row positions mathematically and loading only visible data from the server. Set [enableVirtualization](../../api/grid#enablevirtualization) to `true` when working with datasets exceeding browser DOM height limits or implementing server-side pagination. + +### Configuration + +Virtual scroll mode calculates all row positions mathematically without rendering rows initially. Set [enableVirtualization](../../api/grid#enablevirtualization) to `true` to enable server-side data loading for massive datasets. + +#### Request size configuration + +Request size configuration controls the batch size of requests (rows fetched per scroll request) using [pageSettings.pageSize](../../api/grid/pageSettings#pagesize). + +Configuration guidance: + +- Faster networks: Increase to 100+ rows per request for better performance with low-latency connections. +- Slower networks: Decrease to 25-50 rows per request to reduce server load and timeouts. + +> Request batching with virtual scroll mode determines row fetch counts per request. The `pageSettings.pageSize` property controls the batch size. + +### Server-side data loading + +Server-side virtualization powerfully handles extremely large datasets (millions of rows) by loading only visible data from the server. The grid detects scroll position, calculates required row range, sends a request. + +Server-side virtualization manages only page size rows in memory at any time, scaling regardless of backend capacity and supporting live data streams and real-time updates. This approach is ideal for extremely large datasets exceeding browser DOM height limits. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/grid/virtual-scroll-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/virtual-scroll-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/virtual-scroll-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/grid/virtual-scroll-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/grid/virtual-scroll-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/virtual-scroll-cs1" %} +{% endif %} + +### Performance best practices + +This section describes recommended patterns for achieving robust server-side virtualization performance with virtual scroll mode. + +- **Server request optimization**: Page size adjustment balances `pageSettings.pageSize` against network latency. Increase to 100+ for faster networks or larger datasets. Decrease to 25-50 for slower connections to reduce server load per request. Monitor network waterfall to identify bottlenecks. + +- **Buffer tuning for server-side virtualization**: Buffer size tuning adjusts preload capacity from 8-10 for faster networks with low latency (preload more rows ahead) to 2-3 for slow networks or server-side constraints. Balance buffer size against network round-trip time. Test with actual network conditions before production deployment. + +## Detail template support + +DOM virtualization supports detail templates with proper height configuration. You must specify the [detailTemplateHeight](../../api/grid#detailtemplateheight) property in pixels to ensure correct virtual height calculations. + +The `detailTemplateHeight` property is required when using detail templates with DOM virtualization because the grid needs to know the height of detail rows to calculate scroll positions and determine which rows to render in the viewport. + +## Browser support and massive row count handling + +Browser virtualization capabilities vary across modern browsers, each with specific DOM height limitations. These limitations determine the maximum number of rows the grid can virtualize within browser constraints. + +### Browser DOM height limits + +Each browser imposes a maximum height for DOM elements: + +| Browser | Max Div Height | Max Rows @ 100px Height | +|---------|----------------|-------------------------| +| Chrome 120+ | ~32,000,000px | ~320,000 | +| Firefox 121+ | ~32,000,000px | ~320,000 | +| Safari 17+ | ~16,000,000px | ~160,000 | +| Edge 120+ | ~32,000,000px | ~320,000 | + +When datasets exceed these browser limits, virtualization alone is insufficient. The grid applies row offset calculations to map logical row positions to physical screen positions, enabling display of 500,000+ rows while remaining within browser constraints. + +### Configuration for massive row count datasets (100,000+) + +Massive row count handling is a core DOM virtualization capability. The grid uses row offset calculations to map logical row positions to physical screen positions, enabling support for 100,000+ rows while remaining within browser DOM height constraints. + +Configuration approach: Enable DOM row virtualization with minimal buffer size using the [rowBuffer](../../api/grid/domVirtualizationSettings#rowbuffer) property to reduce DOM node count while maintaining smooth scrolling performance. + +### Constraints with massive datasets + +Grids handling very large row counts have specific characteristics: + +- **Scroll speed**: Apparent scroll speed increases due to row offset calculations. For example, 1,000,000 rows compress into available browser height, making scroll motion faster than standard visualization. +- **Scroll thumb position**: Scroll thumb represents logical row position, not physical screen position. +- **Row rendering**: Only viewport and buffer rows render to the DOM, memory usage remains constant regardless of dataset size. +- **Pagination alternative**: For datasets significantly exceeding browser limits, combine virtualization with pagination or implement progressive data loading from the server. + +## Performance best practices + +Performance optimization with DOM virtualization requires specific recommended patterns and approaches. + +- **Enable DOM row virtualization for large datasets**: DOM row virtualization for large datasets (1,000+ rows) maintains responsive performance and prevents excessive DOM creation. + +- **Adjust buffer size based on dataset characteristics**: Buffer size adjustment based on dataset characteristics: Larger buffers (8-10) reduce visible gaps during fast scrolling with local data. Smaller buffers (2-3) minimize DOM nodes for memory-constrained devices. + +- **Use fixed row height for large datasets**: Fixed row height (`rowHeight` property) for very large datasets avoids measurement overhead. This is the recommended approach for optimal performance with DOM virtualization. + +- **Improve column templates**: Avoid `autoRowHeight` with 100,000+ rows when possible. Use simple text or lightweight inline elements in column templates without complex components to reduce render time. + +## Troubleshooting + +This section provides solutions to common issues encountered when using DOM virtualization. + +### Blank rows or gaps appear while scrolling + +**Symptoms**: White space or missing rows visible briefly during scrolling. + +**Cause**: Buffer size configured too small for current scroll pattern. + +**Solution**: Increase [rowBuffer](../../api/grid/domVirtualizationSettings#rowbuffer) property to 8-10 rows. + +### Grid freezes or becomes unresponsive + +**Symptoms**: Grid becomes unresponsive during scrolling or data interaction. + +**Cause**: Too many DOM nodes being rendered due to buffer being too large. + +**Solution**: For datasets exceeding 100,000 rows, reduce [rowBuffer](../../api/grid/domVirtualizationSettings#rowbuffer) property to 2-3. + +### Scrollbar position appears incorrect + +**Symptoms**: Scrollbar thumb position does not match expected row position or scrollbar jumps. + +**Cause**: Row heights are inconsistent or dynamic height calculations conflict with virtualization. + +**Solution**: Use consistent row heights with fixed [rowHeight](../../api/grid#rowheight) property or implement [setRowHeight](../../api/grid#setrowheight) callback that returns consistent values based on row data. + +### Memory usage increases during extended scrolling + +**Symptoms**: Browser memory increases over time during prolonged grid usage. + +**Cause**: Buffer size too large. + +**Solution**: Reduce [rowBuffer](../../api/grid/domVirtualizationSettings#rowbuffer) property to 2-3 for very large datasets. + +### Data misalignment after sorting or filtering + +**Symptoms**: After sort or filter operation, rows appear blank, misaligned, or in wrong position. + +**Cause**: Virtualization state not synchronized with data changes. + +**Solution**: Force grid re-render by calling the [refresh](../../api/grid#refresh) method when data changes. diff --git a/ej2-javascript/js/mcp.md b/ej2-javascript/js/mcp.md index af1433ea6..56cc7b498 100644 --- a/ej2-javascript/js/mcp.md +++ b/ej2-javascript/js/mcp.md @@ -17,7 +17,6 @@ These tools speed up development and reinforce best practices for Syncfusion com ## Key Benefits - **Expert Component Knowledge** - Deep understanding of 145+ JavaScript components and their implementation patterns. -- **Release Insights** - Access the Syncfusion JavaScript release history and produce clear change logs between any two versions. - **Unlimited Usage** - No request limits, time restrictions, or query caps. - **Privacy-Focused** - The tools operate based on the user's query and do not store any content, data, or prompts. @@ -144,16 +143,6 @@ Create a configuration file in your project folder to install the server for you **Verifying Installation** Check your editor's MCP Server list for `sf-javascript-mcp` with a **Connected** status to confirm a successful installation. -## Available Tools - -The Syncfusion® MCP servers exposes a set of specialized tools for retrieving different types of product knowledge and resources. Tools can be called directly for specific information, or an assistant can choose the most relevant tool automatically. - -| # | Tool | Description | -|---|------|-------------| -| 1 | `search_docs` | Search Syncfusion JavaScript documentation for features, examples, and configuration help. | -| 2 | `get_changelog ` | Get upgrade steps and breaking changes for moving between Syncfusion JavaScript versions. | -| 3 | `list_versions` | List all Syncfusion JavaScript release versions available. | - ## Common use cases The examples below showcase how the different MCP tools handle real-world JavaScript development scenarios. Tools can be invoked directly, as shown in the examples below, for specific needs. Alternatively, an AI assistant can automatically select the most appropriate tool based on the request. @@ -205,21 +194,6 @@ Describe the problem in plain language, and let `search_docs` help resolve it. {% endpromptcard %} {% endpromptcards %} -**Version History** - -Use `list_versions` and `get_changelog` to explore available releases and review what changed. -{% promptcards %} -{% promptcard List Versions %} -#list_versions Which Syncfusion JavaScript release versions are available? -{% endpromptcard %} -{% endpromptcards %} - -{% promptcards %} -{% promptcard Migration Guide %} -#get_changelog Show me the new features and breaking changes in the latest Syncfusion JavaScript release. -{% endpromptcard %} -{% endpromptcards %} - ## Best Practices To get the most out of the Syncfusion® JavaScript MCP Servers: diff --git a/ej2-javascript/markdown-editor/ts/getting-started.md b/ej2-javascript/markdown-editor/ts/getting-started.md index ffca8ac43..6583609f0 100644 --- a/ej2-javascript/markdown-editor/ts/getting-started.md +++ b/ej2-javascript/markdown-editor/ts/getting-started.md @@ -38,7 +38,7 @@ npm install ## Add Syncfusion JavaScript packages All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. -To install Markdown Editor component, use the following command +To install Markdown Editor control, use the following command ``` npm install @syncfusion/ej2-richtexteditor @@ -46,24 +46,21 @@ npm install @syncfusion/ej2-richtexteditor ## Adding CSS reference -Add the following imports inside the `~/src/styles.css` file to include the `tailwind3` theme styles: +Syncfusion provides multiple themes for the Rich Text Editor control. For a complete list of available themes, refer to the [themes packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). -{% tabs %} -{% highlight css tabtitle="style.css" %} +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css'; +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` -{% endhighlight %} -{% endtabs %} +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `~/src/styles.css`. + +```css +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'; +``` -I> To apply the application-specific styles correctly, import style.css into **src/main.ts** and remove all the default styles from **src/style.css** and use the Rich Text editor styles provided above. You can also refer to the [themes section](https://ej2.syncfusion.com/documentation/appearance/theme) for details about built-in themes and CSS references for individual controls. +I> To apply the application-specific styles correctly, import style.css into **src/main.ts** and remove all the default styles from **src/style.css** and use the Rich Text editor styles provided above. ## Module Injection @@ -100,14 +97,7 @@ editor.appendTo('#editor'); {% highlight css tabtitle="styles.css" %} -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'; {% endhighlight %} diff --git a/ej2-javascript/pivotview/ts/getting-started-vite.md b/ej2-javascript/pivotview/ts/getting-started-vite.md index f4d290225..f64d120a7 100644 --- a/ej2-javascript/pivotview/ts/getting-started-vite.md +++ b/ej2-javascript/pivotview/ts/getting-started-vite.md @@ -46,22 +46,26 @@ npm install @syncfusion/ej2-pivotview --save ## Adding CSS reference -Add the following imports inside the `~/src/style.css` file to include the `tailwind3` theme styles: +Themes for Syncfusion® JavaScript controls can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The following example demonstrates the installation of the `Tailwind 3` theme package from npm. Each component in this theme package includes an `index.css` file that automatically loads all required dependency styles. + +To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme --save + +{% endhighlight %} +{% endtabs %} + +Import the required theme styles in the `~/src/style.css` file: {% tabs %} -{% highlight css tabtitle="style.css" %} - -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-pivotview/styles/tailwind3.css'; +{% highlight css tabtitle="styles.css" %} + +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css'; {% endhighlight %} {% endtabs %} diff --git a/ej2-javascript/pivotview/ts/getting-started.md b/ej2-javascript/pivotview/ts/getting-started.md index a01808141..2b941f1c3 100644 --- a/ej2-javascript/pivotview/ts/getting-started.md +++ b/ej2-javascript/pivotview/ts/getting-started.md @@ -37,11 +37,29 @@ npm install ## Import the Syncfusion® CSS styles -Combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in your `[src/styles/styles.css]` using the following code. +Themes for Syncfusion® JavaScript controls can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -``` -@import "../../node_modules/@syncfusion/ej2/tailwind3.css"; -``` +The following example demonstrates the installation of the `Tailwind 3` theme package from npm. Each component in this theme package includes an `index.css` file that automatically loads all required dependency styles. + +To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme --save + +{% endhighlight %} +{% endtabs %} + +Import the required theme styles in the `~/src/styles/styles.css` file: + +{% tabs %} +{% highlight css tabtitle="styles.css" %} + +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css'; + +{% endhighlight %} +{% endtabs %} ## Adding Pivot Table component diff --git a/ej2-javascript/rich-text-editor/ts/getting-started.md b/ej2-javascript/rich-text-editor/ts/getting-started.md index 3588c982a..eb121c042 100644 --- a/ej2-javascript/rich-text-editor/ts/getting-started.md +++ b/ej2-javascript/rich-text-editor/ts/getting-started.md @@ -39,7 +39,7 @@ npm install ## Adding Rich Text Editor packages All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. -To install Rich Text Editor component, use the following command +To install Rich Text Editor control, use the following command ```bash npm install @syncfusion/ej2-richtexteditor @@ -47,24 +47,21 @@ npm install @syncfusion/ej2-richtexteditor ## Adding CSS reference -Add the following imports inside the `~/src/styles.css` file to include the `tailwind3` theme styles: +Syncfusion provides multiple themes for the Rich Text Editor control. For a complete list of available themes, refer to the [themes packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). -{% tabs %} -{% highlight css tabtitle="style.css" %} +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css'; +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` -{% endhighlight %} -{% endtabs %} +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `~/src/styles.css`. + +```css +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'; +``` -I> To apply the application-specific styles correctly, import style.css into **src/main.ts** and remove all the default styles from **src/style.css** and use the Rich Text editor styles provided above. You can also refer to the [themes section](https://ej2.syncfusion.com/documentation/appearance/theme) for details about built-in themes and CSS references for individual controls. +I> To apply the application-specific styles correctly, import style.css into **src/main.ts** and remove all the default styles from **src/style.css** and use the Rich Text editor styles provided above. ## Module Injection @@ -100,14 +97,7 @@ editor.appendTo('#editor'); {% highlight css tabtitle="styles.css" %} -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'; {% endhighlight %} @@ -152,4 +142,4 @@ npm run dev * [Keyboard support in Rich text editor](https://ej2.syncfusion.com/documentation/rich-text-editor/keyboard-support) * [Globalization in Rich text editor](https://ej2.syncfusion.com/documentation/rich-text-editor/globalization) -N> Looking for the full JavaScript Rich Text Editor component overview, features, pricing, and documentation? Visit the [JavaScript Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-rich-text-editor) page. \ No newline at end of file +N> Looking for the full JavaScript Rich Text Editor control overview, features, pricing, and documentation? Visit the [JavaScript Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-rich-text-editor) page. \ No newline at end of file diff --git a/ej2-javascript/treegrid/js/getting-started.md b/ej2-javascript/treegrid/js/getting-started.md index 309946dd1..db44c9b5e 100644 --- a/ej2-javascript/treegrid/js/getting-started.md +++ b/ej2-javascript/treegrid/js/getting-started.md @@ -61,33 +61,33 @@ This setup includes additional dependencies required for more advanced functiona Essential JS 2 Tree Grid - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + @@ -98,10 +98,10 @@ This setup includes additional dependencies required for more advanced functiona > To include all required Essential JS 2 styles and scripts, use the following CDN links. > > -> +> > > -> +> ## Adding Tree Grid control @@ -167,9 +167,9 @@ treeGridObj.appendTo('#TreeGrid'); Essential JS 2 Tree Grid - + - + diff --git a/ej2-javascript/ts/mcp.md b/ej2-javascript/ts/mcp.md index b2989f479..f238092d9 100644 --- a/ej2-javascript/ts/mcp.md +++ b/ej2-javascript/ts/mcp.md @@ -19,7 +19,6 @@ These tools speed up development and reinforce best practices for Syncfusion com ## Key Benefits - **Expert Component Knowledge** - Deep understanding of 145+ TypeScript components and their implementation patterns. -- **Release Insights** - Access the Syncfusion TypeScript release history and produce clear change logs between any two versions. - **Unlimited Usage** - No request limits, time restrictions, or query caps. - **Privacy-Focused** - The tools operate based on the user's query and do not store any content, data, or prompts. @@ -146,16 +145,6 @@ Create a configuration file in your project folder to install the server for you **Verifying Installation** Check your editor's MCP Server list for `sf-typescript-mcp` with a **Connected** status to confirm a successful installation. -## Available Tools - -The Syncfusion® MCP servers exposes a set of specialized tools for retrieving different types of product knowledge and resources. Tools can be called directly for specific information, or an assistant can choose the most relevant tool automatically. - -| # | Tool | Description | -|---|------|-------------| -| 1 | `search_docs` | Search Syncfusion TypeScript documentation for features, examples, and configuration help. | -| 2 | `get_changelog ` | Get upgrade steps and breaking changes for moving between Syncfusion TypeScript versions. | -| 3 | `list_versions` | List all Syncfusion TypeScript release versions available. | - ## Common use cases The examples below showcase how the different MCP tools handle real-world TypeScript development scenarios. Tools can be invoked directly, as shown in the examples below, for specific needs. Alternatively, an AI assistant can automatically select the most appropriate tool based on the request. @@ -207,21 +196,6 @@ Describe the problem in plain language, and let `search_docs` help resolve it. {% endpromptcard %} {% endpromptcards %} -**Version History** - -Use `list_versions` and `get_changelog` to explore available releases and review what changed. -{% promptcards %} -{% promptcard List Versions %} -#list_versions Which Syncfusion TypeScript release versions are available? -{% endpromptcard %} -{% endpromptcards %} - -{% promptcards %} -{% promptcard Migration Guide %} -#get_changelog Show me the new features and breaking changes in the latest Syncfusion TypeScript release. -{% endpromptcard %} -{% endpromptcards %} - ## Best Practices To get the most out of the Syncfusion® TypeScript MCP Servers: diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html index 5cf0e07f1..88de3f61d 100644 --- a/ej2-typescript-toc.html +++ b/ej2-typescript-toc.html @@ -1419,6 +1419,7 @@
      • Scrolling From 22c41d0fcb7c68a55fd5815f882ad29512cb2194 Mon Sep 17 00:00:00 2001 From: VengadeshSF4855 Date: Wed, 15 Jul 2026 18:23:04 +0530 Subject: [PATCH 08/26] Feature(224126):Updated JavaScript Installation UG Content --- .../common-installation-errors.md | 52 +++--- .../installation-and-upgrade/download.md | 85 +++++---- .../installation-using-mac-installer.md | 74 +++++--- .../installation-using-offline-installer.md | 173 ++++++++++++------ .../installation-using-web-installer.md | 165 +++++++++-------- .../installation-and-upgrade/installation.md | 92 ++++++++-- .../linux-installer/download.md | 84 +++++---- .../installation-using-linux-installer.md | 43 +++-- .../upgrading-syncfusion.md | 42 ++++- 9 files changed, 500 insertions(+), 310 deletions(-) diff --git a/ej2-javascript/installation-and-upgrade/common-installation-errors.md b/ej2-javascript/installation-and-upgrade/common-installation-errors.md index 9e781e9d2..8525bf4b3 100644 --- a/ej2-javascript/installation-and-upgrade/common-installation-errors.md +++ b/ej2-javascript/installation-and-upgrade/common-installation-errors.md @@ -1,7 +1,7 @@ --- layout: post -title: Common installation errors in ##Platform_Name## Common control | Syncfusion -description: Learn here all about Common installation errors in Syncfusion ##Platform_Name## Common control of Syncfusion Essential JS 2 and more. +title: Common installation errors in ##Platform_Name## Essential Studio | Syncfusion +description: Troubleshoot common installation errors when installing Syncfusion ##Platform_Name## Essential Studio. platform: ej2-javascript control: common publishingplatform: ##Platform_Name## @@ -13,6 +13,8 @@ domainurl: ##DomainURL## This article describes the most common installation errors, as well as the causes and solutions to those errors. +**Applies to:** Syncfusion Essential Studio installers (Online and Offline) for ##Platform_Name## on Windows. + * Unlocking the license installer using the trial key * License has expired * Unable to find a valid license or trial @@ -23,19 +25,19 @@ This article describes the most common installation errors, as well as the cause **Error Message:** Sorry, the provided unlock key is a trial unlock key and cannot be used to unlock the licensed version of our Essential Studio® for JavaScript installer. -![license download](images/error1.png) +![Trial unlock key used on licensed installer error dialog](images/error1.png) **Reason**
        You are attempting to use a Trial unlock key to unlock the licensed installer. -**Suggested solution**
        Only a licensed unlock key can unlock a licensed installer. So, to unlock the Licensed installer, use the Licensed unlock key. To generate the licensed unlock key, refer to [this](https://www.syncfusion.com/kb/2326/how-to-generate-syncfusion-setup-unlock-key-from-syncfusion-support-account) article. +**Suggested solution**
        Only a licensed unlock key can unlock a licensed installer. To unlock the licensed installer, use the licensed unlock key. To generate the licensed unlock key, refer to [this](https://www.syncfusion.com/kb/2326/how-to-generate-syncfusion-setup-unlock-key-from-syncfusion-support-account) article. ## License has expired -**Error Message:** Your license for Syncfusion® Essential Studio® for JavaScript – EJ2 has been expired since {date}. Please renew your subscription and try again. +**Error Message:** Your license for Syncfusion® Essential Studio® for JavaScript – EJ2 has been expired since <date>. Please renew your subscription and try again. ***Online Installer*** -![license download](images/error2.png) +![Online installer license expired error dialog](images/error2.png) **Reason**
        This error message will appear if your license has expired. @@ -47,7 +49,7 @@ This article describes the most common installation errors, as well as the cause 3. You can reach out to our sales team by emailing sales@syncfusion.com. -4. You can also extend the 30-day trial period after your trial license has expired. +4. You can extend the 30-day trial period before it expires. ## Unable to find a valid license or trial @@ -55,16 +57,14 @@ This article describes the most common installation errors, as well as the cause ***Offline installer*** -![license download](images/error3.png) +![Offline installer unable to find a valid license or trial dialog](images/error3.png) ***Online installer*** -![license download](images/error4.png) +![Online installer unable to find a valid license or trial dialog](images/error4.png) **Reason**
        The following are possible causes of this error: -The following are possible causes of this error: - * When your trial period expired * When you don’t have a license or an active trial * You are not the license holder of your license @@ -84,19 +84,19 @@ The following are possible causes of this error: **Error Message:** Another installation is in progress. You cannot start this installation without completing all other currently active installations. Click cancel to end this installer or retry to attempt after currently active installation completed to install again. -![license download](images/error5.png) +![Another installation in progress error dialog](images/error5.png) -**Reason**
        You are trying to install when another installation is already running in your machine. +**Reason**
        You are trying to install when another installation is already running on your machine. -**Suggested solution**
        Open and kill the msiexec process in the task manager and then continue to install Syncfusion®. If the problem is still present, restart the computer and try Syncfusion® installer. +**Suggested solution**
        To resolve the issue, end the active msiexec process using Task Manager, then run the Syncfusion® installer again. If the problem persists, restart the computer and try again. -1. Open the Windows Task Manager. +1. Open Windows Task Manager. -2. Browse the Details tab. +2. Go to the **Details** tab. -3. Select the msiexec.exe and click **End task**. +3. Select **msiexec.exe** (it may appear as **msiexec.exe *32** on 64-bit systems) and click **End task**. -![license download](images/error6.png) +![End msiexec.exe task in Windows Task Manager Details tab](images/error6.png) ## Unable to install due to controlled folder access @@ -104,22 +104,22 @@ The following are possible causes of this error: **Error Message:** Controlled folder access seems to be enabled in your machine. The provided install or samples location (e.g., Public Documents) is protected by the controlled folder access settings. -![license download](images/error7.png) +![Offline installer controlled folder access blocked dialog](images/error7.png) ***Online*** -**Error Message:** Controlled folder access seems to be enabled in your machine. The provided install, samples, or download location (e.g., Public Documents) is protected by the controlled folder access settings. +**Error Message:** Controlled folder access seems to be enabled in your machine. The provided install, samples, or download location (e.g., Public Documents) is protected by the controlled folder access settings. (The Online installer references the additional download location, while the Offline installer does not.) -![license download](images/error8.png) +![Online installer controlled folder access blocked dialog](images/error8.png) -**Reason**
        You have enabled controlled folder access settings on your computer. +**Reason**
        Controlled folder access is enabled on your machine. ***Suggested solution*** **Suggestion 1:**
        -1. We will ship our demos in the public documents folder by default. -2. You have controlled folder access enabled on your machine, so our demos cannot be installed in the documents folder. If you need to install our demos in the Documents folder, follow the steps in this [link](https://support.microsoft.com/en-us/windows/allow-an-app-to-access-controlled-folders-b5b6627a-b008-2ca2-7931-7e51e912b034) and disable the controlled folder access. -3. You can enable this option after the installing our Syncfusion® setup. +1. Our demos are installed in the Public Documents folder by default. +2. Controlled folder access is enabled on your machine, so the demos cannot be installed in the Documents folder. If you need to install the demos in the Documents folder, follow the steps in this [link](https://support.microsoft.com/en-us/windows/allow-an-app-to-access-controlled-folders-b5b6627a-b008-2ca2-7931-7e51e912b034) and disable controlled folder access. You can also allow the Syncfusion installer through Controlled Folder Access instead of disabling it entirely. +3. You can re-enable controlled folder access after installing the Syncfusion® installer. **Suggestion 2:**
        -1. If you do not want to disable controlled folder access, you can install our demos in another directory. +1. If you do not want to disable controlled folder access, you can install the demos in another directory. In the installer, click **Browse** on the install location screen and choose a folder that is not protected by controlled folder access. diff --git a/ej2-javascript/installation-and-upgrade/download.md b/ej2-javascript/installation-and-upgrade/download.md index a8ab24b5a..83bc87f72 100644 --- a/ej2-javascript/installation-and-upgrade/download.md +++ b/ej2-javascript/installation-and-upgrade/download.md @@ -3,7 +3,7 @@ layout: post title: Download in ##Platform_Name## Installation and upgrade control | Syncfusion description: Learn here all about Download in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Download +control: Download publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,94 +11,99 @@ domainurl: ##DomainURL## # Download JavaScript – EJ2 Installer -The Syncfusion® JavaScript - EJ2 installer can be downloaded from the Syncfusion® website. You can either download the licensed installer or try our trial installer depending on your license. +The Syncfusion® JavaScript - EJ2 installer can be downloaded from the Syncfusion® website. You can either download the licensed installer or try our trial installer depending on your license. This guide covers the following options: * Trial Installer * Licensed Installer +**Prerequisites** + +* A registered Syncfusion® account. To create one, see the [Syncfusion downloads page](https://www.syncfusion.com/downloads). +* A Windows, macOS, or Linux machine that meets the [Syncfusion system requirements](https://help.syncfusion.com/common/essential-studio/system-requirements) for the platform you are installing. + ## Download the Trial Version -Our 30-day trial can be downloaded in two ways. +The 30-day trial can be downloaded in two ways: * Download Free Trial Setup -* Start Trials if using components through [npm](https://www.npmjs.com/~syncfusionorg) +* Start Trials if using components through [npm](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-) ### Download Free Trial Setup -1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the JavaScript platform. +1. Evaluate the 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and selecting the JavaScript platform. -2. After completing the required form or logging in with your registered Syncfusion® account, you can download the JavaScript - EJ2 trial installer from the confirmation page. (See the screenshot below.) +2. After completing the required form or logging in with your registered Syncfusion® account, download the JavaScript - EJ2 trial installer from the confirmation page (see the screenshot below). - ![ej2 trial confirmation](images/trial-confirmation.png) + ![EJ2 trial confirmation](images/trial-confirmation.png) -3. With a trial license, only the latest version’s trial installer can be downloaded. +3. With a trial license, only the latest version's trial installer can be downloaded. -4. After downloading, the Syncfusion® JavaScript - EJ2 trial installer can be unlocked using either the trial unlock key or the Syncfusion® registered login credential. More information on generating an unlock key can be found in this article. +4. After downloading, the Syncfusion® JavaScript - EJ2 trial installer can be unlocked using either the trial unlock key or the Syncfusion® registered login credentials. For more information on generating an unlock key, see [this article](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products). -5. Before the trial expires, you can download the trial installer at any time from your registered account’s Trials & Downloads page (See the screenshot below.) +5. Before the trial expires, you can download the trial installer at any time from your registered account's **Trials & Downloads** page (see the screenshot below). - ![trail installer dashboard](images/dashboard.png) + ![Trial installer dashboard](images/dashboard.png) -6. Click the Download (element 1 in the screenshot below) button to get the Syncfusion® Essential Studio® JavaScript – EJ2 web installer. +6. Click **Download** (element 1 in the screenshot below) to get the Syncfusion® Essential Studio® JavaScript – EJ2 web installer. - ![start trial download installer](images/start-trial-download-installer.png) + ![Start trial download - web installer](images/start-trial-download-installer.png) -7. Click the More Download Options (element 2 in the above screenshot) button to get the Essential Studio® JavaScript installer for various platforms. +7. Click **More Download Options** (element 2 in the above screenshot) to get the Essential Studio® JavaScript installer for various platforms. -- **Windows** + - **Windows** - - Select the **Windows** tab to download the appropriate installer options for Windows + Select the **Windows** tab to download the appropriate installer options for Windows. - - **Offline Installer:** Available in `.EXE` and `.ZIP` formats. + - **Offline Installer:** Available in `.EXE` and `.ZIP` formats. - ![start trial download offline installer](images/offline-installer1.png) + ![Start trial download - offline installer](images/offline-installer1.png) - - **Web Installer:** Available in `.EXE` format for minimal download size. + - **Web Installer:** Available in `.EXE` format for minimal download size. - ![start trial download web installer](images/start-trial-download-offline-installer.png) + ![Start trial download - web installer](images/start-trial-download-offline-installer.png) -- **MAC** + - **Mac** - * Select the **Mac** tab to download the appropriate installer options for MAC, which are provided in `.DMG` format. + Select the **Mac** tab to download the appropriate installer options for Mac, which are provided in `.DMG` format. - ![start trial download MAC installer](images/mac-installer.png) + ![Start trial download - Mac installer](images/mac-installer.png) -**Start Trials if using components through [npm](https://www.npmjs.com/~syncfusionorg)** +### Start Trials if Using Components Through npm -You should initiate an evaluation if you have already obtained our components through [npm](https://www.npmjs.com/~syncfusionorg) +If you have already obtained Syncfusion® components through [npm](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-), initiate an evaluation as follows: -1. You can start your 30-day free trial for JavaScript – EJ2 from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page from your account. +1. Start your 30-day free trial for JavaScript – EJ2 from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page in your account. - ![start trial download](images/start-trial-download.png) + ![Start trial page](images/start-trial-download.png) -2. To access this page, you must sign up\log in with your Syncfusion® account. +2. To access this page, you must sign up or log in with your Syncfusion® account. 3. Begin your trial by selecting the JavaScript – EJ2 product. - >Note: If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. + > **Note:** If you've already used the trial products and they haven't expired, you won't be able to start the trial for the same product again. -4. After you’ve started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page to get the latest version trial installer. You can generate the [unlock](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) key here at any time before the trial period expires. (See the screenshot below.) +4. After you've started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page to get the latest version trial installer. Generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) at any time before the trial period expires (see the screenshot below). - ![start trial download installer](images/start-trial-download-installer.png) + ![Start trial - download installer](images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page. -### Download the License Version +## Download the License Version -1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. +1. Syncfusion® licensed products are available on the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. 2. You can view all the licenses (both active and expired) associated with your account. -3. Click the Download (element 1 in the screenshot below) button to download the respective product’s installer. +3. Click **Download** (element 1 in the screenshot below) to download the respective product's installer. -4. The most recent version of the installer will be downloaded from this page. +4. The most recent version of the installer is downloaded from this page. -5. To download older version installers, go to [Downloads Older Versions](https://www.syncfusion.com/account/downloads/studio) (element 2 in the screenshot below). +5. To download older version installers, go to [Downloads - Older Versions](https://www.syncfusion.com/account/downloads/studio) (element 2 in the screenshot below). -6. You can download other platform\add-on installers by going to More Downloads Options (element 3 in the screenshot below). +6. Download other platform/add-on installers by selecting **More Download Options** (element 3 in the screenshot below). -7. For Windows OS, EXE and Zip formats are available for download. They are both Offline Installers. +7. For Windows OS, both `.EXE` and `.ZIP` formats are available. These are both offline installers. - ![license download](images/license-download.png) + ![License download](images/license-download.png) -You can also refer to the [Online installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-web-installer/) and [Offline installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-offline-installer/) links for step-by-step installation guidelines. \ No newline at end of file +8. After downloading, unlock the installer with your licensed unlock key, then refer to the [Online installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-web-installer) and [Offline installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-offline-installer) guides for step-by-step installation instructions. \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md index f06db57e8..7fddc8f20 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md @@ -1,9 +1,9 @@ --- layout: post -title: Installation using mac installer in ej2-javascript| Syncfusion +title: Installation using mac installer in ##Platform_Name## | Syncfusion description: Learn here all about Installation using mac installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Installation using mac installer +control: Installation using mac installer publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,53 +11,75 @@ domainurl: ##DomainURL## # Installing Syncfusion® JavaScript – EJ2 Mac Installer -## Steps to resolve the warning message in Catalina OS or later +This guide explains how to install the Syncfusion® Essential® JavaScript - EJ2 Mac installer on macOS, including how to resolve the macOS Catalina (and later) security warning and how to register your license key in the installed samples. - While running Essential Studio® JavaScript - EJ2 Mac Installer on Catalina MacOS or later, the below alert will be displayed. +**Prerequisites** - ![Alert Image](images/Mac_Catalina_MacOS_Alert1.png) +* A macOS machine running macOS Catalina (10.15) or later. Earlier versions are not officially supported by the current Mac installer. +* The downloaded Syncfusion® JavaScript - EJ2 Mac installer (`.dmg`). See the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download) page. +* Administrator access on your Mac so that you can copy the installer into the **Applications** folder. - If you receive this alert, follow the below steps for the easiest solution. +## Steps to Resolve the Warning Message in macOS Catalina or Later - 1. Right-click the downloaded dmg file. - 2. Select the "Open With" option and choose "DiskImageMounter (Default)". The following pop-up appears. +While running the Essential Studio® JavaScript - EJ2 Mac Installer on macOS Catalina or later, the alert below may be displayed. - ![pop-up Image](images/Mac_Catalina_MacOS_Alert2.png) +![macOS Catalina Gatekeeper alert](images/Mac_Catalina_MacOS_Alert1.png) - 3. When you click "Open" the installer window will be opened. +If you receive this alert, follow the below steps for the easiest solution: + +1. Locate the downloaded `.dmg` file in **Finder** (typically in the **Downloads** folder). +2. Right-click the `.dmg` file (do **not** double-click it). +3. Select the **Open With** option and choose **DiskImageMounter (Default)**. The following pop-up appears. + + ![Open with DiskImageMounter pop-up](images/Mac_Catalina_MacOS_Alert2.png) + +4. Click **Open** in the pop-up. The installer window opens and you can continue with the step-by-step installation below. + +> If you continue to see a "cannot be opened because the developer cannot be verified" message, open **System Settings** → **Privacy & Security**, scroll to the bottom, and click **Open Anyway** next to the blocked installer entry. Then re-run the steps above. ## Step-by-Step Installation The steps below show how to install the Essential Studio® JavaScript - EJ2 Mac installer. -1. Locate the downloaded dmg file and open the file by double click on it. +1. Locate the downloaded `.dmg` file in **Finder** and double-click it to mount the disk image. + + ![macOS installer welcome wizard](images/Mac_Installer1.png) + +2. macOS automatically mounts the disk image and creates a virtual drive on your desktop and in the Finder sidebar. If a license agreement appears, review it and click **Agree** to continue. + + ![License Agreement screen](images/Mac_Installer2.png) - ![Welcome wizard](images/Mac_Installer1.png) +3. In the mounted disk window, select the Syncfusion® installer application and copy it (right-click → **Copy**, or press **⌘ + C**). -2. This action will automatically mount the disk image and create a virtual drive on your desktop or in the Finder sidebar. + ![Copy the installer app from the mounted disk](images/Mac_Installer3.png) - ![License Agreement](images/Mac_Installer2.png) +4. Open the **Applications** folder (from the Finder sidebar or by pressing **⌘ + Shift + A**) and paste the installer there (right-click → **Paste**, or press **⌘ + V**). Running the installer from **Applications** is required so that macOS Gatekeeper can verify it. -3. Copy the mounted disk file. + ![Paste the installer into Applications](images/Mac_Installer4.png) - ![License Agree Confirmation](images/Mac_Installer3.png) + > **Note:** The Unlock key is not required to install the Mac installer. The Syncfusion® Essential Studio® JavaScript - EJ2 Mac installer can be used for development purposes without registering the Unlock key. A license key is only required later to run the bundled samples and demo source without a license-warning message. -4. And paste it in "Applications" folder shortcut. +5. Open the **Applications** folder, then open the Syncfusion® Essential Studio® Mac installer to explore the included packages and samples. - ![License Agree Confirmation](images/Mac_Installer4.png) + ![Syncfusion installer in Applications](Images/Mac_Installer5.png) - N> The Unlock key is not required to install the Mac installer. The Syncfusion® Essential Studio® JavaScript - EJ2 Mac installer can be used for development purposes without registering the Unlock key. +6. To clean up, right-click the virtual drive on your desktop or in the Finder sidebar and select **Eject** to unmount the disk image. You can also delete the installer from the **Applications** folder once you no longer need it. -5. Now you can open the folder to explore the Syncfusion® Essential Studio® Mac installer. + ![Eject the mounted disk image](images/Mac_Installer6.png) - ![Destination](Images/Mac_Installer5.png) +## License Key Registration in Samples -6. To remove the DMG file, Right-click on the virtual drive on your desktop or in the Finder sidebar and select "Eject." Also delete the folder from the Applications. +After installation, a license key is required to run the demo source included in the Mac installer without the Syncfusion® license-warning overlay. Register the license key by using the [`registerLicense`](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) method after the Syncfusion® JavaScript script file reference, as shown in the [license-key-registration](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration) documentation. - ![Install Location](images/Mac_Installer6.png) +> If the sample app still shows a license warning after registration, verify that the license key is registered against the same Syncfusion® account that owns the active subscription, and restart the sample app so the new key is picked up. -## License key registration in samples +## Troubleshooting -After the installation, the license key is required to register the demo source that is included in the Mac installer. To learn about the steps for license registration for the JavaScript - EJ2 Mac installer, please refer to this. +| Issue | Possible Cause | Suggested Fix | +| --- | --- | --- | +| "App is damaged and can't be opened" on macOS Catalina or later. | Gatekeeper is blocking the unsigned installer. | Use the right-click → **Open With** → **DiskImageMounter (Default)** flow described above, or allow the app in **System Settings** → **Privacy & Security**. | +| Installer does not launch after being copied to **Applications**. | The installer was run from the mounted disk image only. | Copy the installer into the **Applications** folder and run it from there. | +| Sample apps display a license-warning overlay. | License key has not been registered for this project/account. | Register the license key using the registerLicense method described in [License Key Registration in Samples](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5). | +| "Image not found" or missing platform files when running a sample. | The installer was not fully extracted, or required runtimes are missing. | Re-run the installer from **Applications**, and confirm that your Node.js version is compatible with the sample. | -Register the license key by using [registerLicense](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) method after the Syncfusion® JavaScript script file reference. \ No newline at end of file +For additional help, see [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md index a0610bb4e..0226a87c2 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md @@ -3,17 +3,26 @@ layout: post title: Installation using offline installer in ##Platform_Name## Installation and upgrade control | Syncfusion description: Learn here all about Installation using offline installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Installation using offline installer +control: Installation using offline installer publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Installation using Offline Installer +# Installation Using the Offline Installer -You can refer to the [Download](../installation-and-upgrade/download) section to learn how to get the JavaScript – EJ2 trial or licensed installer. +This guide explains how to install the Syncfusion® Essential® JavaScript - EJ2 **offline installer** on Windows, either through the installer UI or in **silent mode** from the command line. -The frameworks listed below are supported in this installer. +> If you do not yet have the installer, see the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download) section to obtain the trial or licensed version. + +**Prerequisites** + +* A Windows machine with administrator privileges. +* The downloaded offline installer (`.exe` or `.zip`). +* A valid Syncfusion® account (for **Login to Install**) or a Syncfusion® unlock key (for **Use Unlock Key**). +* For the **Install Demos** option, the target install location must be writable. If **Controlled folder access** is enabled on Windows, see [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). + +The frameworks supported by this installer are: * JavaScript * Angular @@ -21,118 +30,162 @@ The frameworks listed below are supported in this installer. * Vue * JavaScript (ES5) -## Installing with UI +## Installing with the UI -The steps below show how to install the Essential Studio® JavaScript – EJ2 installer. +The steps below show how to install the Essential® Studio JavaScript – EJ2 installer. -1. Open the Syncfusion® JavaScript – EJ2 offline installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package +1. Open the Syncfusion® JavaScript – EJ2 offline installer file from the downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. - ![license download](images/offline1.png) + ![Offline installer - extract wizard](images/offline1.png) - >Note: The Installer wizard extracts the syncfusionejs2 (version).exe dialog, which displays the package’s unzip operation. + > **Note:** The Installer wizard extracts the `syncfusionejs2_.exe` dialog, which displays the package's unzip operation. -2. To unlock the Syncfusion® offline installer, you have two options: +2. To unlock the Syncfusion® offline installer, choose one of the following options: - * Login To Install - * Use Unlock Key + * **Login to Install** + * **Use Unlock Key** - **Login To Install** - You must enter your Syncfusion® email address and password. If you don’t already have a Syncfusion® account, you can sign up for one by clicking **“Create an account”**. If you have forgotten your password, click on **“Forgot Password”** to create a new one. Once you’ve entered your Syncfusion® email and password, click Next. + **Login to Install** - ![license download](images/offline2.png) + You must enter your Syncfusion® email address and password. If you don't already have a Syncfusion® account, you can sign up for one by clicking **Create an account**. If you have forgotten your password, click **Forgot Password** to create a new one. Once you've entered your Syncfusion® email and password, click **Next**. + + ![Login to install](images/offline2.png) **Use Unlock Key** - Unlock keys are used to unlock the Syncfusion® offline installer, and they are platform and version specific. You should use either Syncfusion® licensed or trial Unlock key to unlock Syncfusion® JavaScript – EJ2 installer. - The trial unlock key is only valid for 30 days, and the installer will not accept an expired trial key. + Unlock keys are used to unlock the Syncfusion® offline installer, and they are platform and version specific. Use either a Syncfusion® licensed or trial unlock key to unlock the Syncfusion® JavaScript – EJ2 installer. The trial unlock key is only valid for 30 days; the installer will not accept an expired trial key. - To learn how to generate an unlock key for both trial and licensed products, see [this](https://www.syncfusion.com/kb/2326) Knowledge Base article. + To learn how to generate an unlock key for both trial and licensed products, see this [Knowledge Base article](https://www.syncfusion.com/kb/2326). - ![license download](images/offline3.png) + ![Use unlock key](images/offline3.png) -3. After reading the License Terms and Privacy Policy, check the **“I agree to the License Terms and Privacy Policy”** check box. Click the Next button. +3. After reading the License Terms and Privacy Policy, check the **I agree to the License Terms and Privacy Policy** check box. Click **Next**. -4. Change the install and sample locations here. You can also change the Additional settings. Click Next\Install to install with the default settings. +4. Change the install and samples locations here. You can also change the **Additional Settings** (described below). Click **Next** / **Install** to install with the default settings. - ![license download](images/offline4.png) + ![Configuration wizard](images/offline4.png) **Additional Settings** - * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked, if you do not want to install Syncfusion® samples - * Select the **Configure Syncfusion® Extensions controls in Visual Studio** checkbox to configure the Syncfusion® Extensions in Visual Studio or clear this check box when you do not want to configure the Syncfusion® Extensions in Visual Studio. - * Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for Syncfusion® Control Panel - * Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the start menu for Syncfusion® Control Panel + * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked if you do not want to install samples. + * Select the **Configure Syncfusion® Extensions controls in Visual Studio** check box to configure the Syncfusion® Extensions in Visual Studio. Clear this check box if you do not want to configure the extensions. + * Check the **Create Desktop Shortcut** check box to add a desktop shortcut for Syncfusion® Control Panel. + * Check the **Create Start Menu Shortcut** check box to add a shortcut to the start menu for Syncfusion® Control Panel. -5. If any previous versions of the current product is installed, the **Uninstall** Previous Version(s) wizard will be opened. Select Uninstall checkbox to uninstall the previous versions and then click the Proceed button. +5. If any previous versions of the current product are installed, the **Uninstall Previous Version(s)** wizard is opened. Select each version you want to uninstall, then click **Proceed**. - ![license download](images/offline5.png) + ![Uninstall previous versions](images/offline5.png) - >Note: From the 2021 Volume 1 release, Syncfusion® has added the option to uninstall previous versions from 18.1 while installing the new version. + > **Note:** From the 2021 Volume 1 release, Syncfusion® has added the option to uninstall previous versions from 18.1 onward while installing the new version. > - >Note: If any version is selected to uninstall, a confirmation screen will appear; if continue is selected, the Progress screen will display the uninstall and install progress, respectively. If none of the versions are chosen to be uninstalled, only the installation progress will be displayed. + > **Note:** If any version is selected to uninstall, a confirmation screen will appear. If you click **Continue**, the Progress screen will display the uninstall and install progress respectively. If no versions are chosen to be uninstalled, only the installation progress is displayed. **Confirmation Alert** - ![license download](images/offline6.png) + ![Confirmation alert](images/offline6.png) - **Uninstall Progress:** + **Uninstall Progress** - ![license download](images/offline7.png) + ![Uninstall progress](images/offline7.png) **Install Progress** - ![license download](images/offline8.png) + ![Install progress](images/offline8.png) - >Note: The Completed screen is displayed once the JavaScript – EJ2 product is installed. If any version is selected to uninstall, The completed screen will display both install and uninstall status. + > **Note:** The **Completed** screen is displayed once the JavaScript – EJ2 product is installed. If any version is selected to uninstall, the completed screen displays both install and uninstall status. - ![license download](images/offline9.png) + ![Installation completed](images/offline9.png) -6. After installing, click the Launch Control Panel link to open the Syncfusion® Control Panel. +6. After installation, click the **Launch Control Panel** link to open the Syncfusion® Control Panel. -7. Click the Finish button. Your system has been installed with the Syncfusion® Essential Studio® JavaScript – EJ2 product. +7. Click **Finish**. Your system has been installed with the Syncfusion® Essential Studio® JavaScript – EJ2 product. -## Installing in silent mode +## Installing in Silent Mode -The Syncfusion® Essential Studio® JavaScript – EJ2 Installer supports installation and uninstallation via the command line. +The Syncfusion® Essential Studio® JavaScript – EJ2 installer supports installation and uninstallation via the command line in silent mode. ### Command Line Installation -To install through the Command Line in Silent mode, follow the steps below. +To install through the command line in silent mode, follow the steps below. 1. Run the Syncfusion® JavaScript – EJ2 installer by double-clicking it. The Installer Wizard automatically opens and extracts the package. -2. The file syncfusionejs2_(version).exe file will be extracted into the Temp directory. -3. Run %temp%. The Temp folder will be opened. The syncfusionejs2_(version).exe file will be located in one of the folders. -4. Copy the extracted syncfusionejs2_(version).exe file in local drive. -5. Exit the Wizard. -6. Run Command Prompt in administrator mode and enter the following arguments. - Arguments: “installer file path\SyncfusionEssentialStudio(product)_(version).exe” /Install silent /UNLOCKKEY:“(product unlock key)” [/log “{Log file path}”] [/InstallPath:{Location to install}] [/InstallSamples:{true/false}] [/InstallAssemblies:{true/false}] [/UninstallExistAssemblies:{true/false}] [/InstallToolbox:{true/false}] +2. The `syncfusionejs2_.exe` file is extracted into the Windows Temp directory. + +3. Open the Temp folder by running `%temp%` in the Run dialog (Win + R). The `syncfusionejs2_.exe` file is located in one of the subfolders. + +4. Copy the extracted `syncfusionejs2_.exe` file to a local drive. + +5. Exit the Installer Wizard. + +6. Run Command Prompt **as an administrator**, then run the installer with the following arguments. + + **Syntax** + + ```bat + "installer file path\SyncfusionEssentialStudio_.exe" /Install silent /UNLOCKKEY:"" [/log ""] [/InstallPath:] [/InstallSamples:true|false] [/InstallAssemblies:true|false] [/UninstallExistAssemblies:true|false] [/InstallToolbox:true|false] + ``` - >Note: [..] – Arguments inside the square brackets are optional. + Arguments inside square brackets are optional. - **Example:** “D:\Temp\syncfusionejs2x.x.x.x.exe” /Install silent /UNLOCKKEY:“product unlock key” /log “C:\Temp\EssentialStudioPlatform.log” /InstallPath:C:\Syncfusion\x.x.x.x /InstallSamples:true /InstallAssemblies:true /UninstallExistAssemblies:true /InstallToolbox:true + **Example** -7. Essential Studio® for JavaScript (Essential® JS2) is installed. + ```bat + "D:\Temp\syncfusionejs2_20.2.0.36.exe" /Install silent /UNLOCKKEY:"your-unlock-key" /log "C:\Temp\EssentialStudioPlatform.log" /InstallPath:"C:\Syncfusion\20.2.0.36" /InstallSamples:true /InstallAssemblies:true /UninstallExistAssemblies:true /InstallToolbox:true + ``` - >Note: x.x.x.x should be replaced with the Essential Studio® version and the Product Unlock Key needs to be replaced with the Unlock Key for that version. + Replace `20.2.0.36` with the Essential® Studio version, and replace `your-unlock-key` with the unlock key for that version. + +7. Essential® Studio for JavaScript (Essential® JS 2) is installed. + + To confirm the install, check the Syncfusion® Control Panel entry, or run the following PowerShell command to verify the installed version: + + ```powershell + Get-ItemProperty HKLM:\Software\Microsoft\Windows\CurrentVersion\Uninstall\* | + Where-Object { $_.DisplayName -like 'Syncfusion*JavaScript*' } | + Select-Object DisplayName, DisplayVersion + ``` + + A successful silent install returns exit code `0`. Other exit codes indicate an error; see the log file specified by `/log` for details. ### Command Line Uninstallation -Syncfusion® Essential® JavaScript – EJ2 can be uninstalled silently using the Command Line. +Syncfusion® Essential® JavaScript – EJ2 can also be uninstalled silently using the command line. 1. Run the Syncfusion® JavaScript – EJ2 installer by double-clicking it. The Installer Wizard automatically opens and extracts the package. -2. The syncfusionejs2_(version).exe file will be extracted into the Temp directory. +2. The `syncfusionejs2_.exe` file is extracted into the Temp directory. + +3. Open the Temp folder by running `%temp%`. The `syncfusionejs2_.exe` file is located in one of the subfolders. + +4. Copy the extracted `syncfusionejs2_.exe` file to a local drive. + +5. Exit the Installer Wizard. + +6. Run Command Prompt **as an administrator**, then run the installer with the following arguments. + + **Syntax** + + ```bat + "copied installer file path\syncfusionejs2_.exe" /uninstall silent + ``` -3. Run %temp%. The Temp folder will be opened. The syncfusionejs2_(version).exe file will be located in one of the folders. + **Example** -4. Copy the extracted syncfusionejs2_(version).exe file in local drive. + ```bat + "D:\Temp\syncfusionejs2_20.2.0.36.exe" /uninstall silent + ``` -5. Exit the Wizard. +7. Essential® Studio for JavaScript (Essential® JS 2) is uninstalled. -6. Run Command Prompt in administrator mode and enter the following arguments. +## Troubleshooting - Arguments: “Copied installer file path\ syncfusionejs2_(version).exe” /uninstall silent - Example: “D:\Temp\syncfusionejs2_x.x.x.x.exe” /uninstall silent +| Issue | Possible Cause | Suggested Fix | +| --- | --- | --- | +| Installer fails with "Another installation is in progress." | Another MSI installation is currently running. | End the running `msiexec.exe` process in Task Manager, or wait for the other install to finish. See [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). | +| "Controlled folder access seems to be enabled" alert. | Windows Controlled folder access is blocking the install/samples location. | Allow access for the installer in **Windows Security** → **Virus & threat protection** → **Manage ransomware protection**, or install to a non-protected folder. | +| Login to Install fails with an invalid credentials error. | Wrong account, or the account does not own a license. | Verify the account owns a Syncfusion® license, or use the **Use Unlock Key** option instead. | +| Silent install reports a non-zero exit code. | Invalid arguments, missing unlock key, or path issues. | Re-run with `/log ""` and inspect the log for the exact error. | +| The "I agree to the License Terms and Privacy Policy" check box is disabled. | The license text has not been scrolled to the end. | Scroll the license text to the bottom before checking the box. | -7. Essential Studio® for JavaScript (Essential® JS2) is uninstalled. \ No newline at end of file +For additional help, see [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md index 7e6256b2d..0f05a0f86 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md @@ -1,9 +1,9 @@ --- layout: post -title: Installation using web installer in ##Platform_Name## Installation and upgrade control | Syncfusion -description: Learn here all about Installation using web installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. +title: Installation using web installer in ##Platform_Name## | Syncfusion +description: Learn how to install Syncfusion ##Platform_Name## Essential Studio using the web (online) installer. platform: ej2-javascript -control: Installation using web installer +control: Installation using web installer publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -13,6 +13,18 @@ domainurl: ##DomainURL## You can refer to the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download/) section to learn how to get the JavaScript – EJ2 trial or licensed installer. +**Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 Web Installer on Windows. + +## Prerequisites + +Before you begin, make sure the following are in place: + +* Windows 7 SP1 or later (Windows 10/11 recommended), 64-bit. +* Administrator rights on the machine (the installer must be run as administrator). +* An active internet connection (the Web Installer downloads the selected products at install time). +* A Syncfusion® account with a valid trial or licensed subscription. To create one, see [Create a Syncfusion account](https://www.syncfusion.com/account/register). +* Any framework-specific prerequisites for the products you select (for example, Visual Studio for the Syncfusion Extensions option). The installer will alert you if additional software is required. + ## Overview For the Essential Studio® JavaScript – EJ2 product, Syncfusion® offers a Web Installer. This installer alleviates the burden of downloading a larger installer. You can simply download and run the online installer, which will be smaller in size and will download and install the Essential Studio® products you have chosen. You can get the most recent version of Essential Studio® Web Installer [here](https://www.syncfusion.com/account/downloads). @@ -28,153 +40,160 @@ The frameworks listed below are supported in this installer. ## Installation The steps below show how to install Essential Studio® JavaScript – EJ2 Web Installer. -1. Open the Syncfusion® Essential Studio® JavaScript – EJ2 Web Installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. - ![license download](images/1.png) +>Tip: Right-click the installer `.exe` and choose **Run as administrator** to avoid permission issues. - >Note: The installer wizard extracts the syncfusionejs2webinstaller_{version}.exe dialog, which displays the package’s unzip operation. +1. Open the Syncfusion® Essential Studio® JavaScript – EJ2 Web Installer file from the downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. -2. The Syncfusion® JavaScript - EJ2 Web Installer’s welcome wizard will be displayed. Click the Next button. + ![Installer package extraction dialog](images/1.png) - ![license download](images/2.png) + >Note: The installer wizard extracts the `syncfusionejs2webinstaller_{version}.exe` dialog, which displays the package's unzip operation. -3. The Platform Selection Wizard will appear. From the **Available** tab, select the products to be installed. Select the Install All checkbox to **install all** products. +2. The Syncfusion® JavaScript - EJ2 Web Installer's welcome wizard will be displayed. Click the **Next** button. + + ![Web installer welcome wizard](images/2.png) + +3. The Platform Selection Wizard will appear. From the **Available** tab, select the products to be installed. Select the **Install All** checkbox to install all products. **Available** - ![license download](images/3.png) + ![Platform selection wizard, Available tab](images/3.png) - If you have multiple products installed in the same version, they will be listed under the **Installed** tab. You can also select which products to uninstall from the same version. Click the Next button. + If you have multiple products installed in the same version, they will be listed under the **Installed** tab. You can also select which products to uninstall from the same version. Click the **Next** button. **Installed** - ![license download](images/4.png) + ![Platform selection wizard, Installed tab](images/4.png) - >Important: If the required software for the selected product isn’t already installed, the **Additional Software Required** alert will appear. You can, however, continue the installation and install the necessary software later. + >Important: If the required software for the selected product isn't already installed, the **Additional Software Required** alert will appear. You can, however, continue the installation and install the necessary software later. **Required Software** - ![license download](images/5.png) + ![Additional software required alert](images/5.png) -4. If previous version(s) for the selected products are installed, the Uninstall previous version wizard will be displayed. You can see the list of previously installed versions for the products you’ve chosen here. To remove all versions, check the **Uninstall All** checkbox. Click the Next button. +4. If previous version(s) for the selected products are installed, the **Uninstall previous version** wizard will be displayed. You can see the list of previously installed versions for the products you've chosen here. To remove all versions, check the **Uninstall All** checkbox. Click the **Next** button. - ![license download](images/6.png) + ![Uninstall previous version wizard](images/6.png) - >Note: From the 2021 Volume 1 release, Syncfusion® has provided option to uninstall the previous versions from 18.1 while installing the new version. + >Note: From the 2021 Volume 1 release, Syncfusion® provides an option to uninstall previous versions from 18.1 while installing the new version. -5. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions. +5. A pop-up screen will be displayed to confirm the uninstallation of the selected previous versions. - ![license download](images/7.png) + ![Confirmation pop-up to uninstall previous versions](images/7.png) -6. The Confirmation Wizard will appear with the list of products to be installed/uninstalled. You can view and modify the list of products that will be installed and uninstalled from this page. +6. The **Confirmation** wizard will appear with the list of products to be installed/uninstalled. You can view and modify the list of products that will be installed and uninstalled from this page. - ![license download](images/8.png) + ![Confirmation wizard with list of products](images/8.png) - >Note: By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation + >Note: By clicking the **Download Size** and **Installation Size** links, you can determine the approximate size of the download and installation. -7. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. +7. The **Configuration** wizard will appear. You can change the **Download**, **Install**, and **Demos** locations from here. You can also change the additional settings on a product-by-product basis. Click **Next** to install with the default settings. - ![license download](images/9.png) + ![Configuration wizard with download, install, and demos locations](images/9.png) **Additional settings** - * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked, if you do not want to install Syncfusion® samples - * Select the **Configure Syncfusion Extensions controls in Visual Studio** checkbox to configure the Syncfusion® Extensions in Visual Studio or clear this check box when you do not want to configure the Syncfusion® Extensions in Visual Studio. - * Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for Syncfusion® Control Panel - * Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the start menu for Syncfusion® Control Panel + * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked if you do not want to install Syncfusion® samples. + * Select the **Configure Syncfusion Extensions controls in Visual Studio** checkbox to configure the Syncfusion® Extensions in Visual Studio, or clear this check box when you do not want to configure the Syncfusion® Extensions in Visual Studio. + * Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for the Syncfusion® Control Panel. + * Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the Start menu for the Syncfusion® Control Panel. + +8. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the **Next** button. + +9. The **Login** wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the **Install** button. -8. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the Next button. + ![Login wizard with email and password fields](images/8_.png) -9. The login wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button. + >Important: The products you have chosen will be installed based on your Syncfusion® license (Trial or Licensed). - ![license download](images/8_.png) +10. The download and installation/uninstallation progress will be displayed as shown below. - >Important: The products you have chosen will be installed based on your Syncfusion® License (Trial or Licensed). + ![Download and installation progress](images/9_.png) -10. The download and installation\uninstallation progress will be displayed as shown below. +11. When the installation is finished, the **Summary** wizard will appear. Here you can see the list of products that have been installed successfully and those that have failed. To close the Summary wizard, click **Finish**. - ![license download](images/9_.png) + ![Summary wizard showing installed products](images/12.png) -11. When the installation is finished, the **Summary** wizard will appear. Here you can see the list of products that have been installed successfully and those that have failed. To close the Summary wizard, click Finish. + * To open the Syncfusion® Control Panel, click **Launch Control Panel**. - ![license download](images/12.png) +12. After installation, there will be two Syncfusion® Control Panel entries, as shown below. The Essential Studio® entry will manage all Syncfusion® products installed in the same version, while the Product entry will only uninstall the specific product setup. - * To open the Syncfusion® Control Panel, click **Launch Control** Panel. + ![Syncfusion Control Panel entries](images/13.png) -12. After installation, there will be two Syncfusion® control panel entries, as shown below. The Essential Studio® entry will manage all Syncfusion® products installed in the same version, while the Product entry will only uninstall the specific product setup. +## Troubleshooting - ![license download](images/13.png) +If you encounter issues during installation, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors/) for solutions to typical problems such as trial vs. license key mismatch, blocked installations, and controlled folder access. ## Uninstallation -Syncfusion® JavaScript – EJ2 installer can be uninstalled in two ways. +The Syncfusion® JavaScript – EJ2 installer can be uninstalled in two ways. -* Uninstall the JavaScript – EJ2 using the Syncfusion® JavaScript – EJ2 web installer -* Uninstall the JavaScript – EJ2 from Windows Control Panel +* Uninstall the JavaScript – EJ2 using the Syncfusion® JavaScript – EJ2 web installer. +* Uninstall the JavaScript – EJ2 from Windows Control Panel. -Follow either one of the option below to uninstall Syncfusion® Essential Studio® JavaScript – EJ2 installer +Follow either one of the options below to uninstall Syncfusion® Essential Studio® JavaScript – EJ2. -### Option 1: Uninstall the JavaScript–EJ2 using the Syncfusion® JavaScript–EJ2 web installer +### Option 1: Uninstall the JavaScript – EJ2 using the Syncfusion® JavaScript – EJ2 web installer -Syncfusion® provides the option to uninstall products of the same version directly from the Web Installer application. Select the products to be uninstalled from the list, and Web Installer will uninstall them one by one. +Syncfusion® provides the option to uninstall products of the same version directly from the Web Installer application. Select the products to be uninstalled from the list, and the Web Installer will uninstall them one by one. -Open the Syncfusion® Essential Studio® JavaScript – EJ2 Online Installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package +Open the Syncfusion® Essential Studio® JavaScript – EJ2 Online Installer file from the downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. -![license download](images/u1.png) +![Installer package extraction dialog for uninstallation](images/u1.png) -The Syncfusion® JavaScript – EJ2 Web Installer’s welcome wizard will be displayed. Click the Next button +The Syncfusion® JavaScript – EJ2 Web Installer's welcome wizard will be displayed. Click the **Next** button. -![license download](images/u2.png) +![Web installer welcome wizard for uninstallation](images/u2.png) ### Option 2: Uninstall the JavaScript–EJ2 from Windows Control Panel You can uninstall all the installed products by selecting the **Syncfusion® Essential Studio® {version}** entry (element 1 in the below screenshot) from the Windows control panel, or you can uninstall JavaScript – EJ2 alone by selecting the **Syncfusion® Essential Studio® for JavaScript – EJ2 {version}** entry (element 2 in the below screenshot) from the Windows control panel. -![license download](images/u3.png) +![Windows Control Panel showing Syncfusion entries](images/u3.png) ->Note: If the **Syncfusion® Essential Studio®** for JavaScript **{version}** entry is selected from the Windows control panel, the Syncfusion® Essential Studio® JavaScript – EJ2 alone will be removed and the below default MSI uninstallation window will be displayed. +>Note: If the **Syncfusion® Essential Studio® for JavaScript – EJ2 {version}** entry is selected from the Windows Control Panel, the Syncfusion® Essential Studio® JavaScript – EJ2 will be removed, and the default MSI uninstallation window shown below will be displayed. -1. The Platform Selection Wizard will appear. From the **Installed** tab, select the products to be uninstalled. To select all products, check the **Uninstall All** checkbox. Click the Next button. +1. The Platform Selection Wizard will appear. From the **Installed** tab, select the products to be uninstalled. To select all products, check the **Uninstall All** checkbox. Click the **Next** button. **Installed** - ![license download](images/u4.png) + ![Platform selection wizard, Installed tab for uninstallation](images/u4.png) - You can also select the products to be installed from the **Available** tab Click the Next button. + You can also select the products to be installed from the **Available** tab. Click the **Next** button. **Available** - ![license download](images/u5.png) + ![Platform selection wizard, Available tab for uninstallation](images/u5.png) -2. If any other products selected for installation, Uninstall previous version wizard will be displayed with previous version(s) installed for the selected products. Here you can view the list of installed previous versions for the selected products. Select **Uninstall All** checkbox to select all the versions. Click Next. +2. If other products are also selected for installation, the **Uninstall previous version** wizard will be displayed with previous version(s) installed for the selected products. Here you can view the list of installed previous versions for the selected products. Select the **Uninstall All** checkbox to select all the versions. Click **Next**. - ![license download](images/u6.png) + ![Uninstall previous version wizard during uninstallation](images/u6.png) -3. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions. +3. A pop-up screen will be displayed to confirm the uninstallation of the selected previous versions. - ![license download](images/u7.png) + ![Confirmation pop-up to uninstall previous versions](images/u7.png) -4. The Confirmation Wizard will appear with the list of products to be installed/uninstalled. Here you can view and modify the list of products that will be installed/uninstalled. +4. The **Confirmation** wizard will appear with the list of products to be installed/uninstalled. Here you can view and modify the list of products that will be installed/uninstalled. - ![license download](images/u8.png) + ![Confirmation wizard with list of products for uninstallation](images/u8.png) - >Note: By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation + >Note: By clicking the **Download Size** and **Installation Size** links, you can determine the approximate size of the download and installation. -5. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. +5. The **Configuration** wizard will appear. You can change the **Download**, **Install**, and **Demos** locations from here. You can also change the additional settings on a product-by-product basis. Click **Next** to install with the default settings. - ![license download](images/u9.png) + ![Configuration wizard during uninstallation](images/u9.png) -6. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the Next button. +6. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the **Next** button. -7. The login wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button. +7. The **Login** wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the **Install** button. - ![license download](images/u10.png) + ![Login wizard during uninstallation](images/u10.png) - >Important: The products you have chosen will be installed based on your Syncfusion® License (Trial or Licensed). + >Important: The products you have chosen will be installed/uninstalled based on your Syncfusion® license (Trial or Licensed). -8. The download, installation, and uninstallation progresses will be shown. +8. The download, installation, and uninstallation progress will be shown. - ![license download](images/u11.png) + ![Download, installation, and uninstallation progress](images/u11.png) -9. When the installation is finished, the **Summary** wizard will appear. Here you can see the list of products that have been successfully and unsuccessfully installed/uninstalled. To close the Summary wizard, click Finish. +9. When the process is finished, the **Summary** wizard will appear. Here you can see the list of products that have been successfully and unsuccessfully installed/uninstalled. To close the Summary wizard, click **Finish**. - ![license download](images/u12.png) + ![Summary wizard for uninstallation](images/u12.png) - * To open the Syncfusion® Control Panel, click **Launch Control Panel** \ No newline at end of file + * To open the Syncfusion® Control Panel, click **Launch Control Panel**. \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/installation.md b/ej2-javascript/installation-and-upgrade/installation.md index dba9c707f..fb1e09e5e 100644 --- a/ej2-javascript/installation-and-upgrade/installation.md +++ b/ej2-javascript/installation-and-upgrade/installation.md @@ -3,38 +3,94 @@ layout: post title: Installation in ##Platform_Name## Installation and upgrade control | Syncfusion description: Learn here all about Installation in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Installation +control: Installation publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- - +# Installation of Syncfusion® JavaScript Controls -# Installation +This guide explains how to install Syncfusion® Essential® JS 2 JavaScript UI components into an existing project using either the **npm CLI** or the **`package.json`** file. -## Install via npm CLI +**Prerequisites** -Syncfusion® JavaScript (Essential® JS 2) packages are published in [npm](https://www.npmjs.com/search?q=scope:syncfusion). You can install the necessary packages from npm’s install command. For example, grid package can be installed using following command. +* [Node.js](https://nodejs.org/) and npm installed. npm is bundled with Node.js. +* An existing JavaScript / TypeScript project. (For framework-specific wrappers, see the corresponding control documentation.) +* Access to the npm registry (public, or your private registry if applicable). -``` +## Install by Using the npm CLI + +Syncfusion® JavaScript (Essential® JS 2) packages are published on [npm](https://www.npmjs.com/search?q=scope:syncfusion). You can install the necessary packages from npm's install command. For example, the Grid package can be installed using the following command: + +```bash npm install @syncfusion/ej2-grids --save ``` -## Install by using package.json +For a list of available packages and the latest version, see [`@syncfusion/ej2-grids`](https://www.npmjs.com/package/@syncfusion/ej2-grids) on npm. -1.Add the Syncfusion® JavaScript (Essential® JS 2) package references in the `dependencies` of `~/package.json` file. +## Install by Using package.json - ``` - { - "dependencies": { - "@syncfusion/ej2-grids": "*", - "@syncfusion/ej2-charts": "*" - } +1. Add the Syncfusion® JavaScript (Essential® JS 2) package references in the `dependencies` section of your project's `package.json` file: + + ```json + { + "dependencies": { + "@syncfusion/ej2-grids": "^20.2.38", + "@syncfusion/ej2-charts": "^20.2.38" } - ``` - > The `*` indicates the latest version of npm package. Refer the [documentation](https://docs.npmjs.com/misc/semver#versions) for more details about npm versioning. + } + ``` + + > Replace `^20.2.38` with the version you need. For details on version ranges, see the [npm `package.json` documentation](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#dependencies). + +2. From the root of your project, run the following command to install all npm dependencies at once: + + ```bash + npm install + ``` + + > For more information, see the [npm `package.json` documentation](https://docs.npmjs.com/cli/v10/configuring-npm/package-json). + +## Next Steps + +After installing the package, you typically need to: + +1. Import the required CSS for the theme. For example: + + ```css + @import "@syncfusion/ej2-grids/styles/material.css"; + ``` + +2. Reference the required script and CSS files in your HTML. For example: + + ```html + + + ``` + +3. Register the Syncfusion® components you want to use. For example: + + ```javascript + var grid = new ej.grids.Grid({ + dataSource: data, + columns: [ + { field: 'OrderID', headerText: 'Order ID', width: 120 }, + { field: 'CustomerName', headerText: 'Customer Name', width: 150 } + ] + }); + grid.appendTo('#Grid'); + ``` + +For component-specific configuration, theming, and usage examples, refer to the documentation of the individual Syncfusion® JavaScript component you are using. + +## Troubleshooting -2.Now, open the command prompt and run the `npm install` command line. This will install all npm dependencies in a single command line. +| Issue | Possible Cause | Suggested Fix | +| --- | --- | --- | +| `npm install` reports a peer-dependency warning. | Installed package version does not match your project's framework version. | Use the package version that supports your framework, or upgrade the framework. | +| `package.json` shows the package version as `*` and `npm install` fails. | `*` is a placeholder, not a valid npm range. | Replace `*` with an explicit version such as `^20.2.38` or a specific version. | +| Script/CSS file reference returns 404. | The CDN version in the URL does not match an installed version. | Update the CDN URL to match the installed package version, or use a self-hosted copy. | +| Components do not render. | The script/CSS is not loaded, or the component is not registered. | Verify the script/CSS is included in the page, and the component is registered correctly. | -> Refer the [documentation](https://docs.npmjs.com/files/package.json) for more details about npm package.json \ No newline at end of file +For additional help, see [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/linux-installer/download.md b/ej2-javascript/installation-and-upgrade/linux-installer/download.md index 924d22211..d9b74dde3 100644 --- a/ej2-javascript/installation-and-upgrade/linux-installer/download.md +++ b/ej2-javascript/installation-and-upgrade/linux-installer/download.md @@ -1,8 +1,8 @@ --- layout: post -title: Download in ##Platform_Name## Installation component | Syncfusion -description: Learn here all about Download in Syncfusion ##Platform_Name## Installation component of Syncfusion Essential JS 2 and more. -control: Download +title: Download Syncfusion JavaScript Linux installer in ##Platform_Name## | Syncfusion +description: Learn how to download the Syncfusion ##Platform_Name## JavaScript Linux trial or licensed installer. +control: Download platform: ej2-javascript publishingplatform: ##Platform_Name## documentation: ug @@ -11,71 +11,69 @@ domainurl: ##DomainURL## # Download Syncfusion® JavaScript Linux Installer -The Syncfusion® installer can be downloaded from the [Syncfusion®](https://www.syncfusion.com/) website. You can either download the licensed installer or try our trial installer depending on your license. +**Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 Linux installer on Linux distributions supported by Syncfusion. - - Trial Installer - - Licensed Installer +The Syncfusion® installer can be downloaded from the [Syncfusion website](https://www.syncfusion.com/). You can either download the licensed installer or try our trial installer, depending on your license. -You can download the Syncfusion® installer from [Syncfusion.com](https://www.syncfusion.com/) website +* Trial Installer +* Licensed Installer ## Download the Trial Version -Our 30-day trial can be downloaded in two ways. - -* Download Free Trial Setup -* Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) +Our 30-day trial can be downloaded in two ways: +* Download the Free Trial Setup. +* Start a trial if you are using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion). ### Download Free Trial Setup -1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the product -2. After completing the required form or logging in with your registered Syncfusion® account, you can download the trial installer from the confirmation page. (as shown in below screenshot.) +1. Visit the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the product to evaluate our 30-day free trial. +2. After completing the required form or signing in with your registered Syncfusion® account, you can download the trial installer from the confirmation page (as shown in the screenshot below). + + ![Syncfusion trial confirmation page](images/trial-confirmation.png) - ![Trial and downloads of Syncfusion JavaScript](images/trial-confirmation.png) - -3. With a trial license, only the latest version’s trial installer can be downloaded. -4. Unlock key is not required to install the Syncfusion® JavaScript Linux trial installer. -5. Before the trial expires, you can download the trial installer at any time from your registered account’s [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot.) - - ![Trial and downloads of Syncfusion JavaScript](images/trial-download.png) +3. With a trial license, only the latest version's trial installer can be downloaded. +4. An unlock key is not required to install the Syncfusion® JavaScript Linux trial installer. +5. Before the trial expires, you can download the trial installer at any time from your registered account's [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in the screenshot below). -6. Click the More Download Options (element 2 in the above screenshot) button to get the JavaScript Product Offline trial installer which is available in ZIP format. + ![Syncfusion Trials and Downloads page](images/trial-download.png) - ![License and downloads of Syncfusion JavaScript](images/start-trial-download-offline-installer.png) +6. Click **More Download Options** (element 2 in the screenshot above) to get the JavaScript Product Offline trial installer, which is available in ZIP format. + + ![Syncfusion offline trial installer download](images/start-trial-download-offline-installer.png) ### Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) -You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) +You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion). + +1. Start your 30-day free trial from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page in your account. -1. You can start your 30-day free trial from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page from your account. + > You can generate the license key for your active trial products from the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. This license key is required to use our trial products in your application. To learn more, see the [licensing overview](https://help.syncfusion.com/common/essential-studio/licensing/overview). - N> You can generate the license key for your active trial products from [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. This license key will be mandatory to use our trial products in your application. To know more about License key, refer this [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview). - - ![Trial and downloads of Syncfusion JavaScript](images/start-trial-download.png) - -2. To access this page, you must sign up\log in with your Syncfusion® account. -3. Begin your trial by selecting the Syncfusion® product. + ![Syncfusion Start Trial page](images/start-trial-download.png) - N> If you've already used the trial products and they haven't expired, you won't be able to start the trial for the same product again. +2. To access this page, you must sign up or sign in with your Syncfusion® account. +3. Begin your trial by selecting the Syncfusion® product. -4. After you've started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-generation) here at any time before the trial period expires. (as shown in below screenshot.) + > If you have already used a trial for a product and it has not expired, you will not be able to start a new trial for the same product. - ![License and downloads of Syncfusion JavaScript](images/start-trial-download-installer.png) +4. After starting the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-generation) here at any time before the trial period expires (as shown in the screenshot below). + + ![Syncfusion trial installer download page](images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. - ## Download the License Version -1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. +1. Syncfusion® licensed products are available on the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. 2. You can view all the licenses (both active and expired) associated with your account. -3. You can download JavaScript Linux licensed installer by going to More Downloads Options (element 3 in the screenshot below). +3. Download the JavaScript Linux licensed installer by going to **More Download Options** (element 3 in the screenshot below). + + ![Syncfusion License and Downloads page](images/license-download.png) + +4. An unlock key is not required to install the Syncfusion® JavaScript Linux licensed installer. +5. For Linux, the ZIP format is available for download. - ![License and downloads of Syncfusion JavaScript](images/license-download.png) - -4. Unlock key is not required to install the Syncfusion® JavaScript Linux trial installer. -5. For Linux OS, ZIP formats is available for download. - - ![License and downloads of Syncfusion JavaScript](images/Linux_Download.PNG) + ![Syncfusion Linux download option](images/Linux_Download.PNG) -You can also refer to the [**JavaScript Linux installer**](https://ej2.syncfusion.com/javascript/documentation/installation-and-upgrade/linux-installer/installation-using-linux-installer) links for step-by-step installation guidelines. +For step-by-step installation guidelines, see [Installation using the Linux installer](https://ej2.syncfusion.com/javascript/documentation/installation-and-upgrade/linux-installer/installation-using-linux-installer). diff --git a/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md b/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md index 347e5ddb7..f984af1f9 100644 --- a/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md +++ b/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md @@ -1,9 +1,9 @@ --- layout: post -title: Installation using linux installer in ##Platform_Name## Installation and upgrade control | Syncfusion -description: Learn here all about Installation using linux installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. +title: Installation using the Linux installer in ##Platform_Name## | Syncfusion +description: Learn how to install the Syncfusion ##Platform_Name## JavaScript Linux installer and register the license key. platform: ej2-javascript -control: Installation using linux installer +control: Installation using Linux installer publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,28 +11,41 @@ domainurl: ##DomainURL## # Installing Syncfusion® JavaScript Linux installer -## Step-by-Step Installation +**Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 Linux installer on Linux distributions supported by Syncfusion. + +## Prerequisites -The steps below show how to install JavaScript Linux installer. +Before you begin, make sure the following are in place: -1. Extract the Syncfusion® JavaScript Linux installer(.zip) file. The files are extracted in your machine. +* A user account with permission to extract the ZIP file and write to the target install directory. Use `sudo` for system-wide locations such as `/opt`. +* `unzip` (or another archive tool) available on the system to extract the installer. +* A current version of the Syncfusion JavaScript Linux installer ZIP. If you do not have it, see [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/linux-installer/download). +* A valid license key if you are using the licensed installer; the trial installer does not require an unlock key. + +## Step-by-Step Installation - ![Welcome wizard](images/Linux_Installer1.png) - +The steps below show how to install the Syncfusion® JavaScript Linux installer. -2. The Linux zip file contains the following folders. +1. Extract the Syncfusion® JavaScript Linux installer (`.zip`) file using your archive tool of choice. For example, from a terminal: - ![License Agreement](images/Linux_Installer2.png) - - N> The Unlock key is not required to install the Linux installer. + ![Extracted Linux installer contents on disk](images/Linux_Installer1.png) +2. The Linux ZIP file contains the demo source, NuGet packages, and supporting files (as shown in the screenshot below). -4. You can launch the demo source and use the NuGet packages included in the Linux installer. + ![Linux installer folder contents](images/Linux_Installer2.png) + > An unlock key is not required to install the Linux installer. +3. Open the extracted demo source in a browser or your preferred editor to launch the included samples, and reference the NuGet packages in your project as needed. + + To use the samples with the licensed installer, see the [License key registration](#license-key-registration-in-samples) section below. ## License key registration in samples -After the installation, the license key is required to register the demo source that is included in the Linux installer. To learn about the steps for license registration for the JavaScript - EJ2 Linux installer, please refer to this. +After installation, a license key is required to register the demo source that is included in the Linux installer. To learn the steps for license registration for the JavaScript – EJ2 Linux installer, see [License key registration](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration). + +Register the license key by using the [`registerLicense`](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) method after the Syncfusion® JavaScript script file reference. + +## Troubleshooting -Register the license key by using [registerLicense](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) method after the Syncfusion® JavaScript script file reference. \ No newline at end of file +If you encounter issues during installation, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors/) for solutions to typical problems such as trial vs. license key mismatch, blocked installations, and controlled folder access. \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md b/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md index 44c2eb363..7cbb6703a 100644 --- a/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md +++ b/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md @@ -1,9 +1,9 @@ --- layout: post -title: Upgrading syncfusion in ##Platform_Name## Installation and upgrade control | Syncfusion -description: Learn here all about Upgrading syncfusion in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. +title: Upgrading Syncfusion in ##Platform_Name## | Syncfusion +description: Learn how to upgrade Syncfusion ##Platform_Name## Essential Studio to the latest volume or service pack release. platform: ej2-javascript -control: Upgrading syncfusion +control: Upgrading Syncfusion publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,24 +11,48 @@ domainurl: ##DomainURL## # Upgrading Syncfusion® JavaScript (Essential® JS2) +**Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 on Windows. + Syncfusion® releases new volumes once every three months, with exciting new features. There will be one Service Pack release for these volume releases. Service Pack releases are provided to address major bug fixes in the volume releases. You can upgrade from any previous version — trial or licensed — to the latest release without uninstalling older versions. -See our **"[Upgrade Guide](https://help.syncfusion.com/upgrade-guide/typescript)"** for JavaScript – EJ2 to learn more about the “Breaking Changes, Bug Fixes, Features and Knows Issues” between your current version and the latest version you are trying to upgrade. +See the **[Upgrade Guide](https://help.syncfusion.com/upgrade-guide/typescript)** for JavaScript – EJ2 to learn more about the breaking changes, bug fixes, new features, and known issues between your current version and the latest version you are trying to upgrade to. + +## Prerequisites + +Before you begin, make sure the following are in place: + +* An active internet connection. +* A Syncfusion® account with a valid trial or licensed subscription. To create one, see [Create a Syncfusion account](https://www.syncfusion.com/account/register). +* Administrator rights on the machine (the installer must be run as administrator). +* A free disk space of at least 3 GB (the exact size is shown on the installer's **Download Size** and **Installation Size** links). ## Upgrading to the latest version -The most recent version of Syncfusion® JavaScript – EJ2 can be downloaded and installed by clicking on the “Latest Version: {Version}” link at the top of the Syncfusion® JavaScript – EJ2 Control Panel. +The most recent version of Syncfusion® JavaScript – EJ2 can be downloaded and installed by clicking the **Latest Version: {Version}** link at the top of the Syncfusion® JavaScript – EJ2 Control Panel. -![license download](images/upgrade3.png) +![Syncfusion Control Panel with Latest Version link highlighted](images/upgrade3.png) -You can also upgrade to the latest version just by downloading and installing the products you require from [this](https://www.syncfusion.com/account/downloads ) link. The existing installed versions are not required to be uninstalled. +You can also upgrade to the latest version by downloading and installing the products you require from the [Syncfusion Downloads](https://www.syncfusion.com/account/downloads) page. The existing installed versions are not required to be uninstalled. It is not required to install the Volume release before installing the Service Pack release. As releases for Volume and Service Packs work independently, you can install the latest version with major bug fixes directly. +## Upgrade procedure + +1. Open the Syncfusion® JavaScript – EJ2 Control Panel (from the Start menu or the desktop shortcut created during installation). +2. Click the **Latest Version: {Version}** link at the top of the Control Panel. The web installer downloads and launches automatically. +3. In the installer, accept the License Terms and sign in with your Syncfusion® account. +4. Select the products to upgrade, configure the install location, and complete the wizard. The new version installs side-by-side with any earlier versions. + +For full step-by-step instructions, see [Installation using web installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-web-installer/). + ## Upgrade from trial version to license version -Uninstall the trial version and install the fully licensed installer from the [License and Downloads](https://www.syncfusion.com/account/downloads ) section of our website to upgrade from the trial version. +Uninstall the trial version and install the fully licensed installer from the [License and Downloads](https://www.syncfusion.com/account/downloads) section of our website to upgrade from the trial version. + +>Note: License key registration is not required for JavaScript if you are using scripts (`.js`) and CSS files. If you are using the Syncfusion npm packages, you must register the license key in your application as described in the [licensing documentation](https://ej2.syncfusion.com/documentation/licensing/). + +## Troubleshooting ->Note: License key registration is not required for JavaScript, if you are using scripts (.js) and css files. \ No newline at end of file +If you encounter issues during the upgrade, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors/) for solutions to typical problems such as license key mismatch, blocked installations, and controlled folder access. \ No newline at end of file From 277cf31add68d2d8b0349772642540c1dc5293d9 Mon Sep 17 00:00:00 2001 From: VengadeshSF4855 Date: Wed, 15 Jul 2026 18:42:36 +0530 Subject: [PATCH 09/26] Fixed CI Issues --- .../installation-using-web-installer.md | 4 ++-- ej2-javascript/installation-and-upgrade/installation.md | 2 +- .../linux-installer/installation-using-linux-installer.md | 2 +- .../installation-and-upgrade/upgrading-syncfusion.md | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md index 0f05a0f86..2bdeae93e 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Installation using Web Installer -You can refer to the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download/) section to learn how to get the JavaScript – EJ2 trial or licensed installer. +You can refer to the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download) section to learn how to get the JavaScript – EJ2 trial or licensed installer. **Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 Web Installer on Windows. @@ -121,7 +121,7 @@ The steps below show how to install Essential Studio& ## Troubleshooting -If you encounter issues during installation, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors/) for solutions to typical problems such as trial vs. license key mismatch, blocked installations, and controlled folder access. +If you encounter issues during installation, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors) for solutions to typical problems such as trial vs. license key mismatch, blocked installations, and controlled folder access. ## Uninstallation diff --git a/ej2-javascript/installation-and-upgrade/installation.md b/ej2-javascript/installation-and-upgrade/installation.md index fb1e09e5e..f4c189c7a 100644 --- a/ej2-javascript/installation-and-upgrade/installation.md +++ b/ej2-javascript/installation-and-upgrade/installation.md @@ -15,7 +15,7 @@ This guide explains how to install Syncfusion®® account. 4. Select the products to upgrade, configure the install location, and complete the wizard. The new version installs side-by-side with any earlier versions. -For full step-by-step instructions, see [Installation using web installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-web-installer/). +For full step-by-step instructions, see [Installation using web installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-web-installer). ## Upgrade from trial version to license version Uninstall the trial version and install the fully licensed installer from the [License and Downloads](https://www.syncfusion.com/account/downloads) section of our website to upgrade from the trial version. ->Note: License key registration is not required for JavaScript if you are using scripts (`.js`) and CSS files. If you are using the Syncfusion npm packages, you must register the license key in your application as described in the [licensing documentation](https://ej2.syncfusion.com/documentation/licensing/). +>Note: License key registration is not required for JavaScript if you are using scripts (`.js`) and CSS files. If you are using the Syncfusion npm packages, you must register the license key in your application as described in the [licensing documentation](https://ej2.syncfusion.com/documentation/licensing). ## Troubleshooting -If you encounter issues during the upgrade, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors/) for solutions to typical problems such as license key mismatch, blocked installations, and controlled folder access. \ No newline at end of file +If you encounter issues during the upgrade, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors) for solutions to typical problems such as license key mismatch, blocked installations, and controlled folder access. \ No newline at end of file From 3522c2d6452b05a04d6410e92bfcb885882d5e60 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 16 Jul 2026 13:46:31 +0530 Subject: [PATCH 10/26] Integrated latest changes at 07-16-2026 1:30:12 PM --- ej2-javascript/auto-complete/accessibility.md | 8 ++-- ej2-javascript/diagram/ts/getting-started.md | 34 +++++++++++++-- ej2-javascript/grid/ts/getting-started.md | 43 +++++-------------- ej2-javascript/list-box/accessibility.md | 12 ++++-- ej2-javascript/tab/accessibility.md | 6 +-- ej2-javascript/treegrid/ts/getting-started.md | 24 +---------- 6 files changed, 57 insertions(+), 70 deletions(-) diff --git a/ej2-javascript/auto-complete/accessibility.md b/ej2-javascript/auto-complete/accessibility.md index 8c1d3b018..8eb24fe4a 100644 --- a/ej2-javascript/auto-complete/accessibility.md +++ b/ej2-javascript/auto-complete/accessibility.md @@ -63,10 +63,10 @@ You can use the following key shortcuts to access the AutoComplete without inter | **Keyboard shortcuts** | **Actions** | | --- | --- | -| Arrow Down | In popup hidden state, opens the suggestion list. In popup open state, selects the first item when no item selected else selects the item next to the currently selected item. | -| Arrow Up | In popup hidden state, opens the suggestion list. In popup open state, selects the last item when no item selected else selects the item previous to the currently selected one. | -| Page Down | Scrolls down to the next page and selects the first item when popup list opens. | -| Page Up | Scrolls up to previous page and select the first item when popup list open. | +| Arrow Down | In popup hidden state, opens the suggestion list. In popup open state, focus the first item when no item selected else focus the item next to the currently selected item. | +| Arrow Up | In popup hidden state, opens the suggestion list. In popup open state, focus the last item when no item selected else focus the item previous to the currently selected one. | +| Page Down | Scrolls down to the next page and focus the first item when popup list opens. | +| Page Up | Scrolls up to previous page and focus the first item when popup list open. | | Enter | Selects the focused item and set to AutoComplete component. | | Tab | Focuses on the next tab indexed element when the popup is closed. Otherwise, closes the popup list and remains the focus in component suppose if it is in an open state. | | Shift + tab | Focuses the previous tab indexed element when the popup is closed. Otherwise,closes the popup list and remains the focus in component suppose if it is in an open state. | diff --git a/ej2-javascript/diagram/ts/getting-started.md b/ej2-javascript/diagram/ts/getting-started.md index 61339ca67..d5801e8c5 100644 --- a/ej2-javascript/diagram/ts/getting-started.md +++ b/ej2-javascript/diagram/ts/getting-started.md @@ -45,11 +45,37 @@ Syncfusion® TypeScript (Essential® TypeScript controls come with built-in themes, which are available in the installed packages. It's easy to adapt the Syncfusion® TypeScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. The quickstart application is preconfigured with the dependent `@syncfusion/ej2` package in the **package.json** file. Use the following command to install the dependent npm packages from the command prompt. + +``` +npm install +``` + +## Import Syncfusion® CSS styles + +The Diagram control needs Syncfusion® theme styles to display correctly. Add the styles using one of the following options. + +### Option 1: Add styles from a theme package + +Syncfusion® theme packages include ready-to-use styles for supported controls. Install the Tailwind 3 theme package using the following command: + +``` +npm install @syncfusion/ej2-tailwind3-theme --save +``` + +Then add the following CSS reference to the **src/styles/styles.css** file: + +``` +@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/diagram/index.css"; +``` + +For the list of available themes, refer to the [Themes](https://ej2.syncfusion.com/documentation/appearance/theme) documentation. + +### Option 2: Add styles from control packages -To use the `Tailwind` theme in the **~/src/styles/styles.css** file, as shown below: +After installing the Diagram package, the required style files are available under the **node_modules/@syncfusion** directory. Add the required Syncfusion® styles to the **src/styles/styles.css** file: ``` @import "../../node_modules/@syncfusion/ej2-diagrams/styles/tailwind.css"; @@ -58,7 +84,7 @@ To use the `Tailwind` theme in the **~/src/styles/styles.css** file, as shown be @import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css"; ``` -N> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). +N> Syncfusion® provides multiple built-in themes. If the application uses a different theme, replace the **tailwind3.css** references with the corresponding theme file, such as **material3.css**. ### Add the HTML element diff --git a/ej2-javascript/grid/ts/getting-started.md b/ej2-javascript/grid/ts/getting-started.md index 90dfaf101..a77f14ca1 100644 --- a/ej2-javascript/grid/ts/getting-started.md +++ b/ej2-javascript/grid/ts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with TypeScript DataGrid control | Syncfusion -description: Checkout and learn about Getting started with TypeScript DataGrid control of Syncfusion Essential JS 2 and more details. +title: Getting started with TypeScript Data Grid control | Syncfusion +description: Checkout and learn about Getting started with TypeScript Data Grid control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started publishingplatform: ##Platform_Name## @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in TypeScript DataGrid control +# Getting started in TypeScript Data Grid control -This section explains the steps to create a simple DataGrid and demonstrates the basic usage of the DataGrid component using the Essential® JS 2 +This section explains the steps to create a simple Data Grid and demonstrates the basic usage of the Data Grid component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node **v14.15.0** or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). @@ -37,11 +37,7 @@ npm install ## Adding CSS reference -You can add the CSS files required for the Syncfusion TypeScript DataGrid component using one of the following methods. - -### Option 1: Add CSS references from a theme package - -Themes for Syncfusion® DataGrid components can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation. +Themes for Syncfusion® Data Grid components can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation. Install the **Material 3** theme package using the following command: @@ -63,33 +59,16 @@ Then add the following CSS reference to the **src/styles/styles.css** file: {% endhighlight %} {% endtabs %} -### Option 2: Add CSS references from component packages - -After installing the DataGrid package, the required CSS files are available in the corresponding Syncfusion packages under the **node_modules/@syncfusion** directory. Add the following CSS references to the **src/styles/styles.css** file: - -```css -@import '../../node_modules/@syncfusion/ej2-base/styles/material3.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material3.css'; -@import '../../node_modules/@syncfusion/ej2-calendars/styles/material3.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material3.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/material3.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material3.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css'; -@import '../../node_modules/@syncfusion/ej2-notifications/styles/material3.css'; -@import "../../node_modules/@syncfusion/ej2-react-grids/styles/material3.css"; -``` - -## Adding DataGrid component +## Adding Data Grid component -Add the DataGrid component in **app.ts** file using the following code. +Add the Data Grid component in **app.ts** file using the following code. {% tabs %} {% highlight ts tabtitle="app.ts" %} import { Grid } from '@syncfusion/ej2-grids'; -// Defines the data to be displayed in the DataGrid. +// Defines the data to be displayed in the Data Grid. const data: object[] = [ { OrderID: 10248, CustomerName: 'Ana Trujillo', OrderDate: new Date(2025, 0, 12), ShipCountry: 'France', Freight: 32.38 }, { OrderID: 10249, CustomerName: 'Martin Sommer', OrderDate: new Date(2025, 0, 15), ShipCountry: 'Germany', Freight: 11.61 }, @@ -133,7 +112,7 @@ grid.appendTo('#Grid');
        - +
        @@ -160,5 +139,5 @@ npm start ## See also -* [DataGrid Feature Modules](https://ej2.syncfusion.com/documentation/grid/module) -* [How to open PDF document on button click inside a DataGrid](https://support.syncfusion.com/kb/article/10246/how-to-open-pdf-document-on-button-click-inside-a-grid) \ No newline at end of file +* [Data Grid Feature Modules](https://ej2.syncfusion.com/documentation/grid/module) +* [How to open PDF document on button click inside a Data Grid](https://support.syncfusion.com/kb/article/10246/how-to-open-pdf-document-on-button-click-inside-a-grid) \ No newline at end of file diff --git a/ej2-javascript/list-box/accessibility.md b/ej2-javascript/list-box/accessibility.md index 141b8185a..869b5635d 100644 --- a/ej2-javascript/list-box/accessibility.md +++ b/ej2-javascript/list-box/accessibility.md @@ -32,11 +32,11 @@ The web accessibility makes web content and web applications more accessible for Up arrow -Moves focus to the previous option. +Moves focus to and selects the previous item. Down arrow -Moves focus to the next option. +Moves focus to and selects the next item. Home @@ -63,8 +63,12 @@ Selects the focused option and all options up to the first option. Selects the focused option and all options down to the last option. -Ctrl + (Up or Down) -Press Ctrl key with up / down arrow or mouse to select multiple items. +Ctrl + Up +Moves focus to the previous item. + + +Ctrl + Down) +Moves focus to the next item. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/tab/accessibility.md b/ej2-javascript/tab/accessibility.md index 8c4515245..3494a1116 100644 --- a/ej2-javascript/tab/accessibility.md +++ b/ej2-javascript/tab/accessibility.md @@ -62,9 +62,9 @@ By default, keyboard navigation is enabled. This control implements keyboard nav | Key | Description | |---------------|-------------------------------------------------------------------------------------| -| Left | Moves focus to the previous Tab. If focus is on the first Tab, the focus will not move to any Tab. | -| Right | Moves focus to the next Tab. If focus is on the last Tab element, the focus will not move to any Tab. | -| Enter or Space | Selects the Tab if it is not selected. Opens the popup dropdown icon if it is focussed. Select the Tab item as active when popup item is focussed. | +| Left | Moves focus to the previous Tab. | +| Right | Moves focus to the next Tab. | +| Enter or Space | Selects the Tab if it is not selected. Opens the popup dropdown icon if it is focused. Select the Tab item as active when popup item is focused. | | Esc(Escape) | Closes the popup if popup is in opened state. | | Down or Up | When the popup is open and focused, it will move to previous/next Tab items of the popup in the vertical direction.| | Home | Moves focus to the first Tab. | diff --git a/ej2-javascript/treegrid/ts/getting-started.md b/ej2-javascript/treegrid/ts/getting-started.md index c99a4cbf8..b7ebdf3e8 100644 --- a/ej2-javascript/treegrid/ts/getting-started.md +++ b/ej2-javascript/treegrid/ts/getting-started.md @@ -38,10 +38,6 @@ npm install ## Adding CSS reference -You can add the CSS files required for the Syncfusion Tree Grid component using one of the following methods. - -### Option 1: Add CSS references from a theme package - Themes for Syncfusion® Tree Grid component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/documentation/appearance/theme) documentation. Install the **Material 3** theme package using the following command: @@ -59,29 +55,11 @@ Then add the following CSS reference to the **src/styles/styles.css** file: {% tabs %} {% highlight css tabtitle="App.css" %} -@import "../node_modules/@syncfusion/ej2-material3-theme/grids/grid/index.css"; +@import "../node_modules/@syncfusion/ej2-material3-theme/styles/treegrid/index.css"; {% endhighlight %} {% endtabs %} -### Option 2: Add CSS references from component packages - -After installing the Tree Grid package, the required CSS files are available in the corresponding Syncfusion packages under the **node_modules/@syncfusion** directory. Add the following CSS references to the **src/styles/styles.css** file: - -```css -@import '../node_modules/@syncfusion/ej2-base/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css'; -@import '../node_modules/@syncfusion/ej2-notifications/styles/material3.css'; -@import "../node_modules/@syncfusion/ej2-grids/styles/material3.css"; -@import "../node_modules/@syncfusion/ej2-treegrid/styles/material3.css"; -``` - ## Adding Tree Grid component Add the Tree Grid component in `[src/app/app.ts]` file using the following code and define a Tree Grid container element in [src/index.html] to render the component. From c2e72f0802fc1ee799fe07f6f8efcd07de67c8a3 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 17 Jul 2026 13:45:50 +0530 Subject: [PATCH 11/26] Integrated latest changes at 07-17-2026 1:30:04 PM --- ej2-javascript-toc.html | 2 +- ...-editing.md => real-time-collaboration.md} | 4 +- ...-editing.md => real-time-collaboration.md} | 11 +- ej2-javascript/grid/js/getting-started.md | 65 ++++++- ej2-javascript/grid/ts/getting-started.md | 54 +++++- .../common-installation-errors.md | 52 +++--- .../installation-and-upgrade/download.md | 85 ++++----- .../installation-using-mac-installer.md | 74 +++----- .../installation-using-offline-installer.md | 173 ++++++------------ .../installation-using-web-installer.md | 167 ++++++++--------- .../installation-and-upgrade/installation.md | 92 ++-------- .../linux-installer/download.md | 84 ++++----- .../installation-using-linux-installer.md | 43 ++--- .../upgrading-syncfusion.md | 42 +---- .../pivotview/js/getting-started.md | 121 ++++++------ .../pivotview/ts/getting-started-vite.md | 31 ++-- .../pivotview/ts/getting-started.md | 22 ++- ej2-javascript/schedule/ts/getting-started.md | 36 ++-- ej2-typescript-toc.html | 2 +- 19 files changed, 550 insertions(+), 610 deletions(-) rename ej2-javascript/block-editor/js/{es5-collaborative-editing.md => real-time-collaboration.md} (98%) rename ej2-javascript/block-editor/ts/{collaborative-editing.md => real-time-collaboration.md} (97%) diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html index 590219974..a8e76f349 100644 --- a/ej2-javascript-toc.html +++ b/ej2-javascript-toc.html @@ -304,7 +304,7 @@
      • Code Blocks
      • -
    • Real-time collaboration
      • +
    • Real-time Collaboration
    • Editor Menus
    • Drag and drop
    • Paste Cleanup
      • diff --git a/ej2-javascript/block-editor/js/es5-collaborative-editing.md b/ej2-javascript/block-editor/js/real-time-collaboration.md similarity index 98% rename from ej2-javascript/block-editor/js/es5-collaborative-editing.md rename to ej2-javascript/block-editor/js/real-time-collaboration.md index 1a77b30b2..a3bb38874 100644 --- a/ej2-javascript/block-editor/js/es5-collaborative-editing.md +++ b/ej2-javascript/block-editor/js/real-time-collaboration.md @@ -1,6 +1,6 @@ --- layout: post -title: Collaborative Editing in JavaScript Block Editor Control | Syncfusion +title: Real-Time Collaboration in JavaScript Block Editor | Syncfusion description: Enable real-time collaborative editing in the JavaScript Block Editor component of Syncfusion Essential JS 2 with user presence and version history. platform: ej2-javascript control: Block Editor @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Collaborative Editing in ##Platform_Name## Block Editor control +# Real-time Collaboration in ##Platform_Name## Block Editor control The Block Editor supports real-time collaborative editing, enabling multiple users to work on the same document simultaneously. Collaboration is powered by **Yjs**, a Conflict-free Replicated Data Type (CRDT) framework that synchronizes document changes across all connected users and automatically resolves conflicts. diff --git a/ej2-javascript/block-editor/ts/collaborative-editing.md b/ej2-javascript/block-editor/ts/real-time-collaboration.md similarity index 97% rename from ej2-javascript/block-editor/ts/collaborative-editing.md rename to ej2-javascript/block-editor/ts/real-time-collaboration.md index fb1a8b7b9..a319ace92 100644 --- a/ej2-javascript/block-editor/ts/collaborative-editing.md +++ b/ej2-javascript/block-editor/ts/real-time-collaboration.md @@ -1,6 +1,6 @@ --- layout: post -title: Collaborative Editing in TypeScript Block Editor Control | Syncfusion +title: Real-Time Collaboration in TypeScript Block Editor | Syncfusion description: Enable real-time collaborative editing in the TypeScript Block Editor component of Syncfusion Essential JS 2 with user presence and version history. platform: ej2-javascript control: Block Editor @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Collaborative Editing in ##Platform_Name## Block Editor control +# Real-time Collaboration in ##Platform_Name## Block Editor control The Block Editor supports real-time collaborative editing, enabling multiple users to work on the same document simultaneously.Collaboration is powered by **Yjs**, a Conflict-free Replicated Data Type (CRDT) framework that synchronizes document changes across all connected users and automatically resolves conflicts. @@ -31,6 +31,7 @@ Inject the `Collaboration` module into the Block Editor before use. {% tabs %} {% highlight ts tabtitle="index.ts" %} +import { BlockEditor, Collaboration } from "@syncfusion/ej2-blockeditor"; BlockEditor.Inject(Collaboration); {% endhighlight %} {% endtabs %} @@ -80,11 +81,12 @@ Create an adapter that provides the Yjs runtime and the shared fragment to the B {% tabs %} {% highlight ts tabtitle="index.ts" %} import * as Y from 'yjs'; +import { YjsAdapter } from '@syncfusion/ej2-blockeditor'; -const adapter = new YjsAdapter({ +const adapter: YjsAdapter = { yRuntime: Y, yXmlFragment: yFragment -}); +}; {% endhighlight %} {% endtabs %} @@ -191,6 +193,7 @@ Inject the `VersionHistory` module and configure the `versionHistory` property u {% tabs %} {% highlight ts tabtitle="index.ts" %} +import { BlockEditor, Collaboration, VersionHistory } from "@syncfusion/ej2-blockeditor"; BlockEditor.Inject(VersionHistory); const myStorage = new CustomVersionStorage(`blockeditor-${uniqueId}`); diff --git a/ej2-javascript/grid/js/getting-started.md b/ej2-javascript/grid/js/getting-started.md index 8ecbbc496..e409f2d47 100644 --- a/ej2-javascript/grid/js/getting-started.md +++ b/ej2-javascript/grid/js/getting-started.md @@ -9,13 +9,24 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in JavaScript DataGrid control +# Getting started with JavaScript DataGrid control -This section explains the steps required to create a simple Essential® JS 2 DataGrid and demonstrate the basic usage of the DataGrid control in a JavaScript application. +This section explains the steps required to create a simple Essential® JS 2 DataGrid and demonstrates the basic usage of the DataGrid control in a JavaScript application. + +## Prerequisites + +Before getting started, ensure the following requirements are met: + +| Requirement | Notes | +|-------------|-------| +| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | +| Code editor | Visual Studio Code is recommended | +| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | +| Syncfusion® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | ## Dependencies -A list of dependencies to use the DataGrid with all features. +The following packages are required to use the DataGrid with all features. These package names apply to **npm-based projects**. If you are using CDN, all dependencies are automatically included — refer to the [Adding Syncfusion DataGrid CDN resources](#adding-syncfusion-datagrid-cdn-resources) section. ```javascript |-- @syncfusion/ej2-grids @@ -36,13 +47,25 @@ A list of dependencies to use the DataGrid with all features. |-- @syncfusion/ej2-notifications ``` +> For npm-based projects, install the packages using: `npm install @syncfusion/ej2-grids --save` + ## Setup for local environment -Refer to the following steps to set up your local environment. +Follow these steps to set up your local environment. **Step 1:** Create a root folder named **my-app** for your application. -**Step 2:** Open Visual Studio Code and create **my-app/index.js** and **my-app/index.html** files to initialize the Essential® JS 2 DataGrid control. +**Step 2:** Open Visual Studio Code and create two files inside the **my-app** folder: +- **index.html** — the main HTML file that loads the CDN resources and provides the grid container element. +- **index.js** — the JavaScript file where the DataGrid control is initialized. + +Refer to the [Adding Syncfusion DataGrid CDN resources](#adding-syncfusion-datagrid-cdn-resources) and [Adding DataGrid control](#adding-datagrid-control) sections below for the content to add to each file. + +**Step 3:** In **index.html**, add a ` +``` ## Adding Syncfusion® DataGrid CDN resources @@ -158,10 +181,42 @@ grid.appendTo('#Grid'); {% previewsample "page.domainurl/code-snippet/grid/grid-cs132" %} +## Registering a license key + +Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. + +**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). + +**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. + +```javascript +// Register Syncfusion license key +ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). + ## Run the application Now, run the **index.html** in web browser, it will render the Essential® JS 2 DataGrid control. +## Troubleshooting + +**Grid renders blank / no rows appear** +- Verify that the `dataSource` property is set and the data array is not empty. +- Open the browser developer console (F12) and check for JavaScript errors. +- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). + +**License validation warning in the console** +- Register your license key before instantiating any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. + +**Scripts blocked when opening via `file://`** +- Serve the application through a local HTTP server. Refer to the [Run the application](#run-the-application) section. + +**CDN resources fail to load** +- Check your internet connection. +- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. + ## See also * [DataGrid Feature Modules](https://ej2.syncfusion.com/javascript/documentation/grid/module) diff --git a/ej2-javascript/grid/ts/getting-started.md b/ej2-javascript/grid/ts/getting-started.md index a77f14ca1..968c0c176 100644 --- a/ej2-javascript/grid/ts/getting-started.md +++ b/ej2-javascript/grid/ts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with TypeScript Data Grid control | Syncfusion -description: Checkout and learn about Getting started with TypeScript Data Grid control of Syncfusion Essential JS 2 and more details. +description: Checkout and learn about Getting started with TypeScript Data Grid control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started publishingplatform: ##Platform_Name## @@ -16,6 +16,41 @@ This section explains the steps to create a simple Data Grid and demonstrates th > This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node **v14.15.0** or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). +## Prerequisites + +Before getting started, ensure the following tools are installed on your machine: + +| Tool | Version / Notes | +|------|----------------| +| Node.js | v14.15.0 or higher | +| npm | Bundled with Node.js | +| Git | Required to clone the quickstart repository | +| Visual Studio Code | Recommended code editor | + +You can verify your Node.js and npm versions by running: + +``` +node -v +npm -v +``` + +## Registering the license key + +Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. + +**Steps to register the license key:** + +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: + +```ts +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. + ## Setup for local development Clone the Essential® JS 2 quickstart application project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) using the following command line scripts. @@ -29,7 +64,13 @@ cd ej2-quickstart-webpack Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Use the following command to install the dependent npm packages from the command prompt. +Use the following command to install the `@syncfusion/ej2-grids` package: + +``` +npm install @syncfusion/ej2-grids --save +``` + +Then, install the remaining dependent npm packages using the following command: ``` npm install @@ -61,7 +102,7 @@ Then add the following CSS reference to the **src/styles/styles.css** file: ## Adding Data Grid component -Add the Data Grid component in **app.ts** file using the following code. +Add the Data Grid component in **src/app/app.ts** file using the following code. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -133,11 +174,16 @@ grid.appendTo('#Grid'); ## Run the application +The `npm start` command compiles the TypeScript source files and starts the webpack development server. Run the following command: + ``` npm start ``` +Open `http://localhost:8080` (or the port shown in the terminal) in a browser. You should see a Data Grid rendered with the sample order data, displaying the following columns: **Order ID**, **Customer Name**, **Order Date**, **Freight**, and **Ship Country**. + ## See also * [Data Grid Feature Modules](https://ej2.syncfusion.com/documentation/grid/module) -* [How to open PDF document on button click inside a Data Grid](https://support.syncfusion.com/kb/article/10246/how-to-open-pdf-document-on-button-click-inside-a-grid) \ No newline at end of file +* [Data Binding in Data Grid](https://ej2.syncfusion.com/documentation/grid/data-binding/data-binding) +* [Columns in Data Grid](https://ej2.syncfusion.com/documentation/grid/columns/columns) \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/common-installation-errors.md b/ej2-javascript/installation-and-upgrade/common-installation-errors.md index 8525bf4b3..9e781e9d2 100644 --- a/ej2-javascript/installation-and-upgrade/common-installation-errors.md +++ b/ej2-javascript/installation-and-upgrade/common-installation-errors.md @@ -1,7 +1,7 @@ --- layout: post -title: Common installation errors in ##Platform_Name## Essential Studio | Syncfusion -description: Troubleshoot common installation errors when installing Syncfusion ##Platform_Name## Essential Studio. +title: Common installation errors in ##Platform_Name## Common control | Syncfusion +description: Learn here all about Common installation errors in Syncfusion ##Platform_Name## Common control of Syncfusion Essential JS 2 and more. platform: ej2-javascript control: common publishingplatform: ##Platform_Name## @@ -13,8 +13,6 @@ domainurl: ##DomainURL## This article describes the most common installation errors, as well as the causes and solutions to those errors. -**Applies to:** Syncfusion Essential Studio installers (Online and Offline) for ##Platform_Name## on Windows. - * Unlocking the license installer using the trial key * License has expired * Unable to find a valid license or trial @@ -25,19 +23,19 @@ This article describes the most common installation errors, as well as the cause **Error Message:** Sorry, the provided unlock key is a trial unlock key and cannot be used to unlock the licensed version of our Essential Studio® for JavaScript installer. -![Trial unlock key used on licensed installer error dialog](images/error1.png) +![license download](images/error1.png) **Reason**
      You are attempting to use a Trial unlock key to unlock the licensed installer. -**Suggested solution**
      Only a licensed unlock key can unlock a licensed installer. To unlock the licensed installer, use the licensed unlock key. To generate the licensed unlock key, refer to [this](https://www.syncfusion.com/kb/2326/how-to-generate-syncfusion-setup-unlock-key-from-syncfusion-support-account) article. +**Suggested solution**
      Only a licensed unlock key can unlock a licensed installer. So, to unlock the Licensed installer, use the Licensed unlock key. To generate the licensed unlock key, refer to [this](https://www.syncfusion.com/kb/2326/how-to-generate-syncfusion-setup-unlock-key-from-syncfusion-support-account) article. ## License has expired -**Error Message:** Your license for Syncfusion® Essential Studio® for JavaScript – EJ2 has been expired since <date>. Please renew your subscription and try again. +**Error Message:** Your license for Syncfusion® Essential Studio® for JavaScript – EJ2 has been expired since {date}. Please renew your subscription and try again. ***Online Installer*** -![Online installer license expired error dialog](images/error2.png) +![license download](images/error2.png) **Reason**
      This error message will appear if your license has expired. @@ -49,7 +47,7 @@ This article describes the most common installation errors, as well as the cause 3. You can reach out to our sales team by emailing sales@syncfusion.com. -4. You can extend the 30-day trial period before it expires. +4. You can also extend the 30-day trial period after your trial license has expired. ## Unable to find a valid license or trial @@ -57,14 +55,16 @@ This article describes the most common installation errors, as well as the cause ***Offline installer*** -![Offline installer unable to find a valid license or trial dialog](images/error3.png) +![license download](images/error3.png) ***Online installer*** -![Online installer unable to find a valid license or trial dialog](images/error4.png) +![license download](images/error4.png) **Reason**
      The following are possible causes of this error: +The following are possible causes of this error: + * When your trial period expired * When you don’t have a license or an active trial * You are not the license holder of your license @@ -84,19 +84,19 @@ This article describes the most common installation errors, as well as the cause **Error Message:** Another installation is in progress. You cannot start this installation without completing all other currently active installations. Click cancel to end this installer or retry to attempt after currently active installation completed to install again. -![Another installation in progress error dialog](images/error5.png) +![license download](images/error5.png) -**Reason**
      You are trying to install when another installation is already running on your machine. +**Reason**
      You are trying to install when another installation is already running in your machine. -**Suggested solution**
      To resolve the issue, end the active msiexec process using Task Manager, then run the Syncfusion® installer again. If the problem persists, restart the computer and try again. +**Suggested solution**
      Open and kill the msiexec process in the task manager and then continue to install Syncfusion®. If the problem is still present, restart the computer and try Syncfusion® installer. -1. Open Windows Task Manager. +1. Open the Windows Task Manager. -2. Go to the **Details** tab. +2. Browse the Details tab. -3. Select **msiexec.exe** (it may appear as **msiexec.exe *32** on 64-bit systems) and click **End task**. +3. Select the msiexec.exe and click **End task**. -![End msiexec.exe task in Windows Task Manager Details tab](images/error6.png) +![license download](images/error6.png) ## Unable to install due to controlled folder access @@ -104,22 +104,22 @@ This article describes the most common installation errors, as well as the cause **Error Message:** Controlled folder access seems to be enabled in your machine. The provided install or samples location (e.g., Public Documents) is protected by the controlled folder access settings. -![Offline installer controlled folder access blocked dialog](images/error7.png) +![license download](images/error7.png) ***Online*** -**Error Message:** Controlled folder access seems to be enabled in your machine. The provided install, samples, or download location (e.g., Public Documents) is protected by the controlled folder access settings. (The Online installer references the additional download location, while the Offline installer does not.) +**Error Message:** Controlled folder access seems to be enabled in your machine. The provided install, samples, or download location (e.g., Public Documents) is protected by the controlled folder access settings. -![Online installer controlled folder access blocked dialog](images/error8.png) +![license download](images/error8.png) -**Reason**
      Controlled folder access is enabled on your machine. +**Reason**
      You have enabled controlled folder access settings on your computer. ***Suggested solution*** **Suggestion 1:**
      -1. Our demos are installed in the Public Documents folder by default. -2. Controlled folder access is enabled on your machine, so the demos cannot be installed in the Documents folder. If you need to install the demos in the Documents folder, follow the steps in this [link](https://support.microsoft.com/en-us/windows/allow-an-app-to-access-controlled-folders-b5b6627a-b008-2ca2-7931-7e51e912b034) and disable controlled folder access. You can also allow the Syncfusion installer through Controlled Folder Access instead of disabling it entirely. -3. You can re-enable controlled folder access after installing the Syncfusion® installer. +1. We will ship our demos in the public documents folder by default. +2. You have controlled folder access enabled on your machine, so our demos cannot be installed in the documents folder. If you need to install our demos in the Documents folder, follow the steps in this [link](https://support.microsoft.com/en-us/windows/allow-an-app-to-access-controlled-folders-b5b6627a-b008-2ca2-7931-7e51e912b034) and disable the controlled folder access. +3. You can enable this option after the installing our Syncfusion® setup. **Suggestion 2:**
      -1. If you do not want to disable controlled folder access, you can install the demos in another directory. In the installer, click **Browse** on the install location screen and choose a folder that is not protected by controlled folder access. +1. If you do not want to disable controlled folder access, you can install our demos in another directory. diff --git a/ej2-javascript/installation-and-upgrade/download.md b/ej2-javascript/installation-and-upgrade/download.md index 83bc87f72..a8ab24b5a 100644 --- a/ej2-javascript/installation-and-upgrade/download.md +++ b/ej2-javascript/installation-and-upgrade/download.md @@ -3,7 +3,7 @@ layout: post title: Download in ##Platform_Name## Installation and upgrade control | Syncfusion description: Learn here all about Download in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Download +control: Download publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,99 +11,94 @@ domainurl: ##DomainURL## # Download JavaScript – EJ2 Installer -The Syncfusion® JavaScript - EJ2 installer can be downloaded from the Syncfusion® website. You can either download the licensed installer or try our trial installer depending on your license. This guide covers the following options: +The Syncfusion® JavaScript - EJ2 installer can be downloaded from the Syncfusion® website. You can either download the licensed installer or try our trial installer depending on your license. * Trial Installer * Licensed Installer -**Prerequisites** - -* A registered Syncfusion® account. To create one, see the [Syncfusion downloads page](https://www.syncfusion.com/downloads). -* A Windows, macOS, or Linux machine that meets the [Syncfusion system requirements](https://help.syncfusion.com/common/essential-studio/system-requirements) for the platform you are installing. - ## Download the Trial Version -The 30-day trial can be downloaded in two ways: +Our 30-day trial can be downloaded in two ways. * Download Free Trial Setup -* Start Trials if using components through [npm](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-) +* Start Trials if using components through [npm](https://www.npmjs.com/~syncfusionorg) ### Download Free Trial Setup -1. Evaluate the 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and selecting the JavaScript platform. +1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the JavaScript platform. -2. After completing the required form or logging in with your registered Syncfusion® account, download the JavaScript - EJ2 trial installer from the confirmation page (see the screenshot below). +2. After completing the required form or logging in with your registered Syncfusion® account, you can download the JavaScript - EJ2 trial installer from the confirmation page. (See the screenshot below.) - ![EJ2 trial confirmation](images/trial-confirmation.png) + ![ej2 trial confirmation](images/trial-confirmation.png) -3. With a trial license, only the latest version's trial installer can be downloaded. +3. With a trial license, only the latest version’s trial installer can be downloaded. -4. After downloading, the Syncfusion® JavaScript - EJ2 trial installer can be unlocked using either the trial unlock key or the Syncfusion® registered login credentials. For more information on generating an unlock key, see [this article](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products). +4. After downloading, the Syncfusion® JavaScript - EJ2 trial installer can be unlocked using either the trial unlock key or the Syncfusion® registered login credential. More information on generating an unlock key can be found in this article. -5. Before the trial expires, you can download the trial installer at any time from your registered account's **Trials & Downloads** page (see the screenshot below). +5. Before the trial expires, you can download the trial installer at any time from your registered account’s Trials & Downloads page (See the screenshot below.) - ![Trial installer dashboard](images/dashboard.png) + ![trail installer dashboard](images/dashboard.png) -6. Click **Download** (element 1 in the screenshot below) to get the Syncfusion® Essential Studio® JavaScript – EJ2 web installer. +6. Click the Download (element 1 in the screenshot below) button to get the Syncfusion® Essential Studio® JavaScript – EJ2 web installer. - ![Start trial download - web installer](images/start-trial-download-installer.png) + ![start trial download installer](images/start-trial-download-installer.png) -7. Click **More Download Options** (element 2 in the above screenshot) to get the Essential Studio® JavaScript installer for various platforms. +7. Click the More Download Options (element 2 in the above screenshot) button to get the Essential Studio® JavaScript installer for various platforms. - - **Windows** +- **Windows** - Select the **Windows** tab to download the appropriate installer options for Windows. + - Select the **Windows** tab to download the appropriate installer options for Windows - - **Offline Installer:** Available in `.EXE` and `.ZIP` formats. + - **Offline Installer:** Available in `.EXE` and `.ZIP` formats. - ![Start trial download - offline installer](images/offline-installer1.png) + ![start trial download offline installer](images/offline-installer1.png) - - **Web Installer:** Available in `.EXE` format for minimal download size. + - **Web Installer:** Available in `.EXE` format for minimal download size. - ![Start trial download - web installer](images/start-trial-download-offline-installer.png) + ![start trial download web installer](images/start-trial-download-offline-installer.png) - - **Mac** +- **MAC** - Select the **Mac** tab to download the appropriate installer options for Mac, which are provided in `.DMG` format. + * Select the **Mac** tab to download the appropriate installer options for MAC, which are provided in `.DMG` format. - ![Start trial download - Mac installer](images/mac-installer.png) + ![start trial download MAC installer](images/mac-installer.png) -### Start Trials if Using Components Through npm +**Start Trials if using components through [npm](https://www.npmjs.com/~syncfusionorg)** -If you have already obtained Syncfusion® components through [npm](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-), initiate an evaluation as follows: +You should initiate an evaluation if you have already obtained our components through [npm](https://www.npmjs.com/~syncfusionorg) -1. Start your 30-day free trial for JavaScript – EJ2 from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page in your account. +1. You can start your 30-day free trial for JavaScript – EJ2 from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page from your account. - ![Start trial page](images/start-trial-download.png) + ![start trial download](images/start-trial-download.png) -2. To access this page, you must sign up or log in with your Syncfusion® account. +2. To access this page, you must sign up\log in with your Syncfusion® account. 3. Begin your trial by selecting the JavaScript – EJ2 product. - > **Note:** If you've already used the trial products and they haven't expired, you won't be able to start the trial for the same product again. + >Note: If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. -4. After you've started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page to get the latest version trial installer. Generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) at any time before the trial period expires (see the screenshot below). +4. After you’ve started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page to get the latest version trial installer. You can generate the [unlock](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) key here at any time before the trial period expires. (See the screenshot below.) - ![Start trial - download installer](images/start-trial-download-installer.png) + ![start trial download installer](images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page. -## Download the License Version +### Download the License Version -1. Syncfusion® licensed products are available on the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. +1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. 2. You can view all the licenses (both active and expired) associated with your account. -3. Click **Download** (element 1 in the screenshot below) to download the respective product's installer. +3. Click the Download (element 1 in the screenshot below) button to download the respective product’s installer. -4. The most recent version of the installer is downloaded from this page. +4. The most recent version of the installer will be downloaded from this page. -5. To download older version installers, go to [Downloads - Older Versions](https://www.syncfusion.com/account/downloads/studio) (element 2 in the screenshot below). +5. To download older version installers, go to [Downloads Older Versions](https://www.syncfusion.com/account/downloads/studio) (element 2 in the screenshot below). -6. Download other platform/add-on installers by selecting **More Download Options** (element 3 in the screenshot below). +6. You can download other platform\add-on installers by going to More Downloads Options (element 3 in the screenshot below). -7. For Windows OS, both `.EXE` and `.ZIP` formats are available. These are both offline installers. +7. For Windows OS, EXE and Zip formats are available for download. They are both Offline Installers. - ![License download](images/license-download.png) + ![license download](images/license-download.png) -8. After downloading, unlock the installer with your licensed unlock key, then refer to the [Online installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-web-installer) and [Offline installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-offline-installer) guides for step-by-step installation instructions. \ No newline at end of file +You can also refer to the [Online installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-web-installer/) and [Offline installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-offline-installer/) links for step-by-step installation guidelines. \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md index 7fddc8f20..f06db57e8 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md @@ -1,9 +1,9 @@ --- layout: post -title: Installation using mac installer in ##Platform_Name## | Syncfusion +title: Installation using mac installer in ej2-javascript| Syncfusion description: Learn here all about Installation using mac installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Installation using mac installer +control: Installation using mac installer publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,75 +11,53 @@ domainurl: ##DomainURL## # Installing Syncfusion® JavaScript – EJ2 Mac Installer -This guide explains how to install the Syncfusion® Essential® JavaScript - EJ2 Mac installer on macOS, including how to resolve the macOS Catalina (and later) security warning and how to register your license key in the installed samples. +## Steps to resolve the warning message in Catalina OS or later -**Prerequisites** + While running Essential Studio® JavaScript - EJ2 Mac Installer on Catalina MacOS or later, the below alert will be displayed. -* A macOS machine running macOS Catalina (10.15) or later. Earlier versions are not officially supported by the current Mac installer. -* The downloaded Syncfusion® JavaScript - EJ2 Mac installer (`.dmg`). See the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download) page. -* Administrator access on your Mac so that you can copy the installer into the **Applications** folder. + ![Alert Image](images/Mac_Catalina_MacOS_Alert1.png) -## Steps to Resolve the Warning Message in macOS Catalina or Later + If you receive this alert, follow the below steps for the easiest solution. -While running the Essential Studio® JavaScript - EJ2 Mac Installer on macOS Catalina or later, the alert below may be displayed. + 1. Right-click the downloaded dmg file. + 2. Select the "Open With" option and choose "DiskImageMounter (Default)". The following pop-up appears. -![macOS Catalina Gatekeeper alert](images/Mac_Catalina_MacOS_Alert1.png) + ![pop-up Image](images/Mac_Catalina_MacOS_Alert2.png) -If you receive this alert, follow the below steps for the easiest solution: - -1. Locate the downloaded `.dmg` file in **Finder** (typically in the **Downloads** folder). -2. Right-click the `.dmg` file (do **not** double-click it). -3. Select the **Open With** option and choose **DiskImageMounter (Default)**. The following pop-up appears. - - ![Open with DiskImageMounter pop-up](images/Mac_Catalina_MacOS_Alert2.png) - -4. Click **Open** in the pop-up. The installer window opens and you can continue with the step-by-step installation below. - -> If you continue to see a "cannot be opened because the developer cannot be verified" message, open **System Settings** → **Privacy & Security**, scroll to the bottom, and click **Open Anyway** next to the blocked installer entry. Then re-run the steps above. + 3. When you click "Open" the installer window will be opened. ## Step-by-Step Installation The steps below show how to install the Essential Studio® JavaScript - EJ2 Mac installer. -1. Locate the downloaded `.dmg` file in **Finder** and double-click it to mount the disk image. - - ![macOS installer welcome wizard](images/Mac_Installer1.png) - -2. macOS automatically mounts the disk image and creates a virtual drive on your desktop and in the Finder sidebar. If a license agreement appears, review it and click **Agree** to continue. - - ![License Agreement screen](images/Mac_Installer2.png) +1. Locate the downloaded dmg file and open the file by double click on it. -3. In the mounted disk window, select the Syncfusion® installer application and copy it (right-click → **Copy**, or press **⌘ + C**). + ![Welcome wizard](images/Mac_Installer1.png) - ![Copy the installer app from the mounted disk](images/Mac_Installer3.png) +2. This action will automatically mount the disk image and create a virtual drive on your desktop or in the Finder sidebar. -4. Open the **Applications** folder (from the Finder sidebar or by pressing **⌘ + Shift + A**) and paste the installer there (right-click → **Paste**, or press **⌘ + V**). Running the installer from **Applications** is required so that macOS Gatekeeper can verify it. + ![License Agreement](images/Mac_Installer2.png) - ![Paste the installer into Applications](images/Mac_Installer4.png) +3. Copy the mounted disk file. - > **Note:** The Unlock key is not required to install the Mac installer. The Syncfusion® Essential Studio® JavaScript - EJ2 Mac installer can be used for development purposes without registering the Unlock key. A license key is only required later to run the bundled samples and demo source without a license-warning message. + ![License Agree Confirmation](images/Mac_Installer3.png) -5. Open the **Applications** folder, then open the Syncfusion® Essential Studio® Mac installer to explore the included packages and samples. +4. And paste it in "Applications" folder shortcut. - ![Syncfusion installer in Applications](Images/Mac_Installer5.png) + ![License Agree Confirmation](images/Mac_Installer4.png) -6. To clean up, right-click the virtual drive on your desktop or in the Finder sidebar and select **Eject** to unmount the disk image. You can also delete the installer from the **Applications** folder once you no longer need it. + N> The Unlock key is not required to install the Mac installer. The Syncfusion® Essential Studio® JavaScript - EJ2 Mac installer can be used for development purposes without registering the Unlock key. - ![Eject the mounted disk image](images/Mac_Installer6.png) +5. Now you can open the folder to explore the Syncfusion® Essential Studio® Mac installer. -## License Key Registration in Samples + ![Destination](Images/Mac_Installer5.png) -After installation, a license key is required to run the demo source included in the Mac installer without the Syncfusion® license-warning overlay. Register the license key by using the [`registerLicense`](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) method after the Syncfusion® JavaScript script file reference, as shown in the [license-key-registration](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration) documentation. +6. To remove the DMG file, Right-click on the virtual drive on your desktop or in the Finder sidebar and select "Eject." Also delete the folder from the Applications. -> If the sample app still shows a license warning after registration, verify that the license key is registered against the same Syncfusion® account that owns the active subscription, and restart the sample app so the new key is picked up. + ![Install Location](images/Mac_Installer6.png) -## Troubleshooting +## License key registration in samples -| Issue | Possible Cause | Suggested Fix | -| --- | --- | --- | -| "App is damaged and can't be opened" on macOS Catalina or later. | Gatekeeper is blocking the unsigned installer. | Use the right-click → **Open With** → **DiskImageMounter (Default)** flow described above, or allow the app in **System Settings** → **Privacy & Security**. | -| Installer does not launch after being copied to **Applications**. | The installer was run from the mounted disk image only. | Copy the installer into the **Applications** folder and run it from there. | -| Sample apps display a license-warning overlay. | License key has not been registered for this project/account. | Register the license key using the registerLicense method described in [License Key Registration in Samples](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5). | -| "Image not found" or missing platform files when running a sample. | The installer was not fully extracted, or required runtimes are missing. | Re-run the installer from **Applications**, and confirm that your Node.js version is compatible with the sample. | +After the installation, the license key is required to register the demo source that is included in the Mac installer. To learn about the steps for license registration for the JavaScript - EJ2 Mac installer, please refer to this. -For additional help, see [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). \ No newline at end of file +Register the license key by using [registerLicense](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) method after the Syncfusion® JavaScript script file reference. \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md index 0226a87c2..a0610bb4e 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md @@ -3,26 +3,17 @@ layout: post title: Installation using offline installer in ##Platform_Name## Installation and upgrade control | Syncfusion description: Learn here all about Installation using offline installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Installation using offline installer +control: Installation using offline installer publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Installation Using the Offline Installer +# Installation using Offline Installer -This guide explains how to install the Syncfusion® Essential® JavaScript - EJ2 **offline installer** on Windows, either through the installer UI or in **silent mode** from the command line. +You can refer to the [Download](../installation-and-upgrade/download) section to learn how to get the JavaScript – EJ2 trial or licensed installer. -> If you do not yet have the installer, see the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download) section to obtain the trial or licensed version. - -**Prerequisites** - -* A Windows machine with administrator privileges. -* The downloaded offline installer (`.exe` or `.zip`). -* A valid Syncfusion® account (for **Login to Install**) or a Syncfusion® unlock key (for **Use Unlock Key**). -* For the **Install Demos** option, the target install location must be writable. If **Controlled folder access** is enabled on Windows, see [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). - -The frameworks supported by this installer are: +The frameworks listed below are supported in this installer. * JavaScript * Angular @@ -30,162 +21,118 @@ The frameworks supported by this installer are: * Vue * JavaScript (ES5) -## Installing with the UI +## Installing with UI -The steps below show how to install the Essential® Studio JavaScript – EJ2 installer. +The steps below show how to install the Essential Studio® JavaScript – EJ2 installer. -1. Open the Syncfusion® JavaScript – EJ2 offline installer file from the downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. +1. Open the Syncfusion® JavaScript – EJ2 offline installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package - ![Offline installer - extract wizard](images/offline1.png) + ![license download](images/offline1.png) - > **Note:** The Installer wizard extracts the `syncfusionejs2_.exe` dialog, which displays the package's unzip operation. + >Note: The Installer wizard extracts the syncfusionejs2 (version).exe dialog, which displays the package’s unzip operation. -2. To unlock the Syncfusion® offline installer, choose one of the following options: +2. To unlock the Syncfusion® offline installer, you have two options: - * **Login to Install** - * **Use Unlock Key** + * Login To Install + * Use Unlock Key - **Login to Install** + **Login To Install** + You must enter your Syncfusion® email address and password. If you don’t already have a Syncfusion® account, you can sign up for one by clicking **“Create an account”**. If you have forgotten your password, click on **“Forgot Password”** to create a new one. Once you’ve entered your Syncfusion® email and password, click Next. - You must enter your Syncfusion® email address and password. If you don't already have a Syncfusion® account, you can sign up for one by clicking **Create an account**. If you have forgotten your password, click **Forgot Password** to create a new one. Once you've entered your Syncfusion® email and password, click **Next**. - - ![Login to install](images/offline2.png) + ![license download](images/offline2.png) **Use Unlock Key** + Unlock keys are used to unlock the Syncfusion® offline installer, and they are platform and version specific. You should use either Syncfusion® licensed or trial Unlock key to unlock Syncfusion® JavaScript – EJ2 installer. - Unlock keys are used to unlock the Syncfusion® offline installer, and they are platform and version specific. Use either a Syncfusion® licensed or trial unlock key to unlock the Syncfusion® JavaScript – EJ2 installer. The trial unlock key is only valid for 30 days; the installer will not accept an expired trial key. + The trial unlock key is only valid for 30 days, and the installer will not accept an expired trial key. - To learn how to generate an unlock key for both trial and licensed products, see this [Knowledge Base article](https://www.syncfusion.com/kb/2326). + To learn how to generate an unlock key for both trial and licensed products, see [this](https://www.syncfusion.com/kb/2326) Knowledge Base article. - ![Use unlock key](images/offline3.png) + ![license download](images/offline3.png) -3. After reading the License Terms and Privacy Policy, check the **I agree to the License Terms and Privacy Policy** check box. Click **Next**. +3. After reading the License Terms and Privacy Policy, check the **“I agree to the License Terms and Privacy Policy”** check box. Click the Next button. -4. Change the install and samples locations here. You can also change the **Additional Settings** (described below). Click **Next** / **Install** to install with the default settings. +4. Change the install and sample locations here. You can also change the Additional settings. Click Next\Install to install with the default settings. - ![Configuration wizard](images/offline4.png) + ![license download](images/offline4.png) **Additional Settings** - * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked if you do not want to install samples. - * Select the **Configure Syncfusion® Extensions controls in Visual Studio** check box to configure the Syncfusion® Extensions in Visual Studio. Clear this check box if you do not want to configure the extensions. - * Check the **Create Desktop Shortcut** check box to add a desktop shortcut for Syncfusion® Control Panel. - * Check the **Create Start Menu Shortcut** check box to add a shortcut to the start menu for Syncfusion® Control Panel. + * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked, if you do not want to install Syncfusion® samples + * Select the **Configure Syncfusion® Extensions controls in Visual Studio** checkbox to configure the Syncfusion® Extensions in Visual Studio or clear this check box when you do not want to configure the Syncfusion® Extensions in Visual Studio. + * Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for Syncfusion® Control Panel + * Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the start menu for Syncfusion® Control Panel -5. If any previous versions of the current product are installed, the **Uninstall Previous Version(s)** wizard is opened. Select each version you want to uninstall, then click **Proceed**. +5. If any previous versions of the current product is installed, the **Uninstall** Previous Version(s) wizard will be opened. Select Uninstall checkbox to uninstall the previous versions and then click the Proceed button. - ![Uninstall previous versions](images/offline5.png) + ![license download](images/offline5.png) - > **Note:** From the 2021 Volume 1 release, Syncfusion® has added the option to uninstall previous versions from 18.1 onward while installing the new version. + >Note: From the 2021 Volume 1 release, Syncfusion® has added the option to uninstall previous versions from 18.1 while installing the new version. > - > **Note:** If any version is selected to uninstall, a confirmation screen will appear. If you click **Continue**, the Progress screen will display the uninstall and install progress respectively. If no versions are chosen to be uninstalled, only the installation progress is displayed. + >Note: If any version is selected to uninstall, a confirmation screen will appear; if continue is selected, the Progress screen will display the uninstall and install progress, respectively. If none of the versions are chosen to be uninstalled, only the installation progress will be displayed. **Confirmation Alert** - ![Confirmation alert](images/offline6.png) + ![license download](images/offline6.png) - **Uninstall Progress** + **Uninstall Progress:** - ![Uninstall progress](images/offline7.png) + ![license download](images/offline7.png) **Install Progress** - ![Install progress](images/offline8.png) + ![license download](images/offline8.png) - > **Note:** The **Completed** screen is displayed once the JavaScript – EJ2 product is installed. If any version is selected to uninstall, the completed screen displays both install and uninstall status. + >Note: The Completed screen is displayed once the JavaScript – EJ2 product is installed. If any version is selected to uninstall, The completed screen will display both install and uninstall status. - ![Installation completed](images/offline9.png) + ![license download](images/offline9.png) -6. After installation, click the **Launch Control Panel** link to open the Syncfusion® Control Panel. +6. After installing, click the Launch Control Panel link to open the Syncfusion® Control Panel. -7. Click **Finish**. Your system has been installed with the Syncfusion® Essential Studio® JavaScript – EJ2 product. +7. Click the Finish button. Your system has been installed with the Syncfusion® Essential Studio® JavaScript – EJ2 product. -## Installing in Silent Mode +## Installing in silent mode -The Syncfusion® Essential Studio® JavaScript – EJ2 installer supports installation and uninstallation via the command line in silent mode. +The Syncfusion® Essential Studio® JavaScript – EJ2 Installer supports installation and uninstallation via the command line. ### Command Line Installation -To install through the command line in silent mode, follow the steps below. +To install through the Command Line in Silent mode, follow the steps below. 1. Run the Syncfusion® JavaScript – EJ2 installer by double-clicking it. The Installer Wizard automatically opens and extracts the package. +2. The file syncfusionejs2_(version).exe file will be extracted into the Temp directory. +3. Run %temp%. The Temp folder will be opened. The syncfusionejs2_(version).exe file will be located in one of the folders. +4. Copy the extracted syncfusionejs2_(version).exe file in local drive. +5. Exit the Wizard. +6. Run Command Prompt in administrator mode and enter the following arguments. -2. The `syncfusionejs2_.exe` file is extracted into the Windows Temp directory. - -3. Open the Temp folder by running `%temp%` in the Run dialog (Win + R). The `syncfusionejs2_.exe` file is located in one of the subfolders. - -4. Copy the extracted `syncfusionejs2_.exe` file to a local drive. - -5. Exit the Installer Wizard. - -6. Run Command Prompt **as an administrator**, then run the installer with the following arguments. - - **Syntax** - - ```bat - "installer file path\SyncfusionEssentialStudio_.exe" /Install silent /UNLOCKKEY:"" [/log ""] [/InstallPath:] [/InstallSamples:true|false] [/InstallAssemblies:true|false] [/UninstallExistAssemblies:true|false] [/InstallToolbox:true|false] - ``` + Arguments: “installer file path\SyncfusionEssentialStudio(product)_(version).exe” /Install silent /UNLOCKKEY:“(product unlock key)” [/log “{Log file path}”] [/InstallPath:{Location to install}] [/InstallSamples:{true/false}] [/InstallAssemblies:{true/false}] [/UninstallExistAssemblies:{true/false}] [/InstallToolbox:{true/false}] - Arguments inside square brackets are optional. + >Note: [..] – Arguments inside the square brackets are optional. - **Example** + **Example:** “D:\Temp\syncfusionejs2x.x.x.x.exe” /Install silent /UNLOCKKEY:“product unlock key” /log “C:\Temp\EssentialStudioPlatform.log” /InstallPath:C:\Syncfusion\x.x.x.x /InstallSamples:true /InstallAssemblies:true /UninstallExistAssemblies:true /InstallToolbox:true - ```bat - "D:\Temp\syncfusionejs2_20.2.0.36.exe" /Install silent /UNLOCKKEY:"your-unlock-key" /log "C:\Temp\EssentialStudioPlatform.log" /InstallPath:"C:\Syncfusion\20.2.0.36" /InstallSamples:true /InstallAssemblies:true /UninstallExistAssemblies:true /InstallToolbox:true - ``` +7. Essential Studio® for JavaScript (Essential® JS2) is installed. - Replace `20.2.0.36` with the Essential® Studio version, and replace `your-unlock-key` with the unlock key for that version. - -7. Essential® Studio for JavaScript (Essential® JS 2) is installed. - - To confirm the install, check the Syncfusion® Control Panel entry, or run the following PowerShell command to verify the installed version: - - ```powershell - Get-ItemProperty HKLM:\Software\Microsoft\Windows\CurrentVersion\Uninstall\* | - Where-Object { $_.DisplayName -like 'Syncfusion*JavaScript*' } | - Select-Object DisplayName, DisplayVersion - ``` - - A successful silent install returns exit code `0`. Other exit codes indicate an error; see the log file specified by `/log` for details. + >Note: x.x.x.x should be replaced with the Essential Studio® version and the Product Unlock Key needs to be replaced with the Unlock Key for that version. ### Command Line Uninstallation -Syncfusion® Essential® JavaScript – EJ2 can also be uninstalled silently using the command line. +Syncfusion® Essential® JavaScript – EJ2 can be uninstalled silently using the Command Line. 1. Run the Syncfusion® JavaScript – EJ2 installer by double-clicking it. The Installer Wizard automatically opens and extracts the package. -2. The `syncfusionejs2_.exe` file is extracted into the Temp directory. - -3. Open the Temp folder by running `%temp%`. The `syncfusionejs2_.exe` file is located in one of the subfolders. - -4. Copy the extracted `syncfusionejs2_.exe` file to a local drive. - -5. Exit the Installer Wizard. - -6. Run Command Prompt **as an administrator**, then run the installer with the following arguments. - - **Syntax** - - ```bat - "copied installer file path\syncfusionejs2_.exe" /uninstall silent - ``` +2. The syncfusionejs2_(version).exe file will be extracted into the Temp directory. - **Example** +3. Run %temp%. The Temp folder will be opened. The syncfusionejs2_(version).exe file will be located in one of the folders. - ```bat - "D:\Temp\syncfusionejs2_20.2.0.36.exe" /uninstall silent - ``` +4. Copy the extracted syncfusionejs2_(version).exe file in local drive. -7. Essential® Studio for JavaScript (Essential® JS 2) is uninstalled. +5. Exit the Wizard. -## Troubleshooting +6. Run Command Prompt in administrator mode and enter the following arguments. -| Issue | Possible Cause | Suggested Fix | -| --- | --- | --- | -| Installer fails with "Another installation is in progress." | Another MSI installation is currently running. | End the running `msiexec.exe` process in Task Manager, or wait for the other install to finish. See [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). | -| "Controlled folder access seems to be enabled" alert. | Windows Controlled folder access is blocking the install/samples location. | Allow access for the installer in **Windows Security** → **Virus & threat protection** → **Manage ransomware protection**, or install to a non-protected folder. | -| Login to Install fails with an invalid credentials error. | Wrong account, or the account does not own a license. | Verify the account owns a Syncfusion® license, or use the **Use Unlock Key** option instead. | -| Silent install reports a non-zero exit code. | Invalid arguments, missing unlock key, or path issues. | Re-run with `/log ""` and inspect the log for the exact error. | -| The "I agree to the License Terms and Privacy Policy" check box is disabled. | The license text has not been scrolled to the end. | Scroll the license text to the bottom before checking the box. | + Arguments: “Copied installer file path\ syncfusionejs2_(version).exe” /uninstall silent + Example: “D:\Temp\syncfusionejs2_x.x.x.x.exe” /uninstall silent -For additional help, see [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). \ No newline at end of file +7. Essential Studio® for JavaScript (Essential® JS2) is uninstalled. \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md index 2bdeae93e..7e6256b2d 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md @@ -1,9 +1,9 @@ --- layout: post -title: Installation using web installer in ##Platform_Name## | Syncfusion -description: Learn how to install Syncfusion ##Platform_Name## Essential Studio using the web (online) installer. +title: Installation using web installer in ##Platform_Name## Installation and upgrade control | Syncfusion +description: Learn here all about Installation using web installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Installation using web installer +control: Installation using web installer publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,19 +11,7 @@ domainurl: ##DomainURL## # Installation using Web Installer -You can refer to the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download) section to learn how to get the JavaScript – EJ2 trial or licensed installer. - -**Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 Web Installer on Windows. - -## Prerequisites - -Before you begin, make sure the following are in place: - -* Windows 7 SP1 or later (Windows 10/11 recommended), 64-bit. -* Administrator rights on the machine (the installer must be run as administrator). -* An active internet connection (the Web Installer downloads the selected products at install time). -* A Syncfusion® account with a valid trial or licensed subscription. To create one, see [Create a Syncfusion account](https://www.syncfusion.com/account/register). -* Any framework-specific prerequisites for the products you select (for example, Visual Studio for the Syncfusion Extensions option). The installer will alert you if additional software is required. +You can refer to the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download/) section to learn how to get the JavaScript – EJ2 trial or licensed installer. ## Overview @@ -40,160 +28,153 @@ The frameworks listed below are supported in this installer. ## Installation The steps below show how to install Essential Studio® JavaScript – EJ2 Web Installer. +1. Open the Syncfusion® Essential Studio® JavaScript – EJ2 Web Installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. ->Tip: Right-click the installer `.exe` and choose **Run as administrator** to avoid permission issues. + ![license download](images/1.png) -1. Open the Syncfusion® Essential Studio® JavaScript – EJ2 Web Installer file from the downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. + >Note: The installer wizard extracts the syncfusionejs2webinstaller_{version}.exe dialog, which displays the package’s unzip operation. - ![Installer package extraction dialog](images/1.png) +2. The Syncfusion® JavaScript - EJ2 Web Installer’s welcome wizard will be displayed. Click the Next button. - >Note: The installer wizard extracts the `syncfusionejs2webinstaller_{version}.exe` dialog, which displays the package's unzip operation. + ![license download](images/2.png) -2. The Syncfusion® JavaScript - EJ2 Web Installer's welcome wizard will be displayed. Click the **Next** button. - - ![Web installer welcome wizard](images/2.png) - -3. The Platform Selection Wizard will appear. From the **Available** tab, select the products to be installed. Select the **Install All** checkbox to install all products. +3. The Platform Selection Wizard will appear. From the **Available** tab, select the products to be installed. Select the Install All checkbox to **install all** products. **Available** - ![Platform selection wizard, Available tab](images/3.png) + ![license download](images/3.png) - If you have multiple products installed in the same version, they will be listed under the **Installed** tab. You can also select which products to uninstall from the same version. Click the **Next** button. + If you have multiple products installed in the same version, they will be listed under the **Installed** tab. You can also select which products to uninstall from the same version. Click the Next button. **Installed** - ![Platform selection wizard, Installed tab](images/4.png) + ![license download](images/4.png) - >Important: If the required software for the selected product isn't already installed, the **Additional Software Required** alert will appear. You can, however, continue the installation and install the necessary software later. + >Important: If the required software for the selected product isn’t already installed, the **Additional Software Required** alert will appear. You can, however, continue the installation and install the necessary software later. **Required Software** - ![Additional software required alert](images/5.png) + ![license download](images/5.png) -4. If previous version(s) for the selected products are installed, the **Uninstall previous version** wizard will be displayed. You can see the list of previously installed versions for the products you've chosen here. To remove all versions, check the **Uninstall All** checkbox. Click the **Next** button. +4. If previous version(s) for the selected products are installed, the Uninstall previous version wizard will be displayed. You can see the list of previously installed versions for the products you’ve chosen here. To remove all versions, check the **Uninstall All** checkbox. Click the Next button. - ![Uninstall previous version wizard](images/6.png) + ![license download](images/6.png) - >Note: From the 2021 Volume 1 release, Syncfusion® provides an option to uninstall previous versions from 18.1 while installing the new version. + >Note: From the 2021 Volume 1 release, Syncfusion® has provided option to uninstall the previous versions from 18.1 while installing the new version. -5. A pop-up screen will be displayed to confirm the uninstallation of the selected previous versions. +5. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions. - ![Confirmation pop-up to uninstall previous versions](images/7.png) + ![license download](images/7.png) -6. The **Confirmation** wizard will appear with the list of products to be installed/uninstalled. You can view and modify the list of products that will be installed and uninstalled from this page. +6. The Confirmation Wizard will appear with the list of products to be installed/uninstalled. You can view and modify the list of products that will be installed and uninstalled from this page. - ![Confirmation wizard with list of products](images/8.png) + ![license download](images/8.png) - >Note: By clicking the **Download Size** and **Installation Size** links, you can determine the approximate size of the download and installation. + >Note: By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation -7. The **Configuration** wizard will appear. You can change the **Download**, **Install**, and **Demos** locations from here. You can also change the additional settings on a product-by-product basis. Click **Next** to install with the default settings. +7. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. - ![Configuration wizard with download, install, and demos locations](images/9.png) + ![license download](images/9.png) **Additional settings** - * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked if you do not want to install Syncfusion® samples. - * Select the **Configure Syncfusion Extensions controls in Visual Studio** checkbox to configure the Syncfusion® Extensions in Visual Studio, or clear this check box when you do not want to configure the Syncfusion® Extensions in Visual Studio. - * Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for the Syncfusion® Control Panel. - * Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the Start menu for the Syncfusion® Control Panel. - -8. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the **Next** button. - -9. The **Login** wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the **Install** button. + * Select the **Install Demos** check box to install Syncfusion® samples, or leave the check box unchecked, if you do not want to install Syncfusion® samples + * Select the **Configure Syncfusion Extensions controls in Visual Studio** checkbox to configure the Syncfusion® Extensions in Visual Studio or clear this check box when you do not want to configure the Syncfusion® Extensions in Visual Studio. + * Check the **Create Desktop Shortcut** checkbox to add a desktop shortcut for Syncfusion® Control Panel + * Check the **Create Start Menu Shortcut** checkbox to add a shortcut to the start menu for Syncfusion® Control Panel - ![Login wizard with email and password fields](images/8_.png) +8. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the Next button. - >Important: The products you have chosen will be installed based on your Syncfusion® license (Trial or Licensed). +9. The login wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button. -10. The download and installation/uninstallation progress will be displayed as shown below. + ![license download](images/8_.png) - ![Download and installation progress](images/9_.png) + >Important: The products you have chosen will be installed based on your Syncfusion® License (Trial or Licensed). -11. When the installation is finished, the **Summary** wizard will appear. Here you can see the list of products that have been installed successfully and those that have failed. To close the Summary wizard, click **Finish**. +10. The download and installation\uninstallation progress will be displayed as shown below. - ![Summary wizard showing installed products](images/12.png) + ![license download](images/9_.png) - * To open the Syncfusion® Control Panel, click **Launch Control Panel**. +11. When the installation is finished, the **Summary** wizard will appear. Here you can see the list of products that have been installed successfully and those that have failed. To close the Summary wizard, click Finish. -12. After installation, there will be two Syncfusion® Control Panel entries, as shown below. The Essential Studio® entry will manage all Syncfusion® products installed in the same version, while the Product entry will only uninstall the specific product setup. + ![license download](images/12.png) - ![Syncfusion Control Panel entries](images/13.png) + * To open the Syncfusion® Control Panel, click **Launch Control** Panel. -## Troubleshooting +12. After installation, there will be two Syncfusion® control panel entries, as shown below. The Essential Studio® entry will manage all Syncfusion® products installed in the same version, while the Product entry will only uninstall the specific product setup. -If you encounter issues during installation, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors) for solutions to typical problems such as trial vs. license key mismatch, blocked installations, and controlled folder access. + ![license download](images/13.png) ## Uninstallation -The Syncfusion® JavaScript – EJ2 installer can be uninstalled in two ways. +Syncfusion® JavaScript – EJ2 installer can be uninstalled in two ways. -* Uninstall the JavaScript – EJ2 using the Syncfusion® JavaScript – EJ2 web installer. -* Uninstall the JavaScript – EJ2 from Windows Control Panel. +* Uninstall the JavaScript – EJ2 using the Syncfusion® JavaScript – EJ2 web installer +* Uninstall the JavaScript – EJ2 from Windows Control Panel -Follow either one of the options below to uninstall Syncfusion® Essential Studio® JavaScript – EJ2. +Follow either one of the option below to uninstall Syncfusion® Essential Studio® JavaScript – EJ2 installer -### Option 1: Uninstall the JavaScript – EJ2 using the Syncfusion® JavaScript – EJ2 web installer +### Option 1: Uninstall the JavaScript–EJ2 using the Syncfusion® JavaScript–EJ2 web installer -Syncfusion® provides the option to uninstall products of the same version directly from the Web Installer application. Select the products to be uninstalled from the list, and the Web Installer will uninstall them one by one. +Syncfusion® provides the option to uninstall products of the same version directly from the Web Installer application. Select the products to be uninstalled from the list, and Web Installer will uninstall them one by one. -Open the Syncfusion® Essential Studio® JavaScript – EJ2 Online Installer file from the downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package. +Open the Syncfusion® Essential Studio® JavaScript – EJ2 Online Installer file from downloaded location by double-clicking it. The Installer Wizard automatically opens and extracts the package -![Installer package extraction dialog for uninstallation](images/u1.png) +![license download](images/u1.png) -The Syncfusion® JavaScript – EJ2 Web Installer's welcome wizard will be displayed. Click the **Next** button. +The Syncfusion® JavaScript – EJ2 Web Installer’s welcome wizard will be displayed. Click the Next button -![Web installer welcome wizard for uninstallation](images/u2.png) +![license download](images/u2.png) ### Option 2: Uninstall the JavaScript–EJ2 from Windows Control Panel You can uninstall all the installed products by selecting the **Syncfusion® Essential Studio® {version}** entry (element 1 in the below screenshot) from the Windows control panel, or you can uninstall JavaScript – EJ2 alone by selecting the **Syncfusion® Essential Studio® for JavaScript – EJ2 {version}** entry (element 2 in the below screenshot) from the Windows control panel. -![Windows Control Panel showing Syncfusion entries](images/u3.png) +![license download](images/u3.png) ->Note: If the **Syncfusion® Essential Studio® for JavaScript – EJ2 {version}** entry is selected from the Windows Control Panel, the Syncfusion® Essential Studio® JavaScript – EJ2 will be removed, and the default MSI uninstallation window shown below will be displayed. +>Note: If the **Syncfusion® Essential Studio®** for JavaScript **{version}** entry is selected from the Windows control panel, the Syncfusion® Essential Studio® JavaScript – EJ2 alone will be removed and the below default MSI uninstallation window will be displayed. -1. The Platform Selection Wizard will appear. From the **Installed** tab, select the products to be uninstalled. To select all products, check the **Uninstall All** checkbox. Click the **Next** button. +1. The Platform Selection Wizard will appear. From the **Installed** tab, select the products to be uninstalled. To select all products, check the **Uninstall All** checkbox. Click the Next button. **Installed** - ![Platform selection wizard, Installed tab for uninstallation](images/u4.png) + ![license download](images/u4.png) - You can also select the products to be installed from the **Available** tab. Click the **Next** button. + You can also select the products to be installed from the **Available** tab Click the Next button. **Available** - ![Platform selection wizard, Available tab for uninstallation](images/u5.png) + ![license download](images/u5.png) -2. If other products are also selected for installation, the **Uninstall previous version** wizard will be displayed with previous version(s) installed for the selected products. Here you can view the list of installed previous versions for the selected products. Select the **Uninstall All** checkbox to select all the versions. Click **Next**. +2. If any other products selected for installation, Uninstall previous version wizard will be displayed with previous version(s) installed for the selected products. Here you can view the list of installed previous versions for the selected products. Select **Uninstall All** checkbox to select all the versions. Click Next. - ![Uninstall previous version wizard during uninstallation](images/u6.png) + ![license download](images/u6.png) -3. A pop-up screen will be displayed to confirm the uninstallation of the selected previous versions. +3. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions. - ![Confirmation pop-up to uninstall previous versions](images/u7.png) + ![license download](images/u7.png) -4. The **Confirmation** wizard will appear with the list of products to be installed/uninstalled. Here you can view and modify the list of products that will be installed/uninstalled. +4. The Confirmation Wizard will appear with the list of products to be installed/uninstalled. Here you can view and modify the list of products that will be installed/uninstalled. - ![Confirmation wizard with list of products for uninstallation](images/u8.png) + ![license download](images/u8.png) - >Note: By clicking the **Download Size** and **Installation Size** links, you can determine the approximate size of the download and installation. + >Note: By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation -5. The **Configuration** wizard will appear. You can change the **Download**, **Install**, and **Demos** locations from here. You can also change the additional settings on a product-by-product basis. Click **Next** to install with the default settings. +5. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. - ![Configuration wizard during uninstallation](images/u9.png) + ![license download](images/u9.png) -6. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the **Next** button. +6. After reading the License Terms and Conditions, check the **I agree to the License Terms and Privacy Policy** check box. Click the Next button. -7. The **Login** wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the **Install** button. +7. The login wizard will appear. You must enter your Syncfusion® email address and password. If you do not already have a Syncfusion® account, you can create one by clicking on **Create an Account**. If you have forgotten your password, click **Forgot Password** to create a new one. Click the Install button. - ![Login wizard during uninstallation](images/u10.png) + ![license download](images/u10.png) - >Important: The products you have chosen will be installed/uninstalled based on your Syncfusion® license (Trial or Licensed). + >Important: The products you have chosen will be installed based on your Syncfusion® License (Trial or Licensed). -8. The download, installation, and uninstallation progress will be shown. +8. The download, installation, and uninstallation progresses will be shown. - ![Download, installation, and uninstallation progress](images/u11.png) + ![license download](images/u11.png) -9. When the process is finished, the **Summary** wizard will appear. Here you can see the list of products that have been successfully and unsuccessfully installed/uninstalled. To close the Summary wizard, click **Finish**. +9. When the installation is finished, the **Summary** wizard will appear. Here you can see the list of products that have been successfully and unsuccessfully installed/uninstalled. To close the Summary wizard, click Finish. - ![Summary wizard for uninstallation](images/u12.png) + ![license download](images/u12.png) - * To open the Syncfusion® Control Panel, click **Launch Control Panel**. \ No newline at end of file + * To open the Syncfusion® Control Panel, click **Launch Control Panel** \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/installation.md b/ej2-javascript/installation-and-upgrade/installation.md index f4c189c7a..dba9c707f 100644 --- a/ej2-javascript/installation-and-upgrade/installation.md +++ b/ej2-javascript/installation-and-upgrade/installation.md @@ -3,94 +3,38 @@ layout: post title: Installation in ##Platform_Name## Installation and upgrade control | Syncfusion description: Learn here all about Installation in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Installation +control: Installation publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Installation of Syncfusion® JavaScript Controls + -This guide explains how to install Syncfusion® Essential® JS 2 JavaScript UI components into an existing project using either the **npm CLI** or the **`package.json`** file. +# Installation -**Prerequisites** +## Install via npm CLI -* Node.js and npm installed. npm is bundled with Node.js. -* An existing JavaScript / TypeScript project. (For framework-specific wrappers, see the corresponding control documentation.) -* Access to the npm registry (public, or your private registry if applicable). +Syncfusion® JavaScript (Essential® JS 2) packages are published in [npm](https://www.npmjs.com/search?q=scope:syncfusion). You can install the necessary packages from npm’s install command. For example, grid package can be installed using following command. -## Install by Using the npm CLI - -Syncfusion® JavaScript (Essential® JS 2) packages are published on [npm](https://www.npmjs.com/search?q=scope:syncfusion). You can install the necessary packages from npm's install command. For example, the Grid package can be installed using the following command: - -```bash +``` npm install @syncfusion/ej2-grids --save ``` -For a list of available packages and the latest version, see [`@syncfusion/ej2-grids`](https://www.npmjs.com/package/@syncfusion/ej2-grids) on npm. +## Install by using package.json -## Install by Using package.json +1.Add the Syncfusion® JavaScript (Essential® JS 2) package references in the `dependencies` of `~/package.json` file. -1. Add the Syncfusion® JavaScript (Essential® JS 2) package references in the `dependencies` section of your project's `package.json` file: - - ```json - { - "dependencies": { - "@syncfusion/ej2-grids": "^20.2.38", - "@syncfusion/ej2-charts": "^20.2.38" + ``` + { + "dependencies": { + "@syncfusion/ej2-grids": "*", + "@syncfusion/ej2-charts": "*" + } } - } - ``` - - > Replace `^20.2.38` with the version you need. For details on version ranges, see the [npm `package.json` documentation](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#dependencies). - -2. From the root of your project, run the following command to install all npm dependencies at once: - - ```bash - npm install - ``` - - > For more information, see the [npm `package.json` documentation](https://docs.npmjs.com/cli/v10/configuring-npm/package-json). - -## Next Steps - -After installing the package, you typically need to: - -1. Import the required CSS for the theme. For example: - - ```css - @import "@syncfusion/ej2-grids/styles/material.css"; - ``` - -2. Reference the required script and CSS files in your HTML. For example: - - ```html - - - ``` - -3. Register the Syncfusion® components you want to use. For example: - - ```javascript - var grid = new ej.grids.Grid({ - dataSource: data, - columns: [ - { field: 'OrderID', headerText: 'Order ID', width: 120 }, - { field: 'CustomerName', headerText: 'Customer Name', width: 150 } - ] - }); - grid.appendTo('#Grid'); - ``` - -For component-specific configuration, theming, and usage examples, refer to the documentation of the individual Syncfusion® JavaScript component you are using. - -## Troubleshooting + ``` + > The `*` indicates the latest version of npm package. Refer the [documentation](https://docs.npmjs.com/misc/semver#versions) for more details about npm versioning. -| Issue | Possible Cause | Suggested Fix | -| --- | --- | --- | -| `npm install` reports a peer-dependency warning. | Installed package version does not match your project's framework version. | Use the package version that supports your framework, or upgrade the framework. | -| `package.json` shows the package version as `*` and `npm install` fails. | `*` is a placeholder, not a valid npm range. | Replace `*` with an explicit version such as `^20.2.38` or a specific version. | -| Script/CSS file reference returns 404. | The CDN version in the URL does not match an installed version. | Update the CDN URL to match the installed package version, or use a self-hosted copy. | -| Components do not render. | The script/CSS is not loaded, or the component is not registered. | Verify the script/CSS is included in the page, and the component is registered correctly. | +2.Now, open the command prompt and run the `npm install` command line. This will install all npm dependencies in a single command line. -For additional help, see [Common Installation Errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors). \ No newline at end of file +> Refer the [documentation](https://docs.npmjs.com/files/package.json) for more details about npm package.json \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/linux-installer/download.md b/ej2-javascript/installation-and-upgrade/linux-installer/download.md index d9b74dde3..924d22211 100644 --- a/ej2-javascript/installation-and-upgrade/linux-installer/download.md +++ b/ej2-javascript/installation-and-upgrade/linux-installer/download.md @@ -1,8 +1,8 @@ --- layout: post -title: Download Syncfusion JavaScript Linux installer in ##Platform_Name## | Syncfusion -description: Learn how to download the Syncfusion ##Platform_Name## JavaScript Linux trial or licensed installer. -control: Download +title: Download in ##Platform_Name## Installation component | Syncfusion +description: Learn here all about Download in Syncfusion ##Platform_Name## Installation component of Syncfusion Essential JS 2 and more. +control: Download platform: ej2-javascript publishingplatform: ##Platform_Name## documentation: ug @@ -11,69 +11,71 @@ domainurl: ##DomainURL## # Download Syncfusion® JavaScript Linux Installer -**Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 Linux installer on Linux distributions supported by Syncfusion. +The Syncfusion® installer can be downloaded from the [Syncfusion®](https://www.syncfusion.com/) website. You can either download the licensed installer or try our trial installer depending on your license. -The Syncfusion® installer can be downloaded from the [Syncfusion website](https://www.syncfusion.com/). You can either download the licensed installer or try our trial installer, depending on your license. + - Trial Installer + - Licensed Installer -* Trial Installer -* Licensed Installer +You can download the Syncfusion® installer from [Syncfusion.com](https://www.syncfusion.com/) website ## Download the Trial Version -Our 30-day trial can be downloaded in two ways: +Our 30-day trial can be downloaded in two ways. -* Download the Free Trial Setup. -* Start a trial if you are using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion). +* Download Free Trial Setup +* Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) -### Download Free Trial Setup - -1. Visit the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the product to evaluate our 30-day free trial. -2. After completing the required form or signing in with your registered Syncfusion® account, you can download the trial installer from the confirmation page (as shown in the screenshot below). - ![Syncfusion trial confirmation page](images/trial-confirmation.png) +### Download Free Trial Setup -3. With a trial license, only the latest version's trial installer can be downloaded. -4. An unlock key is not required to install the Syncfusion® JavaScript Linux trial installer. -5. Before the trial expires, you can download the trial installer at any time from your registered account's [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in the screenshot below). +1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the product +2. After completing the required form or logging in with your registered Syncfusion® account, you can download the trial installer from the confirmation page. (as shown in below screenshot.) - ![Syncfusion Trials and Downloads page](images/trial-download.png) + ![Trial and downloads of Syncfusion JavaScript](images/trial-confirmation.png) + +3. With a trial license, only the latest version’s trial installer can be downloaded. +4. Unlock key is not required to install the Syncfusion® JavaScript Linux trial installer. +5. Before the trial expires, you can download the trial installer at any time from your registered account’s [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page (as shown in below screenshot.) + + ![Trial and downloads of Syncfusion JavaScript](images/trial-download.png) -6. Click **More Download Options** (element 2 in the screenshot above) to get the JavaScript Product Offline trial installer, which is available in ZIP format. +6. Click the More Download Options (element 2 in the above screenshot) button to get the JavaScript Product Offline trial installer which is available in ZIP format. - ![Syncfusion offline trial installer download](images/start-trial-download-offline-installer.png) + ![License and downloads of Syncfusion JavaScript](images/start-trial-download-offline-installer.png) ### Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) -You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion). - -1. Start your 30-day free trial from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page in your account. +You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) - > You can generate the license key for your active trial products from the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. This license key is required to use our trial products in your application. To learn more, see the [licensing overview](https://help.syncfusion.com/common/essential-studio/licensing/overview). +1. You can start your 30-day free trial from the [Start Trial](https://www.syncfusion.com/account/manage-trials/start-trials) page from your account. - ![Syncfusion Start Trial page](images/start-trial-download.png) + N> You can generate the license key for your active trial products from [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. This license key will be mandatory to use our trial products in your application. To know more about License key, refer this [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview). + + ![Trial and downloads of Syncfusion JavaScript](images/start-trial-download.png) + +2. To access this page, you must sign up\log in with your Syncfusion® account. +3. Begin your trial by selecting the Syncfusion® product. -2. To access this page, you must sign up or sign in with your Syncfusion® account. -3. Begin your trial by selecting the Syncfusion® product. + N> If you've already used the trial products and they haven't expired, you won't be able to start the trial for the same product again. - > If you have already used a trial for a product and it has not expired, you will not be able to start a new trial for the same product. +4. After you've started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-generation) here at any time before the trial period expires. (as shown in below screenshot.) -4. After starting the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page to get the latest version trial installer. You can generate the [unlock key](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) and [license key](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-generation) here at any time before the trial period expires (as shown in the screenshot below). - - ![Syncfusion trial installer download page](images/start-trial-download-installer.png) + ![License and downloads of Syncfusion JavaScript](images/start-trial-download-installer.png) 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. + ## Download the License Version -1. Syncfusion® licensed products are available on the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. +1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. 2. You can view all the licenses (both active and expired) associated with your account. -3. Download the JavaScript Linux licensed installer by going to **More Download Options** (element 3 in the screenshot below). - - ![Syncfusion License and Downloads page](images/license-download.png) - -4. An unlock key is not required to install the Syncfusion® JavaScript Linux licensed installer. -5. For Linux, the ZIP format is available for download. +3. You can download JavaScript Linux licensed installer by going to More Downloads Options (element 3 in the screenshot below). - ![Syncfusion Linux download option](images/Linux_Download.PNG) + ![License and downloads of Syncfusion JavaScript](images/license-download.png) + +4. Unlock key is not required to install the Syncfusion® JavaScript Linux trial installer. +5. For Linux OS, ZIP formats is available for download. + + ![License and downloads of Syncfusion JavaScript](images/Linux_Download.PNG) -For step-by-step installation guidelines, see [Installation using the Linux installer](https://ej2.syncfusion.com/javascript/documentation/installation-and-upgrade/linux-installer/installation-using-linux-installer). +You can also refer to the [**JavaScript Linux installer**](https://ej2.syncfusion.com/javascript/documentation/installation-and-upgrade/linux-installer/installation-using-linux-installer) links for step-by-step installation guidelines. diff --git a/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md b/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md index 87a0b9ab7..347e5ddb7 100644 --- a/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md +++ b/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md @@ -1,9 +1,9 @@ --- layout: post -title: Installation using the Linux installer in ##Platform_Name## | Syncfusion -description: Learn how to install the Syncfusion ##Platform_Name## JavaScript Linux installer and register the license key. +title: Installation using linux installer in ##Platform_Name## Installation and upgrade control | Syncfusion +description: Learn here all about Installation using linux installer in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Installation using Linux installer +control: Installation using linux installer publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,41 +11,28 @@ domainurl: ##DomainURL## # Installing Syncfusion® JavaScript Linux installer -**Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 Linux installer on Linux distributions supported by Syncfusion. - -## Prerequisites - -Before you begin, make sure the following are in place: - -* A user account with permission to extract the ZIP file and write to the target install directory. Use `sudo` for system-wide locations such as `/opt`. -* `unzip` (or another archive tool) available on the system to extract the installer. -* A current version of the Syncfusion JavaScript Linux installer ZIP. If you do not have it, see [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/linux-installer/download). -* A valid license key if you are using the licensed installer; the trial installer does not require an unlock key. - ## Step-by-Step Installation -The steps below show how to install the Syncfusion® JavaScript Linux installer. +The steps below show how to install JavaScript Linux installer. -1. Extract the Syncfusion® JavaScript Linux installer (`.zip`) file using your archive tool of choice. For example, from a terminal: +1. Extract the Syncfusion® JavaScript Linux installer(.zip) file. The files are extracted in your machine. - ![Extracted Linux installer contents on disk](images/Linux_Installer1.png) + ![Welcome wizard](images/Linux_Installer1.png) + -2. The Linux ZIP file contains the demo source, NuGet packages, and supporting files (as shown in the screenshot below). +2. The Linux zip file contains the following folders. - ![Linux installer folder contents](images/Linux_Installer2.png) + ![License Agreement](images/Linux_Installer2.png) + + N> The Unlock key is not required to install the Linux installer. - > An unlock key is not required to install the Linux installer. -3. Open the extracted demo source in a browser or your preferred editor to launch the included samples, and reference the NuGet packages in your project as needed. +4. You can launch the demo source and use the NuGet packages included in the Linux installer. - To use the samples with the licensed installer, see the [License key registration](#license-key-registration-in-samples) section below. -## License key registration in samples - -After installation, a license key is required to register the demo source that is included in the Linux installer. To learn the steps for license registration for the JavaScript – EJ2 Linux installer, see [License key registration](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration). -Register the license key by using the [`registerLicense`](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) method after the Syncfusion® JavaScript script file reference. +## License key registration in samples -## Troubleshooting +After the installation, the license key is required to register the demo source that is included in the Linux installer. To learn about the steps for license registration for the JavaScript - EJ2 Linux installer, please refer to this. -If you encounter issues during installation, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors) for solutions to typical problems such as trial vs. license key mismatch, blocked installations, and controlled folder access. \ No newline at end of file +Register the license key by using [registerLicense](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) method after the Syncfusion® JavaScript script file reference. \ No newline at end of file diff --git a/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md b/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md index 3a297d7a3..44c2eb363 100644 --- a/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md +++ b/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md @@ -1,9 +1,9 @@ --- layout: post -title: Upgrading Syncfusion in ##Platform_Name## | Syncfusion -description: Learn how to upgrade Syncfusion ##Platform_Name## Essential Studio to the latest volume or service pack release. +title: Upgrading syncfusion in ##Platform_Name## Installation and upgrade control | Syncfusion +description: Learn here all about Upgrading syncfusion in Syncfusion ##Platform_Name## Installation and upgrade control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Upgrading Syncfusion +control: Upgrading syncfusion publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,48 +11,24 @@ domainurl: ##DomainURL## # Upgrading Syncfusion® JavaScript (Essential® JS2) -**Applies to:** Syncfusion Essential Studio® JavaScript – EJ2 on Windows. - Syncfusion® releases new volumes once every three months, with exciting new features. There will be one Service Pack release for these volume releases. Service Pack releases are provided to address major bug fixes in the volume releases. You can upgrade from any previous version — trial or licensed — to the latest release without uninstalling older versions. -See the **[Upgrade Guide](https://help.syncfusion.com/upgrade-guide/typescript)** for JavaScript – EJ2 to learn more about the breaking changes, bug fixes, new features, and known issues between your current version and the latest version you are trying to upgrade to. - -## Prerequisites - -Before you begin, make sure the following are in place: - -* An active internet connection. -* A Syncfusion® account with a valid trial or licensed subscription. To create one, see [Create a Syncfusion account](https://www.syncfusion.com/account/register). -* Administrator rights on the machine (the installer must be run as administrator). -* A free disk space of at least 3 GB (the exact size is shown on the installer's **Download Size** and **Installation Size** links). +See our **"[Upgrade Guide](https://help.syncfusion.com/upgrade-guide/typescript)"** for JavaScript – EJ2 to learn more about the “Breaking Changes, Bug Fixes, Features and Knows Issues” between your current version and the latest version you are trying to upgrade. ## Upgrading to the latest version -The most recent version of Syncfusion® JavaScript – EJ2 can be downloaded and installed by clicking the **Latest Version: {Version}** link at the top of the Syncfusion® JavaScript – EJ2 Control Panel. +The most recent version of Syncfusion® JavaScript – EJ2 can be downloaded and installed by clicking on the “Latest Version: {Version}” link at the top of the Syncfusion® JavaScript – EJ2 Control Panel. -![Syncfusion Control Panel with Latest Version link highlighted](images/upgrade3.png) +![license download](images/upgrade3.png) -You can also upgrade to the latest version by downloading and installing the products you require from the [Syncfusion Downloads](https://www.syncfusion.com/account/downloads) page. The existing installed versions are not required to be uninstalled. +You can also upgrade to the latest version just by downloading and installing the products you require from [this](https://www.syncfusion.com/account/downloads ) link. The existing installed versions are not required to be uninstalled. It is not required to install the Volume release before installing the Service Pack release. As releases for Volume and Service Packs work independently, you can install the latest version with major bug fixes directly. -## Upgrade procedure - -1. Open the Syncfusion® JavaScript – EJ2 Control Panel (from the Start menu or the desktop shortcut created during installation). -2. Click the **Latest Version: {Version}** link at the top of the Control Panel. The web installer downloads and launches automatically. -3. In the installer, accept the License Terms and sign in with your Syncfusion® account. -4. Select the products to upgrade, configure the install location, and complete the wizard. The new version installs side-by-side with any earlier versions. - -For full step-by-step instructions, see [Installation using web installer](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation-using-web-installer). - ## Upgrade from trial version to license version -Uninstall the trial version and install the fully licensed installer from the [License and Downloads](https://www.syncfusion.com/account/downloads) section of our website to upgrade from the trial version. - ->Note: License key registration is not required for JavaScript if you are using scripts (`.js`) and CSS files. If you are using the Syncfusion npm packages, you must register the license key in your application as described in the [licensing documentation](https://ej2.syncfusion.com/documentation/licensing). - -## Troubleshooting +Uninstall the trial version and install the fully licensed installer from the [License and Downloads](https://www.syncfusion.com/account/downloads ) section of our website to upgrade from the trial version. -If you encounter issues during the upgrade, see [Common installation errors](https://ej2.syncfusion.com/documentation/installation-and-upgrade/common-installation-errors) for solutions to typical problems such as license key mismatch, blocked installations, and controlled folder access. \ No newline at end of file +>Note: License key registration is not required for JavaScript, if you are using scripts (.js) and css files. \ No newline at end of file diff --git a/ej2-javascript/pivotview/js/getting-started.md b/ej2-javascript/pivotview/js/getting-started.md index e8e1b3a08..8cbc68c07 100644 --- a/ej2-javascript/pivotview/js/getting-started.md +++ b/ej2-javascript/pivotview/js/getting-started.md @@ -36,7 +36,7 @@ To use local scripts and styles for Syncfusion®® Studio® JavaScript (Essential® JS 2):** Obtain the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installation location. -**2. Copy Files to Resources Folder:** After installing the Essential® JS 2 product build, copy the pivot table's scripts, and dependencies scripts and style file into the designated folders: +**2. Copy Files to Resources Folder:** After installing the Essential® JS 2 product build, copy the pivot table's scripts, dependent component scripts, and style files into the designated folders: **Scripts:** Copy the scripts to the **resources/scripts** folder. **Styles:** Copy the styles to the **resources/styles** folder. @@ -55,7 +55,7 @@ To use local scripts and styles for Syncfusion®® Dependency (Minimal Setup)** +**a. Essential® Dependency (Minimal Setup)** This setup includes only the necessary scripts and styles required to render the Syncfusion® Pivot Table. Use this setup for a lightweight application that requires basic pivot table functionality. @@ -67,7 +67,7 @@ This setup includes only the necessary scripts and styles required to render the Essential JS 2 Pivot Table - + @@ -88,8 +88,9 @@ This setup includes only the necessary scripts and styles required to render the ``` -**b.Extended Dependency (Additional Components)** -This setup includes additional dependencies required for more advanced functionalities of the pivot table, such as buttons, dropdowns, navigations, and other components. Use this setup when you need to integrate additional features like field list, grouping bar, filtering, sorting and more. +**b. Extended Dependency (Additional Components)** + +This setup includes additional dependencies required for more advanced functionalities of the pivot table, such as buttons, dropdowns, navigations, and other components. Use this setup when you need to integrate additional features like filtering, paging, column menu, and more. ```html @@ -98,7 +99,7 @@ This setup includes additional dependencies required for more advanced functiona Essential JS 2 Pivot Table - + @@ -127,7 +128,7 @@ This setup includes additional dependencies required for more advanced functiona - + @@ -149,7 +150,7 @@ This setup includes all possible dependencies for Syncfusion @@ -162,24 +163,24 @@ This setup includes all possible dependencies for Syncfusion® Dependency (Minimal Setup)** +**a. Essential® Dependency (Minimal Setup)** This setup includes only the necessary scripts and styles required to render the Syncfusion® Pivot Table. Use this setup for a lightweight application that requires basic pivot table functionality. @@ -189,29 +190,29 @@ This setup includes only the necessary scripts and styles required to render the Essential JS 2 Pivot Table - - - - - + + + + + - - - - + + + + - + ``` -**b.Extended Dependency (Additional Components)** +**b. Extended Dependency (Additional Components)** -This setup includes additional dependencies required for more advanced functionalities of the pivot table, such as buttons, dropdowns, navigations and other components. Use this setup when you need to integrate additional features like filtering, paging, column menu and more. +This setup includes additional dependencies required for more advanced functionalities of the pivot table, such as buttons, dropdowns, navigations, and other components. Use this setup when you need to integrate additional features like filtering, paging, column menu, and more. ```html @@ -219,45 +220,45 @@ This setup includes additional dependencies required for more advanced functiona Essential JS 2 Pivot Table - - - - - - - - - - - - - + + + + + + + + + + + + + - - - + + - + - + - - - - - + - - - @@ -280,10 +281,10 @@ This setup includes all possible dependencies for Syncfusion + + - + @@ -300,7 +301,7 @@ Based on your requirement, additional dependencies can be included as needed. In You can start adding Essential® JS 2 pivot table component to the application. To get started, add the pivot table component in **index.js** file using the following code. {% tabs %} -{% highlight ts tabtitle="index.js" %} +{% highlight js tabtitle="index.js" %} var pivotData = [ { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q1' }, @@ -330,10 +331,10 @@ pivotTableObj.appendTo('#PivotTable'); Essential JS 2 Pivot Table - - + + - + diff --git a/ej2-javascript/pivotview/ts/getting-started-vite.md b/ej2-javascript/pivotview/ts/getting-started-vite.md index f64d120a7..b799a15eb 100644 --- a/ej2-javascript/pivotview/ts/getting-started-vite.md +++ b/ej2-javascript/pivotview/ts/getting-started-vite.md @@ -11,25 +11,32 @@ domainurl: ##DomainURL## # Getting started with TypeScript Pivot Table control in Vite -This section explains the steps to create a simple **Pivot Table** and demonstrates the basic usage of the pivot table component in a Vite-based TypeScript project scaffolded with the latest Vite version. +This section explains the steps to create a simple **Pivot Table** and demonstrates the basic usage of the Pivot Table component in a Vite-based TypeScript project scaffolded with the latest Vite version. ## Prerequisites -- **Node.js**: 18.0 or later -- **npm**: 8.0 or later +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/) +* [Node.js](https://nodejs.org/en) — 18.0 or later +* [npm](https://www.npmjs.com/) — 8.0 or later (bundled with Node.js) +* [Visual Studio Code](https://code.visualstudio.com/) ## Setup for local development -Run the following command to create a new [Vite](https://vitejs.dev/) project with TypeScript template: +Run the following command to create a new [Vite](https://vitejs.dev/) project with the TypeScript template: ```bash npm create vite@latest my-app -- --template vanilla-ts ``` -Follow prompts to install packages. Select options as shown: + +> The `--` separator is required for npm 7+. For older npm versions, use `npx create-vite@latest my-app --template vanilla-ts` instead. + +The Vite scaffolder will create the project in a `my-app` folder with the **Vanilla** framework and **TypeScript** variant. The scaffold also generates a `style.css` file in `src/` that will be used later for theme imports. ![Pivot Table Initial setup](images/npm_setup.png) -Select `No` (Syncfusion not installed yet). Navigate to project directory and install dependencies: +Navigate to the project directory and install its dependencies: ```bash cd my-app @@ -60,7 +67,7 @@ npm install @syncfusion/ej2-tailwind3-theme --save {% endhighlight %} {% endtabs %} -Import the required theme styles in the `~/src/style.css` file: +Import the required theme styles in the `~/src/style.css` file generated by the Vite template: {% tabs %} {% highlight css tabtitle="styles.css" %} @@ -70,11 +77,11 @@ Import the required theme styles in the `~/src/style.css` file: {% endhighlight %} {% endtabs %} -I> Make sure to import **style.css** in **src/main.ts** to apply the Syncfusion component styles globally. You can also refer to the [themes section](https://ej2.syncfusion.com/documentation/appearance/theme) for details about built-in themes and CSS references for individual controls. +> Make sure to import **style.css** in **src/main.ts** to apply the Syncfusion component styles globally (shown in the next section). For details about built-in themes and CSS references for individual controls, refer to the [themes section](https://ej2.syncfusion.com/documentation/appearance/theme). ## Adding Pivot Table control -To get started, add the Pivot Table control in **main.ts** and **index.html** files. Pivot Table can be initialized through `div` element. +To get started, add the Pivot Table control in the **main.ts** and **index.html** files. The Pivot Table can be initialized through a `div` element. {% tabs %} {% highlight ts tabtitle="main.ts" %} @@ -111,7 +118,7 @@ pivotTableObj.appendTo('#PivotTable'); - Syncfusion Typescript Pivot Table + Syncfusion TypeScript Pivot Table @@ -126,12 +133,14 @@ pivotTableObj.appendTo('#PivotTable'); ## Run the application -Run the app: +Use the following command to run the application: ```bash npm run dev ``` +Vite starts the local development server at **http://localhost:5173/**. Open the URL in a browser to view the Pivot Table. Use `npm run build` for a production bundle or `npm run preview` to serve the built output locally. + ## See also * [Data Binding](https://ej2.syncfusion.com/documentation/pivotview/data-binding) diff --git a/ej2-javascript/pivotview/ts/getting-started.md b/ej2-javascript/pivotview/ts/getting-started.md index 2b941f1c3..d04d42ed3 100644 --- a/ej2-javascript/pivotview/ts/getting-started.md +++ b/ej2-javascript/pivotview/ts/getting-started.md @@ -11,8 +11,15 @@ domainurl: ##DomainURL## # Getting started in TypeScript Pivot Table control -This section explains the steps to create a simple **Pivot Table** and demonstrates the basic usage of the pivot table component using the Essential® JS 2 -[quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. +This section explains the steps to create a simple **Pivot Table** and demonstrates the basic usage of the Pivot Table component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. + +## Prerequisites + +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/install/) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) > This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node **v14.15.0** or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). @@ -63,7 +70,7 @@ Import the required theme styles in the `~/src/styles/styles.css` file: ## Adding Pivot Table component -You can start adding Essential® JS 2 pivot table component to the application. To get started, add the pivot table component in **app.ts** file using the following code. +You can start adding the Essential® JS 2 Pivot Table component to the application. To get started, add the Pivot Table component in the **app.ts** file located in the `src/` folder using the following code. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -92,7 +99,7 @@ pivotTableObj.appendTo('#PivotTable'); {% endhighlight %} {% endtabs %} -Now, add an HTML div element which act as the pivot table element in `index.html` using the following code. +Now, add an HTML `div` element that acts as the Pivot Table host element in `index.html` using the following code. The bundled script is injected by webpack at the end of the page, so the `#PivotTable` element is available in the DOM before `app.ts` runs. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -100,15 +107,16 @@ Now, add an HTML div element which act as the pivot table element in `index.html - pivot table Typescript Component + Pivot Table TypeScript Component - + + - +
      diff --git a/ej2-javascript/schedule/ts/getting-started.md b/ej2-javascript/schedule/ts/getting-started.md index 5bb5dc170..d306cbc33 100644 --- a/ej2-javascript/schedule/ts/getting-started.md +++ b/ej2-javascript/schedule/ts/getting-started.md @@ -37,20 +37,28 @@ npm install @syncfusion/ej2-schedule --save ## Adding CSS reference -Add the Scheduler component styles as shown below in the `src/style.css` file: - -```css -@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css"; -@import "../node_modules/@syncfusion/ej2-schedule/styles/tailwind3.css"; -``` +Themes for Syncfusion® Schedule component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation. + +Install the **Tailwind 3** theme package using the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme --save + +{% endhighlight %} +{% endtabs %} + +Then add the following CSS reference to the **src/styles/styles.css** file: + +{% tabs %} +{% highlight css tabtitle="style.css" %} + +@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/schedule/index.css"; + +{% endhighlight %} +{% endtabs %} + >To refer `style.css` in the application then import it in the `src/main.ts` file. ## Module injection diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html index 88de3f61d..fa0055241 100644 --- a/ej2-typescript-toc.html +++ b/ej2-typescript-toc.html @@ -311,7 +311,7 @@
    • Code Blocks
    • -
  • Real-time collaboration
    • +
  • Real-time Collaboration
  • Editor Menus
  • Drag and drop
  • Paste Cleanup
    • From 0e6577c56e91ce65a2321a284aeb5dca55eba7a9 Mon Sep 17 00:00:00 2001 From: VengadeshSF4855 Date: Fri, 17 Jul 2026 16:06:08 +0530 Subject: [PATCH 12/26] Feature(224126):Updated JavaScript UG Installation Content --- ej2-javascript/installation-and-upgrade/download.md | 2 +- .../installation-using-offline-installer.md | 12 ++++++------ .../installation-using-web-installer.md | 10 +++++----- .../installation-and-upgrade/upgrading-syncfusion.md | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/ej2-javascript/installation-and-upgrade/download.md b/ej2-javascript/installation-and-upgrade/download.md index a8ab24b5a..bf89c062d 100644 --- a/ej2-javascript/installation-and-upgrade/download.md +++ b/ej2-javascript/installation-and-upgrade/download.md @@ -75,7 +75,7 @@ You should initiate an evaluation if you have already obtained our components th 3. Begin your trial by selecting the JavaScript – EJ2 product. - >Note: If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. + N> If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. 4. After you’ve started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page to get the latest version trial installer. You can generate the [unlock](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) key here at any time before the trial period expires. (See the screenshot below.) diff --git a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md index a0610bb4e..18842afee 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md @@ -29,7 +29,7 @@ The steps below show how to install the Essential Studio® offline installer, you have two options: @@ -67,9 +67,9 @@ The steps below show how to install the Essential Studio® has added the option to uninstall previous versions from 18.1 while installing the new version. + N> From the 2021 Volume 1 release, Syncfusion® has added the option to uninstall previous versions from 18.1 while installing the new version. > - >Note: If any version is selected to uninstall, a confirmation screen will appear; if continue is selected, the Progress screen will display the uninstall and install progress, respectively. If none of the versions are chosen to be uninstalled, only the installation progress will be displayed. + N> If any version is selected to uninstall, a confirmation screen will appear; if continue is selected, the Progress screen will display the uninstall and install progress, respectively. If none of the versions are chosen to be uninstalled, only the installation progress will be displayed. **Confirmation Alert** @@ -83,7 +83,7 @@ The steps below show how to install the Essential Studio® for JavaScript (Essential® JS2) is installed. - >Note: x.x.x.x should be replaced with the Essential Studio® version and the Product Unlock Key needs to be replaced with the Unlock Key for that version. + N> x.x.x.x should be replaced with the Essential Studio® version and the Product Unlock Key needs to be replaced with the Unlock Key for that version. ### Command Line Uninstallation diff --git a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md index 7e6256b2d..152a38a8c 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md @@ -32,7 +32,7 @@ The steps below show how to install Essential Studio& ![license download](images/1.png) - >Note: The installer wizard extracts the syncfusionejs2webinstaller_{version}.exe dialog, which displays the package’s unzip operation. + N> The installer wizard extracts the syncfusionejs2webinstaller_{version}.exe dialog, which displays the package’s unzip operation. 2. The Syncfusion® JavaScript - EJ2 Web Installer’s welcome wizard will be displayed. Click the Next button. @@ -60,7 +60,7 @@ The steps below show how to install Essential Studio& ![license download](images/6.png) - >Note: From the 2021 Volume 1 release, Syncfusion® has provided option to uninstall the previous versions from 18.1 while installing the new version. + N> From the 2021 Volume 1 release, Syncfusion® has provided option to uninstall the previous versions from 18.1 while installing the new version. 5. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions. @@ -70,7 +70,7 @@ The steps below show how to install Essential Studio& ![license download](images/8.png) - >Note: By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation + N> By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation 7. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. @@ -131,7 +131,7 @@ You can uninstall all the installed products by selecting the **SyncfusionNote: If the **Syncfusion® Essential Studio®** for JavaScript **{version}** entry is selected from the Windows control panel, the Syncfusion® Essential Studio® JavaScript – EJ2 alone will be removed and the below default MSI uninstallation window will be displayed. +N> If the **Syncfusion® Essential Studio®** for JavaScript **{version}** entry is selected from the Windows control panel, the Syncfusion® Essential Studio® JavaScript – EJ2 alone will be removed and the below default MSI uninstallation window will be displayed. 1. The Platform Selection Wizard will appear. From the **Installed** tab, select the products to be uninstalled. To select all products, check the **Uninstall All** checkbox. Click the Next button. @@ -155,7 +155,7 @@ You can uninstall all the installed products by selecting the **SyncfusionNote: By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation + N> By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation 5. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. diff --git a/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md b/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md index 44c2eb363..34bc8be68 100644 --- a/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md +++ b/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md @@ -31,4 +31,4 @@ It is not required to install the Volume release before installing the Service P Uninstall the trial version and install the fully licensed installer from the [License and Downloads](https://www.syncfusion.com/account/downloads ) section of our website to upgrade from the trial version. ->Note: License key registration is not required for JavaScript, if you are using scripts (.js) and css files. \ No newline at end of file +N> License key registration is not required for JavaScript, if you are using scripts (.js) and css files. \ No newline at end of file From 27e37e212d052cfc28126c1981c0ab82cfc66c0e Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sat, 18 Jul 2026 13:45:22 +0530 Subject: [PATCH 13/26] Integrated latest changes at 07-18-2026 1:30:13 PM --- .../file-manager/access-control-cs1/index.js | 2 +- .../file-manager/access-control-cs1/index.ts | 2 +- .../file-manager/auto-close/index.js | 2 +- .../file-manager/auto-close/index.ts | 2 +- .../file-manager/auto-upload/index.js | 2 +- .../file-manager/auto-upload/index.ts | 2 +- .../file-manager/chunk-upload/index.js | 2 +- .../file-manager/chunk-upload/index.ts | 2 +- .../file-manager/contextmenu-cs1/index.js | 2 +- .../file-manager/contextmenu-cs1/index.ts | 2 +- .../file-manager/contextmenu-cs2/index.js | 2 +- .../file-manager/contextmenu-cs2/index.ts | 2 +- .../custom-thumbnail-cs1/index.js | 2 +- .../custom-thumbnail-cs1/index.ts | 2 +- .../file-manager/customsorting-cs1/index.js | 2 +- .../file-manager/customsorting-cs1/index.ts | 2 +- .../file-manager/detailsview-cs1/index.js | 2 +- .../file-manager/detailsview-cs1/index.ts | 2 +- .../directory-upload-cs1/index.js | 2 +- .../directory-upload-cs1/index.ts | 2 +- .../file-manager/directory-upload/index.js | 2 +- .../file-manager/directory-upload/index.ts | 2 +- .../disablemultiselection-cs1/index.js | 2 +- .../disablemultiselection-cs1/index.ts | 2 +- .../disablethumbnail-cs1/index.js | 2 +- .../disablethumbnail-cs1/index.ts | 2 +- .../file-manager/drag-and-drop-cs1/index.js | 2 +- .../file-manager/drag-and-drop-cs1/index.ts | 2 +- .../es5-getting-started-cs1/js/index.html | 2 +- .../es5-getting-started-cs2/js/index.html | 2 +- .../es5-getting-started-cs3/js/index.html | 2 +- .../es5-getting-started-cs4/js/index.html | 2 +- .../es5-getting-started-cs5/js/index.html | 2 +- .../es5-getting-started-cs6/js/index.html | 2 +- .../file-manager/file-extension/index.js | 2 +- .../file-manager/file-extension/index.ts | 2 +- .../file-manager/file-tab-cs1/index.js | 2 +- .../file-manager/file-tab-cs1/index.ts | 2 +- .../file-manager/file-upload-cs1/index.js | 2 +- .../file-manager/file-upload-cs1/index.ts | 2 +- .../file-manager/fileextension-cs1/index.js | 2 +- .../file-manager/fileextension-cs1/index.ts | 2 +- .../file-manager/getting-started-cs1/index.ts | 2 +- .../file-manager/getting-started-cs2/index.ts | 2 +- .../file-manager/hiddenitems-cs1/index.js | 2 +- .../file-manager/hiddenitems-cs1/index.ts | 2 +- .../large-icon-view-template/index.js | 2 +- .../large-icon-view-template/index.ts | 2 +- .../file-manager/locale-cs1/index.js | 2 +- .../file-manager/locale-cs1/index.ts | 2 +- .../file-manager/locale-cs2/index.js | 2 +- .../file-manager/locale-cs2/index.ts | 2 +- .../file-manager/multiselect-cs1/index.js | 2 +- .../file-manager/multiselect-cs1/index.ts | 2 +- .../navigation-pane-template/index.js | 2 +- .../navigation-pane-template/index.ts | 2 +- .../file-manager/navigationpane-cs1/index.js | 2 +- .../file-manager/navigationpane-cs1/index.ts | 2 +- .../file-manager/overview-cs1/index.js | 2 +- .../file-manager/overview-cs1/index.ts | 2 +- .../file-manager/persistence-cs1/index.js | 2 +- .../file-manager/persistence-cs1/index.ts | 2 +- .../file-manager/rangeselection-cs1/index.js | 2 +- .../file-manager/rangeselection-cs1/index.ts | 2 +- .../file-manager/rtl-cs1/index.js | 2 +- .../file-manager/rtl-cs1/index.ts | 2 +- .../file-manager/sequential-upload/index.js | 2 +- .../file-manager/sequential-upload/index.ts | 2 +- .../file-manager/toolbar-cs1/index.js | 2 +- .../file-manager/toolbar-cs1/index.ts | 2 +- .../file-manager/toolbar-cs2/index.js | 2 +- .../file-manager/toolbar-cs2/index.ts | 2 +- .../file-manager/toolbar-items-cs1/index.js | 2 +- .../file-manager/toolbar-items-cs1/index.ts | 2 +- .../file-manager/tooltip-cs1/index.js | 2 +- .../file-manager/tooltip-cs1/index.ts | 2 +- .../file-manager/upload-cs1/index.js | 2 +- .../file-manager/upload-cs1/index.ts | 2 +- .../file-manager/upload-feature-cs1/index.js | 2 +- .../file-manager/upload-feature-cs1/index.ts | 2 +- .../file-manager/view-cs1/index.js | 2 +- .../file-manager/view-cs1/index.ts | 2 +- .../file-manager/view-cs2/index.js | 2 +- .../file-manager/view-cs2/index.ts | 2 +- .../file-manager/view-cs3/index.js | 2 +- .../file-manager/view-cs3/index.ts | 2 +- .../file-manager/virtualization-cs1/index.js | 2 +- .../file-manager/virtualization-cs1/index.ts | 2 +- ej2-javascript/file-manager/customization.md | 4 +- .../file-manager/file-operations.md | 10 ++-- .../file-manager/js/es5-getting-started.md | 2 +- .../file-manager/ts/getting-started.md | 2 +- ej2-javascript/treegrid/js/getting-started.md | 52 ++++++++++++++++--- ej2-javascript/treegrid/ts/getting-started.md | 48 ++++++++++++++++- 94 files changed, 190 insertions(+), 104 deletions(-) diff --git a/ej2-javascript/code-snippet/file-manager/access-control-cs1/index.js b/ej2-javascript/code-snippet/file-manager/access-control-cs1/index.js index 47c04a0c4..dd32e6c36 100644 --- a/ej2-javascript/code-snippet/file-manager/access-control-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/access-control-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/access-control-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/access-control-cs1/index.ts index a26453301..dd9f6936d 100644 --- a/ej2-javascript/code-snippet/file-manager/access-control-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/access-control-cs1/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control and add custom item to contextmenu let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/auto-close/index.js b/ej2-javascript/code-snippet/file-manager/auto-close/index.js index 0ed6ec051..7a1783fd1 100644 --- a/ej2-javascript/code-snippet/file-manager/auto-close/index.js +++ b/ej2-javascript/code-snippet/file-manager/auto-close/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager Control diff --git a/ej2-javascript/code-snippet/file-manager/auto-close/index.ts b/ej2-javascript/code-snippet/file-manager/auto-close/index.ts index 945854d81..33e872b8a 100644 --- a/ej2-javascript/code-snippet/file-manager/auto-close/index.ts +++ b/ej2-javascript/code-snippet/file-manager/auto-close/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager Control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/auto-upload/index.js b/ej2-javascript/code-snippet/file-manager/auto-upload/index.js index 4817626eb..43eb87a41 100644 --- a/ej2-javascript/code-snippet/file-manager/auto-upload/index.js +++ b/ej2-javascript/code-snippet/file-manager/auto-upload/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager Control diff --git a/ej2-javascript/code-snippet/file-manager/auto-upload/index.ts b/ej2-javascript/code-snippet/file-manager/auto-upload/index.ts index 5c1f457b5..40940ef99 100644 --- a/ej2-javascript/code-snippet/file-manager/auto-upload/index.ts +++ b/ej2-javascript/code-snippet/file-manager/auto-upload/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager Control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/chunk-upload/index.js b/ej2-javascript/code-snippet/file-manager/chunk-upload/index.js index c8ccb2cce..b5b994c80 100644 --- a/ej2-javascript/code-snippet/file-manager/chunk-upload/index.js +++ b/ej2-javascript/code-snippet/file-manager/chunk-upload/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/chunk-upload/index.ts b/ej2-javascript/code-snippet/file-manager/chunk-upload/index.ts index 826dfe66b..77d23dfc5 100644 --- a/ej2-javascript/code-snippet/file-manager/chunk-upload/index.ts +++ b/ej2-javascript/code-snippet/file-manager/chunk-upload/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/contextmenu-cs1/index.js b/ej2-javascript/code-snippet/file-manager/contextmenu-cs1/index.js index 28dbaa446..af30a4480 100644 --- a/ej2-javascript/code-snippet/file-manager/contextmenu-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/contextmenu-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView,ej.filemanager.Toolbar,ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/contextmenu-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/contextmenu-cs1/index.ts index 23191206a..30bafabb3 100644 --- a/ej2-javascript/code-snippet/file-manager/contextmenu-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/contextmenu-cs1/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/contextmenu-cs2/index.js b/ej2-javascript/code-snippet/file-manager/contextmenu-cs2/index.js index 4758de703..8a79eac9f 100644 --- a/ej2-javascript/code-snippet/file-manager/contextmenu-cs2/index.js +++ b/ej2-javascript/code-snippet/file-manager/contextmenu-cs2/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView,ej.filemanager.Toolbar,ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/contextmenu-cs2/index.ts b/ej2-javascript/code-snippet/file-manager/contextmenu-cs2/index.ts index 8a3b7cfcf..221a87bd2 100644 --- a/ej2-javascript/code-snippet/file-manager/contextmenu-cs2/index.ts +++ b/ej2-javascript/code-snippet/file-manager/contextmenu-cs2/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView, MenuClickEventArgs, FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control and add custom item to contextmenu let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/custom-thumbnail-cs1/index.js b/ej2-javascript/code-snippet/file-manager/custom-thumbnail-cs1/index.js index 726a54b0e..ca9a3963d 100644 --- a/ej2-javascript/code-snippet/file-manager/custom-thumbnail-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/custom-thumbnail-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/custom-thumbnail-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/custom-thumbnail-cs1/index.ts index 8372e5bd0..bcee771bd 100644 --- a/ej2-javascript/code-snippet/file-manager/custom-thumbnail-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/custom-thumbnail-cs1/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/customsorting-cs1/index.js b/ej2-javascript/code-snippet/file-manager/customsorting-cs1/index.js index de803b72c..be1b1e49b 100644 --- a/ej2-javascript/code-snippet/file-manager/customsorting-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/customsorting-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/customsorting-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/customsorting-cs1/index.ts index 7b7168297..4ce7db7f7 100644 --- a/ej2-javascript/code-snippet/file-manager/customsorting-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/customsorting-cs1/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView, sortComparer, SortCo FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/detailsview-cs1/index.js b/ej2-javascript/code-snippet/file-manager/detailsview-cs1/index.js index cd28dc695..f86c113cd 100644 --- a/ej2-javascript/code-snippet/file-manager/detailsview-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/detailsview-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/detailsview-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/detailsview-cs1/index.ts index e64a21fc7..fb42339b2 100644 --- a/ej2-javascript/code-snippet/file-manager/detailsview-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/detailsview-cs1/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/directory-upload-cs1/index.js b/ej2-javascript/code-snippet/file-manager/directory-upload-cs1/index.js index 4c97d1ed3..7470bdacd 100644 --- a/ej2-javascript/code-snippet/file-manager/directory-upload-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/directory-upload-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // Initialize the FileManager component var fileObject = new ej.filemanager.FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/directory-upload-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/directory-upload-cs1/index.ts index cd232aa96..d794505ad 100644 --- a/ej2-javascript/code-snippet/file-manager/directory-upload-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/directory-upload-cs1/index.ts @@ -5,7 +5,7 @@ FileManager.Inject(Toolbar, NavigationPane, DetailsView, ContextMenu); /** * File Manager folder upload sample */ -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; let fileObject: FileManager = new FileManager({ ajaxSettings: { url: hostUrl + 'api/FileManager/FileOperations', diff --git a/ej2-javascript/code-snippet/file-manager/directory-upload/index.js b/ej2-javascript/code-snippet/file-manager/directory-upload/index.js index 315af7c70..0d52652e3 100644 --- a/ej2-javascript/code-snippet/file-manager/directory-upload/index.js +++ b/ej2-javascript/code-snippet/file-manager/directory-upload/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/directory-upload/index.ts b/ej2-javascript/code-snippet/file-manager/directory-upload/index.ts index ac79182f4..8d0341100 100644 --- a/ej2-javascript/code-snippet/file-manager/directory-upload/index.ts +++ b/ej2-javascript/code-snippet/file-manager/directory-upload/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/disablemultiselection-cs1/index.js b/ej2-javascript/code-snippet/file-manager/disablemultiselection-cs1/index.js index 065249186..16315bca2 100644 --- a/ej2-javascript/code-snippet/file-manager/disablemultiselection-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/disablemultiselection-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/disablemultiselection-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/disablemultiselection-cs1/index.ts index 69d1fd421..ccea99b39 100644 --- a/ej2-javascript/code-snippet/file-manager/disablemultiselection-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/disablemultiselection-cs1/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/disablethumbnail-cs1/index.js b/ej2-javascript/code-snippet/file-manager/disablethumbnail-cs1/index.js index f3bab3ec5..e9a71b015 100644 --- a/ej2-javascript/code-snippet/file-manager/disablethumbnail-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/disablethumbnail-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/disablethumbnail-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/disablethumbnail-cs1/index.ts index 3852265d2..269d6cdb7 100644 --- a/ej2-javascript/code-snippet/file-manager/disablethumbnail-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/disablethumbnail-cs1/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/drag-and-drop-cs1/index.js b/ej2-javascript/code-snippet/file-manager/drag-and-drop-cs1/index.js index ff233026e..3857ba78a 100644 --- a/ej2-javascript/code-snippet/file-manager/drag-and-drop-cs1/index.js +++ b/ej2-javascript/code-snippet/file-manager/drag-and-drop-cs1/index.js @@ -1,4 +1,4 @@ -var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/'; +var hostUrl = 'https://physical-service.syncfusion.com/'; // inject feature modules of the File Manager ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView, ej.filemanager.Toolbar, ej.filemanager.NavigationPane); // initialize File Manager control diff --git a/ej2-javascript/code-snippet/file-manager/drag-and-drop-cs1/index.ts b/ej2-javascript/code-snippet/file-manager/drag-and-drop-cs1/index.ts index 4ef1d5995..f74c9e9d1 100644 --- a/ej2-javascript/code-snippet/file-manager/drag-and-drop-cs1/index.ts +++ b/ej2-javascript/code-snippet/file-manager/drag-and-drop-cs1/index.ts @@ -2,7 +2,7 @@ import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/e FileManager.Inject(Toolbar, NavigationPane, DetailsView) -let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; +let hostUrl: string = 'https://physical-service.syncfusion.com/'; // initialize File Manager control and add custom item to contextmenu let filemanagerInstance: FileManager = new FileManager({ ajaxSettings: { diff --git a/ej2-javascript/code-snippet/file-manager/es5-getting-started-cs1/js/index.html b/ej2-javascript/code-snippet/file-manager/es5-getting-started-cs1/js/index.html index fe31e03fb..a809cb322 100644 --- a/ej2-javascript/code-snippet/file-manager/es5-getting-started-cs1/js/index.html +++ b/ej2-javascript/code-snippet/file-manager/es5-getting-started-cs1/js/index.html @@ -35,7 +35,7 @@
    +``` -## Adding Syncfusion® Tree Grid CDN resources +## Adding Syncfusion® Tree Grid CDN resources The Essential® JS 2 Tree Grid control can be initialized by the following way. @@ -186,10 +194,42 @@ treeGridObj.appendTo('#TreeGrid'); {% previewsample "page.domainurl/code-snippet/treegrid/tree-grid-cs4" %} +## Registering a license key + +Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. + +**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). + +**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. + +```javascript +// Register Syncfusion license key +ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). + ## Run the application Now, run the **index.html** in web browser, it will render the Essential® JS 2 Tree Grid control. +## Troubleshooting + +**Grid renders blank / no rows appear** +- Verify that the `dataSource` property is set and the data array is not empty. +- Open the browser developer console (F12) and check for JavaScript errors. +- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). + +**License validation warning in the console** +- Register your license key before instantiating any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. + +**Scripts blocked when opening via `file://`** +- Serve the application through a local HTTP server. Refer to the [Run the application](#run-the-application) section. + +**CDN resources fail to load** +- Check your internet connection. +- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. + ## See Also * [Tree Grid Feature Modules](https://ej2.syncfusion.com/javascript/documentation/treegrid/module) diff --git a/ej2-javascript/treegrid/ts/getting-started.md b/ej2-javascript/treegrid/ts/getting-started.md index b7ebdf3e8..77a34a799 100644 --- a/ej2-javascript/treegrid/ts/getting-started.md +++ b/ej2-javascript/treegrid/ts/getting-started.md @@ -17,6 +17,41 @@ This section explains the steps to create a simple Tree Grid and demonstrates th > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +## Prerequisites + +Before getting started, ensure the following tools are installed on your machine: + +| Tool | Version / Notes | +|------|----------------| +| Node.js | v14.15.0 or higher | +| npm | Bundled with Node.js | +| Git | Required to clone the quickstart repository | +| Visual Studio Code | Recommended code editor | + +You can verify your Node.js and npm versions by running: + +``` +node -v +npm -v +``` + +## Registering the license key + +Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. + +**Steps to register the license key:** + +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: + +```ts +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. + ## Set up development environment Clone the Essential® JS 2 quickstart application project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) using the following command line scripts. @@ -30,12 +65,19 @@ cd ej2-quickstart-webpack- Syncfusion® TypeScript (Essential® JS 2) packages are available in the public registry on [npmjs.com](https://www.npmjs.com/~syncfusionorg). You can install all Syncfusion® TypeScript (Essential® JS 2) controls are available either as a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or as individual packages for each control. -Use the following command to install the dependent npm packages from the command prompt. +Use the following command to install the `@syncfusion/ej2-treegrid` package: + +``` +npm install @syncfusion/ej2-treegrid --save +``` + +Then, install the remaining dependent npm packages using the following command: ``` npm install ``` + ## Adding CSS reference Themes for Syncfusion® Tree Grid component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/documentation/appearance/theme) documentation. @@ -157,10 +199,14 @@ treeGridObj.appendTo('#TreeGrid'); ## Run the application +The `npm start` command compiles the TypeScript source files and starts the webpack development server. Run the following command: + ``` npm start ``` +Open `http://localhost:8080` (or the port shown in the terminal) in a browser. You should see a Data Grid rendered with the sample order data, displaying the following columns: **Task ID**, **Task Name**, **Start Date**, **End Date**. + ## See also * [Tree Grid Feature Modules](https://ej2.syncfusion.com/documentation/treegrid/module) From 6e274640efe1d1b05508b11022936579b8010a2f Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Mon, 20 Jul 2026 13:43:39 +0530 Subject: [PATCH 14/26] Integrated latest changes at 07-20-2026 1:30:04 PM --- .../ai-assistview/ts/getting-started.md | 4 +- ej2-javascript/chat-ui/ts/getting-started.md | 6 +- ej2-javascript/diagram/js/getting-started.md | 53 ++++++++++------- ej2-javascript/diagram/ts/getting-started.md | 58 ++++++------------- .../inline-ai-assist/ts/getting-started.md | 8 +-- .../installation-and-upgrade/download.md | 2 +- .../installation-using-offline-installer.md | 12 ++-- .../installation-using-web-installer.md | 10 ++-- .../upgrading-syncfusion.md | 2 +- .../ribbon/js/es5-getting-started.md | 4 +- ej2-javascript/ribbon/ts/getting-started.md | 4 +- .../speech-to-text/js/es5-getting-started.md | 6 +- .../speech-to-text/ts/getting-started.md | 4 +- 13 files changed, 81 insertions(+), 92 deletions(-) diff --git a/ej2-javascript/ai-assistview/ts/getting-started.md b/ej2-javascript/ai-assistview/ts/getting-started.md index 1cf6059d6..689940e57 100644 --- a/ej2-javascript/ai-assistview/ts/getting-started.md +++ b/ej2-javascript/ai-assistview/ts/getting-started.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## AI AssistView control +# Getting started with ##Platform_Name## AI AssistView control This section explains how to create a simple AI AssistView control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. @@ -76,7 +76,7 @@ To render the AI AssistView control, add the below import in the `~/src/styles/s @import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ai-assistview/index.css"; ``` -## Adding AI AssistView to the Application +## Adding AI AssistView to the application Add the HTML div tag with ID attribute as the `defaultAssist` to your `index.html` file. diff --git a/ej2-javascript/chat-ui/ts/getting-started.md b/ej2-javascript/chat-ui/ts/getting-started.md index 117d7cff3..f257bdcfd 100644 --- a/ej2-javascript/chat-ui/ts/getting-started.md +++ b/ej2-javascript/chat-ui/ts/getting-started.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Chat UI control +# Getting started with ##Platform_Name## Chat UI control This section explains how to create a simple Chat UI control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. @@ -79,7 +79,7 @@ To render the Chat UI control, add the below import in the `~/src/styles/styles. @import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/chat-ui/index.css"; ``` -## Adding Chat UI to the Application +## Adding Chat UI to the application Add the HTML div tag with ID attribute as the `chatUI` to your `index.html` file. @@ -176,4 +176,4 @@ You can use the [messages](../api/chat-ui#messages) property to add messages and {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/chat-ui/default-messages" %} +{% previewsample "page.domainurl/code-snippet/chat-ui/default-messages" %} \ No newline at end of file diff --git a/ej2-javascript/diagram/js/getting-started.md b/ej2-javascript/diagram/js/getting-started.md index 268ceedb1..db93c8a66 100644 --- a/ej2-javascript/diagram/js/getting-started.md +++ b/ej2-javascript/diagram/js/getting-started.md @@ -1,9 +1,9 @@ --- layout: post title: Getting started with ##Platform_Name## Diagram control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more details. +description: Checkout and learn about Getting started with ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Getting started +control: Getting started publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -13,30 +13,30 @@ domainurl: ##DomainURL## This section explains how to create and render a simple Essential® JS 2 Diagram in a plain JavaScript application. -> **Ready to streamline your Syncfusion® JavaScript development?** Discover the full potential of Syncfusion® JavaScript controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/javascript/documentation/mcp-server/ai-coding-assistant/getting-started) +> **Ready to streamline your Syncfusion® JavaScript development?** Discover the full potential of Syncfusion® JavaScript controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/javascript/documentation/mcp-server/ai-coding-assistant/getting-started). ## Setup for local environment -Refer to the following steps to set up your local environment. +Follow these steps to set up your local environment. **Step 1:** Create a root folder named **my-diagram-app** for your application. -**Step 2:** Create a **my-diagram-app/resources** folder to store local scripts and styles files. +**Step 2:** Create a **my-diagram-app/resources** folder to store local script and style files. **Step 3:** Open Visual Studio Code and create **my-diagram-app/index.js** and **my-diagram-app/index.html** files to initialize the Essential® JS 2 Diagram control. ## Adding Syncfusion® resources -The Essential® JS 2 Diagram control can be initialized by using either of the following ways. +The Essential® JS 2 Diagram control can be initialized using one of the following methods: * Using local script and style. * Using CDN link for script and style. ### Using local script and style -**Step 1**: Download [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) to obtain the global scripts and styles. +**Step 1:** Download [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) to obtain the global scripts and styles. -**Step 2**: Identify the location of the script and style files from the build installation location. The syntax for the file paths are as follows: +**Step 2:** Identify the location of the script and style files from the build installation location. The syntax for the file paths are as follows: **Syntax:** > Script: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Web(Essential JS 2)/javascript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -46,11 +46,11 @@ The Essential® JS 2 Diagram control can be initialized by using either of the f > Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/33.2.3/Web(Essential JS 2)/javascript/ej2-diagrams/dist/global/ej2-diagrams.min.js` > Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/33.2.3/Web(Essential JS 2)/javascript/ej2-diagrams/styles/tailwind3.css` -**Step 3**: Copy the global scripts and style files into the **resources** folders: +**Step 3:** Copy the global script and style files into the **resources** folder. -**Step 4:** Add References to the scripts and styles into the **index.html** file to render the Syncfusion® Diagram. +**Step 4:** Add references to the scripts and styles into the **index.html** file to render the Syncfusion® Diagram. -Here's an example of referencing the scripts and styles in an HTML file: +The following example shows how to reference the script and style in an HTML file: ``` @@ -65,6 +65,9 @@ Here's an example of referencing the scripts and styles in an HTML file: + +
    + @@ -72,18 +75,17 @@ Here's an example of referencing the scripts and styles in an HTML file: ### Using CDN link for script and style -Using CDN links, you can directly refer the script and style into the **index.html**. +Using CDN links, you can reference the scripts and styles directly in the **index.html**. **Syntax:** > Script: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/{PACKAGE_NAME}.min.js` -> Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css` +> Styles: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/styles/tailwind3.css` **Example:** -> Script: [`https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/ej2-diagrams/dist/global/ej2-diagrams.min.js) -> Styles: [`https://cdn.syncfusion.com/ej2/ej2-diagrams/styles/tailwind3.css`](https://cdn.syncfusion.com/ej2/ej2-diagrams/styles/tailwind3.css) +> Script: [`https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2-diagrams.min.js`](https://cdn.syncfusion.com/ej2/ej2-diagrams/dist/global/ej2-diagrams.min.js) +> Styles: [`https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css`](https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css) - -Here's an example of referencing the scripts and styles in an HTML file using CDN links to render the Syncfusion® Diagram. +The following example shows how to reference the scripts and styles in an HTML file using CDN links to render the Syncfusion® Diagram. ``` @@ -103,18 +105,23 @@ Here's an example of referencing the scripts and styles in an HTML file using CD + +
    + ``` +N> The `{PACKAGE_NAME}.min.js` file (e.g., `ej2-diagrams.min.js`) and the package-specific `{PACKAGE_NAME}/styles/tailwind3.css` file (e.g., `ej2-diagrams/styles/tailwind3.css`) contain only the Diagram package, while the combined `ej2.min.js` bundle and the combined `tailwind3.css` file include all Essential® JS 2 controls. + ## Create your first Diagram with nodes and connectors This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors. -The following example creates a flowchart with four nodes: **Start**, **Process**, **Decision**, and **End**. It also applies common node and connector settings using the `getNodeDefaults` and `getConnectorDefaults` properties. +The following example creates a flowchart with four nodes: **Start**, **Process**, **Decision**, and **End**. It also applies common node and connector settings through the `getNodeDefaults` and `getConnectorDefaults` callback bindings. -Here is the **index.js** file: +Replace the entire contents of **my-diagram-app/index.js** with the following code: ``` // Node defaults function @@ -190,7 +197,7 @@ let diagram = new ej.diagrams.Diagram({ // Render initialized Diagram diagram.appendTo('#diagram'); ``` -Here is the **index.html** file: +Replace the entire contents of **my-diagram-app/index.html** with the following code (using CDN references; for the local-script setup, replace the CDN URLs with your local **resources/** paths): ``` @@ -220,6 +227,8 @@ Here is the **index.html** file: ## Run the application -Now, run the **index.html** in web browser, it will render the Essential® JS 2 Diagram control. +Now, run the **index.html** in a web browser. It will render the Essential® JS 2 Diagram control. + +![Rendered flowchart with four nodes connected vertically by arrows](images/Getting-started.png) -![Getting Started](images/Getting-started.png) \ No newline at end of file +N> For the local-script setup, serve the application via a local HTTP server (e.g., **npx http-server** or the Code Studio Live Server extension) instead of opening the HTML file directly with the **file:/** protocol, to avoid browser security restrictions. \ No newline at end of file diff --git a/ej2-javascript/diagram/ts/getting-started.md b/ej2-javascript/diagram/ts/getting-started.md index d5801e8c5..8d65d3e83 100644 --- a/ej2-javascript/diagram/ts/getting-started.md +++ b/ej2-javascript/diagram/ts/getting-started.md @@ -1,19 +1,19 @@ --- layout: post title: Getting started with ##Platform_Name## Diagram control | Syncfusion® -description: Checkout and learn about Getting started with ##Platform_Name## Diagram control of Syncfusion Essential® JS 2 and more details. +description: Checkout and learn about Getting started with ##Platform_Name## Diagram control of Syncfusion Essential® JS 2 and more details. platform: ej2-javascript -control: Getting started +control: Getting started publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting Started with TypeScript Diagram Component +# Getting Started with TypeScript Diagram Control -This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram component using a seed application. +This section explains the steps required to create a simple diagram and demonstrates the basic usage of the diagram control using a seed application. -> **Ready to streamline your Syncfusion® TypeScript development?** Discover the full potential of Syncfusion® TypeScript components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/documentation/mcp-server/ai-coding-assistant/getting-started) +> **Ready to streamline your Syncfusion® TypeScript development?** Discover the full potential of Syncfusion® TypeScript control with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/documentation/mcp-server/ai-coding-assistant/getting-started). ## Prerequisites @@ -31,7 +31,7 @@ Open the command prompt from the required directory, and run the following comma git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart ``` -After cloning the application in the **ej2-quickstart** folder, run the following command line to navigate to the folder. +After cloning the application in the **ej2-quickstart** folder, run the following command to navigate to the folder. ``` cd ej2-quickstart @@ -39,15 +39,8 @@ cd ej2-quickstart ## Install Syncfusion TypeScript packages -Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. The quickstart application is preconfigured with the dependent `@syncfusion/ej2` package in the **package.json** file. Use the following command to install the dependent npm packages from the command prompt. - -``` -npm install -``` - -## Install Syncfusion® TypeScript packages - -Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. The quickstart application is preconfigured with the dependent `@syncfusion/ej2` package in the **package.json** file. Use the following command to install the dependent npm packages from the command prompt. +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the **package.json** file. +Use the following command to install the dependent npm packages from the command prompt. ``` npm install @@ -55,38 +48,25 @@ npm install ## Import Syncfusion® CSS styles -The Diagram control needs Syncfusion® theme styles to display correctly. Add the styles using one of the following options. +The Diagram control needs Syncfusion® theme styles to display correctly. Syncfusion® theme packages include ready-to-use styles for supported control. -### Option 1: Add styles from a theme package - -Syncfusion® theme packages include ready-to-use styles for supported controls. Install the Tailwind 3 theme package using the following command: +To add the styles, install the Tailwind theme package using the following command: ``` -npm install @syncfusion/ej2-tailwind3-theme --save +npm install @syncfusion/ej2-tailwind-theme ``` Then add the following CSS reference to the **src/styles/styles.css** file: ``` -@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/diagram/index.css"; +@import "../../node_modules/@syncfusion/ej2-tailwind-theme/styles/diagram/index.css"; ``` For the list of available themes, refer to the [Themes](https://ej2.syncfusion.com/documentation/appearance/theme) documentation. -### Option 2: Add styles from control packages - -After installing the Diagram package, the required style files are available under the **node_modules/@syncfusion** directory. Add the required Syncfusion® styles to the **src/styles/styles.css** file: - -``` -@import "../../node_modules/@syncfusion/ej2-diagrams/styles/tailwind.css"; -@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind.css"; -@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css"; -``` - -N> Syncfusion® provides multiple built-in themes. If the application uses a different theme, replace the **tailwind3.css** references with the corresponding theme file, such as **material3.css**. +N> Syncfusion® provides multiple built-in themes. If the application uses a different theme, replace **@syncfusion/ej2-tailwind-theme/styles/diagram/index.css** with the corresponding stylesheet from the desired theme package. For example, to use the Material 3 theme, import **@syncfusion/ej2-material3-theme/styles/diagram/index.css**. -### Add the HTML element +## Add the HTML element Open the **~/src/index.html** file and add the following HTML element for the Diagram component. @@ -107,11 +87,11 @@ Open the **~/src/index.html** file and add the following HTML element for the Di ``` -### Create your first Diagram with nodes and connectors +## Create your first Diagram with nodes and connectors This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors. -The following example creates a flowchart with four nodes: **Start**, **Process**, **Decision**, and **End**. It also applies common node and connector settings using the `getNodeDefaults` and `getConnectorDefaults` properties. +The following example creates a flowchart with four nodes: **Start**, **Process**, **Decision**, and **End**. It also applies common node and connector settings through the `getNodeDefaults` and `getConnectorDefaults` callback bindings. Open the **src/app/app.ts** file and add the following code to render the Diagram control. @@ -230,14 +210,14 @@ In this example: ## Run the application -Now, run the application in the browser using the following command. +Run the application in the browser using the following command: ``` npm start ``` -Open the generated local URL in the browser. The application displays a flowchart diagram with four nodes connected by orthogonal connectors. +Then open the local URL shown in the terminal, such as `http://localhost:4000`. The application displays a flowchart diagram with four nodes connected by orthogonal connectors. The output will appear as follows: -![Getting started](images/Getting-started.png) +![Rendered flowchart with four nodes connected vertically by arrows](images/Getting-started.png) diff --git a/ej2-javascript/inline-ai-assist/ts/getting-started.md b/ej2-javascript/inline-ai-assist/ts/getting-started.md index d78550499..9d4c92b41 100644 --- a/ej2-javascript/inline-ai-assist/ts/getting-started.md +++ b/ej2-javascript/inline-ai-assist/ts/getting-started.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Inline AI Assist control +# Getting started with ##Platform_Name## Inline AI Assist control This section explains how to create a simple Inline AI Assist control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. @@ -20,7 +20,7 @@ This section explains how to create a simple Inline AI Assist control and config The list of dependencies required to use the Inline AI Assist control in your application is given as follows: ```javascript -|-- @syncfusion/ej2-react-interactive-chat +|-- @syncfusion/ej2-interactive-chat |-- @syncfusion/ej2-base |-- @syncfusion/ej2-navigations |-- @syncfusion/ej2-inputs @@ -79,7 +79,7 @@ To render the Inline AI Assist control, add the below import in the `~/src/style @import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/inline-ai-assist/index.css"; ``` -## Adding Inline AI Assist to the Application +## Adding Inline AI Assist to the application Add the HTML div tag with ID attribute as the `defaultInlineAssist` to your `index.html` file. @@ -143,7 +143,7 @@ npm start {% endhighlight %} {% endtabs %} -The following example shows a basic AI AssistView control. +The following example shows a basic Inline AI Assist control. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/ej2-javascript/installation-and-upgrade/download.md b/ej2-javascript/installation-and-upgrade/download.md index bf89c062d..a8ab24b5a 100644 --- a/ej2-javascript/installation-and-upgrade/download.md +++ b/ej2-javascript/installation-and-upgrade/download.md @@ -75,7 +75,7 @@ You should initiate an evaluation if you have already obtained our components th 3. Begin your trial by selecting the JavaScript – EJ2 product. - N> If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. + >Note: If you’ve already used the trial products and they haven’t expired, you won’t be able to start the trial for the same product again. 4. After you’ve started the trial, go to the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page to get the latest version trial installer. You can generate the [unlock](https://www.syncfusion.com/kb/8069/how-to-generate-unlock-key-for-essentials-studio-products) key here at any time before the trial period expires. (See the screenshot below.) diff --git a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md index 18842afee..a0610bb4e 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md @@ -29,7 +29,7 @@ The steps below show how to install the Essential Studio® offline installer, you have two options: @@ -67,9 +67,9 @@ The steps below show how to install the Essential Studio® has added the option to uninstall previous versions from 18.1 while installing the new version. + >Note: From the 2021 Volume 1 release, Syncfusion® has added the option to uninstall previous versions from 18.1 while installing the new version. > - N> If any version is selected to uninstall, a confirmation screen will appear; if continue is selected, the Progress screen will display the uninstall and install progress, respectively. If none of the versions are chosen to be uninstalled, only the installation progress will be displayed. + >Note: If any version is selected to uninstall, a confirmation screen will appear; if continue is selected, the Progress screen will display the uninstall and install progress, respectively. If none of the versions are chosen to be uninstalled, only the installation progress will be displayed. **Confirmation Alert** @@ -83,7 +83,7 @@ The steps below show how to install the Essential Studio® for JavaScript (Essential® JS2) is installed. - N> x.x.x.x should be replaced with the Essential Studio® version and the Product Unlock Key needs to be replaced with the Unlock Key for that version. + >Note: x.x.x.x should be replaced with the Essential Studio® version and the Product Unlock Key needs to be replaced with the Unlock Key for that version. ### Command Line Uninstallation diff --git a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md index 152a38a8c..7e6256b2d 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md @@ -32,7 +32,7 @@ The steps below show how to install Essential Studio& ![license download](images/1.png) - N> The installer wizard extracts the syncfusionejs2webinstaller_{version}.exe dialog, which displays the package’s unzip operation. + >Note: The installer wizard extracts the syncfusionejs2webinstaller_{version}.exe dialog, which displays the package’s unzip operation. 2. The Syncfusion® JavaScript - EJ2 Web Installer’s welcome wizard will be displayed. Click the Next button. @@ -60,7 +60,7 @@ The steps below show how to install Essential Studio& ![license download](images/6.png) - N> From the 2021 Volume 1 release, Syncfusion® has provided option to uninstall the previous versions from 18.1 while installing the new version. + >Note: From the 2021 Volume 1 release, Syncfusion® has provided option to uninstall the previous versions from 18.1 while installing the new version. 5. Pop up screen will be displayed to get the confirmation to uninstall selected previous versions. @@ -70,7 +70,7 @@ The steps below show how to install Essential Studio& ![license download](images/8.png) - N> By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation + >Note: By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation 7. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. @@ -131,7 +131,7 @@ You can uninstall all the installed products by selecting the **Syncfusion If the **Syncfusion® Essential Studio®** for JavaScript **{version}** entry is selected from the Windows control panel, the Syncfusion® Essential Studio® JavaScript – EJ2 alone will be removed and the below default MSI uninstallation window will be displayed. +>Note: If the **Syncfusion® Essential Studio®** for JavaScript **{version}** entry is selected from the Windows control panel, the Syncfusion® Essential Studio® JavaScript – EJ2 alone will be removed and the below default MSI uninstallation window will be displayed. 1. The Platform Selection Wizard will appear. From the **Installed** tab, select the products to be uninstalled. To select all products, check the **Uninstall All** checkbox. Click the Next button. @@ -155,7 +155,7 @@ N> If the **Syncfusion® Essential Studio By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation + >Note: By clicking the **Download Size and Installation** Size links, you can determine the approximate size of the download and installation 5. The Configuration Wizard will appear. You can change the Download, Install, and Demos locations from here. You can also change the Additional settings on a product-by-product basis. Click Next to install with the default settings. diff --git a/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md b/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md index 34bc8be68..44c2eb363 100644 --- a/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md +++ b/ej2-javascript/installation-and-upgrade/upgrading-syncfusion.md @@ -31,4 +31,4 @@ It is not required to install the Volume release before installing the Service P Uninstall the trial version and install the fully licensed installer from the [License and Downloads](https://www.syncfusion.com/account/downloads ) section of our website to upgrade from the trial version. -N> License key registration is not required for JavaScript, if you are using scripts (.js) and css files. \ No newline at end of file +>Note: License key registration is not required for JavaScript, if you are using scripts (.js) and css files. \ No newline at end of file diff --git a/ej2-javascript/ribbon/js/es5-getting-started.md b/ej2-javascript/ribbon/js/es5-getting-started.md index 0ae07cfd9..cab110d83 100644 --- a/ej2-javascript/ribbon/js/es5-getting-started.md +++ b/ej2-javascript/ribbon/js/es5-getting-started.md @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Es5 getting started in ##Platform_Name## Ribbon control +# ES5 getting started with ##Platform_Name## Ribbon control -The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5-formatted pure JavaScript framework that can be used directly in the latest web browsers. ## Dependencies diff --git a/ej2-javascript/ribbon/ts/getting-started.md b/ej2-javascript/ribbon/ts/getting-started.md index 5e1513461..cf26d3854 100644 --- a/ej2-javascript/ribbon/ts/getting-started.md +++ b/ej2-javascript/ribbon/ts/getting-started.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Ribbon control +# Getting started with ##Platform_Name## Ribbon control This section explains how to create a simple Ribbon and configure its available functionalities in TypeScript using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. @@ -186,7 +186,7 @@ ribbon.appendTo("#ribbon"); {% endhighlight %} {% endtabs %} -## Adding Ribbon Item +## Adding Ribbon Items You can use the `collections` property of ribbon group to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `items` property of ribbon collection and the `type` property of ribbon item to specify the type of control to be rendered, like a button, a drop-down button, a combo box, and more. diff --git a/ej2-javascript/speech-to-text/js/es5-getting-started.md b/ej2-javascript/speech-to-text/js/es5-getting-started.md index 9d1d61d5c..364ac778b 100644 --- a/ej2-javascript/speech-to-text/js/es5-getting-started.md +++ b/ej2-javascript/speech-to-text/js/es5-getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Es5 getting started with ##Platform_Name## SpeechToText control | Syncfusion +title: Es5 getting started with ##Platform_Name## SpeechToText | Syncfusion description: Checkout and learn about Es5 getting started with ##Platform_Name## SpeechToText control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Es5 getting started @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Es5 getting started in ##Platform_Name## SpeechToText control +# ES5 getting started with ##Platform_Name## SpeechToText control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential JS 2 for JavaScript (global script) is an ES5-formatted pure JavaScript framework that can be used directly in the latest web browsers. ## Dependencies diff --git a/ej2-javascript/speech-to-text/ts/getting-started.md b/ej2-javascript/speech-to-text/ts/getting-started.md index 94532d88f..6d9c451e0 100644 --- a/ej2-javascript/speech-to-text/ts/getting-started.md +++ b/ej2-javascript/speech-to-text/ts/getting-started.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## SpeechToText control +# Getting started with ##Platform_Name## SpeechToText control This section explains how to create a simple SpeechToText control and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. @@ -76,7 +76,7 @@ To render the SpeechToText control, add the below import in the `~/src/styles/st @import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/speech-to-text/index.css"; ``` -## Adding SpeechToText to the Application +## Adding SpeechToText to the application Add the HTML input tag with ID attribute as the `element` to your `index.html` file. From 7db490eb48d019b507e72524129878d66db374a7 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 21 Jul 2026 13:43:15 +0530 Subject: [PATCH 15/26] Integrated latest changes at 07-21-2026 1:30:04 PM --- .../js/es5-getting-started.md | 73 ++++--- .../accumulation-chart/ts/getting-started.md | 88 +++++---- .../ai-assistview/ts/getting-started.md | 158 ++++++--------- .../chart/js/es5-getting-started.md | 74 ++++--- ej2-javascript/chart/ts/getting-started.md | 105 +++++----- ej2-javascript/chat-ui/ts/getting-started.md | 180 ++++++----------- .../common/getting-started-cs1/ts/index.html | 18 +- .../grid/excel-filter-cs6/js/index.html | 28 +-- .../grid/excel-filter-cs6/systemjs.config.js | 2 +- .../grid/excel-filter-cs6/ts/index.html | 25 +-- ej2-javascript/diagram/js/getting-started.md | 67 +++---- ej2-javascript/diagram/ts/getting-started.md | 25 ++- .../file-manager/js/es5-getting-started.md | 81 ++++++-- .../file-manager/ts/getting-started.md | 81 ++++++-- .../gantt/js/es5-getting-started.md | 164 ++++++++-------- ej2-javascript/gantt/ts/getting-started.md | 111 ++++++++--- ej2-javascript/grid/js/getting-started.md | 104 +++++----- ej2-javascript/grid/ts/getting-started.md | 72 ++++--- .../inline-ai-assist/ts/getting-started.md | 158 ++++++--------- .../js/getting-started/quick-start.md | 47 +++-- ej2-javascript/kanban/js/getting-started.md | 185 ++++++++++++++---- ej2-javascript/kanban/ts/getting-started.md | 177 +++++++++++++---- ej2-javascript/ribbon/ts/getting-started.md | 169 ++++++---------- ej2-javascript/schedule/js/getting-started.md | 10 + ej2-javascript/schedule/ts/getting-started.md | 16 ++ ej2-javascript/treegrid/js/getting-started.md | 55 +++--- ej2-javascript/treegrid/ts/getting-started.md | 82 ++++---- .../ts/getting-started/quick-start.md | 30 ++- 28 files changed, 1356 insertions(+), 1029 deletions(-) diff --git a/ej2-javascript/accumulation-chart/js/es5-getting-started.md b/ej2-javascript/accumulation-chart/js/es5-getting-started.md index 5b9564a8d..d5a8552e3 100644 --- a/ej2-javascript/accumulation-chart/js/es5-getting-started.md +++ b/ej2-javascript/accumulation-chart/js/es5-getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: ES5 getting started with ##Platform_Name## Accumulation Chart control | Syncfusion -description: Checkout and learn about ES5 getting started with ##Platform_Name## Accumulation Chart control of Syncfusion Essential JS 2 and more details. +description: Check out and learn about ES5 getting started with ##Platform_Name## Accumulation Chart control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Accumulation Chart publishingplatform: ##Platform_Name## @@ -13,23 +13,24 @@ domainurl: ##DomainURL## Build your first Syncfusion JavaScript (ES5) application with a simple Accumulation Chart control in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Accumulation Chart from the CDN, initializes it with sample data, and renders an interactive chart. -> **Ready to streamline your Syncfusion® JavaScript development?** Discover the full potential of Syncfusion® JavaScript controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/javascript/documentation/ai-coding-assistant/overview) +> The `33.2.3` version segment in the CDN URLs is shown for reference. Replace it with the latest published version from the [Syncfusion EJ2 CDN](https://cdn.syncfusion.com/ej2/) when you start a new project. ## Prerequisites * [Visual Studio Code](https://code.visualstudio.com) (or any text editor) -* A web browser to view the result +* A modern web browser (Chrome, Edge, Firefox, or Safari) +* An active internet connection to fetch the CDN scripts ## Quick Setup -### Step 1: Create Folder and HTML file +### Step 1: Create a folder and an HTML file -* Create a folder named `quickstart` in your desired directory -* Inside the `quickstart` folder, create a new file named `index.html` +* Create a folder named `quickstart` in your desired directory. +* Inside the `quickstart` folder, create a new file named `index.html`. -### Step 2: Add Syncfusion® CDN Resources +### Step 2: Add Syncfusion® CDN resources -Include the following JavaScript links in the `` section. +The chart needs the EJ2 script bundles. Add the following to the `` of `index.html`: **Scripts (JavaScript):** ``` @@ -40,28 +41,33 @@ https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min. https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js ``` -### Step 3: Add Syncfusion® Accumulation Chart control to the application +Load the scripts in the order shown: `ej2-base` → `ej2-data` → `ej2-svg-base` → `ej2-charts`. `ej2-pdf-export` is only required if you use the PDF export feature; it is omitted from the example below. -Copy and paste the following complete code into your `index.html` file: +### Step 3: Add the Accumulation Chart control to the application + +Replace the contents of `index.html` with the following complete code. This loads the required EJ2 scripts, defines the chart container, and renders the chart. ```html - + + + Syncfusion Accumulation Chart - Quick Start - + - - +

    Syncfusion Accumulation Chart

    + +
    - + ``` -### Step 4: Open in Browser +The series properties [`dataSource`](../api/accumulation-chart/accumulationseries#datasource), [`xName`](../api/accumulation-chart/accumulationseries#xname), and [`yName`](../api/accumulation-chart/accumulationseries#yname) bind the JSON fields to the chart. By default, a **Pie series** is rendered when only the data source is provided. -Open the `quickstart/index.html` file in your web browser. You should see the Syncfusion Accumulation Chart control displaying the sample data. +### Step 4: Open in browser + +Open the `quickstart/index.html` file in your web browser. You can either double-click the file or right-click in VS Code and choose **Open with Live Server** (requires the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension). The chart renders the sample data on the page. ## Output The following screenshot shows the output of the Syncfusion Accumulation Chart quick start application: -![Syncfusion Accumulation Chart Quick Start Output](../images/accumulation.png) +![Syncfusion Accumulation Chart Quick Start Output - Pie chart of monthly sales data](../images/accumulation.png "Syncfusion Accumulation Chart displaying monthly sales data") + +## Troubleshooting + +* **Chart does not render** — Verify that the scripts load in the order `ej2-base` → `ej2-data` → `ej2-svg-base` → `ej2-charts`. Open the browser's developer console and check for `404` or `ReferenceError` messages. +* **`ej is not defined`** — One of the CDN script tags failed to load. Check your network connection and verify the CDN URLs are correct. +* **CORS or `file://` errors** — Some browsers block ES5 module loading from `file://`. Serve the file from a local HTTP server (for example, the VS Code **Live Server** extension). +* **Wrong chart type** — Confirm the `type` property in the series matches the expected chart (for example, `Pie`, `Doughnut`, `Funnel`, `Pyramid`). + +## See also + +* [Pie Chart](../pie.md) +* [Doughnut Chart](../pie-dough-nut.md) +* [Funnel Chart](../funnel.md) +* [Pyramid Chart](../pyramid.md) +* [Accumulation Chart Legend](../legend.md) +* [Accumulation Chart Data Labels](../data-label.md) +* [Accumulation Chart Tooltip](../tool-tip.md) +* [API Reference: AccumulationChart](../api/accumulation-chart/accumulationchart) +* [API Reference: AccumulationSeries](../api/accumulation-chart/accumulationseries) + +> **Ready to streamline your Syncfusion® JavaScript development?** Discover the full potential of Syncfusion® JavaScript controls with Syncfusion® AI Coding Assistant. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/javascript/documentation/ai-coding-assistant/overview) diff --git a/ej2-javascript/accumulation-chart/ts/getting-started.md b/ej2-javascript/accumulation-chart/ts/getting-started.md index fb7aa4837..39ba9816e 100644 --- a/ej2-javascript/accumulation-chart/ts/getting-started.md +++ b/ej2-javascript/accumulation-chart/ts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with ##Platform_Name## Accumulation Chart control | Syncfusion -description: Check out and learn about Getting started with ##Platform_Name## Accumulation Chart control of Syncfusion Essential JS 2 and more details. +description: Check out and learn about Getting started with ##Platform_Name## Accumulation Chart control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Accumulation Chart publishingplatform: ##Platform_Name## @@ -38,22 +38,18 @@ Below is the list of minimum dependencies required to use the Accumulation Chart |-- @syncfusion/ej2-compression |-- @syncfusion/ej2-svg-base ``` -Note: @syncfusion/ej2-pdf-export, @syncfusion/ej2-file-utils, and @syncfusion/ej2-compression are optional—required only for PDF export features. Omit if not using exports. +> Note: `@syncfusion/ej2-pdf-export`, `@syncfusion/ej2-file-utils`, and `@syncfusion/ej2-compression` are optional and required only for PDF export features. Omit them if you are not using exports. ## Quick Setup -### Step 1: Create a Project Folder +### Step 1: Open Command Prompt -Create a folder named `my-accumulation-chart` in your desired location. This folder will contain your Syncfusion Accumulation Chart TypeScript project. +Open the command prompt and navigate to the directory where you want to create the project. -### Step 2: Open Command Prompt +* **For Windows**: Open Command Prompt (cmd) or PowerShell and use the `cd` command to navigate to your desired directory. +* **For macOS/Linux**: Open Terminal and use the `cd` command to navigate to your desired directory. -Open the command prompt and navigate to your desired directory where you want to create the project. You can do this by: - -* **For Windows**: Open Command Prompt (cmd) or PowerShell and use `cd` command to navigate to your desired directory -* **For macOS/Linux**: Open Terminal and use `cd` command to navigate to your desired directory - -### Step 3: Clone the Quickstart Repository +### Step 2: Clone the Quickstart Repository Run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). @@ -65,9 +61,11 @@ git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quick {% endhighlight %} {% endtabs %} -### Step 4: Navigate to Project Folder +This creates an `ej2-quickstart` folder in the current directory that contains the seed project. + +### Step 3: Navigate to Project Folder -After cloning the application in the `ej2-quickstart` folder, run the following command to navigate to the project directory. +Run the following command to navigate to the cloned project directory. {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -77,11 +75,14 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -### Step 5: Install Required Packages +### Step 4: Install Required Packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. Install either the umbrella package or the individual control package: -The quickstart application is already preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install all the dependent npm packages from the command prompt. +* Umbrella: [`@syncfusion/ej2`](https://www.npmjs.com/package/@syncfusion/ej2) — all Syncfusion controls in a single package. +* Individual: [`@syncfusion/ej2-charts`](https://www.npmjs.com/package/@syncfusion/ej2-charts) — the Accumulation Chart and its required dependencies. + +The quickstart application is preconfigured with the `@syncfusion/ej2` dependency in the `~/package.json` file. Use the following command to install all the npm packages from the command prompt. {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -91,15 +92,15 @@ npm install {% endhighlight %} {% endtabs %} -This command will download and install all necessary dependencies for your project. +This command downloads and installs all the dependencies required for the project. -### Step 6: Update the HTML Template +### Step 5: Update the HTML Template Open the `ej2-quickstart` folder in Visual Studio Code or any text editor of your choice. > Note: Code snippets here use webpack for local development. For online demos or StackBlitz, SystemJS may be used—ignore loader/helper scripts in rendered previews. -Locate the `~/src/index.html` file in the project. Add the HTML div tag with its `id` attribute as `element` to initialize the Accumulation Chart container. +Locate the `~/src/index.html` file in the project add an HTML `
    ` with its `id` attribute set to `element` to host the chart. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -113,15 +114,12 @@ Locate the `~/src/index.html` file in the project. Add the HTML div tag with its - .... - ....

    Syncfusion Accumulation Chart

    - -
    -
    + +
    @@ -129,11 +127,11 @@ Locate the `~/src/index.html` file in the project. Add the HTML div tag with its {% endhighlight %} {% endtabs %} -### Step 7: Create the Accumulation Chart Component with Data +### Step 6: Create the Accumulation Chart Component with Data -Locate the `src/app/app.ts` file in your project and import the AccumulationChart component to instantiate and render it with sample data. +Locate the `src/app/app.ts` file in your project. Import the `AccumulationChart` component, prepare the sample data, and instantiate the chart. -**Pie Series**: By default, a pie series is rendered when JSON data is assigned to the series [`dataSource`](../api/accumulation-chart/accumulationseries#datasource) property. Map JSON fields to the series [`xName`](../api/accumulation-chart/accumulationseries#xname) and [`yName`](../api/accumulation-chart/accumulationseries#yname) properties to bind data correctly. +By default, a **Pie series** is rendered when JSON data is assigned to the series [`dataSource`](../api/accumulation-chart/accumulationseries#datasource) property. Map JSON fields to the series [`xName`](../api/accumulation-chart/accumulationseries#xname) and [`yName`](../api/accumulation-chart/accumulationseries#yname) properties to bind data correctly. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -156,7 +154,7 @@ let pieData: Object[] = [ { month: 'Dec', sales: 32 } ]; -// Initialize and render Accumulation Chart +// Initialize the Accumulation Chart let chart: AccumulationChart = new AccumulationChart({ series: [ { @@ -167,14 +165,17 @@ let chart: AccumulationChart = new AccumulationChart({ } ], title: 'Sales Data' -}, '#element'); +}); + +// Render the chart to the target container +chart.appendTo('#element'); {% endhighlight %} {% endtabs %} -### Step 8: Run the Application +### Step 7: Run the Application -Open the integrated terminal in Visual Studio Code or use your command prompt to run the application. Use the `npm run start` command: +Open the integrated terminal in Visual Studio Code, or use your command prompt, and run the application with the `npm run start` command. {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -184,14 +185,29 @@ npm run start {% endhighlight %} {% endtabs %} -The application will compile and automatically start in your default web browser. The application typically runs at `http://localhost:4000`. You should see the Syncfusion® Accumulation Chart control displayed on the page. +The application compiles and automatically opens in your default web browser. By default, the dev server runs at `http://localhost:4000`. If that port is in use, webpack selects the next available port and prints the URL in the terminal. -### Step 9: View Your Chart - -Wait for the webpack dev server to complete the build process. Once completed, you will see the Accumulation Chart control rendering in your browser. The chart is now successfully initialized with a pie chart displaying the sample sales data and is ready for further customization. +When the build completes, the Syncfusion® Accumulation Chart control renders on the page and is ready for further customization. ## Output The following screenshot shows the output of the Syncfusion Accumulation Chart quick start application: -![Syncfusion Accumulation Chart Quick Start Output](../images/accumulation.png) \ No newline at end of file +![Syncfusion Accumulation Chart Quick Start Output - Pie chart of monthly sales data](../images/accumulation.png "Syncfusion Accumulation Chart displaying monthly sales data") + +## Troubleshooting + +* **`Cannot find module '@syncfusion/ej2-charts'`** — Dependencies are not installed. Run `npm install` in the project root. +* **Port `4000` already in use** — Another process is bound to the port. Stop the conflicting process or change `devServer.port` in `webpack.config.js`. +* **TypeScript build error** — TypeScript version mismatch. Install TypeScript as a dev dependency: `npm install typescript --save-dev`. +* **Chart does not render** — `app.ts` is not compiled or not referenced. Confirm that `app.js` is referenced in `index.html` and that `npm run start` completed without errors. + +## See also + +* [Pie Chart](../pie.md) +* [Doughnut Chart](../pie-dough-nut.md) +* [Funnel Chart](../funnel.md) +* [Pyramid Chart](../pyramid.md) +* [Accumulation Chart Legend](../legend.md) +* [Accumulation Chart Data Labels](../data-label.md) +* [Accumulation Chart Tooltip](../tool-tip.md) \ No newline at end of file diff --git a/ej2-javascript/ai-assistview/ts/getting-started.md b/ej2-javascript/ai-assistview/ts/getting-started.md index 689940e57..85473cbdb 100644 --- a/ej2-javascript/ai-assistview/ts/getting-started.md +++ b/ej2-javascript/ai-assistview/ts/getting-started.md @@ -3,7 +3,7 @@ layout: post title: Getting started with ##Platform_Name## AI AssistView control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: AI AssistView +control: AI AssistView publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -13,133 +13,85 @@ domainurl: ##DomainURL## This section explains how to create a simple AI AssistView control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires Node.js `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -## Dependencies +## Prerequisites -The list of dependencies required to use the AI AssistView control in your application is given as follows: +Before getting started, ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-interactive-chat - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-inputs -``` +| Tool | Version / Notes | +|------|----------------| +| Node.js | v14.15.0 or higher | +| npm | Bundled with Node.js | +| Git | Required to clone the quickstart repository | +| Visual Studio Code | Recommended code editor | -## Set up development environment +You can verify your Node.js and npm versions by running: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +```bash +node -v +npm -v +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Registering the license key -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Syncfusion® Essential® JS 2 controls require a valid license key from version **16.2.0.41** onwards. Using the controls without a license key will display a **license validation message** in the browser console. -{% endhighlight %} -{% endtabs %} +**Steps to register the license key:** -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your `src/app/app.ts` file, before instantiating any Syncfusion control: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +```ts +import { registerLicense } from '@syncfusion/ej2-base'; -cd ej2-quickstart +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` -{% endhighlight %} -{% endtabs %} +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. -## Add Syncfusion® JavaScript packages +## Setup for local development -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Clone the Essential® JS 2 quickstart application project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) using the following command line scripts. -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +```bash +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack +cd ej2-quickstart-webpack +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +## Adding Syncfusion® TypeScript AI AssistView package -npm install +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -{% endhighlight %} -{% endtabs %} +Use the following command to install the `@syncfusion/ej2-interactive-chat` package: -## Import the Syncfusion® CSS styles - -To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: - -```bash -npm install @syncfusion/ej2-tailwind3-theme --save +``` +npm install @syncfusion/ej2-interactive-chat --save ``` -To render the AI AssistView control, add the below import in the `~/src/styles/styles.css` file which loads all the required dependency styles, as shown below: +Then, install the remaining dependent npm packages using the following command: ``` -@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ai-assistview/index.css"; +npm install ``` -## Adding AI AssistView to the application - -Add the HTML div tag with ID attribute as the `defaultAssist` to your `index.html` file. +## Adding CSS reference -`[src/index.html]` +Themes for Syncfusion® AI AssistView controls can be applied using CSS files provided through the [npm theme package](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme). Install the Fluent 2 theme package using the following command: -{% tabs %} -{% highlight html tabtitle="index.html" %} - - - - - - Essential JS 2 AI AssistView - - - - - - - - - -
    -
    -
    - - - - -{% endhighlight %} -{% endtabs %} - -Then, import the AI AssistView control in your `app.ts` file, and initialize it with the `#defaultAssist`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { AIAssistView } from "@syncfusion/ej2-interactive-chat"; - -// Initializes the AI AssistView control -let aiAssistView: AIAssistView = new AIAssistView({}); - -// Render initialized AI AssistView. -aiAssistView.appendTo('#defaultAssist'); - -{% endhighlight %} -{% endtabs %} - -## Run the application - -Run the application in the browser using the following command. +``` +npm install @syncfusion/ej2-fluent2-theme --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then add the following CSS reference to the `src/styles/styles.css` file: -npm start +```css +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/ai-assistview/index.css"; +``` -{% endhighlight %} -{% endtabs %} +## Adding AI AssistView control -The following example shows a basic AI AssistView control. +Add the AI AssistView control in **src/app/app.ts** file using the following code. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -149,9 +101,19 @@ The following example shows a basic AI AssistView control. {% include code-snippet/ai-assistview/gettingstarted/index.html %} {% endhighlight %} {% endtabs %} - + {% previewsample "page.domainurl/code-snippet/ai-assistview/gettingstarted" %} +## Run the application + +The `npm start` command compiles the TypeScript source files and starts the webpack development server. Run the following command: + +```bash +npm start +``` + +Open `http://localhost:8080` (or the port shown in the terminal) in a browser. You should see an AI AssistView rendered with the default layout. + > **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the control automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added. ## Configure suggestions and responses diff --git a/ej2-javascript/chart/js/es5-getting-started.md b/ej2-javascript/chart/js/es5-getting-started.md index e44afb173..43e98c875 100644 --- a/ej2-javascript/chart/js/es5-getting-started.md +++ b/ej2-javascript/chart/js/es5-getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: ES5 getting started with ##Platform_Name## Chart control | Syncfusion -description: Check out and learn about ES5 getting started with ##Platform_Name## Chart control of Syncfusion Essential JS 2 and more details. +description: Check out and learn about ES5 getting started with ##Platform_Name## Chart control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Chart publishingplatform: ##Platform_Name## @@ -13,23 +13,24 @@ domainurl: ##DomainURL## Build your first Syncfusion JavaScript (ES5) application with a simple Chart control in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Chart from the CDN, initializes it with sample data, and renders an interactive chart. -> **Ready to streamline your Syncfusion® JavaScript development?** Discover the full potential of Syncfusion® JavaScript controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/javascript/documentation/ai-coding-assistant/overview) +> The `33.2.3` version segment in the CDN URLs is shown for reference. Replace it with the latest published version from the [Syncfusion EJ2 CDN](https://cdn.syncfusion.com/ej2/) when you start a new project. ## Prerequisites * [Visual Studio Code](https://code.visualstudio.com) (or any text editor) -* A web browser to view the result +* A modern web browser (Chrome, Edge, Firefox, or Safari) +* An active internet connection to fetch the CDN scripts ## Quick Setup -### Step 1: Create Folder and HTML file +### Step 1: Create a folder and an HTML file -* Create a folder named `quickstart` in your desired directory -* Inside the `quickstart` folder, create a new file named `index.html` +* Create a folder named `quickstart` in your desired directory. +* Inside the `quickstart` folder, create a new file named `index.html`. -### Step 2: Add Syncfusion® CDN Resources +### Step 2: Add Syncfusion® CDN resources -Include the following JavaScript links in the `` section. +The Chart needs the EJ2 script bundles. Add the following to the `` of `index.html`: **Scripts (JavaScript):** ``` @@ -40,28 +41,33 @@ https://cdn.syncfusion.com/ej2/33.2.3/ej2-svg-base/dist/global/ej2-svg-base.min. https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js ``` -### Step 3: Add Syncfusion® Chart control to the application +Load the scripts in the order shown: `ej2-base` → `ej2-data` → `ej2-svg-base` → `ej2-charts`. `ej2-pdf-export` is only required if you use the PDF export feature; it is omitted from the example below. -Copy and paste the following complete code into your `index.html` file: +### Step 3: Add the Chart control to the application + +Replace the contents of `index.html` with the following complete code. This loads the required EJ2 scripts, defines the chart container, and renders a Column chart with category-axis data. ```html - + + + Syncfusion Chart - Quick Start - + - - +

    Syncfusion Chart

    + +
    - + ``` -### Step 4: Open in Browser +The series properties [`dataSource`](../api/chart/series#datasource), [`xName`](../api/chart/series#xname), and [`yName`](../api/chart/series#yname) bind the JSON fields to the chart. The [`primaryXAxis`](../api/chart/chartModel#primaryxaxis) is configured with [`valueType: 'Category'`](../api/chart/axisModel#valuetype) because the X-axis contains month labels; the default value type is `Numeric`. -Open the `quickstart/index.html` file in your web browser. You should see the Syncfusion Chart control displaying the sample data. +### Step 4: Open in browser + +Open the `quickstart/index.html` file in your web browser. You can either double-click the file or right-click in VS Code and choose **Open with Live Server** (requires the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension). The chart renders the sample data on the page. + +If the chart does not appear, open the browser's developer console to check for runtime errors. ## Output The following screenshot shows the output of the Syncfusion Chart quick start application: -![Syncfusion Chart Quick Start Output](../images/chart.png) +![Syncfusion Chart Quick Start Output - Column chart of monthly sales data](../images/chart.png "Syncfusion Chart displaying monthly sales data") + +## Troubleshooting + +* **Chart does not render** — Verify that the scripts load in the order `ej2-base` → `ej2-data` → `ej2-svg-base` → `ej2-charts`. Open the browser's developer console and check for `404` or `ReferenceError` messages. +* **`ej is not defined`** — One of the CDN script tags failed to load. Check your network connection and verify the CDN URLs are correct. +* **CORS or `file://` errors** — Some browsers block ES5 module loading from `file://`. Serve the file from a local HTTP server (for example, the VS Code **Live Server** extension). +* **Wrong chart type** — Confirm the `type` property in the series matches the expected chart (for example, `Line`, `Column`, `Area`, `Bar`). +* **Category axis not displaying labels** — Confirm `primaryXAxis.valueType` is set to `'Category'`. + +## See also + +* [Line Series](../chart-types/line.md) +* [Column Series](../chart-types/column.md) +* [Category Axis](../category-axis.md) +* [Chart Title and Subtitle](../title-subtitle.md) +* [Chart Legend](../legend.md) +* [Chart Tooltip](../tool-tip.md) +* [Working with Data](../working-with-data.md) + +> **Ready to streamline your Syncfusion® JavaScript development?** Discover the full potential of Syncfusion® JavaScript controls with Syncfusion® AI Coding Assistant. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/javascript/documentation/ai-coding-assistant/overview) diff --git a/ej2-javascript/chart/ts/getting-started.md b/ej2-javascript/chart/ts/getting-started.md index a603739d3..53fe4e52e 100644 --- a/ej2-javascript/chart/ts/getting-started.md +++ b/ej2-javascript/chart/ts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with ##Platform_Name## Chart control | Syncfusion -description: Check out and learn about Getting started with ##Platform_Name## Chart control of Syncfusion Essential JS 2 and more details. +description: Check out and learn about Getting started with ##Platform_Name## Chart control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Chart publishingplatform: ##Platform_Name## @@ -37,22 +37,20 @@ Below is the list of minimum dependencies required to use the Chart. |-- @syncfusion/ej2-compression |-- @syncfusion/ej2-svg-base ``` -Note: @syncfusion/ej2-pdf-export, @syncfusion/ej2-file-utils, and @syncfusion/ej2-compression are optional—required only for PDF export features. Omit if not using exports. +> Note: `@syncfusion/ej2-pdf-export`, `@syncfusion/ej2-file-utils`, and `@syncfusion/ej2-compression` are optional and required only for PDF export features. Omit them if you are not using exports. -## Quick Setup - -### Step 1: Create a Project Folder +> Use the latest `@syncfusion/ej2-*` packages that are compatible with Node.js v14.15.0 or higher. -Create a folder named `my-chart` in your desired location. This folder will contain your Syncfusion Chart TypeScript project. +## Quick Setup -### Step 2: Open Command Prompt +### Step 1: Open Command Prompt -Open the command prompt and navigate to your desired directory where you want to create the project. You can do this by: +Open the command prompt and navigate to the directory where you want to create the project. -* **For Windows**: Open Command Prompt (cmd) or PowerShell and use `cd` command to navigate to your desired directory -* **For macOS/Linux**: Open Terminal and use `cd` command to navigate to your desired directory +* **For Windows**: Open Command Prompt (cmd) or PowerShell and use the `cd` command to navigate to your desired directory. +* **For macOS/Linux**: Open Terminal and use the `cd` command to navigate to your desired directory. -### Step 3: Clone the Quickstart Repository +### Step 2: Clone the Quickstart Repository Run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). @@ -64,9 +62,11 @@ git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quick {% endhighlight %} {% endtabs %} -### Step 4: Navigate to Project Folder +This creates an `ej2-quickstart` folder in the current directory that contains the seed project. + +### Step 3: Navigate to Project Folder -After cloning the application in the `ej2-quickstart` folder, run the following command to navigate to the project directory. +Run the following command to navigate to the cloned project directory. {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -76,11 +76,14 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -### Step 5: Install Required Packages +### Step 4: Install Required Packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. Install either the umbrella package or the individual control package: -The quickstart application is already preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install all the dependent npm packages from the command prompt. +* Umbrella: [`@syncfusion/ej2`](https://www.npmjs.com/package/@syncfusion/ej2) — all Syncfusion controls in a single package. +* Individual: [`@syncfusion/ej2-charts`](https://www.npmjs.com/package/@syncfusion/ej2-charts) — the Chart and its required dependencies. + +The quickstart application is preconfigured with the `@syncfusion/ej2` dependency in the `~/package.json` file, including a `start` script that runs the webpack dev server. Use the following command to install all the npm packages from the command prompt. {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -90,15 +93,15 @@ npm install {% endhighlight %} {% endtabs %} -This command will download and install all necessary dependencies for your project. - -### Step 6: Update the HTML Template +This command downloads and installs all the dependencies required for the project. -> Note: Code snippets here use webpack for local development. For online demos or StackBlitz, SystemJS may be used—ignore loader/helper scripts in rendered previews. +### Step 5: Update the HTML Template Open the `ej2-quickstart` folder in Visual Studio Code or any text editor of your choice. -Locate the `~/src/index.html` file in the project. Add the HTML div tag with its `id` attribute as `element` to initialize the Chart container. +> Note: Code snippets here use webpack for local development. For online demos or StackBlitz, SystemJS may be used—ignore loader/helper scripts in rendered previews. + +Locate the `~/src/index.html` file in the project and add an HTML `
    ` with its `id` attribute set to `element` to initialize the Chart container. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -110,17 +113,14 @@ Locate the `~/src/index.html` file in the project. Add the HTML div tag with its Essential JS 2 Chart - + - .... - ....

    Syncfusion Chart

    - -
    -
    + +
    @@ -128,23 +128,24 @@ Locate the `~/src/index.html` file in the project. Add the HTML div tag with its {% endhighlight %} {% endtabs %} -### Step 7: Create the Chart Component with Data +The webpack dev server injects the compiled `app.js` bundle automatically, so no manual ` diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/js/index.html b/ej2-javascript/code-snippet/grid/excel-filter-cs6/js/index.html index caabe2e42..4ba0a7b87 100644 --- a/ej2-javascript/code-snippet/grid/excel-filter-cs6/js/index.html +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/js/index.html @@ -5,23 +5,23 @@ - - - - - - - - - - - - + + + + + + + + + + + + - + @@ -38,5 +38,5 @@ ele.style.visibility = "visible"; } - + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/systemjs.config.js b/ej2-javascript/code-snippet/grid/excel-filter-cs6/systemjs.config.js index 7fa0fa10b..e14da9dc6 100644 --- a/ej2-javascript/code-snippet/grid/excel-filter-cs6/systemjs.config.js +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/systemjs.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/24.2.3/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/34.1.29/" }, map: { main: "index.ts", diff --git a/ej2-javascript/code-snippet/grid/excel-filter-cs6/ts/index.html b/ej2-javascript/code-snippet/grid/excel-filter-cs6/ts/index.html index 3f976c45c..121d03f3f 100644 --- a/ej2-javascript/code-snippet/grid/excel-filter-cs6/ts/index.html +++ b/ej2-javascript/code-snippet/grid/excel-filter-cs6/ts/index.html @@ -7,18 +7,18 @@ - - - - - - - - - - - - + + + + + + + + + + + + @@ -27,6 +27,7 @@ +
    Loading....
    diff --git a/ej2-javascript/diagram/js/getting-started.md b/ej2-javascript/diagram/js/getting-started.md index db93c8a66..c32a9f9e4 100644 --- a/ej2-javascript/diagram/js/getting-started.md +++ b/ej2-javascript/diagram/js/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with ##Platform_Name## Diagram control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more details. +description: Checkout and learn about Getting started with ##Platform_Name## Diagram control of Syncfusion Essential® JS 2 and more details. platform: ej2-javascript control: Getting started publishingplatform: ##Platform_Name## @@ -19,6 +19,8 @@ This section explains how to create and render a simple Essential® JS 2 Diagram Follow these steps to set up your local environment. +> **Prerequisite:** If you plan to use the local-script setup with a local HTTP server (e.g., `npx http-server`), ensure [Node.js](https://nodejs.org/) is installed on your machine. + **Step 1:** Create a root folder named **my-diagram-app** for your application. **Step 2:** Create a **my-diagram-app/resources** folder to store local script and style files. @@ -34,25 +36,29 @@ The Essential® JS 2 Diagram control can be initialized using one of the followi ### Using local script and style -**Step 1:** Download [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) to obtain the global scripts and styles. +> The following steps continue from the **Setup for local environment** section above. Each resource-loading approach (local script vs. CDN) replaces steps 1–4 below. + +**Step 1:** Download [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) to obtain the global scripts and styles. Note that the Diagram control depends on the `ej2-base`, `ej2-popups`, and `ej2-navigations` packages; using the combined `ej2.min.js` bundle (as shown in the example below) includes these dependencies automatically. -**Step 2:** Identify the location of the script and style files from the build installation location. The syntax for the file paths are as follows: +**Step 2:** Identify the location of the script and style files from the build installation location. The syntax for the file paths is as follows: **Syntax:** > Script: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Web(Essential JS 2)/javascript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` > Styles: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Web(Essential JS 2)/javascript/{PACKAGE_NAME}/styles/tailwind3.css` +> For the Diagram control, use `ej2-diagrams` as the `{PACKAGE_NAME}`. The `{RELEASE_VERSION}` is the installed Essential Studio build version (e.g., `33.2.3`). + **Example:** > Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/33.2.3/Web(Essential JS 2)/javascript/ej2-diagrams/dist/global/ej2-diagrams.min.js` > Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/33.2.3/Web(Essential JS 2)/javascript/ej2-diagrams/styles/tailwind3.css` -**Step 3:** Copy the global script and style files into the **resources** folder. +**Step 3:** Copy the combined global script (`ej2.min.js`) and the theme style file (`tailwind3.css`) into the **resources** folder. These are the files referenced by the HTML example in the next step. **Step 4:** Add references to the scripts and styles into the **index.html** file to render the Syncfusion® Diagram. -The following example shows how to reference the script and style in an HTML file: +The following example shows how to reference the combined bundle (`ej2.min.js`) and combined style (`tailwind3.css`) in an HTML file. To use the package-specific `ej2-diagrams.min.js` instead, replace the script reference with the package-specific file described in the syntax above: -``` +```html @@ -73,6 +79,8 @@ The following example shows how to reference the script and style in an HTML fil ``` +> For the local-script setup, the combined `tailwind3.css` file includes styles for all Essential® JS 2 controls (base, popups, navigations, and diagrams). If you prefer package-specific CSS files, copy the individual `tailwind3.css` files from the `ej2-base`, `ej2-popups`, `ej2-navigations`, and `ej2-diagrams` packages into the **resources** folder and reference each one separately, as shown in the CDN example below. + ### Using CDN link for script and style Using CDN links, you can reference the scripts and styles directly in the **index.html**. @@ -82,25 +90,25 @@ Using CDN links, you can reference the scripts and styles directly in the **inde > Styles: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/styles/tailwind3.css` **Example:** -> Script: [`https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2-diagrams.min.js`](https://cdn.syncfusion.com/ej2/ej2-diagrams/dist/global/ej2-diagrams.min.js) -> Styles: [`https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css`](https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css) +> Script: [`https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js) +> Styles: `ej2-base`, `ej2-popups`, `ej2-navigations`, and `ej2-diagrams` `tailwind3.css` files (e.g., [`https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css`](https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/tailwind3.css)) The following example shows how to reference the scripts and styles in an HTML file using CDN links to render the Syncfusion® Diagram. -``` +```html - Essential JS 2 Diagram + Essential® JS 2 Diagram - + - + @@ -123,7 +131,7 @@ The following example creates a flowchart with four nodes: **Start**, **Process* Replace the entire contents of **my-diagram-app/index.js** with the following code: -``` +```javascript // Node defaults function function nodeDefaults(node) { node.width = 140; @@ -197,38 +205,15 @@ let diagram = new ej.diagrams.Diagram({ // Render initialized Diagram diagram.appendTo('#diagram'); ``` -Replace the entire contents of **my-diagram-app/index.html** with the following code (using CDN references; for the local-script setup, replace the CDN URLs with your local **resources/** paths): -``` - - - - - Essential JS 2 Diagram - - - - - - - - - - - - - -
    - - - - -``` +Use the **index.html** from the [Using CDN link for script and style](#using-cdn-link-for-script-and-style) example above. For the local-script setup, replace the CDN URLs with your local **resources/** paths. ## Run the application -Now, run the **index.html** in a web browser. It will render the Essential® JS 2 Diagram control. +Now, open **index.html** in a web browser. It will render the Essential® JS 2 Diagram control. ![Rendered flowchart with four nodes connected vertically by arrows](images/Getting-started.png) -N> For the local-script setup, serve the application via a local HTTP server (e.g., **npx http-server** or the Code Studio Live Server extension) instead of opening the HTML file directly with the **file:/** protocol, to avoid browser security restrictions. \ No newline at end of file +N> For the local-script setup, serve the application via a local HTTP server (e.g., **npx http-server** or the Code Studio Live Server extension) instead of opening the HTML file directly with the **file:/** protocol, to avoid browser security restrictions. + +N> If the diagram does not render, open the browser developer tools (F12) and check the **Console** for errors. Common causes include incorrect script/style file paths, missing dependencies, or a blocked CDN request. \ No newline at end of file diff --git a/ej2-javascript/diagram/ts/getting-started.md b/ej2-javascript/diagram/ts/getting-started.md index 8d65d3e83..a8cbbf50a 100644 --- a/ej2-javascript/diagram/ts/getting-started.md +++ b/ej2-javascript/diagram/ts/getting-started.md @@ -20,7 +20,7 @@ This section explains the steps required to create a simple diagram and demonstr Ensure the following tools are installed on your machine: * [Git](https://git-scm.com/downloads) -* [Node.js](https://nodejs.org/en) +* [Node.js](https://nodejs.org/en) (latest LTS version recommended) * [Visual Studio Code](https://code.visualstudio.com) ## Set up the development environment @@ -39,16 +39,25 @@ cd ej2-quickstart ## Install Syncfusion TypeScript packages -Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the **package.json** file. +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the **package.json** file. To render the Diagram control, you also need the [@syncfusion/ej2-diagrams](https://www.npmjs.com/package/@syncfusion/ej2-diagrams) package. + Use the following command to install the dependent npm packages from the command prompt. ``` npm install ``` +To render the Diagram control, install the `@syncfusion/ej2-diagrams` package using the following command: + +``` +npm install @syncfusion/ej2-diagrams +``` + +> Install the latest version of `@syncfusion/ej2-diagrams` to ensure compatibility with the sample code in this guide. + ## Import Syncfusion® CSS styles -The Diagram control needs Syncfusion® theme styles to display correctly. Syncfusion® theme packages include ready-to-use styles for supported control. +The Diagram control needs Syncfusion® theme styles to display correctly. Syncfusion® theme packages include ready-to-use styles for supported controls. To add the styles, install the Tailwind theme package using the following command: @@ -62,13 +71,15 @@ Then add the following CSS reference to the **src/styles/styles.css** file: @import "../../node_modules/@syncfusion/ej2-tailwind-theme/styles/diagram/index.css"; ``` +> The theme package includes the required base component styles for the Diagram control, so no separate base style import is needed. + For the list of available themes, refer to the [Themes](https://ej2.syncfusion.com/documentation/appearance/theme) documentation. N> Syncfusion® provides multiple built-in themes. If the application uses a different theme, replace **@syncfusion/ej2-tailwind-theme/styles/diagram/index.css** with the corresponding stylesheet from the desired theme package. For example, to use the Material 3 theme, import **@syncfusion/ej2-material3-theme/styles/diagram/index.css**. ## Add the HTML element -Open the **~/src/index.html** file and add the following HTML element for the Diagram component. +Open the **src/index.html** file and replace its contents with the following HTML for the Diagram component. ``` @@ -206,7 +217,9 @@ In this example: * [`annotations`](https://ej2.syncfusion.com/documentation/api/diagram/annotationmodel) adds text inside each node using the [`content`](https://ej2.syncfusion.com/documentation/api/diagram/annotationmodel#content) property. * [`sourceID`](https://ej2.syncfusion.com/documentation/api/diagram/connectormodel#sourceid) and [`targetID`](https://ej2.syncfusion.com/documentation/api/diagram/connectormodel#targetid) connect one node to another. * [`getNodeDefaults`](https://ej2.syncfusion.com/documentation/api/diagram/index-default#getnodedefaults) applies common width, height, fill color, and stroke color to all nodes. -* [`getConnectorDefaults`](https://ej2.syncfusion.com/documentation/api/diagram/index-default#getconnectordefaults) applies common connector settings, such as orthogonal routing and target arrows. +* [`getConnectorDefaults`](https://ej2.syncfusion.com/documentation/api/diagram/index-default#getconnectordefaults) applies common connector settings to all connectors, such as setting the routing `type` to `Orthogonal` and adding a target arrow decorator. + +> Ensure the `src/app/app.ts` file is imported by the application entry point (e.g., `src/index.ts`) so that the Diagram control is initialized when the app loads. ## Run the application @@ -221,3 +234,5 @@ Then open the local URL shown in the terminal, such as `http://localhost:4000`. The output will appear as follows: ![Rendered flowchart with four nodes connected vertically by arrows](images/Getting-started.png) + +N> If `npm start` fails, ensure all dependencies are installed by running `npm install` again. If the default port (e.g., `4000`) is already in use, stop the other process or change the port in the webpack configuration. diff --git a/ej2-javascript/file-manager/js/es5-getting-started.md b/ej2-javascript/file-manager/js/es5-getting-started.md index ad470b6c3..b7ce4253d 100644 --- a/ej2-javascript/file-manager/js/es5-getting-started.md +++ b/ej2-javascript/file-manager/js/es5-getting-started.md @@ -9,13 +9,22 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## File Manager control +# Getting started with ##Platform_Name## File Manager control This section explains the steps required to create a simple Essential® JS 2 File Manager and demonstrate the basic usage of the File Manager control in a JavaScript application. +Before getting started, ensure the following requirements are met: + +| Requirement | Notes | +|-------------|-------| +| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | +| Code editor | Visual Studio Code is recommended | +| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | +| Syncfusion® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | + ## Dependencies -A list of dependencies to use the file manager with all features. +The following list shows the dependencies required to use the File Manager with all its features. ```javascript |-- @syncfusion/ej2-filemanager @@ -33,13 +42,19 @@ A list of dependencies to use the file manager with all features. ## Setup for local environment -Refer to the following steps to set up your local environment. +Follow these steps to set up your local environment. **Step 1:** Create a root folder named **my-app** for your application. -**Step 2:** Create a **my-app/resources** folder to store local scripts and styles files. +**Step 2:** Open Visual Studio Code and create two files inside the **my-app** folder: +- **index.html** — the main HTML file that loads the CDN resources and provides the File Manager container element. +- **index.js** — the JavaScript file where the File Manager control is initialized. + +**Step 3:** In **index.html**, add a ` +``` ## Adding Syncfusion® resources @@ -73,7 +88,7 @@ To use local scripts and styles for File Manager, you can follow these steps: Here's an example of referencing the file manager's scripts and styles in an HTML file: -**a.Essential® Dependency (Minimal Setup)** +**a. Essential® Dependency (Minimal Setup)** This setup includes only the necessary scripts and styles required to render the File Manager. Use this setup for a lightweight application that requires basic file manager functionality. @@ -105,8 +120,8 @@ This setup includes only the necessary scripts and styles required to render the ``` -**b.Extended Dependency (Additional Controls)** -This setup includes additional dependencies required for more advanced functionalities of the file manager, such as buttons, dropdowns, navigations, and other controls. Use this setup when you need to integrate additional features like filtering, sorting, context menu and more. +**b. Extended Dependency (Additional Controls)** +This setup includes additional dependencies required for more advanced functionalities of the file manager, such as buttons, dropdowns, navigations, and other controls. Use this setup when you need to integrate additional features like filtering, sorting, context menu, and more. ```html @@ -155,7 +170,7 @@ This setup includes additional dependencies required for more advanced functiona ``` **c. Comprehensive Dependency (All Controls)** -This setup includes all possible dependencies for Syncfusion® controls in a single comprehensive file, ensuring maximum compatibility and functionality. Use this setup for a complex application that utilizes a wide range of Syncfusion® controls. +This setup includes all the dependencies for Syncfusion® controls in a single comprehensive file, ensuring maximum compatibility and functionality. Use this setup for a complex application that utilizes a wide range of Syncfusion® controls. ```html @@ -177,9 +192,9 @@ This setup includes all possible dependencies for Syncfusion® Dependency (Minimal Setup)** +**a. Essential® Dependency (Minimal Setup)** This setup includes only the necessary scripts and styles required to render the File Manager. Use this setup for a lightweight application that requires basic file manager functionality. @@ -222,9 +237,9 @@ This setup includes only the necessary scripts and styles required to render the ``` -**b.Extended Dependency (Additional Controls)** +**b. Extended Dependency (Additional Controls)** -This setup includes additional dependencies required for more advanced functionalities of the file manager, such as buttons, dropdowns, navigations and other controls. Use this setup when you need to integrate additional features like filtering, sorting, context menu and more. +This setup includes additional dependencies required for more advanced functionalities of the file manager, such as buttons, dropdowns, navigations, and other controls. Use this setup when you need to integrate additional features like filtering, sorting, context menu, and more. ```html @@ -282,7 +297,7 @@ This setup includes additional dependencies required for more advanced functiona **c. Comprehensive Dependency (All Controls)** -This setup includes all possible dependencies for Syncfusion® controls in a single comprehensive file, ensuring maximum compatibility and functionality. Use this setup for a complex application that utilizes a wide range of Syncfusion® controls. +This setup includes all the dependencies for Syncfusion® controls in a single comprehensive file, ensuring maximum compatibility and functionality. Use this setup for a complex application that utilizes a wide range of Syncfusion® controls. ```html @@ -346,7 +361,28 @@ filemanagerInstance.appendTo('#filemanager'); {% endtabs %} ->Note: The [`ajaxSettings`](../api/file-manager#ajaxsettings) must be defined when initializing the File Manager. The File Manager uses the URLs specified in `ajaxSettings` to send file operation requests to the server. The File Manager service link is provided in `hostUrl`. +### Server-side setup + +The sample uses `https://physical-service.syncfusion.com` as the `url` endpoint in `ajaxSettings`. + +To use your own files, host a File Manager service and replace the `url` value with your service endpoint. See the [File System Provider](../file-system-provider) documentation for setup details. + +>Note: The [`ajaxSettings`](../api/file-manager#ajaxsettings) property must be defined while initializing the File Manager. File Manager utilizes the URLs mentioned in `ajaxSettings` to send file operation requests to the server. The File Manager service link is provided in the `hostUrl` variable. + +## Registering a license key + +Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. + +**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). + +**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. + +```javascript +// Register Syncfusion license key +ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). ## Run the application @@ -364,6 +400,19 @@ Output will be displayed as follows. N> Looking for the full JavaScript File Manager component overview, features, pricing, and documentation? Visit the [JavaScript File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager) page +## Troubleshooting + +**File Manager renders blank / no files appear** +- Verify that the `ajaxSettings` `url` property is set and points to a valid, running File Manager service endpoint. +- Open the browser developer console (F12) and check for JavaScript errors. + +**License validation warning in the console** +- Register your license key before instantiating any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. + +**CDN resources fail to load** +- Check your internet connection. +- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. + ## See also * [Ajax Settings Configuration (uploadUrl, downloadUrl, getImageUrl)](../file-operations.md#ajax-settings-configuration) diff --git a/ej2-javascript/file-manager/ts/getting-started.md b/ej2-javascript/file-manager/ts/getting-started.md index 0f7d71206..78d5ab947 100644 --- a/ej2-javascript/file-manager/ts/getting-started.md +++ b/ej2-javascript/file-manager/ts/getting-started.md @@ -9,17 +9,48 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## File Manager control +# Getting started with ##Platform_Name## File Manager control This section explains how to create a simple File Manager and demonstrates the basic usage of the [File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager) control. ## Prerequisites -This guide uses Vite as the bundler and development environment. Install Node.js 24.13.0 or higher before proceeding. For detailed information about Vite's capabilities and configuration options, refer to the [Vite documentation](https://vitejs.dev/). +Before getting started, ensure the following tools are installed on your machine: -## Create a TypeScript application. +| Tool | Version / Notes | +|------|----------------| +| Node.js | v14.15.0 or higher | +| npm | Bundled with Node.js | +| Git | Required to clone the quickstart repository | +| Visual Studio Code | Recommended code editor | -To set-up a Typescript application in TypeScript environment, run the following command. +You can verify your Node.js and npm versions by running: + +``` +node -v +npm -v +``` + +## Registering the license key + +Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. + +**Steps to register the license key:** + +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: + +```ts +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. + +## Create a TypeScript application + +To set up a TypeScript application, run the following command. ```bash npm create vite@latest my-app -- --template vanilla-ts @@ -36,25 +67,35 @@ cd my-app ## Adding File Manager package -All the available Essential® JS 2 packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install [File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager), use the following command. +All the available Essential® JS 2 packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install the File Manager package, use the following command. -``` -npm i @syncfusion/ej2-filemanager +```bash +npm install @syncfusion/ej2-filemanager ``` ## Adding CSS reference -To install the [Tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: +Themes for Syncfusion® File Manager components can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation. -```bash -npm i @syncfusion/ej2-tailwind3-theme -``` - -In this package, the File Manager control includes an `index.css` file that automatically loads all the required dependency styles. Add the following import to the `~/src/styles.css` file. - -```css +Install the **Tailwind 3** theme package using the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme --save + +{% endhighlight %} +{% endtabs %} + +Then add the following CSS reference to the **~src/style.css** file: + +{% tabs %} +{% highlight css tabtitle="style.css" %} + @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css"; -``` + +{% endhighlight %} +{% endtabs %} ## Adding File Manager control @@ -103,7 +144,13 @@ filemanagerInstance.appendTo('#filemanager'); {% endhighlight %} {% endtabs %} ->Note: The [`ajaxSettings`](../api/file-manager#ajaxsettings) must be defined when initializing the File Manager. The File Manager uses the URLs specified in `ajaxSettings` to send file operation requests to the server. The File Manager service link is provided in `hostUrl`. +### Server-side setup + +The sample uses `https://physical-service.syncfusion.com` as the `url` endpoint in `ajaxSettings`. + +To use your own files, host a File Manager service and replace the `url` value with your service endpoint. See the [File System Provider](../file-system-provider) documentation for setup details. + +>Note: The [`ajaxSettings`](../api/file-manager#ajaxsettings) property must be defined while initializing the File Manager. File Manager utilizes the URLs mentioned in `ajaxSettings` to send file operation requests to the server. The File Manager service link is provided in the `hostUrl` variable. ## Run the application diff --git a/ej2-javascript/gantt/js/es5-getting-started.md b/ej2-javascript/gantt/js/es5-getting-started.md index 1ee67ddc7..5e640ba94 100644 --- a/ej2-javascript/gantt/js/es5-getting-started.md +++ b/ej2-javascript/gantt/js/es5-getting-started.md @@ -9,11 +9,12 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Gantt Chart control -The [JavaScript Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart) is a UI component used to visualize and manage project schedules using a timeline view. It supports hierarchical task data, scheduling, and rich interactive features. +# Getting Started in JavaScript Gantt Chart Control -This section explains the steps required to create a simple Essential® JS 2 Gantt Chart and demonstrate the basic usage of the Gantt Chart control in a JavaScript application. +The [JavaScript Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart) is a UI control used to visualize and manage project schedules using a timeline view. It supports hierarchical task data, scheduling, and rich interactive features. + +This section explains the steps required to create a simple Essential® JS 2 Gantt Chart and demonstrates the basic usage of the Gantt Chart control in a JavaScript application. ## Prerequisites @@ -24,13 +25,15 @@ To get started, ensure the following software is installed on the machine. * [Visual Studio Code](https://code.visualstudio.com) > Check out the [download and installation](https://ej2.syncfusion.com/javascript/documentation/installation-and-upgrade/download) section of **Essential Studio® JavaScript**. If you are using Syncfusion® CDN resources to build your web application, you can skip the Essential Studio® JavaScript prerequisite. +> A valid Syncfusion® license is required for commercial use. Register or sign in to obtain a license key from your [Syncfusion account](https://www.syncfusion.com/account). + ## Setup local environment -Refer to the following steps to set up local environment. +Refer to the following steps to set up the local environment. **Step 1:** Create a root folder named **my-app** for the application. -**Step 2:** Create a **my-app/resources** folder to store local scripts and styles files. +**Step 2:** Create **my-app/resources/scripts** and **my-app/resources/styles** folders to store local scripts and styles. **Step 3:** Open Visual Studio Code and create `my-app/index.js` and `my-app/index.html` files to initialize the Essential® JS 2 Gantt Chart control. @@ -44,17 +47,17 @@ The Essential® JS 2 Gantt Chart control can ### Using local scripts and styles -To use local scripts and styles for Syncfusion® Gantt component. +To use local scripts and styles for the Syncfusion® Gantt Chart control: Follow the steps below to set up the required resources: **1. Download Essential® Studio® JavaScript (Essential® JS 2):** Obtain the global scripts and styles from the official website: [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) **2. Copy Files to Resources Folder:** After installing the Essential® JS 2 product build, the required scripts and styles will be available in the installed directory. -Navigate to the installed location and copy the required Gantt scripts, dependent scripts, and styles into your project structure +Navigate to the installed location and copy the required Gantt Chart scripts, dependent scripts, and styles into your project structure. -- **Scripts:** Copy into the `resources/scripts` folder -- **Styles:** Copy into the `resources/styles` folder +- **Scripts:** Copy into the `my-app/resources/scripts` folder. +- **Styles:** Copy into the `my-app/resources/styles` folder. **3. Locate Script and Style Files:** Identify the location of the Gantt Chart's script and style files. Use the following path format to find the required files: @@ -72,7 +75,7 @@ Use the following path format to find the required files: **4. Reference Scripts and Styles:** After copying the files, include the required scripts and styles in the `index.html` file. -Here is a sample configuration for referencing the Gantt scripts and styles in an HTML file: +Here is a sample configuration for referencing the Gantt Chart scripts and styles in an HTML file: ```html @@ -111,16 +114,16 @@ Here is a sample configuration for referencing the Gantt scripts and styles in a + - - +
    @@ -129,7 +132,7 @@ Here is a sample configuration for referencing the Gantt scripts and styles in a ### Using CDN link for scripts and styles -Using CDN links to include the Syncfusion® Gantt component's scripts and styles directly in the `index.html` file. +Using CDN links to include the Syncfusion® Gantt Chart control's scripts and styles directly in the `index.html` file. Use the following CDN link format to refer in the `index.html` files: @@ -137,14 +140,14 @@ Use the following CDN link format to refer in the `index.html` files: > * Script: `http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` **Style CDN link:** -> * Styles: `http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css` +> * Styles: `http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css` **Example CDN link:** -> * Script: [https://cdn.syncfusion.com/ej2/ej2-gantt/dist/global/ej2-gantt.min.js](http://cdn.syncfusion.com/ej2/ej2-gantt/dist/global/ej2-gantt.min.js) -> * Styles: [https://cdn.syncfusion.com/ej2/ej2-gantt/styles/material.css](http://cdn.syncfusion.com/ej2/ej2-gantt/styles/material.css) +> * Script: [https://cdn.syncfusion.com/ej2/ej2-gantt/dist/global/ej2-gantt.min.js](https://cdn.syncfusion.com/ej2/ej2-gantt/dist/global/ej2-gantt.min.js) +> * Styles: [https://cdn.syncfusion.com/ej2/ej2-gantt/styles/tailwind3.css](https://cdn.syncfusion.com/ej2/ej2-gantt/styles/tailwind3.css) -The following example shows how to reference the Gantt scripts and styles in an HTML file using CDN links: +The following example shows how to reference the Gantt Chart scripts and styles in an HTML file using CDN links: ```html @@ -152,47 +155,47 @@ The following example shows how to reference the Gantt scripts and styles in an Essential JS 2 Gantt - - - - - - - - - - - - - + + + + + + + + + + + + + - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - - - + + + + - + - +
    @@ -213,10 +216,10 @@ Use the following links: ## Create sample task data -Define a simple task list with hierarchical relationships. Each task must have a `StartDate` and either a `Duration` or `EndDate` to render properly. +Define a simple task list with hierarchical relationships. Each task must have a `StartDate` and either a `Duration` or `EndDate` to render properly. If both are provided, `EndDate` takes precedence. ```javascript -data = [ +var ganttData = [ {TaskID: 1, TaskName: 'Project initiation', StartDate: new Date('2024-04-01'), EndDate: new Date('2024-04-15')}, {TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('2024-04-01'), Duration: 4, ParentID: 1}, {TaskID: 3, TaskName: 'Perform site survey', StartDate: new Date('2024-04-01'), Duration: 4, ParentID: 1}, @@ -229,14 +232,15 @@ data = [ ## Configure task fields mapping -Map the data fields to Gantt Chart properties using [taskFields](https://ej2.syncfusion.com/javascript/documentation/api/gantt#taskfields): +Map the data fields to Gantt Chart properties using the [taskFields](https://ej2.syncfusion.com/javascript/documentation/api/gantt#taskfields) property: ```javascript -taskSettings = { +var taskFields = { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', + endDate: 'EndDate', parentID: 'ParentID' }; ``` @@ -248,16 +252,21 @@ taskSettings = { | `id` | Unique task identifier | Yes | | `name` | Task display name | Yes | | `startDate` | Task start date | Yes | -| `duration` | Task duration in days | Yes | +| `duration` | Task duration in days (numeric, optional decimal) | No (use `endDate` instead) | +| `endDate` | Task end date | No (use `duration` instead) | | `parentID` | Parent task ID for hierarchy | No | +| `progress` | Task completion percentage | No | +| `dependency` | Predecessor relationships (e.g., `2FS+1d`) | No | +| `hasChildMapping` | Indicates whether a row has child rows (load-on-demand) | No | +| `resourceInfo` | Field name that holds resource data | No | -## Render the Gantt component +## Render the Gantt Chart control -Add a container element in the `index.html` file to render the Gantt component. Then, reference the `index.js` file in the `index.html` file. +Add a container element in the `index.html` file to render the Gantt Chart control. Then, reference the `index.js` file in the `index.html` file. -In this documentation, the **ej2.min.js** script and **tailwind3.css** theme file are used, which include all Essential® JS 2 components and their dependent scripts and styles. +In this documentation, the **ej2.min.js** script and **tailwind3.css** theme file are used, which include all Essential® JS 2 controls and their dependent scripts and styles. -Add the following HTML element to the `index.html` file. This element acts as the container for rendering the Gantt Chart component. +Add the following HTML element to the `index.html` file. This element acts as the container for rendering the Gantt Chart control. ```html @@ -270,14 +279,14 @@ Add the following HTML element to the `index.html` file. This element acts as th - +
    ``` -Place the following code in the `index.js` file to create and configure the Gantt Chart component. +Place the following code in the `index.js` file to create and configure the Gantt Chart control. The `appendTo` method renders the Gantt Chart control into the target DOM element. ```javascript @@ -300,12 +309,11 @@ var ganttChart = new ej.gantt.Gantt({ } }); ganttChart.appendTo('#Gantt'); - ``` ## Run the application -Run the `index.html` file in a web browser to view the Essential® JS 2 Gantt component. +Run the `index.html` file in a web browser to view the Essential® JS 2 Gantt Chart control. ## Output @@ -332,24 +340,24 @@ You can preview the following sample by clicking the **Preview Sample** button. ## Deploy the application -The Essential® JS 2 Gantt control features are segregated into individual feature-wise modules. The [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build and `CDN` scripts contains code for all features used in Gantt and hence you should avoid to use them in production. You are strongly recommend to generate script files to use in production using the Syncfusion® **Custom Resource Generator**[(CRG)](https://crg.syncfusion.com) for Essential® JS 2. CRG will allow you generate the bundled script for the currently enabled features in Gantt. +The Essential® JS 2 Gantt Chart control features are segregated into individual feature-wise modules. The [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build and `CDN` scripts contain code for all features used in Gantt Chart, so you should avoid using them in production. You are strongly recommended to generate script files for production using the Syncfusion® **Custom Resource Generator ([CRG](https://crg.syncfusion.com))** for Essential® JS 2. CRG allows you to generate the bundled script for the currently enabled features in Gantt Chart. See the [CRG getting started guide](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator) for step-by-step instructions. ## Error handling -Error handling is used to identify errors, display them and develop recovery strategies to handle errors from gantt. In Gantt, error handling is done by using the [actionFailure](https://ej2.syncfusion.com/javascript/documentation/api/gantt#actionfailure) event. Some of the scenarios that this event handles are: -* Invalid duration : The [duration](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#duration) field accepts only numerical values with an optional decimal point. Entering non-numerical values triggers the `actionFailure` event and displays issue information in the event argument. -* Invalid dependency: The [dependency](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#dependency) field accepts only a number followed by a predecessor type (FS, FF, SS, SF). Entering invalid values, such as special characters or incorrect predecessor types, triggers the `actionFailure` event and displays issue information in the event argument. -* Invalid offset : The [offset](https://ej2.syncfusion.com/javascript/documentation/api/gantt/iPredecessor#offset) accepts only numerical values or their word equivalents followed by a unit. Entering invalid values, such as special characters triggers `actionFailure` event and displays issue information in the event argument. -* Failure to map task fields : The data source fields necessary for rendering tasks should be mapped to the Gantt control using the [taskFields](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields) property. Failure to map `taskFields` in the sample triggers `actionFailure` event and displays issue information in the event argument. -* Failure to map resource fields : To assign resources to a task, resource fields should be mapped to the Gantt control using the [resourceFields](https://ej2.syncfusion.com/javascript/documentation/api/gantt/resourceFields). Failure to map `resourceFields` in the sample triggers `actionFailure` event and displays issue information in the event argument. -* Failure to map `isPrimaryKey` : [isPrimaryKey](https://ej2.syncfusion.com/javascript/documentation/api/gantt/column#isprimarykey) field is crucial for CRUD operations. Failure to map [id](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#id) column in gantt column collection or [isPrimaryKey](https://ej2.syncfusion.com/javascript/documentation/api/gantt/column#isprimarykey) field in one of the columns will trigger `actionFailure` event and display issue information in the event argument. -* Invalid date format : [format](https://ej2.syncfusion.com/javascript/documentation/api/gantt/iTimelineFormatter) property under `topTier` and `bottomTier` determines how the timelines are displayed in the top tier and bottom tier of the Gantt chart timeline. If the `format` does not contain a valid standard [date format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), it triggers the `actionFailure` event, displaying issue information in the event argument. -* Failure to map `hasChildMapping` : [hasChildMapping](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#haschildmapping) property should configured for [load-on-demand](https://ej2.syncfusion.com/javascript/documentation/gantt/data-binding#load-child-on-demand). Ensure it properly configured in the [taskFields](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields). Failure to map `hasChildMapping` in the `load-on-demand` sample triggers `actionFailure` event and displays issue information in the event argument. -* Invalid day in event markers : [day](https://ej2.syncfusion.com/javascript/documentation/api/gantt/eventMarker#day) should configured in [eventMarkers](https://ej2.syncfusion.com/javascript/documentation/api/gantt/eventMarker) to render striplines in a particular day. Failure to configure the `day` in `eventMarkers` triggers `actionFailure` event and displays issue information in the event argument. +Error handling identifies, displays, and helps recover from errors raised by the Gantt Chart control. In Gantt Chart, error handling is performed by using the [actionFailure](https://ej2.syncfusion.com/javascript/documentation/api/gantt#actionfailure) event. The following scenarios are handled by this event: +* **Invalid duration:** The [duration](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#duration) field accepts only numerical values with an optional decimal point. Entering non-numerical values triggers the `actionFailure` event and displays error information in the event argument. +* **Invalid dependency:** The [dependency](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#dependency) field accepts only a number followed by a predecessor type (FS, FF, SS, SF). Entering invalid values, such as special characters or incorrect predecessor types, triggers the `actionFailure` event and displays error information in the event argument. +* **Invalid offset:** The [offset](https://ej2.syncfusion.com/javascript/documentation/api/gantt/iPredecessor#offset) accepts only numerical values or their word equivalents followed by a unit. Entering invalid values, such as special characters, triggers the `actionFailure` event and displays error information in the event argument. +* **Failure to map task fields:** The data source fields necessary for rendering tasks should be mapped to the Gantt Chart control using the [taskFields](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields) property. Failure to map `taskFields` in the sample triggers the `actionFailure` event and displays error information in the event argument. +* **Failure to map resource fields:** To assign resources to a task, resource fields should be mapped to the Gantt Chart control using the [resourceFields](https://ej2.syncfusion.com/javascript/documentation/api/gantt/resourceFields) property. Failure to map `resourceFields` in the sample triggers the `actionFailure` event and displays error information in the event argument. +* **Failure to map `isPrimaryKey`:** The [isPrimaryKey](https://ej2.syncfusion.com/javascript/documentation/api/gantt/column#isprimarykey) field is crucial for CRUD operations. Failure to map the [id](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#id) column in the Gantt Chart column collection, or to set `isPrimaryKey` on one of the columns, triggers the `actionFailure` event and displays error information in the event argument. +* **Invalid date format:** The [format](https://ej2.syncfusion.com/javascript/documentation/api/gantt/iTimelineFormatter) property under `topTier` and `bottomTier` determines how the timelines are displayed in the top tier and bottom tier of the Gantt chart. If the `format` does not contain a valid standard [date format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), it triggers the `actionFailure` event and displays error information in the event argument. +* **Failure to map `hasChildMapping`:** The [hasChildMapping](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields#haschildmapping) property should be configured for [load-on-demand](https://ej2.syncfusion.com/javascript/documentation/gantt/data-binding#load-child-on-demand). Ensure it is properly configured in [taskFields](https://ej2.syncfusion.com/javascript/documentation/api/gantt/taskFields). Failure to map `hasChildMapping` in the `load-on-demand` sample triggers the `actionFailure` event and displays error information in the event argument. +* **Invalid day in event markers:** The [day](https://ej2.syncfusion.com/javascript/documentation/api/gantt/eventMarker#day) should be configured in [eventMarkers](https://ej2.syncfusion.com/javascript/documentation/api/gantt/eventMarker) to render striplines on a particular day. Failure to configure the `day` in `eventMarkers` triggers the `actionFailure` event and displays error information in the event argument. ->Additionally, TreeGrid side error handling information is also displayed from the Gantt `actionFailure` event. For more details on TreeGrid side error handling, refer [here](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started#handling-errors). +> Additionally, TreeGrid-side error handling information is also displayed from the Gantt `actionFailure` event. For more details on TreeGrid-side error handling, refer [here](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started#handling-errors). -The following code example shows how to use the [actionFailure](https://ej2.syncfusion.com/javascript/documentation/api/gantt#actionfailure) event in the Gantt control to display an exception when `isPrimaryKey` is not configured properly in the Gantt Chart column. +The following code example shows how to use the [actionFailure](https://ej2.syncfusion.com/javascript/documentation/api/gantt#actionfailure) event in the Gantt Chart control to display an exception when `isPrimaryKey` is not configured properly in the Gantt Chart column. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -362,6 +370,6 @@ The following code example shows how to use the [actionFailure](https://ej2.sync {% previewsample "page.domainurl/code-snippet/gantt/exception-handling-cs1" %} -The following screenshot represents the Gantt Exception handling in `actionFailure` event. +The following screenshot represents the Gantt Chart Exception handling in `actionFailure` event. ![Error Handling](./images/error-handling.png) \ No newline at end of file diff --git a/ej2-javascript/gantt/ts/getting-started.md b/ej2-javascript/gantt/ts/getting-started.md index ea4a30ba7..abff7b6ac 100644 --- a/ej2-javascript/gantt/ts/getting-started.md +++ b/ej2-javascript/gantt/ts/getting-started.md @@ -9,17 +9,31 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started in ##Platform_Name## Gantt Chart Control +# Getting Started in TypeScript Gantt Chart Control The [JavaScript Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart) is a UI component used to visualize and manage project schedules using a timeline view. It supports hierarchical task data, scheduling, and rich interactive features. -This section explains the steps to create a simple Gantt and demonstrates the basic usage of the gantt component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. +This section explains the steps to create a simple Gantt Chart and demonstrates the basic usage of the gantt component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node **v14.15.0** or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). +## Prerequisites + +Ensure you have the following installed on your system before proceeding: +- **Node.js** v14.15.0 or higher +- **npm** (included with Node.js) +- **Git** for cloning the repository + +You can verify your installations by running: +```bash +node --version +npm --version +git --version +``` + ## Setup development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -41,9 +55,9 @@ cd ej2-quickstart-webpack ## Add Syncfusion® JavaScript packages -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control, such as [@syncfusion/ej2-gantt](https://www.npmjs.com/package/@syncfusion/ej2-gantt) for just the Gantt Chart. -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package (version 21.x or higher) in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -67,20 +81,16 @@ The quickstart application is preconfigured to use the **Tailwind3** theme in th {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes (material, bootstrap, fabric, etc.) and CSS reference for individual controls. To use a different theme, replace `tailwind3.css` with the desired theme name (e.g., `material.css`, `bootstrap5.css`). -### How styles are applied - -The imported CSS is added to the global stylesheet (`~/src/styles/styles.css`) and styles automatically applied to all components during application runtime. - -No additional configuration is required in the TypeScript (`.ts`) file. +The imported CSS is added to the global stylesheet and styles are automatically applied to all Syncfusion components during application runtime. No additional configuration is required in the TypeScript (`.ts`) file. ## Create sample task data -Define a simple task list with hierarchical relationships. Each task must have a `StartDate` and either a `Duration` or `EndDate` to render properly. +Define a simple task list with hierarchical relationships. The data includes two parent tasks (TaskID 1 and 5) with child tasks linked via `ParentID`. Each task must have a `StartDate` and either a `Duration` (in days) or `EndDate` to render properly. ```typescript -data = [ +let data: Object[] = [ {TaskID: 1, TaskName: 'Project initiation', StartDate: new Date('2024-04-01'), EndDate: new Date('2024-04-15')}, {TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('2024-04-01'), Duration: 4, ParentID: 1}, {TaskID: 3, TaskName: 'Perform site survey', StartDate: new Date('2024-04-01'), Duration: 4, ParentID: 1}, @@ -96,7 +106,7 @@ data = [ Map the data fields to Gantt Chart properties using [taskFields](https://ej2.syncfusion.com/documentation/api/gantt#taskfields): ```typescript -taskSettings = { +let taskSettings = { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', @@ -112,14 +122,15 @@ taskSettings = { | `id` | Unique task identifier | Yes | | `name` | Task display name | Yes | | `startDate` | Task start date | Yes | -| `duration` | Task duration in days | Yes | +| `duration` | Task duration in days | Either Duration or EndDate | +| `endDate` | Task end date | Either Duration or EndDate | | `parentID` | Parent task ID for hierarchy | No | -## Render the Gantt component +## Render the Gantt Chart control Put everything together by adding the following code in the **app.ts** and **index.html** file -Place the following code in the `app.ts` file to create and configure the Gantt Chart component. +Place the following code in the `app.ts` file to create and configure the Gantt Chart control. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -150,7 +161,7 @@ gantt.appendTo('#Gantt'); {% endhighlight %} {% endtabs %} -Add the following HTML element to the `index.html` file. This element acts as the container for rendering the Gantt Chart component. +Add the following HTML element to the `index.html` file. This element acts as the container for rendering the Gantt Chart control. Ensure the `
    ` element exists before calling `appendTo()` in your TypeScript code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -190,6 +201,11 @@ npm start {% endhighlight %} {% endtabs %} +The application will typically run on `http://localhost:8080` or `http://localhost:3000` depending on your webpack configuration. If you encounter errors: +- **Port already in use**: Change the port in `webpack.config.js` or kill the process using that port +- **Build errors**: Run `npm install` again to ensure all dependencies are installed correctly +- **Module not found**: Verify that all imports reference the correct package names (e.g., `@syncfusion/ej2-gantt`) + ## Output The Gantt Chart displays: @@ -212,20 +228,53 @@ You can preview the following sample by clicking the **Preview Sample** button. ## Error handling -Error handling is used to identify errors, display them and develop recovery strategies to handle errors from gantt. In Gantt, error handling is done by using the [actionFailure](https://ej2.syncfusion.com/documentation/api/gantt#actionfailure) event. Some of the scenarios that this event handles are: -* Invalid duration : The [duration](https://ej2.syncfusion.com/documentation/api/gantt/taskFields#duration) field accepts only numerical values with an optional decimal point. Entering non-numerical values triggers the `actionFailure` event and displays issue information in the event argument. -* Invalid dependency: The [dependency](https://ej2.syncfusion.com/documentation/api/gantt/taskFields#dependency) field accepts only a number followed by a predecessor type (FS, FF, SS, SF). Entering invalid values, such as special characters or incorrect predecessor types, triggers the `actionFailure` event and displays issue information in the event argument. -* Invalid offset : The [offset](https://ej2.syncfusion.com/documentation/api/gantt/iPredecessor#offset) accepts only numerical values or their word equivalents followed by a unit. Entering invalid values, such as special characters triggers `actionFailure` event and displays issue information in the event argument. -* Failure to map task fields : The data source fields necessary for rendering tasks should be mapped to the Gantt control using the [taskFields](https://ej2.syncfusion.com/documentation/api/gantt/taskFields) property. Failure to map `taskFields` in the sample triggers `actionFailure` event and displays issue information in the event argument. -* Failure to map resource fields : To assign resources to a task, resource fields should be mapped to the Gantt control using the [resourceFields](https://ej2.syncfusion.com/documentation/api/gantt/resourceFields). Failure to map `resourceFields` in the sample triggers `actionFailure` event and displays issue information in the event argument. -* Failure to map `isPrimaryKey` : [isPrimaryKey](https://ej2.syncfusion.com/documentation/api/gantt/column#isprimarykey) field is crucial for CRUD operations. Failure to map [id](https://ej2.syncfusion.com/documentation/api/gantt/taskFields#id) column in gantt column collection or [isPrimaryKey](https://ej2.syncfusion.com/documentation/api/gantt/column#isprimarykey) field in one of the columns will trigger `actionFailure` event and display issue information in the event argument. -* Invalid date format : [format](https://ej2.syncfusion.com/documentation/api/gantt/iTimelineFormatter) property under `topTier` and `bottomTier` determines how the timelines are displayed in the top tier and bottom tier of the Gantt chart timeline. If the `format` does not contain a valid standard [date format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), it triggers the `actionFailure` event, displaying issue information in the event argument. -* Failure to map `hasChildMapping` : [hasChildMapping](https://ej2.syncfusion.com/documentation/api/gantt/taskFields#haschildmapping) property should configured for [load-on-demand](https://ej2.syncfusion.com/documentation/gantt/data-binding#load-child-on-demand). Ensure it properly configured in the [taskFields](https://ej2.syncfusion.com/documentation/api/gantt/taskFields). Failure to map `hasChildMapping` in the `load-on-demand` sample triggers `actionFailure` event and displays issue information in the event argument. -* Invalid day in event markers : [day](https://ej2.syncfusion.com/documentation/api/gantt/eventMarker#day) should configured in [eventMarkers](https://ej2.syncfusion.com/documentation/api/gantt/eventMarker) to render striplines in a particular day. Failure to configure the `day` in `eventMarkers` triggers `actionFailure` event and displays issue information in the event argument. +Proper error handling helps identify and resolve issues during development. The Gantt Chart control provides the [actionFailure](https://ej2.syncfusion.com/documentation/api/gantt#actionfailure) event to capture validation and runtime errors. + +### Common error scenarios + +The `actionFailure` event is triggered when validation errors or configuration issues occur: + +* **Invalid duration** — The [duration](https://ej2.syncfusion.com/documentation/api/gantt/taskFields#duration) field accepts only numerical values with an optional decimal point. Non-numerical values trigger the `actionFailure` event. +* **Invalid dependency** — The [dependency](https://ej2.syncfusion.com/documentation/api/gantt/taskFields#dependency) field accepts a number followed by a predecessor type (FS, FF, SS, SF). Invalid values, special characters, or incorrect predecessor types trigger the `actionFailure` event. +* **Invalid offset** — The [offset](https://ej2.syncfusion.com/documentation/api/gantt/iPredecessor#offset) accepts only numerical values or their word equivalents followed by a unit. Invalid values trigger the `actionFailure` event. +* **Failure to map task fields** — The data source fields must be mapped to the Gantt Chart control using the [taskFields](https://ej2.syncfusion.com/documentation/api/gantt/taskFields) property. Missing mappings trigger the `actionFailure` event. +* **Failure to map resource fields** — To assign resources to a task, resource fields must be mapped using [resourceFields](https://ej2.syncfusion.com/documentation/api/gantt/resourceFields). Missing mappings trigger the `actionFailure` event. +* **Missing isPrimaryKey** — The [isPrimaryKey](https://ej2.syncfusion.com/documentation/api/gantt/column#isprimarykey) field is crucial for CRUD operations. Failure to map the [id](https://ej2.syncfusion.com/documentation/api/gantt/taskFields#id) column or set `isPrimaryKey` triggers the `actionFailure` event. +* **Invalid date format** — The [format](https://ej2.syncfusion.com/documentation/api/gantt/iTimelineFormatter) property in `topTier` and `bottomTier` must use valid [date format strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date). Invalid formats trigger the `actionFailure` event. +* **Missing hasChildMapping** — The [hasChildMapping](https://ej2.syncfusion.com/documentation/api/gantt/taskFields#haschildmapping) property must be configured for [load-on-demand](https://ej2.syncfusion.com/documentation/gantt/data-binding#load-child-on-demand) functionality. Missing mappings trigger the `actionFailure` event. +* **Invalid event marker day** — The [day](https://ej2.syncfusion.com/documentation/api/gantt/eventMarker#day) property in [eventMarkers](https://ej2.syncfusion.com/documentation/api/gantt/eventMarker) must be a valid date. Invalid dates trigger the `actionFailure` event. + +>**Note**: The `actionFailure` event also captures error information from the underlying TreeGrid component. For more details, refer to [TreeGrid error handling](https://ej2.syncfusion.com/documentation/treegrid/getting-started#handling-errors). + +### Handling errors with actionFailure event + +The following code example shows how to attach the [actionFailure](https://ej2.syncfusion.com/documentation/api/gantt#actionfailure) event handler to display exceptions when configuration issues occur (e.g., `isPrimaryKey` is not configured properly). + +{% tabs %} +{% highlight ts tabtitle="app.ts" %} + +let gantt: Gantt = new Gantt({ + dataSource: data, + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + duration: 'Duration', + parentID: 'ParentID' + }, + actionFailure: (args: any) => { + // Display error to user or log it + console.error('Gantt Error:', args.error); + alert(`Error: ${args.error}`); + } +}); ->Additionally, TreeGrid side error handling information is also displayed from the Gantt `actionFailure` event. For more details on TreeGrid side error handling, refer [here](https://ej2.syncfusion.com/documentation/treegrid/getting-started#handling-errors). +gantt.appendTo('#Gantt'); + +{% endhighlight %} +{% endtabs %} -The following code example shows how to use the [actionFailure](https://ej2.syncfusion.com/documentation/api/gantt#actionfailure) event in the Gantt control to display an exception when `isPrimaryKey` is not configured properly in the Gantt Chart column. +For a complete working example with detailed error scenarios, refer to: {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -237,4 +286,4 @@ The following code example shows how to use the [actionFailure](https://ej2.sync The following screenshot represents the Gantt Exception handling in `actionFailure` event. -![Error Handling](./images/error-handling.png) \ No newline at end of file +![Error Handling](./images/error-handling.png) diff --git a/ej2-javascript/grid/js/getting-started.md b/ej2-javascript/grid/js/getting-started.md index e409f2d47..974a7d0a2 100644 --- a/ej2-javascript/grid/js/getting-started.md +++ b/ej2-javascript/grid/js/getting-started.md @@ -15,14 +15,25 @@ This section explains the steps required to create a simple Essential® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | ## Dependencies @@ -81,31 +92,31 @@ This setup includes additional dependencies required for more advanced functiona Essential JS 2 DataGrid - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + @@ -116,10 +127,10 @@ This setup includes additional dependencies required for more advanced functiona > To include all required Essential JS 2 styles and scripts, use the following CDN links. > > Essential JS 2 combined bootstrap5.3 theme (all components) -> +> > > Essential JS 2 combined script (all components) -> +> ## Adding DataGrid control @@ -161,9 +172,9 @@ grid.appendTo('#Grid'); Essential JS 2 DataGrid - + - + @@ -181,7 +192,11 @@ grid.appendTo('#Grid'); {% previewsample "page.domainurl/code-snippet/grid/grid-cs132" %} -## Registering a license key +## Run the application + +Now, run the **index.html** in web browser, it will render the Essential® JS 2 DataGrid control. + +## Registering Syncfusion license Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. @@ -196,26 +211,11 @@ ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); > Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). -## Run the application - -Now, run the **index.html** in web browser, it will render the Essential® JS 2 DataGrid control. - ## Troubleshooting -**Grid renders blank / no rows appear** -- Verify that the `dataSource` property is set and the data array is not empty. -- Open the browser developer console (F12) and check for JavaScript errors. -- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). - -**License validation warning in the console** -- Register your license key before instantiating any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. - -**Scripts blocked when opening via `file://`** -- Serve the application through a local HTTP server. Refer to the [Run the application](#run-the-application) section. +**Grid styles are not applied:** Ensure that the required Syncfusion theme CDN link is correctly included in `index.html` file. Verify that the CDN links are accessible and loaded before the Data Grid is rendered. -**CDN resources fail to load** -- Check your internet connection. -- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. +**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. ## See also diff --git a/ej2-javascript/grid/ts/getting-started.md b/ej2-javascript/grid/ts/getting-started.md index 968c0c176..fbb90b73c 100644 --- a/ej2-javascript/grid/ts/getting-started.md +++ b/ej2-javascript/grid/ts/getting-started.md @@ -14,42 +14,32 @@ domainurl: ##DomainURL## This section explains the steps to create a simple Data Grid and demonstrates the basic usage of the Data Grid component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node **v14.15.0** or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). +> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). ## Prerequisites -Before getting started, ensure the following tools are installed on your machine: +To get started with application, ensure the following software to be installed in the machine. -| Tool | Version / Notes | -|------|----------------| -| Node.js | v14.15.0 or higher | -| npm | Bundled with Node.js | -| Git | Required to clone the quickstart repository | -| Visual Studio Code | Recommended code editor | +| Requirement | Version | +|-------------|---------| +| [git](https://git-scm.com/downloads) | Latest version | +| [Node.js](https://nodejs.org/en/) | 14.15.0 or above | +| [Visual Studio Code](https://code.visualstudio.com/) | Latest version | -You can verify your Node.js and npm versions by running: -``` -node -v -npm -v -``` - -## Registering the license key - -Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. - -**Steps to register the license key:** - -1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. -2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: +### Browser support -```ts -import { registerLicense } from '@syncfusion/ej2-base'; - -registerLicense('YOUR_LICENSE_KEY_HERE'); -``` - -> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. +| Browser | Supported versions | +|----------|----------| +| Chrome | 63+ | +| Firefox | 58+ | +| Opera | 50+ | +| Edge | 13+ | +| IE | 11+ | +| Safari | 9+ | +| iOS | 9+ | +| Android | 4.4+ | +| Windows Mobile | IE 11+ | ## Setup for local development @@ -180,7 +170,29 @@ The `npm start` command compiles the TypeScript source files and starts the webp npm start ``` -Open `http://localhost:8080` (or the port shown in the terminal) in a browser. You should see a Data Grid rendered with the sample order data, displaying the following columns: **Order ID**, **Customer Name**, **Order Date**, **Freight**, and **Ship Country**. +## Registering Syncfusion license + +Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. + +**Steps to register the license key:** + +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: + +```ts +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. + +## Troubleshooting + +**Grid styles are not applied:** Ensure that the required Syncfusion theme package is installed and the theme CSS is imported correctly in the `src/styles/styles.css` file. + +**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. + ## See also diff --git a/ej2-javascript/inline-ai-assist/ts/getting-started.md b/ej2-javascript/inline-ai-assist/ts/getting-started.md index 9d4c92b41..8d9d24690 100644 --- a/ej2-javascript/inline-ai-assist/ts/getting-started.md +++ b/ej2-javascript/inline-ai-assist/ts/getting-started.md @@ -13,137 +13,85 @@ domainurl: ##DomainURL## This section explains how to create a simple Inline AI Assist control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires Node.js `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -## Dependencies +## Prerequisites -The list of dependencies required to use the Inline AI Assist control in your application is given as follows: +Before getting started, ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-interactive-chat - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-popups -``` - -## Set up development environment +| Tool | Version / Notes | +|------|----------------| +| Node.js | v14.15.0 or higher | +| npm | Bundled with Node.js | +| Git | Required to clone the quickstart repository | +| Visual Studio Code | Recommended code editor | -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +You can verify your Node.js and npm versions by running: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +```bash +node -v +npm -v +``` -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Registering the license key -{% endhighlight %} -{% endtabs %} +Syncfusion® Essential® JS 2 controls require a valid license key from version **16.2.0.41** onwards. Using the controls without a license key will display a **license validation message** in the browser console. -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +**Steps to register the license key:** -{% tabs %} -{% highlight bash tabtitle="CMD" %} +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your `src/app/app.ts` file, before instantiating any Syncfusion control: -cd ej2-quickstart +```ts +import { registerLicense } from '@syncfusion/ej2-base'; -{% endhighlight %} -{% endtabs %} +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` -## Add Syncfusion® JavaScript packages +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +## Setup for local development -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Clone the Essential® JS 2 quickstart application project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) using the following command line scripts. -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm install +```bash +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack +cd ej2-quickstart-webpack +``` -{% endhighlight %} -{% endtabs %} +## Adding Syncfusion® TypeScript Inline AI Assist package -## Import the Syncfusion® CSS styles +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: +Use the following command to install the `@syncfusion/ej2-interactive-chat` package: ```bash -npm install @syncfusion/ej2-tailwind3-theme --save +npm install @syncfusion/ej2-interactive-chat --save ``` -To render the Inline AI Assist control, add the below import in the `~/src/styles/styles.css` file which loads all the required dependency styles, as shown below: +Then, install the remaining dependent npm packages using the following command: -```css -@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/inline-ai-assist/index.css"; +```bash +npm install ``` -## Adding Inline AI Assist to the application - -Add the HTML div tag with ID attribute as the `defaultInlineAssist` to your `index.html` file. - -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} - - - - - - Essential JS 2 Inline AI Assist - - - - - - - - - -
    -
    -
    - - - +## Adding CSS reference -{% endhighlight %} -{% endtabs %} - -Then, import the `InlineAIAssist` control in your `app.ts` (or `index.ts`) file and initialize it with `#defaultInlineAssist`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { InlineAIAssist } from "@syncfusion/ej2-interactive-chat"; - -// Initializes the Inline AI Assist control -let inlineAssist: InlineAIAssist = new InlineAIAssist({}); +Themes for Syncfusion® Inline AI Assist controls can be applied using CSS files provided through the [npm theme package](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme). Install the Fluent 2 theme package using the following command: -// Render initialized Inline AI Assist. -inlineAssist.appendTo('#defaultInlineAssist'); -inlineAssist.showPopup(); - -{% endhighlight %} -{% endtabs %} - -## Run the application - -Run the application in the browser using the following command. +```bash +npm install @syncfusion/ej2-fluent2-theme --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then add the following CSS reference to the `src/styles/styles.css` file: -npm start +```css +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/inline-ai-assist/index.css"; +``` -{% endhighlight %} -{% endtabs %} +## Adding Inline AI Assist control -The following example shows a basic Inline AI Assist control. +Add the Inline AI Assist control in **src/app/app.ts** file using the following code. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -156,6 +104,16 @@ The following example shows a basic Inline AI Assist control. {% previewsample "page.domainurl/code-snippet/inline-ai-assist/gettingstarted" %} +## Run the application + +The `npm start` command compiles the TypeScript source files and starts the webpack development server. Run the following command: + +```bash +npm start +``` + +Open `http://localhost:8080` (or the port shown in the terminal) in a browser. You should see an Inline AI Assist rendered with the default layout. + ## RelateTo and target configuration You can use the `relateTo` property to position the Inline AI Assist relative to a specific DOM element. It accepts either a CSS selector string (e.g., '.container' or '#id') or an HTMLElement. The `target` property specifies the element or CSS selector where the Inline AI Assist will be appended. It accepts either a CSS selector string (e.g., '.container' or '#id') or an HTMLElement. diff --git a/ej2-javascript/js/getting-started/quick-start.md b/ej2-javascript/js/getting-started/quick-start.md index aacdb8465..98d794d30 100644 --- a/ej2-javascript/js/getting-started/quick-start.md +++ b/ej2-javascript/js/getting-started/quick-start.md @@ -11,40 +11,40 @@ domainurl: ##DomainURL## # Getting Started with Syncfusion® JavaScript (ES5) UI Controls -Build your first Syncfusion JavaScript (ES5) application with a simple Grid control in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Grid from the CDN, initializes it with sample data, and renders a responsive data table. +Build your first Syncfusion JavaScript (ES5) application with a simple Grid control in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Grid from the CDN, initializes it with sample data, and renders a responsive data table. The example uses CDN version `34.1.29` and the `bootstrap5.3` theme; substitute the version that matches your target release. ## Prerequisites -* [Visual Studio Code](https://code.visualstudio.com) (or any text editor) -* A web browser to view the result +* [Visual Studio Code](https://code.visualstudio.com) (or any text editor) to create the HTML file +* A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result ## Quick Setup -### Step 1: Create Folder and HTML file +### Step 1: Create a Folder and HTML File -* Create a folder named `quickstart` in your desired directory -* Inside the `quickstart` folder, create a new file named `index.html` +* Create a folder named `quickstart` in your desired directory. +* Inside the `quickstart` folder, create a new file named `index.html`. ### Step 2: Add Syncfusion® CDN Resources -Include the following CSS and JavaScript links in the `` section. +Include the following CSS and JavaScript links in the `` section of `index.html`. The `ej2-base`, `ej2-data`, and `ej2-popups` scripts are required dependencies of the Grid component. **Styles (CSS):** ``` -https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/bootstrap5.3.css -https://cdn.syncfusion.com/ej2/33.2.3/ej2-grids/styles/bootstrap5.3.css +https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/styles/bootstrap5.3.css +https://cdn.syncfusion.com/ej2/34.1.29/ej2-grids/styles/bootstrap5.3.css ``` **Scripts (JavaScript):** ``` -https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js -https://cdn.syncfusion.com/ej2/33.2.3/ej2-data/dist/global/ej2-data.min.js -https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/dist/global/ej2-popups.min.js -https://cdn.syncfusion.com/ej2/33.2.3/ej2-grids/dist/global/ej2-grids.min.js +https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/dist/global/ej2-base.min.js +https://cdn.syncfusion.com/ej2/34.1.29/ej2-data/dist/global/ej2-data.min.js +https://cdn.syncfusion.com/ej2/34.1.29/ej2-popups/dist/global/ej2-popups.min.js +https://cdn.syncfusion.com/ej2/34.1.29/ej2-grids/dist/global/ej2-grids.min.js ``` -### Step 3: Add Syncfusion®control to the application +### Step 3: Add the Syncfusion® Control to the Application Copy and paste the following complete code into your `index.html` file: @@ -54,14 +54,14 @@ Copy and paste the following complete code into your `index.html` file: Syncfusion Grid - Quick Start - - + + - - - - + + + + @@ -87,7 +87,6 @@ Copy and paste the following complete code into your `index.html` file: { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } ] }); - // Render Grid grid.appendTo('#Grid'); @@ -97,7 +96,8 @@ Copy and paste the following complete code into your `index.html` file: ### Step 4: Open in Browser -Open the `quickstart/index.html` file in your web browser. You should see the Syncfusion Grid control displaying the sample data. +Open the `quickstart/index.html` file in your web browser (or right-click the file in VS Code and choose **Open with Live Server** if you have the Live Server extension installed). You should see the Syncfusion Grid control displaying the sample data. + ## Output @@ -108,7 +108,6 @@ The following screenshot shows the output of the Syncfusion Grid quick start app ## See Also * **[Grid Component Documentation](https://ej2.syncfusion.com/javascript/documentation/grid/getting-started)** - Comprehensive guide to all Grid control features and functionality. - * **[GitHub Samples](https://github.com/SyncfusionExamples/ej2-quickstart)** - View complete working examples for CDN and local resource implementations. - * **[Register License Key](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration)** - Learn how to register your Syncfusion license key in your JavaScript application. +* **[Available Themes](https://ej2.syncfusion.com/javascript/documentation/appearance/theme)** - Browse all built-in themes such as `material3`, `material`, `bootstrap5.3`, `fluent2`, and `tailwind`. diff --git a/ej2-javascript/kanban/js/getting-started.md b/ej2-javascript/kanban/js/getting-started.md index b973c16b3..46e4cda74 100644 --- a/ej2-javascript/kanban/js/getting-started.md +++ b/ej2-javascript/kanban/js/getting-started.md @@ -9,13 +9,36 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Kanban control +# Getting started with the ##Platform_Name## Kanban control This section briefly explains how to create the **Kanban** component and configure its available functionalities in a JavaScript application. +## Prerequisites + +Before you begin, make sure your environment meets the following requirements: + +* A modern browser with ES6+ support (latest Chrome, Edge, Firefox, or Safari). +* A text editor (for example, Visual Studio Code). +* (Optional) A local web server such as `npx http-server`, the VS Code Live Server extension, or any static file server. A local server is required when loading scripts from a CDN or when the page needs `fetch`/module behavior. +* If you choose the **local scripts** path, the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build must be installed on your machine. + +## Supported themes and versions + +The examples in this document use the **Tailwind 3** theme (`tailwind3.css`). Other built-in themes that ship with the Kanban package are listed below; substitute the `tailwind3` segment in any CSS or tab snippet with one of these names to switch themes. + +| Theme | CSS file | +|---|---| +| Tailwind 3 (default) | `tailwind3.css` | +| Material 3 | `material3.css` | +| Bootstrap 5 | `bootstrap5.css` | +| Fluent 2 | `fluent2.css` | +| High Contrast | `highcontrast.css` | + +> **Version note:** Replace `{RELEASE_VERSION}` (e.g., `17.4.39` in the local-scripts example) with the version of Essential® JS 2 installed locally, and match the CDN URLs to the same major release to avoid mixed-version issues. + ## Dependencies -The following list of dependencies are required to use the Kanban component in your application: +The following list of dependencies is required to use the Kanban component in your application: ```javascript |-- @syncfusion/ej2-kanban @@ -34,17 +57,19 @@ The following list of dependencies are required to use the Kanban component in y ## Setup for local environment -Refer to the following steps to setup your local environment: +Refer to the following steps to set up your local environment: **Step 1:** Create a root folder `my-app` for your application. **Step 2:** Create `my-app/resources` folder to store local scripts and styles files. -**Step 3:** Create `my-app/index.js` and `my-app/index.html` files for initializing Essential® JS 2 Kanban control. +**Step 3:** Create `my-app/index.js` and `my-app/index.html` files to initialize the Essential® JS 2 Kanban control. + +**Step 4:** Open `my-app/index.html` in a modern browser, or serve the `my-app` folder with a local web server (for example, `npx http-server` or the VS Code Live Server extension) to verify the page loads without errors. ## Adding Syncfusion® resources -The Essential® JS 2 Kanban control can be initialized by using one of the following ways. +The Essential® JS 2 Kanban control can be initialized in one of the following ways. * Using local scripts and styles. * Using CDN links for scripts and styles. @@ -55,6 +80,8 @@ You can get the global scripts and styles from the [Essential Studio® JS 2 product build, you can copy the Kanban and its dependency scripts and style files into the `resources/scripts` and `resources/styles` folder respectively. +> **Note:** Each dependency package must be unzipped into its own subfolder under `resources`. For example, copy `ej2-base` to `resources/base`, `ej2-buttons` to `resources/buttons`, and the Kanban package to `resources/kanban`. The HTML example below references this layout. + Refer to the following location from where the Kanban's script and styles can be referenced. **Syntax:** @@ -69,7 +96,7 @@ Refer to the following location from where the Kanban's script and styles can be > > Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/17.4.39/Essential JS 2/ej2-kanban/styles/tailwind3.css` -After copying the files, you can refer the Kanban's scripts and styles into the `index.html` file. The following HTML code example shows the dependency of Kanban. +After copying the files, you can reference the Kanban's scripts and styles in the `index.html` file. The following HTML code example shows the dependency of Kanban. ```html @@ -94,6 +121,7 @@ After copying the files, you can refer the Kanban's scripts and styles into the + @@ -103,6 +131,9 @@ After copying the files, you can refer the Kanban's scripts and styles into the + +
    + @@ -110,9 +141,9 @@ After copying the files, you can refer the Kanban's scripts and styles into the ### Using CDN links for scripts and styles -Using CDN link, you can directly refer the Kanban's script and styles into the `index.html` file. +Using CDN links, you can directly reference the Kanban's scripts and styles in the `index.html` file. -Refer to the Kanban's CDN links given as follows. +Use the following CDN links. **Syntax:** @@ -126,7 +157,9 @@ Refer to the Kanban's CDN links given as follows. > > Styles: [`http://cdn.syncfusion.com/ej2/ej2-kanban/styles/tailwind3.css`](http://cdn.syncfusion.com/ej2/ej2-kanban/styles/tailwind3.css) -The following HTML code example shows the dependency of Kanban with `ej2-kanban.min.js`. +The following HTML code example shows the CDN dependencies of the Kanban control with `ej2-kanban.min.js`. + +> **Tip:** All `http://` CDN URLs also work over `https://`. Use `https://` to avoid mixed-content warnings when the page is served over HTTPS. ```html @@ -134,33 +167,34 @@ The following HTML code example shows the dependency of Kanban with `ej2-kanban. Essential JS 2 Kanban - - - - - - - + + + + + + + - + - - - - - - - - - - + + + + + + + + + + + - + -
    +
    @@ -183,9 +217,9 @@ kanbanObj.appendTo('#Kanban'); ## Initialize the Kanban -Now, you can add the Kanban control to the application. For getting started, add a `div` element for Kanban control in `index.html`. Then refer the `index.js` file into the `index.html` file. +If you prefer a single ` {% endhighlight %} {% endtabs %} -Import the Kanban component to your `main.ts` file as follows and initialize it to the element defined with an id `Kanban` in the `index.html` file. +Import the Kanban component into your `src/main.ts` file and initialize it on the element whose `id` is `Kanban` in `index.html`. `[src/main.ts]` {% tabs %} -{% highlight ts tabtitle="main.ts" %} +{% highlight ts tabtitle="src/main.ts" %} +import './style.css'; import { Kanban } from '@syncfusion/ej2-kanban'; const kanbanObj: Kanban = new Kanban({ @@ -130,7 +155,7 @@ kanbanObj.appendTo('#Kanban'); {% endhighlight %} {% endtabs %} -Now, run the application in the browser using the following command. +Now, run the application in the browser with the following command: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -140,7 +165,7 @@ npm run dev {% endhighlight %} {% endtabs %} -The output will display the empty Kanban. +Vite prints a local URL (for example, `http://localhost:5173`). Open it in a browser to view the empty Kanban. The complete runnable sample is also available here: {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -155,7 +180,50 @@ The output will display the empty Kanban. ## Populating cards -To populate the empty Kanban with cards, define local JSON data or remote data using the `dataSource` property. The data items must include fields relevant to the configured `keyField`. The example below uses default fields such as ID, Summary, and Status. +Each card is rendered into a column based on the value of its `Status` field, which must match the `keyField` of the target column. To populate the empty Kanban with cards, define local JSON data or remote data using the `dataSource` property. The data items must include fields relevant to the configured `keyField`. The example below uses the default fields `Id`, `Summary`, and `Status`. + +The expected `dataSource` JSON shape is: + +```typescript +[ + { + Id: 'Task 1', + Summary: 'Analyze the new requirements gathered from the customer.', + Status: 'Open' + }, + { + Id: 'Task 2', + Summary: 'Improve application performance.', + Status: 'InProgress' + }, + { + Id: 'Task 3', + Summary: 'Arrange a web meeting with the customer to get new requirements.', + Status: 'Testing' + }, + { + Id: 'Task 4', + Summary: 'Fix the issues reported in the IE browser.', + Status: 'Close' + } +] +``` + +The full set of default card fields recognized by the Kanban control is: + +| Field | Purpose | +|---|---| +| `Id` | Unique identifier for the card | +| `Summary` | Card title shown on the card | +| `Status` | Column key (must match a `columns[].keyField`) | +| `Title` | Optional secondary heading | +| `Description` | Optional body text | +| `Assignee` | Used for swimlane grouping and avatar | +| `Tags` | Comma-separated labels rendered on the card | +| `Priority` | Used by the priority feature | +| `DueDate` | Used by the due-date feature | + +To customize which fields appear on a card, use the [`cardSettings`](./cards) property; to add remote data fetching, see the [`dataSource`](./data-binding) configuration. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -173,7 +241,29 @@ To populate the empty Kanban with cards, define local JSON data or remote data u ## Enable swimlane -`Swimlane` can be enabled by mapping the fields `swimlaneSettings.keyField` to appropriate column name in dataSource. This enables the grouping of the cards based on the mapped column values. +Swimlanes are enabled by mapping the `swimlaneSettings.keyField` property to a column name that exists in the `dataSource` (for example, `Assignee`). Cards are then grouped by the values in the mapped column. The mapped field must be present in every record of the `dataSource`; otherwise, those records fall into an empty swimlane. + +The expected `dataSource` JSON shape when swimlanes are enabled is: + +```typescript +[ + { Id: 'Task 1', Summary: 'Analyze requirements', Status: 'Open', Assignee: 'Andrew Fuller' }, + { Id: 'Task 2', Summary: 'Improve performance', Status: 'InProgress', Assignee: 'Janet Leverling' }, + { Id: 'Task 3', Summary: 'Web meeting', Status: 'Testing', Assignee: 'Andrew Fuller' } +] +``` + +The commonly used `swimlaneSettings` options are: + +| Option | Purpose | +|---|---| +| `keyField` | Data field used to group cards into swimlanes | +| `textField` | Optional field used to render the swimlane header text | +| `allowDragAndDrop` | Enables dragging cards across swimlanes (default `true`) | +| `showItemCount` | Shows the count of cards in each swimlane | +| `sortDirection` | Orders swimlanes (`Ascending` or `Descending`) | + +Refer to the [swimlane configuration](./swimlane) for the complete list of options. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -187,4 +277,25 @@ To populate the empty Kanban with cards, define local JSON data or remote data u {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/kanban/getting-started-swimlane-cs2" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/kanban/getting-started-swimlane-cs2" %} + +## Troubleshooting + +| Issue | Cause | Fix | +|---|---|---| +| Page loads but the Kanban is invisible | The `
    ` has no defined height | Add inline CSS such as `style="height: 600px;"` on the host element | +| `Cannot find module '@syncfusion/ej2-kanban'` | Package was not installed or `node_modules` is stale | Run `npm install @syncfusion/ej2-kanban` and restart the dev server | +| Styles are not being applied | `style.css` is not imported into `main.ts` | Add `import './style.css';` at the top of `src/main.ts` | +| Port `5173` already in use | Another Vite or local server is bound to the port | Stop the other process, or run Vite on a different port: `npm run dev -- --port 3000` | +| `npm create vite@latest` prompts for input | Running in an interactive terminal without flags | Pass `-- --template vanilla-ts` to skip prompts, as shown in **Set up the development environment** | + +## See also + +* [Columns configuration](./columns) +* [Swimlane configuration](./swimlane) +* [Cards and card fields](./cards) +* [Data binding](./data-binding) +* [Remote data binding with ODataV4](./odataV4) +* [Sorting and filtering cards](./sort) +* [Responsive mode](./responsive-mode) +* [Accessibility](./accessibility) \ No newline at end of file diff --git a/ej2-javascript/ribbon/ts/getting-started.md b/ej2-javascript/ribbon/ts/getting-started.md index cf26d3854..6bbf49ae0 100644 --- a/ej2-javascript/ribbon/ts/getting-started.md +++ b/ej2-javascript/ribbon/ts/getting-started.md @@ -13,124 +13,96 @@ domainurl: ##DomainURL## This section explains how to create a simple Ribbon and configure its available functionalities in TypeScript using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). - -## Dependencies - -The following list of dependencies are required to use the Ribbon control in your application. - -```js -|-- @syncfusion/ej2-ribbon - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-navigations -``` - -## Set up development environment +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires Node.js `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +## Prerequisites -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Before getting started, ensure the following tools are installed on your machine: -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +| Tool | Version / Notes | +|------|----------------| +| Node.js | v14.15.0 or higher | +| npm | Bundled with Node.js | +| Git | Required to clone the quickstart repository | +| Visual Studio Code | Recommended code editor | -{% endhighlight %} -{% endtabs %} +You can verify your Node.js and npm versions by running: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -cd ej2-quickstart +```bash +node -v +npm -v +``` -{% endhighlight %} -{% endtabs %} +## Registering the license key -## Add Syncfusion® JavaScript packages +Syncfusion® Essential® JS 2 controls require a valid license key from version **16.2.0.41** onwards. Using the controls without a license key will display a **license validation message** in the browser console. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +**Steps to register the license key:** -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your `src/app/app.ts` file, before instantiating any Syncfusion control: -{% tabs %} -{% highlight bash tabtitle="NPM" %} +```ts +import { registerLicense } from '@syncfusion/ej2-base'; -npm install +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` -{% endhighlight %} -{% endtabs %} +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. -## Import the Syncfusion® CSS styles +## Setup for local development -To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: +Clone the Essential® JS 2 quickstart application project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) using the following command line scripts. ```bash -npm install @syncfusion/ej2-tailwind3-theme --save +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack +cd ej2-quickstart-webpack ``` -To render the Ribbon control, add the below import in the `~/src/styles/styles.css` file which loads all the required dependency styles, as shown below: +## Adding Syncfusion® TypeScript Ribbon package -```css -@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ribbon/index.css"; -``` - -## Adding Ribbon control to the application +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +Use the following command to install the `@syncfusion/ej2-ribbon` package: -Add the HTML div tag with the `id` attribute as `ribbon` to your `index.html` file. +```bash +npm install @syncfusion/ej2-ribbon --save +``` -`[src/index.html]` +Then, install the remaining dependent npm packages using the following command: -{% tabs %} -{% highlight html tabtitle="index.html" %} +```bash +npm install +``` - - +## Adding CSS reference - - Essential JS 2 - Ribbon - - - - - - - +Themes for Syncfusion® Ribbon controls can be applied using CSS files provided through the [npm theme package](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme). Install the Fluent 2 theme package using the following command: - -
    -
    -
    - +```bash +npm install @syncfusion/ej2-fluent2-theme --save +``` - +Then add the following CSS reference to the `src/styles/styles.css` file: -{% endhighlight %} -{% endtabs %} +```css +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/ribbon/index.css"; +``` -Import the Ribbon control in your `app.ts` file and initialize it with the `#ribbon`. +## Adding Ribbon control to the application -`[src/app/app.ts]` +Add the Ribbon control in **src/app/app.ts** file using the following code. {% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { Ribbon } from "@syncfusion/ej2-ribbon"; - -let ribbon: Ribbon = new Ribbon({}); -ribbon.appendTo("#ribbon"); - +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/ribbon/getting-started-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/ribbon/getting-started-cs1/index.html %} {% endhighlight %} {% endtabs %} + +{% previewsample "page.domainurl/code-snippet/ribbon/getting-started-cs1" %} ### Injecting required modules @@ -149,7 +121,7 @@ ribbon.appendTo("#ribbon"); {% endhighlight %} {% endtabs %} -## Adding Ribbon Tab +## Adding Ribbon tab In Ribbon, the options are arranged in tabs for easy access. You can use the `tabs` property of ribbon to define the ribbon tab like below. @@ -166,7 +138,7 @@ ribbon.appendTo("#ribbon"); {% endhighlight %} {% endtabs %} -## Adding Ribbon Group +## Adding Ribbon group To define a ribbon group under each tab, you can use the `groups` property of ribbon tab like below. The `orientation` property of ribbon group defines whether the collection of items will be rendered column-wise or row-wise. @@ -186,7 +158,7 @@ ribbon.appendTo("#ribbon"); {% endhighlight %} {% endtabs %} -## Adding Ribbon Items +## Adding Ribbon items You can use the `collections` property of ribbon group to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the `items` property of ribbon collection and the `type` property of ribbon item to specify the type of control to be rendered, like a button, a drop-down button, a combo box, and more. @@ -242,25 +214,10 @@ ribbon.appendTo("#ribbon"); ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +The `npm start` command compiles the TypeScript source files and starts the webpack development server. Run the following command: +```bash npm start +``` -{% endhighlight %} -{% endtabs %} - -The following example illustrates how tabs, groups, collections, and items are used in a ribbon control to form the ribbon layout. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/ribbon/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/ribbon/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/ribbon/getting-started-cs1" %} +Open `http://localhost:8080` (or the port shown in the terminal) in a browser. You should see a Ribbon control rendered with the default layout. diff --git a/ej2-javascript/schedule/js/getting-started.md b/ej2-javascript/schedule/js/getting-started.md index 2c946375e..58017229f 100644 --- a/ej2-javascript/schedule/js/getting-started.md +++ b/ej2-javascript/schedule/js/getting-started.md @@ -15,6 +15,16 @@ This guide explains how to create a [**JavaScript Scheduler**](https://www.syncf > **Ready to streamline your Syncfusion® JavaScript development?** Discover the full potential of Syncfusion® JavaScript controls with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/javascript/documentation/ai-coding-assistant/overview) +## Prerequisites + +Before getting started, ensure the following requirements are met: + +| Requirement | Notes | +|-------------|-------| +| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | +| Code editor | Visual Studio Code is recommended | +| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | + ## Dependencies The Scheduler component requires the following dependencies: diff --git a/ej2-javascript/schedule/ts/getting-started.md b/ej2-javascript/schedule/ts/getting-started.md index d306cbc33..683fb0611 100644 --- a/ej2-javascript/schedule/ts/getting-started.md +++ b/ej2-javascript/schedule/ts/getting-started.md @@ -13,6 +13,22 @@ domainurl: ##DomainURL## This section explains how to create the [**JavaScript Scheduler**](https://www.syncfusion.com/javascript-ui-controls/js-scheduler) component and configure its available functionalities in a TypeScript environment. +## Prerequisites + +Before getting started, ensure the following tools are installed on your machine: + +| Tool | Version / Notes | +|------|----------------| +| Node.js | v14.15.0 or higher | +| npm | Bundled with Node.js | + +You can verify your Node.js and npm versions by running: + +``` +node -v +npm -v +``` + ## Installation and configuration To build a high-performance TypeScript application with a smooth development workflow, Vite is the recommended tool. Unlike traditional setups, Vite is designed for speed and simplicity, providing near-instant startup and fast updates during development. For detailed steps, refer to the Vite [installation instructions](https://vite.dev/guide/) diff --git a/ej2-javascript/treegrid/js/getting-started.md b/ej2-javascript/treegrid/js/getting-started.md index 5c59debf0..8ecd94f7d 100644 --- a/ej2-javascript/treegrid/js/getting-started.md +++ b/ej2-javascript/treegrid/js/getting-started.md @@ -13,6 +13,27 @@ domainurl: ##DomainURL## This section explains the steps required to create a simple Essential® JS 2 Tree Grid and demonstrates the basic usage of the Tree Grid control in a JavaScript application. +## Prerequisites + +To get started with application, ensure the following software to be installed in the machine. + +* [git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) + +### Browser support + +| Browser | Supported versions | +|----------|----------| +| Chrome | 63+ | +| Firefox | 58+ | +| Opera | 50+ | +| Edge | 13+ | +| IE | 11+ | +| Safari | 9+ | +| iOS | 9+ | +| Android | 4.4+ | +| Windows Mobile | IE 11+ | + ## Dependencies The following packages are required to use the DataGrid with all features. These package names apply to **npm-based projects**. If you are using CDN, all dependencies are automatically included — refer to the [Adding Syncfusion® Tree Grid CDN resources](#adding-syncfusion-tree-grid-cdn-resources) section. @@ -194,7 +215,11 @@ treeGridObj.appendTo('#TreeGrid'); {% previewsample "page.domainurl/code-snippet/treegrid/tree-grid-cs4" %} -## Registering a license key +## Run the application + +Now, run the **index.html** in web browser, it will render the Essential® JS 2 Tree Grid control. + +## Registering Syncfusion license Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. @@ -209,34 +234,12 @@ ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); > Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). -## Run the application - -Now, run the **index.html** in web browser, it will render the Essential® JS 2 Tree Grid control. - ## Troubleshooting -**Grid renders blank / no rows appear** -- Verify that the `dataSource` property is set and the data array is not empty. -- Open the browser developer console (F12) and check for JavaScript errors. -- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). - -**License validation warning in the console** -- Register your license key before instantiating any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. - -**Scripts blocked when opening via `file://`** -- Serve the application through a local HTTP server. Refer to the [Run the application](#run-the-application) section. +**Tree Grid styles are not applied:** Ensure that the required Syncfusion theme CDN link is correctly included in `index.html` file. Verify that the CDN links are accessible and loaded before the Tree Grid is rendered. -**CDN resources fail to load** -- Check your internet connection. -- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. +**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. ## See Also -* [Tree Grid Feature Modules](https://ej2.syncfusion.com/javascript/documentation/treegrid/module) -* [Getting Started with Syncfusion® JavaScript documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core) -* [Getting Started with Syncfusion® ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc) -* [Getting Started with Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) \ No newline at end of file +* [Tree Grid Feature Modules](https://ej2.syncfusion.com/javascript/documentation/treegrid/module) \ No newline at end of file diff --git a/ej2-javascript/treegrid/ts/getting-started.md b/ej2-javascript/treegrid/ts/getting-started.md index 77a34a799..5f776f3ff 100644 --- a/ej2-javascript/treegrid/ts/getting-started.md +++ b/ej2-javascript/treegrid/ts/getting-started.md @@ -15,42 +15,31 @@ The Tree Grid component is essential for displaying hierarchical data in a tabul This section explains the steps to create a simple Tree Grid and demonstrates the basic usage of the Tree Grid component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). ## Prerequisites -Before getting started, ensure the following tools are installed on your machine: +To get started with application, ensure the following software to be installed in the machine. -| Tool | Version / Notes | -|------|----------------| -| Node.js | v14.15.0 or higher | -| npm | Bundled with Node.js | -| Git | Required to clone the quickstart repository | -| Visual Studio Code | Recommended code editor | +| Requirement | Version | +|-------------|---------| +| [git](https://git-scm.com/downloads) | Latest Version | +| [Node.js](https://nodejs.org/en/) | 14.15.0 or above, Recommended: Latest Version | +| [Visual Studio Code](https://code.visualstudio.com/) | Latest Version | -You can verify your Node.js and npm versions by running: +### Browser support -``` -node -v -npm -v -``` - -## Registering the license key - -Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. - -**Steps to register the license key:** - -1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. -2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: - -```ts -import { registerLicense } from '@syncfusion/ej2-base'; - -registerLicense('YOUR_LICENSE_KEY_HERE'); -``` - -> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. +| Browser | Supported versions | +|----------|----------| +| Chrome | 63+ | +| Firefox | 58+ | +| Opera | 50+ | +| Edge | 13+ | +| IE | 11+ | +| Safari | 9+ | +| iOS | 9+ | +| Android | 4.4+ | +| Windows Mobile | IE 11+ | ## Set up development environment @@ -77,7 +66,6 @@ Then, install the remaining dependent npm packages using the following command: npm install ``` - ## Adding CSS reference Themes for Syncfusion® Tree Grid component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/documentation/appearance/theme) documentation. @@ -97,7 +85,7 @@ Then add the following CSS reference to the **src/styles/styles.css** file: {% tabs %} {% highlight css tabtitle="App.css" %} -@import "../node_modules/@syncfusion/ej2-material3-theme/styles/treegrid/index.css"; +@import "../../node_modules/@syncfusion/ej2-material3-theme/styles/treegrid/index.css"; {% endhighlight %} {% endtabs %} @@ -205,15 +193,29 @@ The `npm start` command compiles the TypeScript source files and starts the webp npm start ``` -Open `http://localhost:8080` (or the port shown in the terminal) in a browser. You should see a Data Grid rendered with the sample order data, displaying the following columns: **Task ID**, **Task Name**, **Start Date**, **End Date**. +## Registering Syncfusion license + +Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. + +**Steps to register the license key:** + +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: + +```ts +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. + +## Troubleshooting + +**Tree Grid styles are not applied:** Ensure that the required Syncfusion theme package is installed and the theme CSS is imported correctly in the `src/styles/styles.css` file. + +**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. ## See also * [Tree Grid Feature Modules](https://ej2.syncfusion.com/documentation/treegrid/module) -* [Getting Started with Syncfusion® JavaScript (ES5) documentation](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® Angular documentation](https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® React documentation](https://ej2.syncfusion.com/react/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® Vue documentation](https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started) -* [Getting Started with Syncfusion® ASP.NET Core documentation](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core) -* [Getting Started with Syncfusion® ASP.NET MVC documentation](https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc) -* [Getting Started with Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) diff --git a/ej2-javascript/ts/getting-started/quick-start.md b/ej2-javascript/ts/getting-started/quick-start.md index 3b3786119..1155bb779 100644 --- a/ej2-javascript/ts/getting-started/quick-start.md +++ b/ej2-javascript/ts/getting-started/quick-start.md @@ -25,13 +25,13 @@ Ensure the following tools are installed on your machine: ## Set up the development environment -Clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from GitHub: +Clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from GitHub in the command prompt: ``` git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart ``` -Navigate to the project folder: +Navigate to the project folder in the command prompt: ``` cd ej2-quickstart @@ -87,8 +87,6 @@ In this article, the Grid control is used as an example. Add the following Grid Essential JS 2 - .... - .... @@ -111,23 +109,20 @@ const data: Object[] = [ { OrderID: 10248, CustomerID: 'VINET', - EmployeeID: 5, - ShipCountry: 'France', - Freight: 32.38 + Freight: 32.38, + OrderDate: new Date(8364186e5) }, { OrderID: 10249, CustomerID: 'TOMSP', - EmployeeID: 6, - ShipCountry: 'Germany', - Freight: 11.61 + Freight: 11.61, + OrderDate: new Date(8367642e5) }, { OrderID: 10250, CustomerID: 'HANAR', - EmployeeID: 4, - ShipCountry: 'Brazil', - Freight: 65.83 + Freight: 65.83, + OrderDate: new Date(8371242e5) } ]; @@ -135,11 +130,10 @@ const data: Object[] = [ let grid: Grid = new Grid({ dataSource: data, columns: [ - { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, - { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }, - { field: 'EmployeeID', width: 140, headerText: 'Employee ID', textAlign: 'Right', type: 'string' }, - { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' }, - { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } + { field: 'OrderID', headerText: 'Order ID', width: 120, type: 'number', textAlign: 'Center' }, + { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string', textAlign: 'Center' }, + { field: 'Freight', headerText: 'Freight', width: 120, format: 'C', textAlign: 'Center' }, + { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'M/d/yyyy', type: 'date', textAlign: 'Center' } ] }); From 0b184dca8813dc10a97dac14d776f544da6eb422 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 22 Jul 2026 13:47:11 +0530 Subject: [PATCH 16/26] Integrated latest changes at 07-22-2026 1:30:16 PM --- .../ai-assistview/js/es5-getting-started.md | 73 +++- .../chat-ui/js/es5-getting-started.md | 91 +++-- .../file-manager/js/es5-getting-started.md | 318 +++--------------- .../file-manager/ts/getting-started.md | 112 +++--- ej2-javascript/gantt/ts/getting-started.md | 12 +- ej2-javascript/grid/js/getting-started.md | 6 +- ej2-javascript/grid/ts/getting-started.md | 10 +- .../js/es5-getting-started.md | 73 +++- .../js/getting-started/images/quickstart.png | Bin 66249 -> 27014 bytes .../ribbon/js/es5-getting-started.md | 83 +++-- ej2-javascript/schedule/ts/getting-started.md | 2 - .../speech-to-text/js/es5-getting-started.md | 85 +++-- .../speech-to-text/speech-recognition.md | 34 +- .../speech-to-text/ts/getting-started.md | 165 +++------ ej2-javascript/treegrid/js/getting-started.md | 6 +- ej2-javascript/treegrid/ts/getting-started.md | 8 +- 16 files changed, 531 insertions(+), 547 deletions(-) diff --git a/ej2-javascript/ai-assistview/js/es5-getting-started.md b/ej2-javascript/ai-assistview/js/es5-getting-started.md index 6123af279..56ff5ea49 100644 --- a/ej2-javascript/ai-assistview/js/es5-getting-started.md +++ b/ej2-javascript/ai-assistview/js/es5-getting-started.md @@ -9,9 +9,20 @@ documentation: ug domainurl: ##DomainURL## --- -# ES5 getting started in ##Platform_Name## AI AssistView control +# Getting started with JavaScript AI AssistView control -The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +This section explains the steps required to create a simple Essential® JS 2 AI AssistView and demonstrates the basic usage of the AI AssistView control in a JavaScript application. + +## Prerequisites + +Before getting started, ensure the following requirements are met: + +| Requirement | Notes | +|-------------|-------| +| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | +| Code editor | Visual Studio Code is recommended | +| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | +| Syncfusion® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | ## Dependencies @@ -24,6 +35,8 @@ The list of dependencies required to use the AI AssistView control in your appli |-- @syncfusion/ej2-inputs ``` +> For npm-based projects, install the packages using: `npm install @syncfusion/ej2-interactive-chat --save` + ## Control Initialization The JavaScript (ES5) AI AssistView control can be initialized by using either of the following ways. @@ -74,13 +87,13 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin JavaScript (ES5) - - - - - + + + + + - + @@ -111,14 +124,14 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin JavaScript (ES5) - - - - - + + + + + - + @@ -183,6 +196,21 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/ai-assistview/gettingstarted" %} +## Registering a license key + +Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. + +**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). + +**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. + +```javascript +// Register Syncfusion license key +ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). + **Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript AI AssistView** control. > **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the control automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added. @@ -201,3 +229,20 @@ You can use the [promptSuggestions](../api/ai-assistview#promptsuggestions) prop {% endtabs %} {% previewsample "page.domainurl/code-snippet/ai-assistview/defaultprompts" %} + +## Troubleshooting + +**AI AssistView renders blank / does not load** +- Verify that the container element exists and has a valid ID. +- Open the browser developer console (F12) and check for JavaScript errors. +- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). + +**License validation warning in the console** +- Register your license key before instantiating any Syncfusion® control. + +**Scripts blocked when opening via `file://`** +- Serve the application through a local HTTP server. Refer to the [Run the application](#run-the-application) section. + +**CDN resources fail to load** +- Check your internet connection. +- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. diff --git a/ej2-javascript/chat-ui/js/es5-getting-started.md b/ej2-javascript/chat-ui/js/es5-getting-started.md index f724022be..ea34eb166 100644 --- a/ej2-javascript/chat-ui/js/es5-getting-started.md +++ b/ej2-javascript/chat-ui/js/es5-getting-started.md @@ -9,9 +9,20 @@ documentation: ug domainurl: ##DomainURL## --- -# Es5 getting started in ##Platform_Name## Chat UI control +# Getting started with JavaScript Chat UI control -The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +This section explains the steps required to create a simple Essential® JS 2 Chat UI and demonstrates the basic usage of the Chat UI control in a JavaScript application. + +## Prerequisites + +Before getting started, ensure the following requirements are met: + +| Requirement | Notes | +|-------------|-------| +| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | +| Code editor | Visual Studio Code is recommended | +| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | +| Syncfusion® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | ## Dependencies @@ -27,6 +38,8 @@ The list of dependencies required to use the Chat UI control in your application |-- @syncfusion/ej2-popups ``` +> For npm-based projects, install the packages using: `npm install @syncfusion/ej2-interactive-chat --save` + ## Control Initialization The JavaScript (ES5) Chat UI control can be initialized by using either of the following ways. @@ -77,15 +90,15 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin JavaScript (ES5) - - - - - - + + + + + + - + @@ -117,15 +130,15 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin JavaScript (ES5) - - - - - - + + + + + + - + @@ -181,18 +194,6 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `Chat UI` element and initiate the `JavaScript (ES5) Chat UI` control in the index.html by using following code. -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/chat-ui/getting-started/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chat-ui/getting-started" %} - -**Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Chat UI** control. - -## Configure messages and user - You can use the [messages](../api/chat-ui#messages) property to add messages and the [user](../api/chat-ui#user) property to configure the current user for the chat. {% tabs %} @@ -205,3 +206,37 @@ You can use the [messages](../api/chat-ui#messages) property to add messages and {% endtabs %} {% previewsample "page.domainurl/code-snippet/chat-ui/default-messages" %} + +## Registering a license key + +Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. + +**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). + +**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. + +```javascript +// Register Syncfusion license key +ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). + +**Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Chat UI** control. + +## Troubleshooting + +**Chat UI renders blank / does not load** +- Verify that the container element exists and has a valid ID. +- Open the browser developer console (F12) and check for JavaScript errors. +- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). + +**License validation warning in the console** +- Register your license key before instantiating any Syncfusion® control. + +**Scripts blocked when opening via `file://`** +- Serve the application through a local HTTP server. + +**CDN resources fail to load** +- Check your internet connection. +- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. diff --git a/ej2-javascript/file-manager/js/es5-getting-started.md b/ej2-javascript/file-manager/js/es5-getting-started.md index b7ce4253d..124600a45 100644 --- a/ej2-javascript/file-manager/js/es5-getting-started.md +++ b/ej2-javascript/file-manager/js/es5-getting-started.md @@ -9,18 +9,30 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## File Manager control +# Getting started with JavaScript File Manager control This section explains the steps required to create a simple Essential® JS 2 File Manager and demonstrate the basic usage of the File Manager control in a JavaScript application. -Before getting started, ensure the following requirements are met: +## Prerequisites -| Requirement | Notes | -|-------------|-------| -| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | -| Code editor | Visual Studio Code is recommended | -| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | -| Syncfusion® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | +To get started with application, ensure the following software to be installed in the machine. + +* [git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) + +### Browser support + +| Browser | Supported versions | +|----------|----------| +| Chrome | 63+ | +| Firefox | 58+ | +| Opera | 50+ | +| Edge | 13+ | +| IE | 11+ | +| Safari | 9+ | +| iOS | 9+ | +| Android | 4.4+ | +| Windows Mobile | IE 11+ | ## Dependencies @@ -50,201 +62,23 @@ Follow these steps to set up your local environment. - **index.html** — the main HTML file that loads the CDN resources and provides the File Manager container element. - **index.js** — the JavaScript file where the File Manager control is initialized. +Refer to the [Adding Syncfusion File Manager CDN resources](#adding-syncfusion-file-manager-cdn-resources) and [Adding File Manager control](#adding-file-manager-control) sections below for the content to add to each file. + **Step 3:** In **index.html**, add a ` ``` -## Adding Syncfusion® resources - -The Essential® JS 2 File Manager control can be initialized by using either of the following ways. - -* Using local script and style. -* Using CDN link for script and style. - -### Using local script and style - -To use local scripts and styles for File Manager, you can follow these steps: - -**1. Download Essential® Studio® JavaScript (Essential® JS 2):** Obtain the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installation location. - -**2. Copy Files to Resources Folder:** After installing the Essential® JS 2 product build, copy the file manager's scripts, and dependencies scripts and style file into the designated folders: - -**Scripts:** Copy the scripts to the **resources/scripts** folder. -**Styles:** Copy the styles to the **resources/styles** folder. - -**3. Locate Script and Style Files:** Identify the location of the file manager's script and style files. The syntax for the file paths are as follows: - -**Syntax:** ->Script: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` ->Styles: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/bootstrap5.3.css` - -**Example:** ->Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/25.1.35/Essential JS 2/ej2-filemanager/dist/global/ej2-filemanager.min.js` ->Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/25.1.35/Essential JS 2/ej2-filemanager/styles/bootstrap5.3.css` - -**4. Referencing in HTML File:** Once the files are copied, reference the file manager's scripts and styles into the **index.html** file. - -Here's an example of referencing the file manager's scripts and styles in an HTML file: - -**a. Essential® Dependency (Minimal Setup)** - -This setup includes only the necessary scripts and styles required to render the File Manager. Use this setup for a lightweight application that requires basic file manager functionality. - -```html - - - - - - Essential JS 2 File Manager - - - - - - - - - - - - - - - - - - - -``` - -**b. Extended Dependency (Additional Controls)** -This setup includes additional dependencies required for more advanced functionalities of the file manager, such as buttons, dropdowns, navigations, and other controls. Use this setup when you need to integrate additional features like filtering, sorting, context menu, and more. - -```html - - - - - Essential JS 2 File Manager - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -**c. Comprehensive Dependency (All Controls)** -This setup includes all the dependencies for Syncfusion® controls in a single comprehensive file, ensuring maximum compatibility and functionality. Use this setup for a complex application that utilizes a wide range of Syncfusion® controls. - -```html - - - - - Essential JS 2 File Manager - - - - - - - - - - -``` - -### Using CDN link for script and style - -Using CDN links, you can directly add the File Manager control's script and style to the `index.html`. - -Refer to the File Manager's CDN links below. - -**Syntax:** - -> Script: `http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> Styles: `http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/bootstrap5.3.css` - -**Example:** - -> Script: [https://cdn.syncfusion.com/ej2/ej2-filemanager/dist/global/ej2-filemanager.min.js](http://cdn.syncfusion.com/ej2/ej2-filemanager/dist/global/ej2-filemanager.min.js) -> -> Styles: [https://cdn.syncfusion.com/ej2/ej2-filemanager/styles/bootstrap5.3.css](http://cdn.syncfusion.com/ej2/ej2-filemanager/styles/bootstrap5.3.css) - -Here's an example of referencing the file manager's scripts and styles in an HTML file using CDN links: - -**a. Essential® Dependency (Minimal Setup)** - -This setup includes only the necessary scripts and styles required to render the File Manager. Use this setup for a lightweight application that requires basic file manager functionality. +## Adding Syncfusion® File Manager CDN resources -```html - - - - Essential JS 2 File Manager - - - - - - - - - - - - - - - - - -``` +The Essential® JS 2 File Manager control can be initialized by the following way. -**b. Extended Dependency (Additional Controls)** - -This setup includes additional dependencies required for more advanced functionalities of the file manager, such as buttons, dropdowns, navigations, and other controls. Use this setup when you need to integrate additional features like filtering, sorting, context menu, and more. +This setup includes additional dependencies required for more advanced functionalities of the File Manager, such as buttons, dropdowns, navigations and other components. Use this setup when you need to integrate additional features like filtering, sorting, context menu, and more. ```html - Essential JS 2 File Manager @@ -263,67 +97,33 @@ This setup includes additional dependencies required for more advanced functiona - - - + - - - - - + + + - - - - - - - - - - - - -``` - -**c. Comprehensive Dependency (All Controls)** - -This setup includes all the dependencies for Syncfusion® controls in a single comprehensive file, ensuring maximum compatibility and functionality. Use this setup for a complex application that utilizes a wide range of Syncfusion® controls. - -```html - - - - - Essential JS 2 File Manager - - - - - - + + + + - - ``` -Based on your requirement, additional dependencies can be included as needed. In this documentation, the common **ej2.min.js** and **bootstrap5.3.css** are used, which include all the Essential® JS 2 controls and their dependent scripts and theme files. +> To include all required Essential JS 2 styles and scripts, use the following CDN links. +> +> Essential JS 2 combined bootstrap5.3 theme (all components) +> +> +> Essential JS 2 combined script (all components) +> ## Adding File Manager control -You can start adding Essential® JS 2 file manager control to the application. To get started, add the file manager control in **index.js** file using the following code. +Add the File Manager in **index.js** file using the following code. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -361,15 +161,21 @@ filemanagerInstance.appendTo('#filemanager'); {% endtabs %} +{% previewsample "page.domainurl/code-snippet/file-manager/es5-getting-started-cs1" %} + ### Server-side setup -The sample uses `https://physical-service.syncfusion.com` as the `url` endpoint in `ajaxSettings`. +The sample uses `https://physical-service.syncfusion.com` as the [`url`](../api/file-manager/ajaxsettings#url) endpoint in [`ajaxSettings`](../api/file-manager#ajaxsettings). To use your own files, host a File Manager service and replace the `url` value with your service endpoint. See the [File System Provider](../file-system-provider) documentation for setup details. >Note: The [`ajaxSettings`](../api/file-manager#ajaxsettings) property must be defined while initializing the File Manager. File Manager utilizes the URLs mentioned in `ajaxSettings` to send file operation requests to the server. The File Manager service link is provided in the `hostUrl` variable. -## Registering a license key +## Run the application + +Now, run the **index.html** in web browser, it will render the Essential® JS 2 File Manager control. + +## Registering Syncfusion license Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. @@ -384,34 +190,12 @@ ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); > Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). -## Run the application - -Now, run the **index.html** in web browser, it will render the Essential® JS 2 File Manager control. - -Output will be displayed as follows. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/file-manager/es5-getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/file-manager/es5-getting-started-cs1" %} - -N> Looking for the full JavaScript File Manager component overview, features, pricing, and documentation? Visit the [JavaScript File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager) page ## Troubleshooting -**File Manager renders blank / no files appear** -- Verify that the `ajaxSettings` `url` property is set and points to a valid, running File Manager service endpoint. -- Open the browser developer console (F12) and check for JavaScript errors. - -**License validation warning in the console** -- Register your license key before instantiating any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. +**File Manager styles are not applied:** Ensure that the required Syncfusion theme CDN link is correctly included in `index.html` file. Verify that the CDN links are accessible and loaded before the File Manager is rendered. -**CDN resources fail to load** -- Check your internet connection. -- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. +**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) section. ## See also diff --git a/ej2-javascript/file-manager/ts/getting-started.md b/ej2-javascript/file-manager/ts/getting-started.md index 78d5ab947..517fba887 100644 --- a/ej2-javascript/file-manager/ts/getting-started.md +++ b/ej2-javascript/file-manager/ts/getting-started.md @@ -9,68 +9,61 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## File Manager control +# Getting started in TypeScript File Manager control -This section explains how to create a simple File Manager and demonstrates the basic usage of the [File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager) control. +This section explains the steps to create a simple File Manager and demonstrates the basic usage of the File Manager component using the Essential® JS 2 +[quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -## Prerequisites +> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -Before getting started, ensure the following tools are installed on your machine: +## Prerequisites -| Tool | Version / Notes | -|------|----------------| -| Node.js | v14.15.0 or higher | -| npm | Bundled with Node.js | -| Git | Required to clone the quickstart repository | -| Visual Studio Code | Recommended code editor | +To get started with application, ensure the following software to be installed in the machine. -You can verify your Node.js and npm versions by running: +| Requirement | Version | +|-------------|---------| +| [git](https://git-scm.com/downloads) | Latest version | +| [Node.js](https://nodejs.org/en/) | 14.15.0 or above | +| [Visual Studio Code](https://code.visualstudio.com/) | Latest version | -``` -node -v -npm -v -``` -## Registering the license key +### Browser support -Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. +| Browser | Supported versions | +|----------|----------| +| Chrome | 63+ | +| Firefox | 58+ | +| Opera | 50+ | +| Edge | 13+ | +| IE | 11+ | +| Safari | 9+ | +| iOS | 9+ | +| Android | 4.4+ | +| Windows Mobile | IE 11+ | -**Steps to register the license key:** +## Setup for local development -1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. -2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: - -```ts -import { registerLicense } from '@syncfusion/ej2-base'; +Clone the Essential® JS 2 quickstart application project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) using the following command line scripts. -registerLicense('YOUR_LICENSE_KEY_HERE'); +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack +cd ej2-quickstart-webpack ``` -> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. +## Adding Syncfusion® TypeScript File Manager package -## Create a TypeScript application +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -To set up a TypeScript application, run the following command. +Use the following command to install the `@syncfusion/ej2-filemanager` package: -```bash -npm create vite@latest my-app -- --template vanilla-ts ``` -This command will prompt you to install the required packages and start the application. Select the options as shown below. - -![File Manager Initial setup](images/npm_setup.png) - -As Syncfusion packages are not installed yet, currently, the `No` option will be selected. Then, navigate to the project directory using the following command: - -```bash -cd my-app +npm install @syncfusion/ej2-filemanager --save ``` -## Adding File Manager package +Then, install the remaining dependent npm packages using the following command: -All the available Essential® JS 2 packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install the File Manager package, use the following command. - -```bash -npm install @syncfusion/ej2-filemanager +``` +npm install ``` ## Adding CSS reference @@ -99,10 +92,10 @@ Then add the following CSS reference to the **~src/style.css** file: ## Adding File Manager control -To get started, add the [File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager) control in `main.ts` and `index.html` files. File Manager can be initialized through div element. +Add the File Manager component in **src/app/app.ts** file using the following code. {% tabs %} -{% highlight ts tabtitle="main.ts" %} +{% highlight ts tabtitle="app.ts" %} import { FileManager, Toolbar, NavigationPane, DetailsView } from '@syncfusion/ej2-filemanager'; import './style.css'; @@ -144,9 +137,11 @@ filemanagerInstance.appendTo('#filemanager'); {% endhighlight %} {% endtabs %} +{% previewsample "page.domainurl/code-snippet/file-manager/getting-started-cs1" %} + ### Server-side setup -The sample uses `https://physical-service.syncfusion.com` as the `url` endpoint in `ajaxSettings`. +The sample uses `https://physical-service.syncfusion.com` as the [`url`](../api/file-manager/ajaxsettings#url) endpoint in [`ajaxSettings`](../api/file-manager#ajaxsettings). To use your own files, host a File Manager service and replace the `url` value with your service endpoint. See the [File System Provider](../file-system-provider) documentation for setup details. @@ -154,12 +149,35 @@ To use your own files, host a File Manager service and replace the `url` value w ## Run the application -Use the following command to run the application in the browser. +The `npm start` command compiles the TypeScript source files and starts the webpack development server. Run the following command: ```bash -npm run dev +npm start ``` +## Registering Syncfusion license + +Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. + +**Steps to register the license key:** + +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: + +```ts +import { registerLicense } from '@syncfusion/ej2-base'; + +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. + +## Troubleshooting + +**File Manager styles are not applied:** Ensure that the required Syncfusion theme package is installed and the theme CSS is imported correctly in the `src/styles/styles.css` file. + +**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](https://ej2.syncfusion.com/documentation/licensing/license-key-registration#register-syncfusion-license-key-in-the-project) section. + ## See also * [Ajax Settings Configuration (uploadUrl, downloadUrl, getImageUrl)](../file-operations.md#ajax-settings-configuration) diff --git a/ej2-javascript/gantt/ts/getting-started.md b/ej2-javascript/gantt/ts/getting-started.md index abff7b6ac..9eca9e418 100644 --- a/ej2-javascript/gantt/ts/getting-started.md +++ b/ej2-javascript/gantt/ts/getting-started.md @@ -71,12 +71,22 @@ npm install Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Install the **Tailwind 3** theme package using the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme --save + +{% endhighlight %} +{% endtabs %} + The quickstart application is preconfigured to use the **Tailwind3** theme in the `~/src/styles/styles.css` file, as shown below: {% tabs %} {% highlight css tabtitle="style.css" %} -@import '../../node_modules/@syncfusion/ej2/tailwind3.css'; +@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/gantt/index.css"; {% endhighlight %} {% endtabs %} diff --git a/ej2-javascript/grid/js/getting-started.md b/ej2-javascript/grid/js/getting-started.md index 974a7d0a2..6f33f28a1 100644 --- a/ej2-javascript/grid/js/getting-started.md +++ b/ej2-javascript/grid/js/getting-started.md @@ -37,7 +37,7 @@ To get started with application, ensure the following software to be installed i ## Dependencies -The following packages are required to use the DataGrid with all features. These package names apply to **npm-based projects**. If you are using CDN, all dependencies are automatically included — refer to the [Adding Syncfusion DataGrid CDN resources](#adding-syncfusion-datagrid-cdn-resources) section. +A list of dependencies to use the DataGrid with all features. ```javascript |-- @syncfusion/ej2-grids @@ -58,8 +58,6 @@ The following packages are required to use the DataGrid with all features. These |-- @syncfusion/ej2-notifications ``` -> For npm-based projects, install the packages using: `npm install @syncfusion/ej2-grids --save` - ## Setup for local environment Follow these steps to set up your local environment. @@ -215,7 +213,7 @@ ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); **Grid styles are not applied:** Ensure that the required Syncfusion theme CDN link is correctly included in `index.html` file. Verify that the CDN links are accessible and loaded before the Data Grid is rendered. -**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. +**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](https://ej2.syncfusion.com/javascript/documentation/licensing/license-key-registration#javascript-es5) section. ## See also diff --git a/ej2-javascript/grid/ts/getting-started.md b/ej2-javascript/grid/ts/getting-started.md index fbb90b73c..e9f21534c 100644 --- a/ej2-javascript/grid/ts/getting-started.md +++ b/ej2-javascript/grid/ts/getting-started.md @@ -68,7 +68,7 @@ npm install ## Adding CSS reference -Themes for Syncfusion® Data Grid components can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation. +Themes for Syncfusion® Data Grid components can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/documentation/appearance/theme) documentation. Install the **Material 3** theme package using the following command: @@ -83,7 +83,7 @@ npm install @syncfusion/ej2-material3-theme --save Then add the following CSS reference to the **src/styles/styles.css** file: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight css tabtitle="styles.css" %} @import "../../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css"; @@ -152,9 +152,9 @@ grid.appendTo('#Grid'); {% endhighlight %} -{% highlight html tabtitle="style.css" %} +{% highlight html tabtitle="styles.css" %} -@import '../../node_modules/@syncfusion/ej2/fluent2.css'; +@import '../../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css'; {% endhighlight %} @@ -191,7 +191,7 @@ registerLicense('YOUR_LICENSE_KEY_HERE'); **Grid styles are not applied:** Ensure that the required Syncfusion theme package is installed and the theme CSS is imported correctly in the `src/styles/styles.css` file. -**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](#registering-a-license-key) section. +**Trial license warning message:** Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the [Registering a license key](https://ej2.syncfusion.com/documentation/licensing/license-key-registration#register-syncfusion-license-key-in-the-project) section. ## See also diff --git a/ej2-javascript/inline-ai-assist/js/es5-getting-started.md b/ej2-javascript/inline-ai-assist/js/es5-getting-started.md index ec92cfbe3..29db867e6 100644 --- a/ej2-javascript/inline-ai-assist/js/es5-getting-started.md +++ b/ej2-javascript/inline-ai-assist/js/es5-getting-started.md @@ -9,9 +9,20 @@ documentation: ug domainurl: ##DomainURL## --- -# ES5 getting started in ##Platform_Name## Inline AI Assist control +# Getting started with JavaScript Inline AI Assist control -The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +This section explains the steps required to create a simple Essential® JS 2 Inline AI Assist and demonstrates the basic usage of the Inline AI Assist control in a JavaScript application. + +## Prerequisites + +Before getting started, ensure the following requirements are met: + +| Requirement | Notes | +|-------------|-------| +| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | +| Code editor | Visual Studio Code is recommended | +| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | +| Syncfusion® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | ## Dependencies @@ -27,6 +38,8 @@ The list of dependencies required to use the Inline AI Assist control in your ap |-- @syncfusion/ej2-popups ``` +> For npm-based projects, install the packages using: `npm install @syncfusion/ej2-interactive-chat --save` + ## Control Initialization The JavaScript (ES5) Inline AI Assist control can be initialized by using either of the following ways. @@ -77,13 +90,13 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin JavaScript (ES5) - - - - - + + + + + - + @@ -113,14 +126,14 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin JavaScript (ES5) - - - - - + + + + + - + @@ -184,6 +197,21 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/inline-ai-assist/gettingstarted" %} +## Registering a license key + +Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. + +**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). + +**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. + +```javascript +// Register Syncfusion license key +ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). + **Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Inline AI Assist** control. ## RelateTo and target configuration @@ -215,3 +243,20 @@ Responses can be shown in two modes: `Inline` (updates content in-place) and `Po {% endtabs %} {% previewsample "page.domainurl/code-snippet/inline-ai-assist/response-mode" %} + +## Troubleshooting + +**Inline AI Assist renders blank / does not load** +- Verify that the container element exists and has a valid ID. +- Open the browser developer console (F12) and check for JavaScript errors. +- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). + +**License validation warning in the console** +- Register your license key before instantiating any Syncfusion® control. + +**Scripts blocked when opening via `file://`** +- Serve the application through a local HTTP server. + +**CDN resources fail to load** +- Check your internet connection. +- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. diff --git a/ej2-javascript/js/getting-started/images/quickstart.png b/ej2-javascript/js/getting-started/images/quickstart.png index c458e8e3053a84cc1508dff664f48ee41c30ae38..81941cf5fc829191236264be417d095d3b29fbff 100644 GIT binary patch literal 27014 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 literal 66249 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® JS 2 for JavaScript (global script) is an ES5-formatted pure JavaScript framework that can be used directly in the latest web browsers. +This section explains the steps required to create a simple Essential® JS 2 Ribbon and demonstrates the basic usage of the Ribbon control in a JavaScript application. + +## Prerequisites + +Before getting started, ensure the following requirements are met: + +| Requirement | Notes | +|-------------|-------| +| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | +| Code editor | Visual Studio Code is recommended | +| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | +| Syncfusion® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | ## Dependencies @@ -30,6 +41,8 @@ The following list of dependencies are required to use the Ribbon control in you |-- @syncfusion/ej2-navigations ``` +> For npm-based projects, install the packages using: `npm install @syncfusion/ej2-ribbon --save` + ## Control Initialization The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. @@ -49,9 +62,9 @@ The Essential® JS 2 JavaScript controls can > > Control Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js` > -> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\tailwind3.css` +> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\bootstrap5.3.css` > -> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\tailwind3.css` +> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\bootstrap5.3.css` **Example:** @@ -59,15 +72,15 @@ The Essential® JS 2 JavaScript controls can > > Control Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\21.1.35\Web (Essential JS 2)\JavaScript\ej2-navigations\dist\global\ej2-navigations.min.js` > -> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\21.1.35\Web (Essential JS 2)\JavaScript\ej2-base\styles\tailwind3.css` +> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\21.1.35\Web (Essential JS 2)\JavaScript\ej2-base\styles\bootstrap5.3.css` > -> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\21.1.35\Web (Essential JS 2)\JavaScript\ej2-navigations\styles\tailwind3.css` +> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\21.1.35\Web (Essential JS 2)\JavaScript\ej2-navigations\styles\bootstrap5.3.css` The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > -> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\tailwind3.css` +> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\bootstrap5.3.css` The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an online web tool, which can be used to generate the custom script and styles for a set of specific controls. This web tool is useful to combine the required control scripts and styles in a single file. @@ -81,16 +94,16 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin Essential JS 2 - Ribbon - - - - - - - - + + + + + + + + - + @@ -243,15 +256,15 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin > > Control Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` > -> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/tailwind3.css` +> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/bootstrap5.3.css` > -> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css` +> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/bootstrap5.3.css` **Example:** > Script: [`https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js`](https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js) > -> Styles: [`https://cdn.syncfusion.com/ej2/ej2-navigations/styles/tailwind3.css`](https://cdn.syncfusion.com/ej2/ej2-navigations/styles/tailwind3.css) +> Styles: [`https://cdn.syncfusion.com/ej2/ej2-navigations/styles/bootstrap5.3.css`](https://cdn.syncfusion.com/ej2/ej2-navigations/styles/bootstrap5.3.css) **Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `Ribbon` element and initiate the **Syncfusion® JavaScript Ribbon** control in the `index.html` by using following code. @@ -263,4 +276,36 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/ribbon/es5-getting-started-cs1" %} +## Registering a license key + +Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. + +**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). + +**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. + +```javascript +// Register Syncfusion license key +ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). + **Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Ribbon** control. + +## Troubleshooting + +**Ribbon renders blank / does not load** +- Verify that the container element exists and has a valid ID. +- Open the browser developer console (F12) and check for JavaScript errors. +- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). + +**License validation warning in the console** +- Register your license key before instantiating any Syncfusion® control. + +**Scripts blocked when opening via `file://`** +- Serve the application through a local HTTP server. + +**CDN resources fail to load** +- Check your internet connection. +- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. diff --git a/ej2-javascript/schedule/ts/getting-started.md b/ej2-javascript/schedule/ts/getting-started.md index 683fb0611..06740c6d4 100644 --- a/ej2-javascript/schedule/ts/getting-started.md +++ b/ej2-javascript/schedule/ts/getting-started.md @@ -230,8 +230,6 @@ scheduleObj.appendTo('#Schedule'); {% endhighlight %} {% endtabs %} -N> Looking for the full JavaScript Scheduler Control overview, features, pricing, and documentation? Visit the [JavaScript Scheduler](https://www.syncfusion.com/javascript-ui-controls/js-scheduler) page. - ## See also * [Explore available views and their customization options](../views.md) diff --git a/ej2-javascript/speech-to-text/js/es5-getting-started.md b/ej2-javascript/speech-to-text/js/es5-getting-started.md index 364ac778b..4949a5414 100644 --- a/ej2-javascript/speech-to-text/js/es5-getting-started.md +++ b/ej2-javascript/speech-to-text/js/es5-getting-started.md @@ -9,9 +9,20 @@ documentation: ug domainurl: ##DomainURL## --- -# ES5 getting started with ##Platform_Name## SpeechToText control +# Getting started with JavaScript SpeechToText control -The Essential JS 2 for JavaScript (global script) is an ES5-formatted pure JavaScript framework that can be used directly in the latest web browsers. +This section explains the steps required to create a simple Essential® JS 2 SpeechToText and demonstrates the basic usage of the SpeechToText control in a JavaScript application. + +## Prerequisites + +Before getting started, ensure the following requirements are met: + +| Requirement | Notes | +|-------------|-------| +| Modern web browser | Chrome, Firefox, Edge, or Safari — latest version recommended | +| Code editor | Visual Studio Code is recommended | +| Local HTTP server | Required to serve the application. Opening HTML files directly via `file://` may block script loading in some browsers. VS Code Live Server extension is recommended | +| Syncfusion® license key | Required from version 16.2.0.17 onwards. Refer to the [Registering a license key](#registering-a-license-key) section | ## Dependencies @@ -24,6 +35,8 @@ The list of dependencies required to use the SpeechToText control in your applic |-- @syncfusion/ej2-popups ``` +> For npm-based projects, install the packages using: `npm install @syncfusion/ej2-inputs --save` + ## Control Initialization The JavaScript (ES5) SpeechToText control can be initialized by using either of the following ways. @@ -42,9 +55,9 @@ The JavaScript (ES5) SpeechToText control can be initialized by using either of > > Control Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js` > -> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\tailwind3.css` +> Dependency Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\bootstrap5.3.css` > -> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\tailwind3.css` +> Control Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\bootstrap5.3.css` **Example:** @@ -52,15 +65,15 @@ The JavaScript (ES5) SpeechToText control can be initialized by using either of > > Control Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-inputs\dist\global\ej2-inputs.min.js` > -> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\tailwind3.css` +> Dependency Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\bootstrap5.3.css` > -> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-inputs\styles\tailwind3.css` +> Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-inputs\styles\bootstrap5.3.css` The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > -> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\tailwind3.css` +> Styles: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\bootstrap5.3.css` The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an online web tool, which can be used to generate the custom script and styles for a set of specific controls. This web tool is useful to combine the required control scripts and styles in a single file. @@ -74,12 +87,12 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin JavaScript (ES5) - - - + + + - + @@ -105,12 +118,12 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin JavaScript (ES5) - - - + + + - + @@ -150,14 +163,14 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin > > Control Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` > -> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/tailwind3.css` +> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/bootstrap5.3.css` > -> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css` +> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/bootstrap5.3.css` **Example:** > Script: [`https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js`](https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js) > -> Styles: [`https://cdn.syncfusion.com/ej2/ej2-inputs/styles/tailwind3.css`](http://cdn.syncfusion.com/ej2/ej2-inputs/styles/tailwind3.css) +> Styles: [`https://cdn.syncfusion.com/ej2/ej2-inputs/styles/bootstrap5.3.css`](http://cdn.syncfusion.com/ej2/ej2-inputs/styles/bootstrap5.3.css) **Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `SpeechToText` element and initiate the `JavaScript (ES5) SpeechToText` control in the index.html by using following code. @@ -169,20 +182,38 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/speech-to-text/getting-started/es5-getting-started-cs1/index" %} +## Registering a license key + +Syncfusion® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. + +**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). + +**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. + +```javascript +// Register Syncfusion license key +ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); +``` + +> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). + **Step 4:** Now, run the `index.html` in web browser, it will render the `Syncfusion JavaScript SpeechToText` control. > The `SpeechToText` control requires an internet connection and using a browser that supports `SpeechRecognition` from the Web Speech API. -## Adding button content +## Troubleshooting -The content of the SpeechToText button can be customized for its active and inactive states. Use the [content](../api/speech-to-text/buttonSettingsModel#content) property to define the text for the start listening state and the [stopContent](../api/speech-to-text/buttonSettingsModel#stopContent) property for the stop listening state. These properties are configured within the [buttonSettings](../api/speech-to-text#buttonSettings) property. +**SpeechToText renders blank / does not load** +- Verify that the container element exists and has a valid ID. +- Open the browser developer console (F12) and check for JavaScript errors. +- Ensure all CDN script tags are loading successfully (check the Network tab for 4xx/5xx errors). -The following example shows how to configure `buttonSettings` in the SpeechToText component. +**License validation warning in the console** +- Register your license key before instantiating any Syncfusion® control. -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/speech-to-text/getting-started/buttonContent/index.html %} -{% endhighlight %} -{% endtabs %} +**Scripts blocked when opening via `file://`** +- Serve the application through a local HTTP server. -{% previewsample "page.domainurl/code-snippet/speech-to-text/getting-started/buttonContent/index" %} +**CDN resources fail to load** +- Check your internet connection. +- Confirm the version number in the CDN URLs matches a valid published release. See the [Syncfusion CDN page](https://cdn.syncfusion.com/ej2/) for available versions. diff --git a/ej2-javascript/speech-to-text/speech-recognition.md b/ej2-javascript/speech-to-text/speech-recognition.md index 39e0b75e1..1b0076e0a 100644 --- a/ej2-javascript/speech-to-text/speech-recognition.md +++ b/ej2-javascript/speech-to-text/speech-recognition.md @@ -106,7 +106,7 @@ The [allowInterimResults](../api/speech-to-text#allowInterimResults) property co ## Managing listening state -The [listeningState](../api/speech-to-text#listeningState) property manages and indicates the component's current status. It can be `Inactive` (idle), `Listening` (actively capturing audio), or `Stopped` (recognition complete). The default state is `Inactive`. +The [listeningState](../api/speech-to-text#listeningState) property manages and indicates the control's current status. It can be `Inactive` (idle), `Listening` (actively capturing audio), or `Stopped` (recognition complete). The default state is `Inactive`. ### Inactive @@ -180,9 +180,39 @@ The [showTooltip](../api/speech-to-text#showTooltip) property determines whether {% previewsample "page.domainurl/code-snippet/speech-to-text/speechRecognition/showTooltip/index" %} {% endif %} +## Adding button content + +The content of the SpeechToText button can be customized for its active and inactive states. Use the [content](../api/speech-to-text/buttonSettingsModel#content) property to define the text for the start listening state and the [stopContent](../api/speech-to-text/buttonSettingsModel#stopcontent) property for the stop listening state. These properties are configured within the [buttonSettings](../api/speech-to-text#buttonSettings) property. + +The following example shows how to configure `buttonSettings` in the SpeechToText control. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/speech-to-text/getting-started/buttonContent/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/speech-to-text/getting-started/buttonContent/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/speech-to-text/getting-started/buttonContent/index" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/speech-to-text/getting-started/buttonContent/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/speech-to-text/getting-started/buttonContent/index" %} +{% endif %} + ## Setting disabled -The [disabled](../api/speech-to-text#disabled) property, when set to `true`, disables the SpeechToText component and prevents user interaction. By default, it is `false`. +The [disabled](../api/speech-to-text#disabled) property, when set to `true`, disables the SpeechToText control and prevents user interaction. By default, it is `false`. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/speech-to-text/ts/getting-started.md b/ej2-javascript/speech-to-text/ts/getting-started.md index 6d9c451e0..f3577a4e2 100644 --- a/ej2-javascript/speech-to-text/ts/getting-started.md +++ b/ej2-javascript/speech-to-text/ts/getting-started.md @@ -11,135 +11,87 @@ domainurl: ##DomainURL## # Getting started with ##Platform_Name## SpeechToText control -This section explains how to create a simple SpeechToText control and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple SpeechToText control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires Node.js `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -## Dependencies +## Prerequisites -The list of dependencies required to use the SpeechToText control in your application is given as follows: +Before getting started, ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-popups -``` - -## Set up development environment +| Tool | Version / Notes | +|------|----------------| +| Node.js | v14.15.0 or higher | +| npm | Bundled with Node.js | +| Git | Required to clone the quickstart repository | +| Visual Studio Code | Recommended code editor | -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +You can verify your Node.js and npm versions by running: -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +```bash +node -v +npm -v +``` -{% endhighlight %} -{% endtabs %} +## Registering the license key -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +Syncfusion® Essential® JS 2 controls require a valid license key from version **16.2.0.41** onwards. Using the controls without a license key will display a **license validation message** in the browser console. -{% tabs %} -{% highlight bash tabtitle="CMD" %} +**Steps to register the license key:** -cd ej2-quickstart +1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. +2. Register the key in your `src/app/app.ts` file, before instantiating any Syncfusion control: -{% endhighlight %} -{% endtabs %} +```ts +import { registerLicense } from '@syncfusion/ej2-base'; -## Add Syncfusion JavaScript packages +registerLicense('YOUR_LICENSE_KEY_HERE'); +``` -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +## Setup for local development -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Clone the Essential® JS 2 quickstart application project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) using the following command line scripts. -npm install +```bash +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack +cd ej2-quickstart-webpack +``` -{% endhighlight %} -{% endtabs %} +## Adding Syncfusion® TypeScript SpeechToText package -## Import the Syncfusion CSS styles +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: +Use the following command to install the `@syncfusion/ej2-inputs` package: ```bash -npm install @syncfusion/ej2-tailwind3-theme --save +npm install @syncfusion/ej2-inputs --save ``` -To render the SpeechToText control, add the below import in the `~/src/styles/styles.css` file which loads all the required dependency styles, as shown below: +Then, install the remaining dependent npm packages using the following command: -```css -@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/speech-to-text/index.css"; +```bash +npm install ``` -## Adding SpeechToText to the application - -Add the HTML input tag with ID attribute as the `element` to your `index.html` file. - -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} - - - - - - Essential JS 2 SpeechToText - - - - - - - +## Adding CSS reference - -

    - -
    - - - - -{% endhighlight %} -{% endtabs %} +Themes for Syncfusion® SpeechToText controls can be applied using CSS files provided through the [npm theme package](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme). Install the Fluent 2 theme package using the following command: -Then, import the SpeechToText control in your `app.ts` file, and initialize it with the `#element`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { SpeechToText } from "@syncfusion/ej2-inputs"; - -// Initializes the SpeechToText control -const speechToText: SpeechToText = new SpeechToText({}); - -// Render initialized SpeechToText. -speechToText.appendTo('#speechtotext_default'); - -{% endhighlight %} -{% endtabs %} - -## Run the application - -Run the application in the browser using the following command. +```bash +npm install @syncfusion/ej2-fluent2-theme --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then add the following CSS reference to the `src/styles/styles.css` file: -npm start +```css +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/speech-to-text/index.css"; +``` -{% endhighlight %} -{% endtabs %} +## Adding SpeechToText control -The following example shows a basic SpeechToText control. +Add the SpeechToText control in `src/app/app.ts` file using the following code. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -154,19 +106,12 @@ The following example shows a basic SpeechToText control. > The `SpeechToText` control requires an internet connection and using a browser that supports `SpeechRecognition` from the Web Speech API. -## Adding button content - -The content of the SpeechToText button can be customized for its active and inactive states. Use the [content](../api/speech-to-text/buttonSettingsModel#content) property to define the text for the start listening state and the [stopContent](../api/speech-to-text/buttonSettingsModel#stopcontent) property for the stop listening state. These properties are configured within the [buttonSettings](../api/speech-to-text#buttonSettings) property. +## Run the application -The following example shows how to configure `buttonSettings` in the SpeechToText component. +The `npm start` command compiles the TypeScript source files and starts the webpack development server. Run the following command: -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/speech-to-text/getting-started/buttonContent/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/speech-to-text/getting-started/buttonContent/index.html %} -{% endhighlight %} -{% endtabs %} +```bash +npm start +``` -{% previewsample "page.domainurl/code-snippet/speech-to-text/getting-started/buttonContent/index" %} +Open `http://localhost:8080` (or the port shown in the terminal) in a browser. You should see a SpeechToText control rendered with the default layout. diff --git a/ej2-javascript/treegrid/js/getting-started.md b/ej2-javascript/treegrid/js/getting-started.md index 8ecd94f7d..e3ae7a021 100644 --- a/ej2-javascript/treegrid/js/getting-started.md +++ b/ej2-javascript/treegrid/js/getting-started.md @@ -36,7 +36,7 @@ To get started with application, ensure the following software to be installed i ## Dependencies -The following packages are required to use the DataGrid with all features. These package names apply to **npm-based projects**. If you are using CDN, all dependencies are automatically included — refer to the [Adding Syncfusion® Tree Grid CDN resources](#adding-syncfusion-tree-grid-cdn-resources) section. +A list of dependencies to use the Tree Grid with all features. ```javascript |-- @syncfusion/ej2-treegrid @@ -68,7 +68,7 @@ Follow these steps to set up your local environment. - **index.html** — the main HTML file that loads the CDN resources and provides the tree grid container element. - **index.js** — the JavaScript file where the DataGrid control is initialized. -Refer to the [Adding Syncfusion® Tree Grid CDN resources](#adding-syncfusion-tree-grid-cdn-resources) and [Adding Tree Grid control](#adding-tree-grid-control) sections below for the content to add to each file. +Refer to the [Adding Syncfusion® Tree Grid CDN resources](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started#adding-syncfusion-tree-grid-cdn-resources) and [Adding Tree Grid control](https://ej2.syncfusion.com/javascript/documentation/treegrid/getting-started#adding-tree-grid-control) sections below for the content to add to each file. **Step 3:** In **index.html**, add a ` - - - - - - - - - - - - - -``` +## Setup for local development -**Step 5:** Now, add the `BlockEditor` element and initiate the `JavaScript (ES5) BlockEditor` control in the `index.html` by using following code - -`[src/index.html]` - -```html - - - - JavaScript (ES5) - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    - - - -``` +Refer to the following steps to set up your local environment. + +**Step 1:** Create an app folder `my-app` for Essential JS 2 JavaScript controls. + +**Step 2:** Create a my-app/resources folder if you want to host local scripts and styles. Otherwise, you can use the CDN URLs shown below directly in the HTML page. + +**Step 3:** Open Visual Studio Code and create `my-app/index.js` and `my-app/index.html` files for initializing the Essential JS 2 Block Editor control. + +## Adding Block Editor styles + +Add the following styles inside the `my-app/index.html` file to include the `tailwind3` theme styles: + +{% tabs %} +{% highlight html tabtitle="index.html" %} + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +I> Ensure that all Block Editor theme style files are loaded in the exact order shown above. The order is important because these styles have dependencies, and loading them incorrectly may cause styling issues in the controls. You can also refer to the [themes section](https://ej2.syncfusion.com/documentation/appearance/theme) for details about built-in themes and CSS references for individual controls. + +## Adding Block Editor scripts + +Add the following scripts inside the `my-app/index.html` file to include the Block Editor functionality: -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion JavaScript (ES5) BlockEditor** control. +{% tabs %} +{% highlight html tabtitle="index.html" %} + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +I> Ensure that all Block Editor script files are loaded in the correct order and included before initializing the control. The order is important because the scripts have dependencies, and loading them incorrectly may prevent the Block Editor from working properly or cause runtime errors. + +Make sure the required base and dependent scripts are included along with the Block Editor script. + +## Adding Block Editor control -## Using CDN link for script and style reference +To get started, add Block Editor control in `index.js` and `index.html` files. -**Step 1:** Create an app folder `quickstart` for getting started. +Block Editor can be initialized on a div element as shown below -**Step 2:** The JavaScript (ES5) control's global scripts and styles are already hosted in the below CDN link formats. +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/block-editor/getting-started/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/block-editor/getting-started/index.html %} +{% endhighlight %} +{% endtabs %} -**Syntax:** -> Dependency Script: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> -> Control Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> -> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/tailwind3.css` -> -> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/tailwind3.css` +## Run the application -**Example:** -> Script: [`https://cdn.syncfusion.com/ej2/ej2-blockeditor/dist/global/ej2-blockeditor.min.js`](https://cdn.syncfusion.com/ej2/ej2-blockeditor/dist/globalej2-blockeditor.min.js) -> -> Styles: [`https://cdn.syncfusion.com/ej2/ej2-blockeditor/styles/tailwind3.css`](http://cdn.syncfusion.com/ej2/ej2-blockeditor/styles/tailwind3.css) +Now, run the index.html in web browser, it will render the Essential JS 2 Rich Text Editor control. -**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `BlockEditor` element and initiate the `JavaScript (ES5) BlockEditor` control in the index.html by using following code. +Output will be displayed as follows. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -195,4 +115,4 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/block-editor/getting-started" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Syncfusion JavaScript BlockEditor` control. \ No newline at end of file +> You can refer to our [JavaScript Block Editor](https://www.syncfusion.com/rich-text-editor-sdk/javascript-block-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Block Editor example](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/block-editor/overview.html) that shows how to render the block editor. diff --git a/ej2-javascript/block-editor/ts/getting-started.md b/ej2-javascript/block-editor/ts/getting-started.md index 68b86a51a..b4d10270c 100644 --- a/ej2-javascript/block-editor/ts/getting-started.md +++ b/ej2-javascript/block-editor/ts/getting-started.md @@ -11,102 +11,97 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## BlockEditor control -This section explains how to create a simple BlockEditor control and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps to create a simple Block Editor and demonstrates the basic usage of the Block Editor control using a Vite-based TypeScript project scaffolded with latest vite version. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +## Prerequisites -## Dependencies +This guide uses Vite as the bundler and development environment. Install Node.js 24.13.0 or higher before proceeding. For detailed information about Vite’s capabilities and configuration options, refer to the [Vite documentation](https://vitejs.dev/). -The list of dependencies required to use the BlockEditor control in your application is given as follows: +## Create a TypeScript application -```javascript -|-- @syncfusion/ej2-blockeditor - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-inputs +To set up a TypeScript application in a TypeScript environment, run the following command. + +```bash +npm create vite@latest my-app -- --template vanilla-ts ``` +This command will prompt you to install the required packages and start the application. Select the options as shown below. -## Set up development environment +![Block Editor Initial setup](../images/svelte-ts/vite-vanilla-ts-setup.png) -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +As Syncfusion packages are not installed yet, currently, the `No` option will be selected. Then, navigate to the project directory and install the dependencies using the following commands: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +```bash +cd my-app +npm install +``` -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Adding Syncfusion® Block Editor packages -{% endhighlight %} -{% endtabs %} +All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. +To install Block Editor component, use the following command -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +```bash +npm install @syncfusion/ej2-blockeditor +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Adding CSS reference -cd ej2-quickstart +Syncfusion provides multiple themes for the Block Editor control. For a complete list of available themes, refer to the [themes packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). -{% endhighlight %} -{% endtabs %} - -## Add Syncfusion JavaScript packages +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +```bash +npm install @syncfusion/ej2-tailwind3-theme --save +``` -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Then add the following CSS reference to the `src/style.css` file: -{% tabs %} -{% highlight bash tabtitle="NPM" %} +```css +@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css"; +``` -npm install +I> To apply the application-specific styles correctly, import `./style.css` into **src/main.ts**, remove the default Vite styles from **src/style.css**, and keep the Block Editor styles shown above. You can also refer to the [themes section](https://ej2.syncfusion.com/documentation/appearance/theme) for details about built-in themes and CSS references for individual controls. -{% endhighlight %} -{% endtabs %} +## Adding Block Editor control -## Import the Syncfusion CSS styles +To get started, add the Block Editor control in main.ts and index.html files. Block Editor can be initialized through a div element. -To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: +Output will be displayed as follows -```bash -npm install @syncfusion/ej2-tailwind3-theme --save -``` +{% tabs %} +{% highlight ts tabtitle="main.ts" %} -To render the BlockEditor control, add the below import in the `~/src/styles/styles.css` file which loads all the required dependency styles, as shown below: +import './style.css'; +import { BlockEditor } from '@syncfusion/ej2-blockeditor'; -```css -@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css"; -``` +const blockEditor: BlockEditor = new BlockEditor({}); +blockEditor.appendTo('#blockeditor_default'); +{% endhighlight %} -## Adding BlockEditor to the Application +{% highlight css tabtitle="style.css" %} -Add the HTML input tag with ID attribute as the `element` to your `index.html` file. +@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css"; -`[src/index.html]` +{% endhighlight %} -{% tabs %} {% highlight html tabtitle="index.html" %} - Essential JS 2 BlockEditor - - - - - - + + + + Syncfusion Typescript Block Editor
    + @@ -114,45 +109,13 @@ Add the HTML input tag with ID attribute as the `element` to your `index.html` f {% endhighlight %} {% endtabs %} -Then, import the BlockEditor control in your `app.ts` file, and initialize it with the `#element`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { BlockEditor } from "@syncfusion/ej2-blockeditor"; - -// Initializes the BlockEditor control -const blockEditor: BlockEditor = new BlockEditor({}); - -// Render initialized BlockEditor. -blockEditor.appendTo('#blockeditor_default'); - -{% endhighlight %} -{% endtabs %} +{% previewsample "page.domainurl/code-snippet/block-editor/getting-started" %} ## Run the application -Run the application in the browser using the following command. +Use the following command to run the application in the browser. -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic BlockEditor control. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/block-editor/getting-started/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/block-editor/getting-started/index.html %} -{% endhighlight %} -{% endtabs %} +```bash +npm run dev +``` -{% previewsample "page.domainurl/code-snippet/block-editor/getting-started" %} \ No newline at end of file diff --git a/ej2-javascript/breadcrumb/ts/getting-started.md b/ej2-javascript/breadcrumb/ts/getting-started.md index 9c6028e1a..3a1e9c695 100644 --- a/ej2-javascript/breadcrumb/ts/getting-started.md +++ b/ej2-javascript/breadcrumb/ts/getting-started.md @@ -65,23 +65,32 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -To render Breadcrumb component, need to import navigations and its dependent components styles as given below in the `~/src/styles/styles.css` file, as shown below: +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="styles.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-lists/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). + ## Adding Breadcrumb component to the application Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. diff --git a/ej2-javascript/button-group/getting-started.md b/ej2-javascript/button-group/getting-started.md index d690412f0..c0acd80f7 100644 --- a/ej2-javascript/button-group/getting-started.md +++ b/ej2-javascript/button-group/getting-started.md @@ -59,23 +59,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add ButtonGroup to the project diff --git a/ej2-javascript/button/ts/getting-started.md b/ej2-javascript/button/ts/getting-started.md index 331b09499..d49cad85f 100644 --- a/ej2-javascript/button/ts/getting-started.md +++ b/ej2-javascript/button/ts/getting-started.md @@ -62,21 +62,32 @@ npm install > You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). + ## Adding Button component Add the HTML Button tag with id attribute as the `element` to your `index.html` file. diff --git a/ej2-javascript/card/ts/getting-started.md b/ej2-javascript/card/ts/getting-started.md index 1088b69ba..8e228ed0c 100644 --- a/ej2-javascript/card/ts/getting-started.md +++ b/ej2-javascript/card/ts/getting-started.md @@ -59,19 +59,32 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -The Card CSS files are available in the `ej2-layouts` package folder. This can be referenced in the `~/src/styles/styles.css` file of your application using the following code. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/fluent2.css'; -@import '../../node_modules/@syncfusion/ej2-layouts/styles/fluent2.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). + ## Adding a simple Card * Add the HTML `div` element with `e-card` class into your `index.html`. diff --git a/ej2-javascript/carousel/ts/getting-started.md b/ej2-javascript/carousel/ts/getting-started.md index db62d5605..369e73b48 100644 --- a/ej2-javascript/carousel/ts/getting-started.md +++ b/ej2-javascript/carousel/ts/getting-started.md @@ -61,20 +61,32 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -To render Carousel component, need to import navigations and its dependent components styles as given below in the `~/src/styles/styles.css` file, as shown below: +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="styles.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). + ## Adding Carousel component to the application Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. diff --git a/ej2-javascript/check-box/ts/getting-started.md b/ej2-javascript/check-box/ts/getting-started.md index 84ed1a161..aa0e48394 100644 --- a/ej2-javascript/check-box/ts/getting-started.md +++ b/ej2-javascript/check-box/ts/getting-started.md @@ -60,22 +60,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS Styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add CheckBox to the project diff --git a/ej2-javascript/chips/ts/getting-started.md b/ej2-javascript/chips/ts/getting-started.md index e444692f2..cdf10df96 100644 --- a/ej2-javascript/chips/ts/getting-started.md +++ b/ej2-javascript/chips/ts/getting-started.md @@ -60,22 +60,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS Styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add Chip to the project diff --git a/ej2-javascript/code-snippet/gantt/databinding-cs11/index.js b/ej2-javascript/code-snippet/gantt/databinding-cs11/index.js index c31227c9c..1e583dc4c 100644 --- a/ej2-javascript/code-snippet/gantt/databinding-cs11/index.js +++ b/ej2-javascript/code-snippet/gantt/databinding-cs11/index.js @@ -1,10 +1,7 @@ -var emptyRecordTemplate = function () { - return '
    There is no data available to display at the moment.
    '; -}; - var ganttChart = new ej.gantt.Gantt({ dataSource: [], height: '450px', + emptyRecordTemplate: '#emptyRecordTemplate', taskFields: { id: 'TaskID', name: 'TaskName', @@ -12,13 +9,12 @@ var ganttChart = new ej.gantt.Gantt({ endDate: 'EndDate', duration: 'Duration', progress: 'Progress', - dependency: 'Predecessor', - parentID: 'ParentID', - resourceInfo: 'resources' + parentID: 'ParentID' + }, + splitterSettings: { + columnIndex: 3 }, - created: function () { - this.treeGrid.grid.emptyRecordTemplate = emptyRecordTemplate; - } + }); ganttChart.appendTo('#Gantt'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/databinding-cs11/index.ts b/ej2-javascript/code-snippet/gantt/databinding-cs11/index.ts index e018fb4c0..59e70addd 100644 --- a/ej2-javascript/code-snippet/gantt/databinding-cs11/index.ts +++ b/ej2-javascript/code-snippet/gantt/databinding-cs11/index.ts @@ -1,12 +1,9 @@ import { Gantt } from '@syncfusion/ej2-gantt'; -let emptyRecordTemplate: any = () => { - return '
    There is no data available to display at the moment.
    '; -}; - let gantt: Gantt = new Gantt({ dataSource: [], height: '450px', + emptyRecordTemplate: '#emptyRecordTemplate', taskFields: { id: 'TaskID', name: 'TaskName', @@ -14,13 +11,12 @@ let gantt: Gantt = new Gantt({ endDate: 'EndDate', duration: 'Duration', progress: 'Progress', - dependency: 'Predecessor', - parentID: 'ParentID', - resourceInfo: 'resources' + parentID: 'ParentID' }, - created: function (this: Gantt): void { - (this as any).treeGrid.grid.emptyRecordTemplate = emptyRecordTemplate; + splitterSettings: { + columnIndex: 3 } + }); gantt.appendTo('#Gantt'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/databinding-cs11/js/index.html b/ej2-javascript/code-snippet/gantt/databinding-cs11/js/index.html index 492a48005..28eeab560 100644 --- a/ej2-javascript/code-snippet/gantt/databinding-cs11/js/index.html +++ b/ej2-javascript/code-snippet/gantt/databinding-cs11/js/index.html @@ -8,8 +8,8 @@ - - + + @@ -23,6 +23,11 @@ ele.style.visibility = "visible"; } + + + diff --git a/ej2-javascript/code-snippet/gantt/databinding-cs11/systemjs.config.js b/ej2-javascript/code-snippet/gantt/databinding-cs11/systemjs.config.js index f91edce14..ba212152e 100644 --- a/ej2-javascript/code-snippet/gantt/databinding-cs11/systemjs.config.js +++ b/ej2-javascript/code-snippet/gantt/databinding-cs11/systemjs.config.js @@ -10,7 +10,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/34.1.29/" }, map: { main: "index.ts", diff --git a/ej2-javascript/code-snippet/gantt/databinding-cs11/ts/index.html b/ej2-javascript/code-snippet/gantt/databinding-cs11/ts/index.html new file mode 100644 index 000000000..ac731d438 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/databinding-cs11/ts/index.html @@ -0,0 +1,29 @@ + + + + + EJ2 Gantt + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/datasource.ts b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/datasource.ts new file mode 100644 index 000000000..6c54f3114 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/datasource.ts @@ -0,0 +1,20 @@ +export let GanttData: Object[] =[ + { + TaskID: 1, + TaskName: 'Project Initiation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 90 }, + { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 40 }, + { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 10 }, + { + TaskID: 5, + TaskName: 'Project Estimation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 85 }, + { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 15 }, + { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 70 } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/es5-datasource.js b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/es5-datasource.js new file mode 100644 index 000000000..acc740cd8 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/es5-datasource.js @@ -0,0 +1,20 @@ +var GanttData = [ + { + TaskID: 1, + TaskName: 'Project Initiation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 90 }, + { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 40 }, + { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 10 }, + { + TaskID: 5, + TaskName: 'Project Estimation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 85 }, + { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 15 }, + { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 70 } +]; diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.css b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.css new file mode 100644 index 000000000..e7bcf086c --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.css @@ -0,0 +1,23 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + height: 350px; +} + +#container #Gantt{ + height:450px; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.js b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.js new file mode 100644 index 000000000..a490c2c43 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.js @@ -0,0 +1,56 @@ +var clickHandler = function (args) { + if (args.item.id === 'GanttExport_pdfexport') { + var exportProperties = { + header: { + fromTop: 100, + height: 120, + contents: [ + { + type: 'Text', + value: exportToPDF(), + position: { x: 80, y: 50 }, + style: { textBrushColor: '#C25050', fontSize: 20 }, + }, + ], + }, + footer: { + fromBottom: 0, + height: 0, + contents: [], + }, + }; + ganttChart.pdfExport(exportProperties); + } +}; + +function exportToPDF() { + // Get the form elements + var form = document.getElementById('formComponent'); + + var name = form.elements.namedItem('name').value; + var email = form.elements.namedItem('email').value; + var message = form.elements.namedItem('message').value; + + // Return the form data as a string + return `Name: ${name}\nEmail: ${email}\nMessage: ${message}`; +} + +var ganttChart = new ej.gantt.Gantt({ + dataSource: GanttData, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + duration: 'Duration', + progress: 'Progress', + parentID: 'ParentID', + }, + treeColumnIndex: 1, + allowPdfExport: true, + gridLines: 'Both', + toolbar: ['PdfExport'], + toolbarClick: clickHandler, +}); + +ganttChart.appendTo('#GanttExport'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.ts b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.ts new file mode 100644 index 000000000..a0a69b89b --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/index.ts @@ -0,0 +1,68 @@ +import { + Gantt, + Toolbar, + PdfExport, + PdfExportProperties +} from '@syncfusion/ej2-gantt'; + +import { GanttData } from './datasource.ts'; +import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar'; + +Gantt.Inject(Toolbar, PdfExport); + +let clickHandler = (args: ClickEventArgs) => { + if (args.item.id === 'GanttExport_pdfexport') { + let exportProperties: PdfExportProperties = { + header: { + fromTop: 100, + height: 120, + contents: [ + { + type: 'Text', + value: exportToPDF(), + position: { x: 80, y: 50 }, + style: { textBrushColor: '#C25050', fontSize: 20 }, + }, + ], + }, + footer: { + fromBottom: 0, + height: 0, + contents: [], + }, + }; + ganttChart.pdfExport(exportProperties); + } +}; + +function exportToPDF() { + // Get the form elements + const form: HTMLFormElement = document.getElementById('formComponent') as HTMLFormElement; + + const name: string = (form.elements.namedItem('name') as HTMLInputElement).value; + const email: string = (form.elements.namedItem('email') as HTMLInputElement).value; + const message:string = (form.elements.namedItem('message') as HTMLInputElement).value; + + // Return the form data as a string + return `Name: ${name}\nEmail: ${email}\nMessage: ${message}`; +} + +let gantt: Gantt = new Gantt({ + dataSource: GanttData, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + duration: 'Duration', + progress: 'Progress', + parentID: 'ParentID', + }, + treeColumnIndex: 1, + allowPdfExport: true, + gridLines: 'Both', + toolbar: ['PdfExport'], + toolbarClick: clickHandler, +}); + +gantt.appendTo('#GanttExport'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/js/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/js/index.html new file mode 100644 index 000000000..72633b6a4 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/js/index.html @@ -0,0 +1,49 @@ + + + + EJ2 Gantt + + + + + + + + + + + + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/systemjs.config.js b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/systemjs.config.js new file mode 100644 index 000000000..f91edce14 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/systemjs.config.js @@ -0,0 +1,49 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js" + + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/ts/index.html b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/ts/index.html new file mode 100644 index 000000000..8579e47ee --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/pdf-export-form-cs18/ts/index.html @@ -0,0 +1,46 @@ + + + + + EJ2 Gantt + + + + + + + + + + + +
    Loading....
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/datasource.ts b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/datasource.ts new file mode 100644 index 000000000..c4792fcab --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/datasource.ts @@ -0,0 +1,29 @@ +export let GanttData: Object[] = [ + { + TaskID: 1, + TaskName: 'Project Initiation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 90, resources: [{ resourceId: 2, resourceUnit: 50 }] }, + { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 40 }, + { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 10, resources: [{ resourceId: 3, resourceUnit: 100 }] }, + { + TaskID: 5, + TaskName: 'Project Estimation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 85, resources: [{ resourceId: 6, resourceUnit: 70 }] }, + { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 15, resources: [{ resourceId: 4, resourceUnit: 60 }] }, + { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 70, resources: [{ resourceId: 5, resourceUnit: 40 }] } +]; + +export let ProjectResources: object[] = [ + { resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team', resourceUnit: 50}, + { resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team', resourceUnit: 70 }, + { resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' }, + { resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' }, + { resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' }, + { resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team', resourceUnit: 40 }, +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/es5-datasource.js b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/es5-datasource.js new file mode 100644 index 000000000..8f6df4ea7 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/es5-datasource.js @@ -0,0 +1,29 @@ +var GanttData = [ + { + TaskID: 1, + TaskName: 'Project Initiation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 90, resources: [{ resourceId: 2, resourceUnit: 50 }] }, + { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 40 }, + { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID:1, Progress: 10, resources: [{ resourceId: 3, resourceUnit: 100 }] }, + { + TaskID: 5, + TaskName: 'Project Estimation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 85, resources: [{ resourceId: 6, resourceUnit: 70 }] }, + { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 15, resources: [{ resourceId: 4, resourceUnit: 60 }] }, + { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID:5, Progress: 70, resources: [{ resourceId: 5, resourceUnit: 40 }] } +]; + +var ProjectResources = [ + { resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team', resourceUnit: 50}, + { resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team', resourceUnit: 70 }, + { resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' }, + { resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' }, + { resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' }, + { resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team', resourceUnit: 40 }, +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.css b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.css new file mode 100644 index 000000000..e7bcf086c --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.css @@ -0,0 +1,23 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + height: 350px; +} + +#container #Gantt{ + height:450px; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.html b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.html new file mode 100644 index 000000000..492a48005 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.html @@ -0,0 +1,29 @@ + + + + + EJ2 Gantt + + + + + + + + + + + +
    +
    +
    + + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.js b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.js new file mode 100644 index 000000000..b7ea1af9d --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.js @@ -0,0 +1,69 @@ +var ganttChart = new ej.gantt.Gantt({ + height: '450px', + dataSource: GanttData, + treeColumnIndex: 1, + projectStartDate: new Date('03/25/2019'), + projectEndDate: new Date('04/28/2019'), + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + resourceInfo: 'resources', + parentID: 'ParentID' + }, + editSettings: { + allowEditing: true + }, + labelSettings: { + leftLabel: 'TaskName', + rightLabel: 'resources' + }, + splitterSettings: { + columnIndex: 3 + }, + resourceFields: { + id: 'resourceId', + name: 'resourceName', + unit: 'Unit' + }, + editDialogFields: [ + { type: 'Resources'} + ], + resources: ProjectResources, + columns: [ + { field: 'TaskID', width: 70 }, + { field: 'TaskName', headerText: 'Task Name', width: 220 }, + { field: 'resources', headerText: 'Resources', width: 160 }, + { field: 'Duration', width: 100 } + ], + + actionBegin(args) { + if (args.requestType == 'beforeOpenEditDialog') { + // Remove the checkbox column from the Resources tab. + args.Resources.columns.splice(0, 1); + // Disable resource selection for a specific task. + if (args.rowData.TaskID == 3) { + args.Resources.allowSelection = false; + } + } + }, + actionComplete(args) { + if (args.requestType == 'openEditDialog') { + // Get the Resources tab instance. + var tabObj = document.getElementById('Gantt_Tab').ej2_instances[0]; + // Get the resource Grid instance from the Resources tab. + var gridObj = document.getElementById('GanttResourcesTabContainer_gridcontrol').ej2_instances[0]; + // Configure the resource grid to allow only a single selection. + gridObj.selectionSettings = { + checkboxOnly: false, + type: 'Single', + persistSelection: false + }; + } + } +}); + +ganttChart.appendTo('#Gantt'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.ts b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.ts new file mode 100644 index 000000000..f3549b6fc --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/index.ts @@ -0,0 +1,72 @@ +import { Gantt, Selection, Edit } from '@syncfusion/ej2-gantt'; +import { Grid, SelectionSettingsModel } from '@syncfusion/ej2-grids'; +import { GanttData, ProjectResources } from './datasource.ts'; + +Gantt.Inject(Selection, Edit); + +let gantt: Gantt = new Gantt({ + height: '450px', + dataSource: GanttData, + treeColumnIndex: 1, + projectStartDate: new Date('03/25/2019'), + projectEndDate: new Date('04/28/2019'), + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + endDate: 'EndDate', + duration: 'Duration', + progress: 'Progress', + resourceInfo: 'resources', + parentID: 'ParentID' + }, + editSettings: { + allowEditing: true + }, + labelSettings: { + leftLabel: 'TaskName', + rightLabel: 'resources' + }, + resourceFields: { + id: 'resourceId', + name: 'resourceName', + unit: 'Unit' + }, + splitterSettings: { + columnIndex: 3 + }, + editDialogFields: [ + { type: 'Resources'} + ], + resources: ProjectResources, + columns: [ + { field: 'TaskID', width: 70 }, + { field: 'TaskName', headerText: 'Task Name', width: 220 }, + { field: 'resources', headerText: 'Resources', width: 160 }, + { field: 'Duration', width: 100 } + ], + actionBegin(args: any) { + if (args.requestType == 'beforeOpenEditDialog') { + // Remove the checkbox column from the Resources tab. + args.Resources.columns.splice(0, 1); + // Disable resource selection for a specific task. + if (args.rowData.TaskID == 3) { + args.Resources.allowSelection = false; + } + } + }, + actionComplete(args: any) { + if (args.requestType == 'openEditDialog') { + // Get the resource Grid instance from the Resources tab. + let gridObj: Grid = (document.getElementById('GanttResourcesTabContainer_gridcontrol') as any).ej2_instances[0]; + // Configure the resource grid to allow only a single selection. + gridObj.selectionSettings = { + checkboxOnly: false, + type: 'Single', + persistSelection: false + } as SelectionSettingsModel; + } + } +}); + +gantt.appendTo('#Gantt'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/material.css b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/material.css new file mode 100644 index 000000000..4d2452d0a --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/material.css @@ -0,0 +1,1812 @@ +@import url("https://fonts.googleapis.com/css?family=Roboto:400,500"); +.e-ddl.e-control-wrapper .e-ddl-icon::before { + transform: rotate(0deg); + transition: transform 300ms ease; +} + +.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before { + transform: rotate(180deg); + transition: transform 300ms ease; +} + +.e-dropdownbase .e-list-item.e-active.e-hover { + color: #e3165b; +} + +.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active, +.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover, +.e-input-group:not(.e-disabled) .e-back-icon:active, +.e-input-group:not(.e-disabled) .e-back-icon:hover, +.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active, +.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover { + background: transparent; +} + +.e-input-group .e-ddl-icon:not(:active)::after { + animation: none; +} + +.e-ddl.e-popup { + border: 0; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); + margin-top: 2px; +} + +.e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) { + border-color: #e0e0e0; +} + +.e-bigger .e-popup.e-ddl-device-filter { + margin-top: 0; +} + +.e-bigger .e-ddl-device .e-input-group, +.e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) { + background: #f5f5f5; + border-width: 0; + box-shadow: none; + margin-bottom: 0; +} + +.e-bigger .e-ddl-device .e-input-group .e-back-icon, +.e-bigger .e-ddl-device .e-input-group input.e-input, +.e-bigger .e-ddl-device .e-input-group .e-clear-icon { + background-color: #f5f5f5; +} + +.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon { + margin: 6px 6px 5px; + min-height: 12px; + min-width: 12px; + padding: 6px; +} + +.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon { + min-height: 16px; + min-width: 16px; +} + +.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter { + padding: 8px 16px 8px 0; +} + +.e-input-group.e-ddl, +.e-input-group.e-ddl .e-input, +.e-input-group.e-ddl .e-ddl-icon { + background: transparent; +} + +.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left), +.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) { + border-bottom-width: 0; +} + +.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon, +.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, +.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon, +.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon { + margin: 0; +} + +.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter, +.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter, +.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter, +.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter { + padding: 5px 5px 5px 12px; +} + +.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon, +.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon, +.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon, +.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon { + min-height: 18px; + min-width: 18px; +} + +.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter, +.e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter, +.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter, +.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter { + padding: 8px 16px; +} + +/*! component's theme wise override definitions and variables */ +@keyframes tbar-popup-shadow { + 0% { + border-color: rgba(255, 255, 255, 0.5); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); + } + 100% { + box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.12); + } +} + +/*! Material theme definition's */ +/*! component's theme wise override definitions and variables */ +/*! Horizontal Tab */ +@keyframes tbar-alt-popup-shadow { + 0% { + border-color: rgba(0, 0, 0, 0.12); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12); + } + 100% { + box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12); + } +} + +@keyframes hscroll-alt-popup-shadow { + 0% { + border-color: rgba(0, 0, 0, 0.12); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.12); + } + 100% { + box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.12); + } +} + +/*! Material specific themes definition's */ +/*! Vertical Tab */ +@keyframes e-input-ripple { + 100% { + opacity: 0; + transform: scale(4); + } +} + +@keyframes material-spinner-rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes fabric-spinner-rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/*! component's default definitions and variables */ +.e-gantt .e-add::before { + content: '\e7f9'; +} + +.e-gantt .e-edit::before { + content: '\e81e'; +} + +.e-gantt .e-delete::before { + content: '\e84e'; +} + +.e-gantt .e-cancel::before { + content: '\e825'; +} + +.e-gantt .e-save::before { + content: '\e98e'; +} + +.e-gantt .e-update::before { + content: '\e735'; +} + +.e-gantt .e-search-icon::before { + content: '\e993'; +} + +.e-gantt .e-cancel-icon::before { + content: '\e825'; +} + +.e-gantt .e-notes-info::before { + content: '\1F6C8'; +} + +.e-gantt .e-left-resize-gripper::before, +.e-gantt .e-right-resize-gripper::before { + content: '\ec16'; +} + +.e-gantt .e-expandall::before { + content: '\e556'; +} + +.e-gantt .e-collapseall::before { + content: '\e554'; +} + +.e-gantt .e-prevtimespan::before { + content: '\e85b'; +} + +.e-gantt .e-nexttimespan::before { + content: '\e85f'; +} + +.e-gantt .e-zoomin::before { + content: '\e349'; +} + +.e-gantt .e-zoomout::before { + content: '\e351'; +} + +.e-gantt .e-zoomtofit::before { + content: '\e657'; +} + +.e-gantt .e-csvexport::before { + content: '\e241'; +} + +.e-gantt .e-excelexport::before { + content: '\e242'; +} + +.e-gantt .e-pdfexport::before { + content: '\e240'; +} + +.e-gantt .e-add-above::before { + content: '\e658'; +} + +.e-gantt .e-add-below::before { + content: '\e659'; +} + +.e-gantt.e-device .e-backarrowspan::before, +.e-gantt.e-device .e-icon-dlg-close::before { + content: '\e85b'; +} + +.e-gantt.e-device .e-left-resize-gripper::before, +.e-gantt.e-device .e-right-resize-gripper::before { + content: '\e903'; +} + +.e-gantt { + display: block; + width: 100%; +} + +.e-gantt .e-cloneproperties { + padding: 4px 5px; +} + +.e-gantt .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before { + left: -5px; + position: relative; +} + +.e-gantt .e-cloneproperties { + border-style: solid; + border-width: 1px; + box-shadow: 0 0; + font-size: 12px; + font-weight: 500; + opacity: 1; + overflow: hidden; + padding: 4px 5px; + text-align: center; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + z-index: 100; +} + +.e-gantt .e-cloneproperties.e-draganddrop { + border-spacing: 0; + font-size: 12px; + font-weight: normal; + overflow: visible; +} + +.e-gantt .e-cloneproperties .e-bothganttlines { + border-width: 1px 0 0 1px; +} + +.e-gantt .e-draganddrop { + border-width: 0 1px 1px; + font-weight: normal; + padding: 0; +} + +.e-gantt .e-draganddrop .e-rowcell { + opacity: .95; +} + +.e-gantt .e-cloneproperties.e-draganddrop table { + border-spacing: 0; +} + +.e-gantt .e-icons.e-errorelem { + display: inline-block; + padding-left: 10px; + vertical-align: middle; +} + +.e-gantt .e-errorelem::before { + color: #e3165b; + content: '\e22a'; + transform: rotate(180deg); +} + +.e-gantt .e-verticallines .e-cloneproperties.e-draganddrop .e-rowdragdrop, +.e-gantt .e-bothlines .e-cloneproperties.e-draganddrop .e-rowdragdrop { + border-bottom: 0; + border-right: 1px solid #e0e0e0; + border-top: 1px solid #e0e0e0; +} + +.e-gantt .e-gantt-toolbar { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-style: solid; + border-width: 1px 1px 0; +} + +.e-gantt .e-flmenu-valuediv { + padding-top: 24px; +} + +.e-gantt .e-gantt-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar { + margin: 0; +} + +.e-gantt .e-gantt-splitter .e-pane { + overflow: hidden !important; +} + +.e-gantt .e-temp-content { + border-left: 1px solid; +} + +.e-gantt .e-tab { + border: 0; +} + +.e-gantt .e-tab .e-tab-header .e-toolbar-item.e-active { + border-color: transparent; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header { + padding-left: 0px; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator { + display: block; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap { + border-style: solid; + border-width: 0px; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header:not(.e-vertical)::before { + border: 0; +} + +.e-gantt .e-gantt-tree-grid-pane .e-grid { + border-width: 0; +} + +.e-gantt .e-gantt-tree-grid-pane .e-grid.e-gridhover tr[role='row']:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), +.e-gantt .e-gantt-tree-grid-pane .e-grid.e-gridhover tr[role='row']:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), +.e-gantt .e-gantt-tree-grid-pane .e-grid.e-gridhover tr[role='row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), +.e-gantt .e-gantt-tree-grid-pane .e-grid.e-rtl .e-gridhover tr[role='row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), +.e-gantt .e-gantt-tree-grid-pane .e-grid.e-gridhover tr[role='row']:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) { + background-color: transparent; +} + +.e-gantt .e-gantt-tree-grid-pane .e-gantt-temp-header { + border-bottom-style: solid; + border-bottom-width: 1px; + height: 45px; +} + +.e-gantt .e-gantt-tree-grid-pane .e-headercontent { + border-right-width: 0 !important; +} + +.e-gantt .e-gantt-tree-grid-pane .e-gridheader { + border-top-style: none; + border-top-width: 0; + padding-right: 0 !important; +} + +.e-gantt .e-gantt-tree-grid-pane .e-columnheader, +.e-gantt .e-gantt-tree-grid-pane .e-headercell { + height: 63px !important; +} + +.e-gantt .e-gantt-tree-grid-pane .e-gridcontent .e-content { + overflow-x: scroll !important; +} + +.e-gantt .e-gantt-tree-grid-pane .e-gridcontent .e-content.e-gantt-scroll-padding { + width: calc(100% + 17px); +} + +.e-gantt .e-gantt-tree-grid-pane .e-ganttnotes-info { + text-align: center; +} + +.e-gantt .e-gantt-tree-grid-pane .e-icons.e-notes-info { + display: inline-block; + font-size: 18px; + height: 15px; + line-height: 10px; + vertical-align: middle; +} + +.e-gantt .e-gantt-chart { + height: 100%; + overflow: hidden; + position: relative; + width: 100%; +} + +.e-gantt .e-gantt-chart .e-chart-root-container { + border-right: 0 solid; +} + +.e-gantt .e-gantt-chart .e-chart-root-container .e-content { + -webkit-overflow-scrolling: touch; + overflow-x: scroll; + overflow-y: auto; + position: relative; +} + +.e-gantt .e-gantt-chart .e-chart-root-container .e-nonworking-day-container { + position: absolute; +} + +.e-gantt .e-gantt-chart .e-chart-root-container .e-event-markers-container { + position: absolute; +} + +.e-gantt .e-gantt-chart .e-chart-root-container .e-holiday-container { + position: absolute; +} + +.e-gantt .e-gantt-chart .e-chart-root-container .e-weekend-container { + position: absolute; +} + +.e-gantt .e-gantt-chart .e-timeline-header-container { + border-bottom-style: solid; + border-right-width: 0; + overflow: hidden; + position: relative; + z-index: 6; +} + +.e-gantt .e-gantt-chart .e-timeline-header-table-container > thead > tr > th { + border-left: 0; + padding: 0 3px; +} + +.e-gantt .e-gantt-chart .e-timeline-header-table-container { + border-collapse: collapse; + border-spacing: 0; + border-width: 0; + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.e-gantt .e-gantt-chart .e-timeline-header-table-body { + border-collapse: collapse; + box-sizing: border-box; + display: inline-block; + white-space: nowrap; + zoom: 1; +} + +.e-gantt .e-gantt-chart .e-timeline-top-header-cell, +.e-gantt .e-gantt-chart .e-timeline-single-header-cell { + border-spacing: 0; + border-style: solid; + border-top: 0; + border-width: 1px; + box-sizing: border-box; + display: -ms-inline-flexbox; + display: inline-flex; + font-size: 12px; + font-weight: 500; + margin: 0; + padding: 0; + position: static; + text-align: center; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + white-space: nowrap; +} + +.e-gantt .e-gantt-chart .e-timeline-top-header-cell .e-header-cell-label, +.e-gantt .e-gantt-chart .e-timeline-single-header-cell .e-header-cell-label { + box-sizing: border-box; + margin: auto; + overflow: hidden; + position: static; + text-overflow: ellipsis; + white-space: nowrap; +} + +.e-gantt .e-gantt-chart .e-timeline-top-header-cell .e-gantt-top-cell-text, +.e-gantt .e-gantt-chart .e-timeline-single-header-cell .e-gantt-top-cell-text { + padding-left: 8px; + text-align: left; +} + +.e-gantt .e-gantt-chart .e-gantt-grid-lines { + border-bottom-style: solid; + border-bottom-width: 1px; + border-collapse: collapse; + border-spacing: 0; + box-sizing: border-box; +} + +.e-gantt .e-gantt-chart .e-zero-spacing { + border-spacing: 0; +} + +.e-gantt .e-gantt-chart .e-chart-row:first-child .e-chart-row-border { + border-top-color: transparent; +} + +.e-gantt .e-gantt-chart .e-chart-row .e-chart-row-border { + border-collapse: separate; + border-style: solid; + border-width: 1px 0 0; +} + +.e-gantt .e-gantt-chart .e-chart-row .e-chart-row-cell { + font-size: 0; + padding: 0; +} + +.e-gantt .e-gantt-chart .e-chart-row .e-chart-row-border.e-lastrow { + border-bottom-width: 1px; +} + +.e-gantt .e-gantt-chart .e-line-container-cell { + border-right-style: solid; + border-right-width: 1px; + height: 100%; + position: absolute; +} + +.e-gantt .e-gantt-chart .e-taskbar-main-container { + cursor: move; + display: inline-block; + position: absolute; + vertical-align: middle; + z-index: 3; +} + +.e-gantt .e-gantt-chart .e-left-label-container.e-left-label-temp-container { + -ms-flex-align: center; + align-items: center; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-pack: end; + justify-content: flex-end; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.e-gantt .e-gantt-chart .e-right-label-container.e-right-label-temp-container { + -ms-flex-align: center; + align-items: center; + display: -ms-inline-flexbox; + display: inline-flex; + float: left; + outline: none; + overflow: hidden; + position: absolute; + text-overflow: ellipsis; + white-space: nowrap; +} + +.e-gantt .e-gantt-chart .e-left-label-container { + display: inline-block; +} + +.e-gantt .e-gantt-chart .e-left-label-inner-div, +.e-gantt .e-gantt-chart .e-right-label-container { + overflow: hidden; +} + +.e-gantt .e-gantt-chart .e-left-label-inner-div { + -ms-flex-align: center; + align-items: center; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-pack: end; + justify-content: flex-end; + width: 100%; +} + +.e-gantt .e-gantt-chart .e-label { + margin: 3px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.e-gantt .e-gantt-chart .e-right-label-container { + background-color: transparent; + display: inline-block; + margin: 0; + position: absolute; +} + +.e-gantt .e-gantt-chart .e-right-label-inner-div { + -ms-flex-align: center; + align-items: center; + display: -ms-inline-flexbox; + display: inline-flex; + float: left; + outline: none; + overflow: hidden; +} + +.e-gantt .e-gantt-chart .e-indicator-span { + display: inline-block; + font-size: 13px; + font-weight: 400; + overflow: hidden; + position: absolute; + text-overflow: ellipsis; +} + +.e-gantt .e-gantt-chart .e-gantt-child-taskbar, +.e-gantt .e-gantt-chart .e-gantt-parent-taskbar, +.e-gantt .e-gantt-chart .e-gantt-child-progressbar, +.e-gantt .e-gantt-chart .e-gantt-parent-progressbar, +.e-gantt .e-gantt-chart .e-gantt-milestone, +.e-gantt .e-gantt-chart .e-gantt-parent-milestone, +.e-gantt .e-gantt-chart .e-gantt-manualparent-milestone { + display: inline-block; + width: 100%; +} + +.e-gantt .e-gantt-chart .e-manualparent-main-container { + background-color: transparent; + cursor: move; + margin-top: -5px; + position: absolute; +} + +.e-gantt .e-gantt-chart .e-gantt-manualparent-taskbar { + margin-top: 3px; +} + +.e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div, +.e-gantt .e-gantt-chart .e-gantt-parent-taskbar-inner-div { + border-spacing: 0; + box-sizing: border-box; + margin: auto; + overflow: hidden; + padding: 0; + z-index: 3; +} + +.e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div { + z-index: 3; +} + +.e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div, +.e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div { + box-sizing: border-box; + text-align: right; +} + +.e-gantt .e-gantt-chart .e-chart-scroll-container, +.e-gantt .e-gantt-chart .e-chart-rows-container { + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.e-gantt .e-gantt-chart .e-taskbar-left-resizer, +.e-gantt .e-gantt-chart .e-taskbar-right-resizer { + display: inline-block; + position: absolute; + top: 0; + width: 10px; + z-index: 4; +} + +.e-gantt .e-gantt-chart .e-child-progress-resizer { + display: inline-block; + height: 15px; + position: absolute; + top: 0; + width: 20px; + z-index: 5; +} + +.e-gantt .e-gantt-chart .e-progress-resize-gripper { + cursor: col-resize; +} + +.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler { + border-style: solid; + border-width: 1px; + box-sizing: content-box; + cursor: col-resize; + height: 2px; + position: absolute; + top: 7px; + width: 12px; +} + +.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-element { + border-bottom-style: solid; + border-bottom-width: 6px; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + cursor: col-resize; + height: 0; + left: -1px; + position: absolute; + top: -7px; + width: 0; +} + +.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-after { + border-bottom-style: solid; + border-bottom-width: 6px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + cursor: col-resize; + height: 0; + left: -1px; + position: absolute; + top: -6px; + width: 0; +} + +.e-gantt .e-gantt-chart .e-baseline-bar { + box-sizing: border-box; + position: absolute; + z-index: 3; +} + +.e-gantt .e-gantt-chart .e-milestone-top, +.e-gantt .e-gantt-chart .e-parent-milestone-top, +.e-gantt .e-gantt-chart .e-manualparent-milestone-top { + border-style: none solid solid; + border-top: 0; +} + +.e-gantt .e-gantt-chart .e-milestone-top, +.e-gantt .e-gantt-chart .e-milestone-bottom, +.e-gantt .e-gantt-chart .e-parent-milestone-top, +.e-gantt .e-gantt-chart .e-parent-milestone-bottom, +.e-gantt .e-gantt-chart .e-manualparent-milestone-top, +.e-gantt .e-gantt-chart .e-manualparent-milestone-bottom { + border-left-color: transparent; + border-right-color: transparent; +} + +.e-gantt .e-gantt-chart .e-milestone-bottom, +.e-gantt .e-gantt-chart .e-parent-milestone-bottom, +.e-gantt .e-gantt-chart .e-manualparent-milestone-bottom { + border-bottom: 0; + border-style: solid solid none; +} + +.e-gantt .e-gantt-chart .e-baseline-gantt-milestone-container { + position: absolute; + z-index: 2; +} + +.e-gantt .e-gantt-chart .e-task-label { + display: inline; + font-weight: normal; + margin-left: 8px; + margin-right: 15px; + vertical-align: middle; +} + +.e-gantt .e-gantt-chart .e-task-table { + overflow: hidden; +} + +.e-gantt .e-gantt-chart .e-left-resize-gripper, +.e-gantt .e-gantt-chart .e-right-resize-gripper { + -ms-flex-align: center; + align-items: center; + cursor: e-resize; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.e-gantt .e-gantt-chart .e-holiday { + display: inline-block; + position: absolute; +} + +.e-gantt .e-gantt-chart .e-holiday .e-span { + font-size: 13px; + position: absolute; + transform: rotate(-90deg); + white-space: nowrap; + width: 0; +} + +.e-gantt .e-gantt-chart .e-weekend { + display: inline-block; + position: absolute; + z-index: 0; +} + +.e-gantt .e-gantt-chart .e-event-markers { + border-left: 1px dashed; + position: absolute; + width: 1px; + z-index: 2; +} + +.e-gantt .e-gantt-chart .e-event-markers .e-span-label { + border-radius: 3px; + font-weight: 500; + height: 30px; + left: 5px; + line-height: 1.4; + padding: 7px 12px; + position: absolute; + top: 50px; + white-space: nowrap; + width: auto; + z-index: 2; +} + +.e-gantt .e-gantt-chart .e-event-markers .e-gantt-right-arrow { + border-bottom: 5px solid transparent; + border-right: 5px solid; + border-top: 5px solid transparent; + height: 0; + position: absolute; + top: 60px; + width: 0; +} + +.e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar { + border-radius: 0; + border-style: none; + display: inline-block; +} + +.e-gantt .e-gantt-chart .e-connector-line-right-arrow { + border-left-style: solid; + border-left-width: 10px; +} + +.e-gantt .e-gantt-chart .e-connector-line-left-arrow { + border-right-style: solid; + border-right-width: 10px; +} + +.e-gantt .e-gantt-chart .e-connector-line-right-arrow, +.e-gantt .e-gantt-chart .e-connector-line-left-arrow { + border-bottom: 5px solid transparent; + border-top: 5px solid transparent; +} + +.e-gantt .e-gantt-chart .e-connector-line-container { + z-index: 5; +} + +.e-gantt .e-gantt-chart .e-connector-line-z-index { + z-index: 1; +} + +.e-gantt .e-gantt-chart .e-connector-line-hover { + outline: 1px solid; +} + +.e-gantt .e-gantt-chart .e-connector-line-hover-z-index { + z-index: 100; +} + +.e-gantt .e-gantt-chart .e-connectortouchpoint { + background-color: transparent; + display: block; + position: absolute; + z-index: 5; +} + +.e-gantt .e-gantt-chart .e-connectorpoint-right, +.e-gantt .e-gantt-chart .e-connectorpoint-left, +.e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div, +.e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div { + border-radius: 50%; + display: inline-block; + position: absolute; +} + +.e-gantt .e-gantt-chart .e-connectorpoint-left-hover, +.e-gantt .e-gantt-chart .e-connectorpoint-right-hover { + border-style: solid; + border-width: 1px; + box-sizing: content-box; + cursor: pointer; + display: inline-block; +} + +.e-gantt .e-gantt-chart .e-connectorpoint-allow-block { + cursor: no-drop; +} + +.e-gantt .e-gantt-chart .e-gantt-manualparenttaskbar-left, +.e-gantt .e-gantt-chart .e-gantt-manualparenttaskbar-right { + background-color: #989A9C; + border-color: #989A9C; + border-radius: 50%; + display: inline-block; + height: 10px; + margin: -1px; + position: absolute; + width: 10px; +} + +.e-gantt .e-gantt-chart .e-manualparent-milestone-top, +.e-gantt .e-gantt-chart .e-manualparent-milestone-bottom { + border-bottom-color: #989A9C; +} + +.e-gantt .e-gantt-chart .e-gantt-manualparenttaskbar-right { + cursor: e-resize; + margin-left: -8px; +} + +.e-gantt .e-gantt-chart .e-gantt-manualparenttaskbar-left { + margin-left: 0; +} + +.e-gantt .e-gantt-chart .e-gantt-manualparenttaskbar { + background: #989A9C; + margin-top: 3px; + position: absolute; +} + +.e-gantt .e-gantt-chart .e-icon { + font-family: 'e-icons'; + font-size: 13px; + font-style: normal; + font-variant: normal; + font-weight: normal; + line-height: 1; + text-transform: none; + vertical-align: middle; +} + +.e-gantt .e-gantt-chart .e-active-container { + outline: 1px solid; + outline-offset: 2px; +} + +.e-gantt .e-gantt-dialog { + border: 0; +} + +.e-gantt .e-gantt-dialog .e-gridform .e-table { + border-spacing: 0; +} + +.e-gantt .e-gantt-dialog .e-item { + height: 241px; +} + +.e-gantt .e-gantt-dialog .e-dependent-div { + border-bottom-width: 1px; +} + +.e-gantt .e-gantt-dialog .e-icon-dlg-close { + opacity: initial; +} + +.e-gantt .e-gantt-dialog .e-toolbar { + border-top-width: 0; +} + +.e-gantt .e-gantt-dialog .e-resource-div { + border-bottom-width: 1px; +} + +.e-gantt .e-gantt-dialog .e-resource-div .e-gridheader { + border-top-width: 0; +} + +.e-gantt .e-gantt-dialog .e-edit-form-row { + height: 241px; + overflow-y: auto; + padding-bottom: 16px; +} + +.e-gantt .e-gantt-dialog .e-edit-form-column:nth-child(odd) { + float: left; + padding: 16px 18px 0 18px; + width: 50%; +} + +.e-gantt .e-gantt-dialog .e-edit-form-column:nth-child(even) { + float: left; + padding: 16px 16px 0 0; + width: 50%; +} + +.e-gantt .e-gantt-dialog .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) { + padding: 16px 16px 0 0; +} + +.e-gantt .e-gantt-dialog .e-edit-form-column { + height: 75px; +} + +.e-gantt .e-gantt-dialog .e-dependent-div .e-content { + height: 153px; +} + +.e-gantt .e-gantt-dialog .e-resource-div .e-content { + height: 196px; +} + +.e-gantt .e-gantt-dialog .e-richtexteditor { + border-bottom-width: 1px; + height: 241px !important; + overflow: hidden; +} + +.e-gantt .e-gantt-dialog .e-richtexteditor.e-rte-tb-expand { + border-top: 0; +} + +.e-gantt .e-gantt-dialog .e-richtexteditor .e-rte-content { + border-bottom-width: 0px; + height: 198px; +} + +.e-gantt .e-gantt-dialog > .e-dlg-content { + padding: 0 !important; +} + +.e-gantt .e-gantt-dialog .e-dlg-header-content { + border-bottom: 0 !important; +} + +.e-gantt .e-gantt-dialog .e-dlg-header-content { + border-radius: 0px; + padding-bottom: 4px; +} + +.e-gantt .e-gantt-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn { + border-radius: 50%; +} + +.e-icon-rowselect::before { + content: '\e930'; +} + +.e-ganttpopup { + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + font-weight: normal; + position: absolute; + user-select: none; + z-index: 99999; +} + +.e-ganttpopup .e-rowselect { + line-height: 18px; + text-indent: 7%; +} + +.e-ganttpopup span { + border: 1px solid transparent; + cursor: pointer; + display: inline-block; + height: 26px; + padding: 4px; + width: 26px; +} + +.e-ganttpopup .e-content { + border-radius: 4px; + border-style: solid; + border-width: 1px; + font-size: 14px; + padding: 4px; +} + +.e-ganttpopup .e-tail::after, +.e-ganttpopup .e-tail::before, +.e-ganttpopup .e-ganttpopup { + border: 10px solid transparent; + content: ''; + height: 0; + left: 8px; + position: absolute; + width: 0; +} + +.e-ganttpopup .e-downtail::after { + top: 34px; +} + +.e-gantt-tooltip.e-tooltip-wrap { + opacity: 1; +} + +.e-gantt-tooltip-label { + padding-bottom: 2px; + padding-right: 2px; + text-align: right; +} + +.e-gantt.e-device .e-edit-form-column:nth-child(odd), .e-gantt.e-device .e-edit-form-column:nth-child(even) { + float: none; + padding: 16px 18px 0 18px; + width: 100%; +} + +.e-gantt.e-device .e-edit-form-row { + height: auto; +} + +.e-gantt.e-device .e-adaptive-searchbar { + padding: 5px 10px; + width: 90%; +} + +.e-gantt.e-device .e-backarrowspan { + font-size: 16px; + padding: 5px 10px; +} + +.e-gantt.e-device .e-gantt-dialog { + max-height: none; +} + +.e-gantt.e-device .e-gantt-dialog .e-dlg-closeicon-btn { + float: left; + left: -4px; +} + +.e-gantt.e-device .e-gantt-dialog .e-icon-dlg-close { + font-size: 16px; +} + +.e-gantt.e-device .e-gantt-dialog .e-dlg-header { + display: inline-block; +} + +.e-gantt.e-device .e-toolbar-item { + padding: 7px; +} + +.e-gantt.e-device .e-toolbar .e-icons { + font-size: 18px; +} + +.e-gantt.e-device .e-gridheader .e-icons { + font-size: 12px; +} + +.e-gantt.e-device .e-right-resize-gripper, +.e-gantt.e-device .e-left-resize-gripper { + border: 7px solid; + z-index: -1; +} + +.e-gantt.e-device .e-right-resize-gripper::before, +.e-gantt.e-device .e-left-resize-gripper::before { + font-size: 14px; + margin-left: -7px; +} + +.e-gantt.e-device .e-dependent-div .e-content { + height: 100%; +} + +.e-gantt.e-device .e-resource-div .e-content { + height: 100%; +} + +.e-gantt.e-device .e-richtexteditor { + height: 100%; +} + +.e-gantt.e-device .e-richtexteditor .e-rte-content { + height: 100%; +} + +/*! Gantt theme */ +.e-gantt .e-gantt-splitter { + border-color: #e0e0e0; + border-radius: 0px; +} + +.e-gantt .e-cloneproperties.e-draganddrop { + box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.26); + opacity: .95; + overflow: visible; +} + +.e-gantt .e-cloneproperties { + background-color: #eee; + border-color: #e0e0e0; + color: rgba(0, 0, 0, 0.54); +} + +.e-gantt .e-cloneproperties.e-draganddrop .e-rowcell { + color: #000; +} + +.e-gantt .e-cloneproperties.e-draganddrop table, +.e-gantt .e-cloneproperties.e-draganddrop table .e-selectionbackground { + background-color: #fff; + height: 30px; +} + +.e-gantt .e-gantt-toolbar + .e-gantt-splitter { + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} + +.e-gantt .e-grid .e-focused:not(.e-menu-item) { + box-shadow: 0 0 0 1px #9e9e9e inset !important; +} + +.e-gantt .e-gantt-dialog .e-dlg-header { + color: #fff; +} + +.e-gantt .e-gantt-dialog .e-dlg-header-content { + background: #3f51b5; +} + +.e-gantt .e-gantt-dialog .e-icon-dlg-close { + color: #fff; +} + +.e-gantt .e-gantt-dialog .e-btn.e-dlg-closeicon-btn:hover { + background-color: rgba(255, 255, 255, 0.15); +} + +.e-gantt .e-gantt-dialog .e-btn.e-dlg-closeicon-btn:hover .e-icon-dlg-close { + color: black; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header { + background: #3f51b5; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-indicator { + background: #e3165b; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item.e-active { + background-color: transparent; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text { + color: #fff; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap { + border-color: transparent; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text { + color: rgba(255, 255, 255, 0.64); +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover { + background: transparent; + border-bottom: 0px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + border-color: transparent; +} + +.e-gantt .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover .e-tab-text { + color: #e3165b; +} + +.e-gantt .e-temp-content { + border-color: #e0e0e0; +} + +.e-gantt .e-splitter-box { + border-color: #e0e0e0; +} + +.e-gantt .e-gantt-temp-header { + border-color: #e0e0e0; +} + +.e-gantt .e-gantt-chart-pane { + border-color: #e0e0e0; +} + +.e-gantt .e-gantt-tree-grid-pane .e-timeline-single-header-outer-div { + height: 45px !important; +} + +.e-gantt .e-gantt-tree-grid-pane .e-grid td.e-active { + background: rgba(63, 81, 181, 0.15); +} + +.e-gantt .e-gantt-chart .e-timeline-header-container { + background: #fff; + border-bottom-color: #e0e0e0; + border-bottom-width: 1px; + border-right-color: #e0e0e0; + color: rgba(0, 0, 0, 0.54); + height: 64px; +} + +.e-gantt .e-gantt-chart .e-timeline-top-header-cell, +.e-gantt .e-gantt-chart .e-timeline-single-header-cell { + border-color: #e0e0e0; + color: rgba(0, 0, 0, 0.54); +} + +.e-gantt .e-gantt-chart .e-timeline-single-header-cell { + height: 46px; + line-height: 46px; +} + +.e-gantt .e-gantt-chart .e-timeline-single-header-outer-div { + height: 46px !important; +} + +.e-gantt .e-gantt-chart .e-timeline-top-header-cell { + height: 32px; +} + +.e-gantt .e-gantt-chart .e-chart-root-container { + background-color: #fff; + border-color: #e0e0e0; +} + +.e-gantt .e-gantt-chart .e-timeline-header-table-body { + border-spacing: 0; +} + +.e-gantt .e-gantt-chart .e-chart-row-border { + border-top-color: #e0e0e0; +} + +.e-gantt .e-gantt-chart .e-chart-row-cell { + color: black; +} + +.e-gantt .e-gantt-chart .e-chart-row-border.e-lastrow { + border-bottom-color: #e0e0e0; +} + +.e-gantt .e-gantt-chart .e-line-container-cell { + border-color: #e0e0e0; +} + +.e-gantt .e-gantt-chart .e-active-container { + outline-color: #9e9e9e; +} + +.e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div { + background-color: #5869c5; + border: 1px solid #3f51b5; + border-radius: 4px; +} + +.e-gantt .e-gantt-chart .e-gantt-parent-taskbar-inner-div { + background-color: rgba(97, 97, 97, 0.87); + border: 1px solid #616161; + border-radius: 4px; +} + +.e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div { + background-color: #616161; + border: 0px; +} + +.e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div { + background-color: #3f51b5; + border: 0px; +} + +.e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar { + background-color: rgba(0, 135, 134, 0.85); + border: 1px solid #008786; +} + +.e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar { + background: linear-gradient(to right, rgba(63, 81, 181, 0.2), #008786 30%, #008786 70%, #008786 70%, rgba(63, 81, 181, 0.2) 100%); +} + +.e-gantt .e-gantt-chart .e-gantt-child-manualprogressbar { + background-color: #008786; + border: 0px; +} + +.e-gantt .e-gantt-chart .e-holiday { + background: #eee; +} + +.e-gantt .e-gantt-chart .e-holiday .e-span { + color: rgba(0, 0, 0, 0.87); + font-size: 12px; +} + +.e-gantt .e-gantt-chart .e-weekend { + background: #fafafa; +} + +.e-gantt .e-gantt-chart .e-weekend-header-cell { + background: #fafafa; +} + +.e-gantt .e-gantt-chart .e-event-markers { + border-left-color: #e3165b; +} + +.e-gantt .e-gantt-chart .e-event-markers .e-span-label { + background-color: #fdbf64; + color: #212121; + font-size: 12px; +} + +.e-gantt .e-gantt-chart .e-event-markers .e-gantt-right-arrow { + border-right-color: #fdbf64; +} + +.e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar { + background: linear-gradient(to right, rgba(63, 81, 181, 0.2), #3f51b5 30%, #3f51b5 70%, #3f51b5 70%, rgba(63, 81, 181, 0.2) 100%); + background-color: rgba(63, 81, 181, 0.2); + border: 0px; + border-radius: 2px; +} + +.e-gantt .e-gantt-chart .e-unscheduled-milestone-top { + border-bottom-color: rgba(51, 51, 51, 0.6); +} + +.e-gantt .e-gantt-chart .e-unscheduled-milestone-bottom { + border-top-color: rgba(51, 51, 51, 0.6); +} + +.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler { + background: #222; + border-color: #fff; +} + +.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-element { + border-bottom-color: #fff; +} + +.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-after { + border-bottom-color: #222; +} + +.e-gantt .e-gantt-chart .e-gantt-dependency-view-container { + display: block; + z-index: 5; +} + +.e-gantt .e-gantt-chart .e-line { + border-color: #3f51b5; +} + +.e-gantt .e-gantt-chart .e-connector-line-right-arrow { + border-left-color: #3f51b5; +} + +.e-gantt .e-gantt-chart .e-connector-line-left-arrow { + border-right-color: #3f51b5; +} + +.e-gantt .e-gantt-chart .e-connector-line-right-arrow-hover { + border-left-color: #3f51b5; +} + +.e-gantt .e-gantt-chart .e-connector-line-left-arrow-hover { + border-right-color: #3f51b5; +} + +.e-gantt .e-gantt-chart .e-connector-line-hover { + border-color: #3f51b5; + outline-color: #3f51b5; +} + +.e-gantt .e-gantt-chart .e-gantt-false-line { + border-top-color: #3f51b5; +} + +.e-gantt .e-gantt-chart .e-connectorpoint-left-hover, +.e-gantt .e-gantt-chart .e-connectorpoint-right-hover { + background-color: #333; + border-color: #fff; +} + +.e-gantt .e-gantt-chart .e-connectorpoint-left-hover:hover, +.e-gantt .e-gantt-chart .e-connectorpoint-right-hover:hover { + background-color: #bdbdbd; + border-color: #3f51b5; +} + +.e-gantt .e-gantt-chart .e-left-label-inner-div, +.e-gantt .e-gantt-chart .e-right-label-inner-div { + color: rgba(0, 0, 0, 0.87); + font-size: 13px; +} + +.e-gantt .e-gantt-chart .e-left-label-temp-container { + color: rgba(0, 0, 0, 0.87); + font-size: 13px; + padding-right: 25px; +} + +.e-gantt .e-gantt-chart .e-right-label-temp-container { + color: rgba(0, 0, 0, 0.87); + font-size: 13px; + margin-left: 25px; +} + +.e-gantt .e-gantt-chart .e-right-label-container { + margin-left: 25px; +} + +.e-gantt .e-gantt-chart .e-left-label-container { + padding-right: 25px; +} + +.e-gantt .e-gantt-chart .e-connectorpoint-right { + margin-left: 2px; +} + +.e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div, +.e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div { + height: 8px; + width: 12px; +} + +.e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div { + left: -12px; +} + +.e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar-left, +.e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar-right { + border-right: transparent; + border-width: 3px; +} + +.e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar-right { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 2px; + border-top-left-radius: 0px; + border-top-right-radius: 2px; +} + +.e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar-left { + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; +} + +.e-gantt .e-gantt-chart .e-task-label { + color: #fff; + font-size: 12px; +} + +.e-gantt .e-gantt-chart .e-icon { + color: #fff; +} + +.e-gantt .e-gantt-chart .e-milestone-top { + border-bottom-color: #616161; +} + +.e-gantt .e-gantt-chart .e-milestone-bottom { + border-top-color: #616161; +} + +.e-gantt .e-gantt-chart .e-parent-milestone-top { + border-bottom-color: #616161; +} + +.e-gantt .e-gantt-chart .e-parent-milestone-bottom { + border-top-color: #616161; +} + +.e-gantt .e-gantt-chart .e-manualparent-milestone-top { + border-bottom-color: #989A9C; +} + +.e-gantt .e-gantt-chart .e-manualparent-milestone-bottom { + border-top-color: #989A9C; +} + +.e-gantt .e-gantt-chart .e-gantt-unscheduled-manualtask { + background: linear-gradient(to right, rgba(63, 81, 181, 0.2), #989A9C 30%, #989A9C 70%, #989A9C 70%, rgba(63, 81, 181, 0.2) 100%); +} + +.e-gantt .e-gantt-chart .e-label { + color: rgba(0, 0, 0, 0.87); + font-size: 13px; +} + +.e-gantt .e-gantt-chart .e-active { + background: rgba(63, 81, 181, 0.15); + color: #000; + opacity: 1; +} + +.e-gantt .e-gantt-chart .e-active .e-label { + color: #000; +} + +.e-gantt .e-gantt-chart .e-baseline-bar { + background-color: #FF9800; +} + +.e-gantt .e-gantt-chart .e-baseline-milestone-top { + border-bottom-color: #FF9800; +} + +.e-gantt .e-gantt-chart .e-baseline-milestone-bottom { + border-top-color: #FF9800; +} + +.e-gantt .e-gantt-chart .e-uptail::before { + border-bottom-color: #e0e0e0; +} + +.e-gantt .e-gantt-chart .e-downtail::after { + border-top-color: #fff; +} + +.e-gantt .e-gantt-chart .e-downtail::before { + border-top-color: #e0e0e0; +} + +.e-gantt .e-gantt-chart .e-ganttpopup .e-content { + background-color: #fff; + border-color: #e0e0e0; +} + +.e-gantt .e-gantt-chart .e-spanclicked, +.e-gantt .e-gantt-chart .e-grid .e-gridpopup .e-spanclicked { + border-color: #000; +} + +.e-gantt .e-gantt-chart .e-active-parent-task { + border-radius: 4px; + box-shadow: 4px 4px 3px 0 rgba(0, 0, 0, 0.5); +} + +.e-gantt .e-gantt-chart .e-active-parent-task .e-gantt-parent-taskbar-inner-div { + background: #1a1a1a; + border: #1a1a1a; +} + +.e-gantt .e-gantt-chart .e-active-parent-task .e-gantt-parent-progressbar-inner-div { + background-color: transparent; + border: transparent; +} + +.e-gantt .e-gantt-chart .e-active-parent-task .e-task-label { + color: transparent; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-task-label { + color: transparent !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-line { + border-color: #8A8A8A !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-connector-line-right-arrow { + border-left-color: #8A8A8A !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-connector-line-left-arrow { + border-right-color: #8A8A8A !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-child-taskbar-inner-div { + background: #D5D5D5 !important; + border: #D5D5D5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-child-progressbar-inner-div { + background-color: transparent !important; + border: transparent !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-top { + border-bottom-color: #D5D5D5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-bottom { + border-top-color: #D5D5D5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-parent-taskbar-inner-div { + background-color: #8A8A8A !important; + border: #8A8A8A !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-parent-progressbar-inner-div { + background-color: transparent !important; + border: transparent !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-gantt-child-taskbar-inner-div { + background: #3f51b5 !important; + border: #3f51b5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-top { + border-bottom-color: #3f51b5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-bottom { + border-top-color: #3f51b5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-child-taskbar-inner-div { + background: #8591d5 !important; + border: #8591d5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-top { + border-bottom-color: #8591d5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-bottom { + border-top-color: #8591d5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-line { + border-color: #3f51b5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-connector-line-right-arrow { + border-left-color: #3f51b5 !important; +} + +.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-connector-line-left-arrow { + border-right-color: #3f51b5 !important; +} + +.e-gantt .e-grid .e-icons:not(.e-stop):not(.e-check):not(.e-icon-left) { + color: rgba(0, 0, 0, 0.54) !important; +} + +.e-gantt.e-device .e-left-resize-gripper, +.e-gantt.e-device .e-right-resize-gripper { + border-color: #9e9e9e; + color: #eee; +} + +.e-gantt.e-device .e-backarrowspan { + color: #000; +} diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/systemjs.config.js b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/systemjs.config.js new file mode 100644 index 000000000..f91edce14 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/systemjs.config.js @@ -0,0 +1,49 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js" + + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/ts/index.html b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/ts/index.html new file mode 100644 index 000000000..f2690c26c --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/resourcetab-single-select-cs1/ts/index.html @@ -0,0 +1,24 @@ + + + + + EJ2 Gantt + + + + + + + + + + + + +
    Loading....
    +
    +
    +
    + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/datasource.ts b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/datasource.ts new file mode 100644 index 000000000..04cf6dd52 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/datasource.ts @@ -0,0 +1,20 @@ +export let GanttData: Object[] = [ + { + TaskID: 1, + TaskName: 'Project Initiation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 }, + { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 }, + { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 }, + { + TaskID: 5, + TaskName: 'Project Estimation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }, + { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }, + { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/es5-datasource.js b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/es5-datasource.js new file mode 100644 index 000000000..7f269d947 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/es5-datasource.js @@ -0,0 +1,20 @@ +var GanttData = [ + { + TaskID: 1, + TaskName: 'Project Initiation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 }, + { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 }, + { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 }, + { + TaskID: 5, + TaskName: 'Project Estimation', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + }, + { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }, + { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }, + { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.css b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.css new file mode 100644 index 000000000..e7bcf086c --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.css @@ -0,0 +1,23 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} + +#element { + display: block; + height: 350px; +} + +#container #Gantt{ + height:450px; +} \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.js b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.js new file mode 100644 index 000000000..c63bff2d8 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.js @@ -0,0 +1,41 @@ +ej.gantt.Gantt.Inject(ej.gantt.Edit); + +var ganttChart = new ej.gantt.Gantt({ + dataSource: GanttData, + height:'450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + duration: 'Duration', + progress: 'Progress', + parentID: 'ParentID' + }, + editSettings: { + allowEditing: true + }, + splitterSettings: { + columnIndex: 3 + }, + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '80' }, + { field: 'TaskName', headerText: 'Task Name', width: '180' }, + { field: 'Custom', headerText: 'Custom', width: '220' }, + { field: 'StartDate', headerText: 'Start Date', width: '110' }, + { field: 'Duration', headerText: 'Duration', width: '100' }, + { field: 'Progress', headerText: 'Progress', width: '100' } + ] + }); +ganttChart.appendTo('#Gantt'); + +var updateBtn= new ej.buttons.Button(); +updateBtn.appendTo('#updateRecord'); + +document.getElementById('updateRecord').addEventListener('click', () => { + var data = { + TaskID: 3, + Custom: 'Dynamically custom column value updated' + }; + ganttChart.updateRecordByID(data); + +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.ts b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.ts new file mode 100644 index 000000000..5f0793dc3 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/index.ts @@ -0,0 +1,45 @@ +import { Gantt, Edit } from '@syncfusion/ej2-gantt'; +import { Button } from '@syncfusion/ej2-buttons'; +import { GanttData } from './datasource.ts'; + +Gantt.Inject(Edit); + +let gantt: Gantt = new Gantt({ + dataSource: GanttData, + height: '450px', + taskFields: { + id: 'TaskID', + name: 'TaskName', + startDate: 'StartDate', + duration: 'Duration', + progress: 'Progress', + parentID: 'ParentID' + }, + editSettings: { + allowEditing: true + }, + splitterSettings: { + columnIndex: 3 + }, + columns: [ + { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '80' }, + { field: 'TaskName', headerText: 'Task Name', width: '180' }, + { field: 'Custom', headerText: 'Custom', width: '220' }, + { field: 'StartDate', headerText: 'Start Date', width: '110' }, + { field: 'Duration', headerText: 'Duration', width: '100' }, + { field: 'Progress', headerText: 'Progress', width: '100' } + ] +}); + +gantt.appendTo('#Gantt'); + +let updateBtn: Button = new Button(); +updateBtn.appendTo('#updateRecord'); + +document.getElementById('updateRecord').addEventListener('click', () => { + let data: Object = { + TaskID: 3, + Custom: 'Dynamically custom column value updated' + }; + gantt.updateRecordByID(data); +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/js/index.html b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/js/index.html new file mode 100644 index 000000000..a517a589c --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/js/index.html @@ -0,0 +1,28 @@ + + + + EJ2 Gantt + + + + + + + + + + + +
    + +
    +
    + + + + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/systemjs.config.js b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/systemjs.config.js new file mode 100644 index 000000000..f91edce14 --- /dev/null +++ b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/systemjs.config.js @@ -0,0 +1,49 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-markdown-converter": "syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-gantt": "syncfusion:ej2-gantt/dist/ej2-gantt.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js" + + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/gantt/databinding-cs11/index.html b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/ts/index.html similarity index 92% rename from ej2-javascript/code-snippet/gantt/databinding-cs11/index.html rename to ej2-javascript/code-snippet/gantt/updateRecordById-cs2/ts/index.html index 291ea5956..46f367d9e 100644 --- a/ej2-javascript/code-snippet/gantt/databinding-cs11/index.html +++ b/ej2-javascript/code-snippet/gantt/updateRecordById-cs2/ts/index.html @@ -14,7 +14,7 @@ - +
    Loading....
    diff --git a/ej2-javascript/color-picker/ts/getting-started.md b/ej2-javascript/color-picker/ts/getting-started.md index cf279ba50..7c0dd884e 100644 --- a/ej2-javascript/color-picker/ts/getting-started.md +++ b/ej2-javascript/color-picker/ts/getting-started.md @@ -63,25 +63,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add ColorPicker to the project diff --git a/ej2-javascript/combo-box/ts/getting-started.md b/ej2-javascript/combo-box/ts/getting-started.md index 1ebd8fea7..4c5679bde 100644 --- a/ej2-javascript/combo-box/ts/getting-started.md +++ b/ej2-javascript/combo-box/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with Combo box control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Combo box control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -67,26 +67,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Initialize the ComboBox diff --git a/ej2-javascript/context-menu/ts/getting-started.md b/ej2-javascript/context-menu/ts/getting-started.md index 09b164f02..2cc613916 100644 --- a/ej2-javascript/context-menu/ts/getting-started.md +++ b/ej2-javascript/context-menu/ts/getting-started.md @@ -65,19 +65,32 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -To render Checkbox component, need to import Button and its dependent components styles as given below in the `~/src/styles/styles.css` file, as shown below: +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="styles.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). + ## Add ContextMenu to the project Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. diff --git a/ej2-javascript/dashboard-layout/ts/getting-started.md b/ej2-javascript/dashboard-layout/ts/getting-started.md index c4abc9a9f..05618be67 100644 --- a/ej2-javascript/dashboard-layout/ts/getting-started.md +++ b/ej2-javascript/dashboard-layout/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with ##Platform_Name## Dashboard layout control | Syncfusion +title: Getting started with Dashboard layout control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Dashboard layout control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Dashboard Layout @@ -60,20 +60,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -To render the Dashboard Layout control, import the Dashboard Layout and its dependent control’s styles as given below in the `~/src/styles/styles.css` file, as shown below: +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-fluent2-theme --save + +{% endhighlight %} +{% endtabs %} + +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-layouts/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; {% endhighlight %} {% endtabs %} -> Note: To refer the combined control styles, use Syncfusion® [`CRG`](https://crg.syncfusion.com) (Custom Resource Generator) in your application. +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add Dashboard Layout to the application @@ -242,4 +253,4 @@ The following example shows a basic Dashboard Layout by defining the [`panels`]( {% previewsample "page.domainurl/code-snippet/dashboard-layout/getting-started-cs4" %} -> You can refer to our [JavaScript Dashboard Layout](https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Dashboard Layout example](https://ej2.syncfusion.com/demos#/material/dashboard-layout/default.html) to knows how to present and manipulate data. +> You can refer to our [JavaScript Dashboard Layout](https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Dashboard Layout example](https://ej2.syncfusion.com/demos/#/tailwind3/dashboard-layout/default.html) to knows how to present and manipulate data. diff --git a/ej2-javascript/dialog/ts/getting-started.md b/ej2-javascript/dialog/ts/getting-started.md index 311c33c93..379231fa9 100644 --- a/ej2-javascript/dialog/ts/getting-started.md +++ b/ej2-javascript/dialog/ts/getting-started.md @@ -61,24 +61,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-icons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Adding Dialog to the project diff --git a/ej2-javascript/drop-down-button/ts/getting-started.md b/ej2-javascript/drop-down-button/ts/getting-started.md index d2a261094..b4ebc29bc 100644 --- a/ej2-javascript/drop-down-button/ts/getting-started.md +++ b/ej2-javascript/drop-down-button/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with Drop down button control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Drop down button control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -62,23 +62,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add DropDownButton to the project diff --git a/ej2-javascript/drop-down-list/ts/getting-started.md b/ej2-javascript/drop-down-list/ts/getting-started.md index 8e30a7158..f2f325723 100644 --- a/ej2-javascript/drop-down-list/ts/getting-started.md +++ b/ej2-javascript/drop-down-list/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with Drop down list control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Drop down list control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -43,6 +43,46 @@ npm install >The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with common settings (`src/styles/styles.css`, `system.config.js` ) to start all the Essential® JS 2 components. +## Add Syncfusion® JavaScript packages + +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. + +The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. + +{% tabs %} +{% highlight bash tabtitle="NPM" %} + +npm install + +{% endhighlight %} +{% endtabs %} + +## Import Syncfusion® CSS styles + +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-fluent2-theme --save + +{% endhighlight %} +{% endtabs %} + +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). + ## Initialize the DropDownList The DropDownList can be initialized through input, select, or textarea tags as described in the [Initialize Tags](../tags). diff --git a/ej2-javascript/drop-down-tree/ts/getting-started.md b/ej2-javascript/drop-down-tree/ts/getting-started.md index 2bafe54e5..ee4545b7a 100644 --- a/ej2-javascript/drop-down-tree/ts/getting-started.md +++ b/ej2-javascript/drop-down-tree/ts/getting-started.md @@ -64,23 +64,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in the `~/src/styles/styles.css` file of your application using the following code. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-fluent2-theme --save + +{% endhighlight %} +{% endtabs %} + +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="styles.css" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/fluent2.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css'; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; {% endhighlight %} {% endtabs %} -> To refer individual control CSS, please refer to the [Individual control theme files](../appearance/theme/#referring-individual-control-theme) section. If you want to refer the combined control styles, please make use of our [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application. +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Initialize the Dropdown Tree @@ -129,7 +137,7 @@ DropDownTreeObject.appendTo('#ddTreeElement'); ## Binding data source -The Dropdown Tree control can load the data either from local data sources or remote data services. This can be done using the [`dataSource`](../api/drop-down-tree/fieldsModel/#datasource) property that is a member of the [`fields`](../api/drop-down-tree/#fields) property. The dataSource property supports array of JavaScript objects and DataManager. Here, an array of JSON values is passed to the Dropdown Tree control. +The Dropdown Tree control can load the data either from local data sources or remote data services. This can be done using the [`dataSource`](https://ej2.syncfusion.com/documentation/api/drop-down-tree/fieldsmodel#datasource) property that is a member of the [`fields`](https://ej2.syncfusion.com/documentation/api/drop-down-tree/dropdowntreemodel#fields) property. The dataSource property supports array of JavaScript objects and DataManager. Here, an array of JSON values is passed to the Dropdown Tree control. ```ts import { DropDownTree } from '@syncfusion/ej2-dropdowns'; diff --git a/ej2-javascript/floating-action-button/ts/getting-started.md b/ej2-javascript/floating-action-button/ts/getting-started.md index 8f5177a3c..e4c00870c 100644 --- a/ej2-javascript/floating-action-button/ts/getting-started.md +++ b/ej2-javascript/floating-action-button/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with Floating Action Button control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Floating action button control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -60,22 +60,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Adding Floating Action Button to the Application diff --git a/ej2-javascript/gantt/data-binding.md b/ej2-javascript/gantt/data-binding.md index 2d0423f71..7c80712c4 100644 --- a/ej2-javascript/gantt/data-binding.md +++ b/ej2-javascript/gantt/data-binding.md @@ -848,9 +848,13 @@ You can programmatically update the Gantt chart data source using the [updateDat {% endif %} -## Display custom message for empty records +## Display a custom message for empty records using emptyRecordTemplate -You can display a custom message when no data is available by defining an empty record template and assigning it to `treeGrid.grid.emptyRecordTemplate` during the `load` event in the control. +The Gantt Chart allows you to display custom content, such as text, HTML elements, or images, when no records are available in the data source. This is useful for showing a user-friendly message when rendering the Gantt Chart with zero records, or when no matching records are found after performing operations such as **searching** and **filtering**. + +To render custom empty-state content, assign a template to the [emptyRecordTemplate](../../api/gantt#emptyrecordtemplate) property of the Gantt Chart component. + +The following example demonstrates how to display a custom message when the Gantt Chart contains no records on initial load. {% if page.publishingplatform == "typescript" %} @@ -876,6 +880,8 @@ You can display a custom message when no data is available by defining an empty {% endif %} +>Note: Assigning a template to `emptyRecordTemplate` also displays a user-friendly message after performing operations such as **searching** or **filtering**, when no matching records are found. + ## Data binding limitations **Simultaneous binding restrictions**: Gantt supports either hierarchical or self-referential data binding approaches, but implementing both simultaneously in SQL database contexts creates architectural conflicts and rendering inconsistencies. diff --git a/ej2-javascript/gantt/event-markers.md b/ej2-javascript/gantt/event-markers.md index c1e7cd9b4..417d66fbc 100644 --- a/ej2-javascript/gantt/event-markers.md +++ b/ej2-javascript/gantt/event-markers.md @@ -97,6 +97,10 @@ You can programmatically show or hide event markers in the Gantt chart by updati {% previewsample "page.domainurl/code-snippet/gantt/event-markers-cs3" %} {% endif %} +## Limitations + +- When an event marker is configured with a date and time value very close to midnight (for example, 23:59:59.999), the marker may appear visually at the beginning of the next day on the timeline. This is expected behavior because the marker is rendered at the exact timestamp, which is positioned on the day boundary and may appear in the next day depending on the timeline scale and zoom level. + ## See Also - [How to bind data to the Gantt chart?](../../gantt/data-binding) diff --git a/ej2-javascript/gantt/managing-tasks/editing-tasks.md b/ej2-javascript/gantt/managing-tasks/editing-tasks.md index 939e98a1b..56700da34 100644 --- a/ej2-javascript/gantt/managing-tasks/editing-tasks.md +++ b/ej2-javascript/gantt/managing-tasks/editing-tasks.md @@ -208,9 +208,9 @@ Updating with dialog ## Update task values using method -Tasks' value can be dynamically updated by using the [updateRecordById](../../api/gantt#updaterecordbyid) method. You can call this method on any custom action. The following code example shows how to use this method to update a task. +Tasks' value can be dynamically updated by using the [updateRecordByID](../../api/gantt#updaterecordbyid) method. You can call this method on any custom action. The following code example shows how to use this method to update a task. ->NOTE: Using the [updateRecordById](../../api/gantt#updaterecordbyid) method, you cannot update the task ID value. +>NOTE: Using the [updateRecordByID](../../api/gantt#updaterecordbyid) method, you cannot update the task ID value. {% if page.publishingplatform == "typescript" %} @@ -243,4 +243,41 @@ Tasks' value can be dynamically updated by using the [updateRecordById](../../ap {% previewsample "page.domainurl/code-snippet/gantt/updateRecordById-cs1" %} {% endif %} -![Delete action](../images/delete-action.png) \ No newline at end of file +![Delete action](../images/delete-action.png) + +## Update custom column values using updateRecordByID + +The [updateRecordByID](../../api/gantt#updaterecordbyid) method can be used to update task records dynamically in the Gantt chart. When working with custom fields, the field must be defined in the Gantt columns collection. If a custom field is not bound to a column, the `updateRecordByID` method cannot maintain or update its value in the Gantt chart. + +This behavior occurs because custom fields are stored within the task data (taskData). Only the custom fields that are bound in the column collection are tracked and maintained by the Gantt component during record updates. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/gantt/updateRecordById-cs2/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/gantt/updateRecordById-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/gantt/updateRecordById-cs2" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/gantt/updateRecordById-cs2/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/gantt/updateRecordById-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/gantt/updateRecordById-cs2" %} +{% endif %} + +In the above example, the description field is bound in the column collection. Therefore, calling `updateRecordByID` successfully updates the custom column value for the specified task record. If the description field is removed from the column collection, the updated value will not be maintained by the Gantt chart. + +>NOTE: Custom column values can be updated through the [updateRecordByID](../../api/gantt#updaterecordbyid) method only when the corresponding field is included in the Gantt columns collection. \ No newline at end of file diff --git a/ej2-javascript/gantt/multi-taskbar.md b/ej2-javascript/gantt/multi-taskbar.md index ec373295e..1b3a1fd20 100644 --- a/ej2-javascript/gantt/multi-taskbar.md +++ b/ej2-javascript/gantt/multi-taskbar.md @@ -174,4 +174,9 @@ The following example demonstrates non-overlapping multi taskbar: {% endtabs %} {% previewsample "page.domainurl/code-snippet/gantt/resource-view-taskbaroverlap-cs1" %} -{% endif %} \ No newline at end of file +{% endif %} + +## Limitations + +- Task overallocation is determined only by overlapping task date ranges for the same resource and does not consider `resourceUnit` values. Therefore, capacity-based validation (for example, checking whether the total assigned units exceed 100%) is not supported in the current implementation. +- Dependency relationships are not displayed when parent tasks or project records are in a collapsed state with `enableMultiTaskbar` is enabled. This is the expected behavior of the Gantt Chart and applies to collapsed parent tasks in both Project View and Resource View. diff --git a/ej2-javascript/gantt/pdf-export/header-and-footer.md b/ej2-javascript/gantt/pdf-export/header-and-footer.md index 91853f699..8eb022af8 100644 --- a/ej2-javascript/gantt/pdf-export/header-and-footer.md +++ b/ej2-javascript/gantt/pdf-export/header-and-footer.md @@ -244,6 +244,39 @@ The below code illustrates the pdf export customization. {% previewsample "page.domainurl/code-snippet/gantt/pdf-export-customization-cs1" %} {% endif %} +## Export Gantt Chart with external form elements in PDF + +The Gantt Chart allows you to export external form elements, such as custom headers, footers, and user-entered form data, along with the Gantt content in a PDF document. This can be achieved by configuring the `header` and `footer` properties in the `pdfExportProperties` object and passing the required content during PDF export. + +The following example demonstrates how to export the Gantt Chart along with external form element values in the PDF document. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/gantt/pdf-export-form-cs18/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/gantt/pdf-export-form-cs18/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/gantt/pdf-export-form-cs18" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/gantt/pdf-export-form-cs18/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/gantt/pdf-export-form-cs18/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/gantt/pdf-export-form-cs18" %} +{% endif %} + ## Disable footer By default, the exported PDF file includes a footer. The footer can be disabled by setting the [enableFooter](../../api/gantt/pdfexportproperties#enablefooter) property to `false`. diff --git a/ej2-javascript/gantt/resources.md b/ej2-javascript/gantt/resources.md index b7e527b9a..1be79d62b 100644 --- a/ej2-javascript/gantt/resources.md +++ b/ej2-javascript/gantt/resources.md @@ -178,6 +178,49 @@ The following example demonstrates custom resource styling: This configuration applies background colors to resource columns and taskbars, with the `queryTaskbarInfo` event modifying taskbar properties dynamically. +## Restrict resource selection to a single resource in the edit dialog + +By default, the **Resources tab** in the Gantt edit dialog allows users to select multiple resources for a task. You can restrict resource assignment to a single resource by customizing the resource grid displayed in the edit dialog. + +To achieve this requirement: + +- Remove the checkbox column from the **Resources tab** using the [actionBegin](../gantt/events#actionbegin) event with the `requestType` of `beforeOpenEditDialog`. +- Configure the resource grid selection behavior using the [actionComplete](../gantt/events#actioncomplete) event with `requestType` of `openEditDialog` by, + - Setting `checkboxOnly` to `false` to allow row selection without requiring a checkbox click. + - Setting the resource grid selection type to `Single` to allow only one resource selection at a time. + - Disabling persistent selection by setting `persistSelection` to `false`. + +The following example demonstrates how to restrict resource selection to a single resource in the **Resources tab** of the edit dialog. Additionally, a custom condition is applied to disable resource selection in the **Resources tab** when editing **Task 3**. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/gantt/resourcetab-single-select-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/gantt/resourcetab-single-select-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/gantt/resourcetab-single-select-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/gantt/resourcetab-single-select-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/gantt/resourcetab-single-select-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/gantt/resourcetab-single-select-cs1" %} +{% endif %} + +With this configuration, users can assign only a single resource to a task through the **Resources tab** of the Gantt edit dialog. + ## See also - [How to configure resource view?](../gantt/resource-view) diff --git a/ej2-javascript/gantt/scheduling-tasks.md b/ej2-javascript/gantt/scheduling-tasks.md index 0cfd6a276..7e360f87a 100644 --- a/ej2-javascript/gantt/scheduling-tasks.md +++ b/ej2-javascript/gantt/scheduling-tasks.md @@ -57,7 +57,12 @@ The following example configures auto scheduling: ### Manually scheduled Tasks -The following example configures manual scheduling: +The Gantt Chart supports taskbar editing actions for manually scheduled tasks. You can perform the following actions: +- Drag and drop taskbars to modify the task schedule. +- Resize taskbars to update task duration. +- Edit manually scheduled parent and child tasks through taskbar interactions. + +The following example demonstrates how to configure manually scheduled tasks: {% if page.publishingplatform == "typescript" %} @@ -86,6 +91,8 @@ The following example configures manual scheduling: {% previewsample "page.domainurl/code-snippet/gantt/manual-schedule" %} {% endif %} +>Note: Taskbar drag-and-drop and resize actions are supported for manually scheduled tasks, including parent tasks, in both virtual and non-virtual rendering modes. + ### Custom scheduled The following example mixes auto and manual tasks: diff --git a/ej2-javascript/gantt/scrolling/virtual-scroll.md b/ej2-javascript/gantt/scrolling/virtual-scroll.md index 32a7045f9..80133417d 100644 --- a/ej2-javascript/gantt/scrolling/virtual-scroll.md +++ b/ej2-javascript/gantt/scrolling/virtual-scroll.md @@ -88,6 +88,7 @@ Virtual scrolling has the following constraints: - The [height](../../api/gantt#height) property must be set in pixels for row virtualization to define the viewport size. - Set a static height for the Gantt chart or its parent container; 100% height only works if both the control and its parent have explicit static heights. - With virtualization enabled, data is rendered in pages. When scrolling to load the next set of records, only the current page's data is available to Gantt's public methods. If a record is selected during this process, only the visible page records are returned. This behavior occurs because the Gantt chart does not retain data from all pages in memory, optimizing performance by loading only the required set. +- When virtual scrolling is enabled, dependency lines are rendered only for tasks that are currently available in the viewport. If either the predecessor or successor task is outside the viewport due to virtual scrolling, the corresponding dependency line will not be displayed until both tasks are brought into view. ## See also diff --git a/ej2-javascript/grid/js/getting-started.md b/ej2-javascript/grid/js/getting-started.md index 6f33f28a1..224540f36 100644 --- a/ej2-javascript/grid/js/getting-started.md +++ b/ej2-javascript/grid/js/getting-started.md @@ -15,31 +15,16 @@ This section explains the steps required to create a simple Essential® Essential® JS 2 controls require a valid license key from version 16.2.0.17 onwards. Without a license key, a license validation message will appear in the browser console. - -**Step 1:** Obtain your license key from the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) or from the [licensing FAQ page](https://ej2.syncfusion.com/documentation/licensing/licensing-troubleshoot). - -**Step 2:** Register the license key in your **index.js** file before initializing any Syncfusion® control. - -```javascript -// Register Syncfusion license key -ej.base.registerLicense('YOUR_LICENSE_KEY_HERE'); -``` - -> Replace `'YOUR_LICENSE_KEY_HERE'` with the actual license key obtained from your Syncfusion account. For more information, refer to the [Syncfusion Licensing documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). +The Syncfusion® Data Grid requires a valid license key to be registered in the application. To prevent license validation warnings, refer to the [Syncfusion licensing](https://ej2.syncfusion.com/javascript/documentation/licensing/overview) documentation. ## Troubleshooting diff --git a/ej2-javascript/grid/ts/getting-started.md b/ej2-javascript/grid/ts/getting-started.md index e9f21534c..e361e1e11 100644 --- a/ej2-javascript/grid/ts/getting-started.md +++ b/ej2-javascript/grid/ts/getting-started.md @@ -11,35 +11,17 @@ domainurl: ##DomainURL## # Getting started in TypeScript Data Grid control -This section explains the steps to create a simple Data Grid and demonstrates the basic usage of the Data Grid component using the Essential® JS 2 -[quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. +This section explains the steps to create a simple Data Grid and demonstrates the basic usage of the Data Grid component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). ## Prerequisites - -To get started with application, ensure the following software to be installed in the machine. - -| Requirement | Version | -|-------------|---------| -| [git](https://git-scm.com/downloads) | Latest version | -| [Node.js](https://nodejs.org/en/) | 14.15.0 or above | -| [Visual Studio Code](https://code.visualstudio.com/) | Latest version | - - -### Browser support - -| Browser | Supported versions | -|----------|----------| -| Chrome | 63+ | -| Firefox | 58+ | -| Opera | 50+ | -| Edge | 13+ | -| IE | 11+ | -| Safari | 9+ | -| iOS | 9+ | -| Android | 4.4+ | -| Windows Mobile | IE 11+ | + +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) ## Setup for local development @@ -169,23 +151,9 @@ The `npm start` command compiles the TypeScript source files and starts the webp ``` npm start ``` - ## Registering Syncfusion license -Syncfusion® Essential® JS 2 components require a valid license key from version **16.2.0.41** onwards. Using the components without a license key will display a **license validation message** in the browser console. - -**Steps to register the license key:** - -1. Sign in to the [Syncfusion License Portal](https://www.syncfusion.com/account/downloads) and copy your license key. -2. Register the key in your **src/app/app.ts** file, before instantiating any Syncfusion component: - -```ts -import { registerLicense } from '@syncfusion/ej2-base'; - -registerLicense('YOUR_LICENSE_KEY_HERE'); -``` - -> For more details on obtaining and registering a license key, refer to the [License Key Generation](https://ej2.syncfusion.com/documentation/licensing/license-key-generation) and [License Key Registration](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) documentation. +The Syncfusion® Data Grid requires a valid license key to be registered in the application. To prevent license validation warnings, refer to the [Syncfusion licensing](https://ej2.syncfusion.com/documentation/licensing/overview) documentation. ## Troubleshooting diff --git a/ej2-javascript/image-editor/ts/getting-started.md b/ej2-javascript/image-editor/ts/getting-started.md index a5ae6f006..f2a0e6aea 100644 --- a/ej2-javascript/image-editor/ts/getting-started.md +++ b/ej2-javascript/image-editor/ts/getting-started.md @@ -66,28 +66,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-image-editor/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Adding Image Editor control to the application diff --git a/ej2-javascript/in-place-editor/ts/getting-started.md b/ej2-javascript/in-place-editor/ts/getting-started.md index b6556a647..53a886d06 100644 --- a/ej2-javascript/in-place-editor/ts/getting-started.md +++ b/ej2-javascript/in-place-editor/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with In-place editor control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## In place editor control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -71,41 +71,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} - -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-calendars/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inplace-editor/styles/material.css'; +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -* If you want to use the combined CSS files of entire controls, you can avail it from the root folder of Essential® JS 2 package and reference it with the following code. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="styles.css" %} -@import '../../node_modules/@syncfusion/ej2/material.css'; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add the In-place Editor with Textbox diff --git a/ej2-javascript/js/mcp.md b/ej2-javascript/js/mcp.md index 56cc7b498..90456d25a 100644 --- a/ej2-javascript/js/mcp.md +++ b/ej2-javascript/js/mcp.md @@ -203,7 +203,7 @@ To get the most out of the Syncfusion® Java - **Use Descriptive Queries** - Avoid overly brief or ambiguous requests. Providing sufficient detail helps improve the accuracy and relevance of the response. - **Stay Consistent** - Keep file organization, naming conventions, and coding standards consistent throughout your JavaScript project. - **Start Fresh for New Topics** - Begin a new chat when switching to a different component or task to maintain clean context. -- **Use Advanced AI Models** - For best results, use **Claude Sonnet 4.5 or higher**. Other compatible models include **GPT-5 and Gemini 3 Pro**. Higher-capability models produce more accurate component implementations. +- **Use Advanced AI Models** - For the best results, use advanced AI models such as the latest-generation **Claude**, **GPT**, or **Gemini** models. - **For Troubleshooting** - Use AI suggestions for common issues; consult the [official documentation](https://ej2.syncfusion.com/javascript/documentation) or [support](https://support.syncfusion.com/support/tickets/create) for complex problems. - **Minimize Active Tools** - Limit the number of active MCP tools in your IDE to prevent tool-selection ambiguity and improve response accuracy. @@ -233,6 +233,6 @@ The Syncfusion® MCP Servers are designed wi The MCP Server acts purely as a knowledge bridge, connecting your AI model with Syncfusion-specific expertise while respecting your privacy and maintaining security. -## See Also +## See also - [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) \ No newline at end of file diff --git a/ej2-javascript/list-box/ts/getting-started.md b/ej2-javascript/list-box/ts/getting-started.md index c70b6d682..e9498be32 100644 --- a/ej2-javascript/list-box/ts/getting-started.md +++ b/ej2-javascript/list-box/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with List box control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## List box control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -31,50 +31,53 @@ The following list of dependencies are required to use the ListBox component in |-- @syncfusion/ej2-buttons ``` -## Set up the development environment +## Set up development environment -To get started with the ListBox component, clone the Essential® JS 2 [`quickstart`](https://github.com/syncfusion/ej2-quickstart.git) project and install the npm packages by using the following commands. +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). -``` -git clone https://github.com/syncfusion/ej2-quickstart.git quickstart -cd quickstart -npm install -``` +{% tabs %} +{% highlight bash tabtitle="CMD" %} ->The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with common settings (`src/styles/styles.css`, `system.config.js` ) to start all the Essential® JS 2 components. - -* Refer to the [Button component dependencies](./getting-started#dependencies) in `system.config.js` configuration file. - -`[src/system.config.js]` - -```js -System.config({ - paths: { - 'npm:': './node_modules/', - 'syncfusion:': 'npm:@syncfusion/' - }, - map: { - app: 'app', - - //Syncfusion packages mapping - "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", - "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", - "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", - "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", - "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", - }, - packages: { - 'app': { main: 'app', defaultExtension: 'js' } - } -}); +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart -System.import('app.ts').catch(console.error.bind(console)).then(function () { - document.getElementById('loader').style.display = "none"; - document.getElementById('container').style.visibility = "visible"; -}); -``` +{% endhighlight %} +{% endtabs %} + +After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. + +{% tabs %} +{% highlight bash tabtitle="CMD" %} + +cd ej2-quickstart + +{% endhighlight %} +{% endtabs %} + +## Import Syncfusion® CSS styles + +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: + +{% tabs %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-fluent2-theme --save + +{% endhighlight %} +{% endtabs %} + +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Initialize the ListBox diff --git a/ej2-javascript/listview/ts/getting-started.md b/ej2-javascript/listview/ts/getting-started.md index 986cc6798..7472b6e41 100644 --- a/ej2-javascript/listview/ts/getting-started.md +++ b/ej2-javascript/listview/ts/getting-started.md @@ -61,19 +61,32 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -To render the ListView control, need to import lists and its dependent control’s styles as given below in the `~/src/styles/styles.css` file, as shown below: +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-lists/styles/fluent2.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). + ## Add ListView to the project Add the HTML `
    ` element for ListView control to your `index.html`. @@ -188,8 +201,8 @@ The following example shows a basic ListView. ## See Also -[Data Binding Types](./data-binding/) +[Data Binding Types](./data-binding) -[ListView customization](./customizing-templates/) +[ListView customization](./customizing-templates) -[Virtualization](./virtualization/) \ No newline at end of file +[Virtualization](./virtualization) \ No newline at end of file diff --git a/ej2-javascript/maskedtextbox/ts/getting-started.md b/ej2-javascript/maskedtextbox/ts/getting-started.md index 715916269..6ab55858f 100644 --- a/ej2-javascript/maskedtextbox/ts/getting-started.md +++ b/ej2-javascript/maskedtextbox/ts/getting-started.md @@ -61,25 +61,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add MaskedTextBox to the project diff --git a/ej2-javascript/mention/ts/getting-started.md b/ej2-javascript/mention/ts/getting-started.md index 76d42691e..eafb15991 100644 --- a/ej2-javascript/mention/ts/getting-started.md +++ b/ej2-javascript/mention/ts/getting-started.md @@ -68,26 +68,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css"; -@import "../../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css"; -@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Adding the Mention control to the application diff --git a/ej2-javascript/menu/ts/getting-started.md b/ej2-javascript/menu/ts/getting-started.md index ba9992a87..866cb3e0f 100644 --- a/ej2-javascript/menu/ts/getting-started.md +++ b/ej2-javascript/menu/ts/getting-started.md @@ -65,23 +65,32 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -To render Menu component, need to import navigations and its dependent components styles as given below in the `~/src/styles/styles.css` file, as shown below: +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="styles.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-lists/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css"; -@import "../../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). + ## Add Menu to the project Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. diff --git a/ej2-javascript/message/ts/getting-started.md b/ej2-javascript/message/ts/getting-started.md index 81eee8e34..9d71a8139 100644 --- a/ej2-javascript/message/ts/getting-started.md +++ b/ej2-javascript/message/ts/getting-started.md @@ -62,24 +62,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: -> To use the combined control styles, make use of Syncfusion® [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in the application. +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add Message control diff --git a/ej2-javascript/multi-select/ts/getting-started.md b/ej2-javascript/multi-select/ts/getting-started.md index 8de140ddf..1b230a12f 100644 --- a/ej2-javascript/multi-select/ts/getting-started.md +++ b/ej2-javascript/multi-select/ts/getting-started.md @@ -67,26 +67,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Initialize the MultiSelect diff --git a/ej2-javascript/multicolumn-combobox/ts/getting-started.md b/ej2-javascript/multicolumn-combobox/ts/getting-started.md index f325725a6..8b67561e1 100644 --- a/ej2-javascript/multicolumn-combobox/ts/getting-started.md +++ b/ej2-javascript/multicolumn-combobox/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with MultiColumn ComboBox control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## MultiColumn ComboBox control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -67,27 +67,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-grids/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-multicolumn-combobox/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Initialize the MultiColumn ComboBox diff --git a/ej2-javascript/numerictextbox/ts/getting-started.md b/ej2-javascript/numerictextbox/ts/getting-started.md index b3fca870c..ca6446878 100644 --- a/ej2-javascript/numerictextbox/ts/getting-started.md +++ b/ej2-javascript/numerictextbox/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with NumericTextBox control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Numerictextbox control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -61,25 +61,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add NumericTextBox to the project diff --git a/ej2-javascript/otp-input/ts/getting-started.md b/ej2-javascript/otp-input/ts/getting-started.md index b4e57b8e9..4ad0b9eda 100644 --- a/ej2-javascript/otp-input/ts/getting-started.md +++ b/ej2-javascript/otp-input/ts/getting-started.md @@ -60,22 +60,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Adding OTP Input to the Application diff --git a/ej2-javascript/predefined-dialogs/ts/getting-started.md b/ej2-javascript/predefined-dialogs/ts/getting-started.md index 2a458221d..b12618c76 100644 --- a/ej2-javascript/predefined-dialogs/ts/getting-started.md +++ b/ej2-javascript/predefined-dialogs/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with Predefined dialogs control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Predefined dialogs control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -63,24 +63,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-icons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css'; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Render a dialog using utility functions diff --git a/ej2-javascript/progress-button/ts/getting-started.md b/ej2-javascript/progress-button/ts/getting-started.md index 3b5af3e68..ac58256af 100644 --- a/ej2-javascript/progress-button/ts/getting-started.md +++ b/ej2-javascript/progress-button/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with Progress button control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Progress button control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -62,23 +62,31 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css"; +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + +{% tabs %} +{% highlight bash tabtitle="styles.css" %} + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; + +{% endhighlight %} +{% endtabs %} + +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). ## Add ProgressButton to the project diff --git a/ej2-javascript/progressbar/ts/getting-started.md b/ej2-javascript/progressbar/ts/getting-started.md index c8c1ca598..cc55be763 100644 --- a/ej2-javascript/progressbar/ts/getting-started.md +++ b/ej2-javascript/progressbar/ts/getting-started.md @@ -62,30 +62,9 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles +### Step 6: Update the HTML Template -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. - -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: - -{% tabs %} -{% highlight css tabtitle="style.css" %} - -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css'; - -{% endhighlight %} -{% endtabs %} - -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. - -> To use the combined control styles, make use of Syncfusion® [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in the application. - -## Add Progress Bar to the Application - -* Add an HTML div tag with its id attribute as `element` in your `index.html` file to initialize the ProgressBar control. - -`[src/index.html]` +Open the `ej2-quickstart` folder in Visual Studio Code (or any text editor). Locate the `~/src/index.html` file, preserve any existing `` and ` + + + +
    + + + + {% endhighlight %} {% endtabs %} -## Run the application - -Now, run the index.html in web browser, it will render the Essential JS 2 Rich Text Editor control. - -Output will be displayed as follows. +{% previewsample "page.domainurl/code-snippet/block-editor/getting-started" %} -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/block-editor/getting-started/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/block-editor/getting-started/index.html %} -{% endhighlight %} -{% endtabs %} +## Run the application -{% previewsample "page.domainurl/code-snippet/block-editor/getting-started" %} +Now, run the index.html in web browser, it will render the Essential JS 2 Block Editor control. > You can refer to our [JavaScript Block Editor](https://www.syncfusion.com/rich-text-editor-sdk/javascript-block-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Block Editor example](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/block-editor/overview.html) that shows how to render the block editor. diff --git a/ej2-javascript/block-editor/ts/getting-started.md b/ej2-javascript/block-editor/ts/getting-started.md index b4d10270c..f804181b6 100644 --- a/ej2-javascript/block-editor/ts/getting-started.md +++ b/ej2-javascript/block-editor/ts/getting-started.md @@ -64,9 +64,7 @@ I> To apply the application-specific styles correctly, import `./style.css` into ## Adding Block Editor control -To get started, add the Block Editor control in main.ts and index.html files. Block Editor can be initialized through a div element. - -Output will be displayed as follows +To get started, add the Block Editor control in `main.ts` and `index.html` files. Block Editor can be initialized through a div element. {% tabs %} {% highlight ts tabtitle="main.ts" %} @@ -98,9 +96,7 @@ blockEditor.appendTo('#blockeditor_default'); -
    -
    -
    +
    diff --git a/ej2-javascript/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.ts b/ej2-javascript/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.ts index 6720ba711..65d0cab89 100644 --- a/ej2-javascript/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.ts +++ b/ej2-javascript/code-snippet/rich-text-editor/clipboard-cleanup-customize/index.ts @@ -1,5 +1,5 @@ -import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipboardCleanup, ClipboardWriteEventArgs } from '@syncfusion/ej2-richtexteditor'; -RichTextEditor.Inject(Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipboardCleanup, ClipboardWriteEventArgs ); +import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipBoardCleanup, ClipboardWriteEventArgs } from '@syncfusion/ej2-richtexteditor'; +RichTextEditor.Inject(Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipBoardCleanup, ClipboardWriteEventArgs ); let editor: RichTextEditor = new RichTextEditor({ beforeClipboardWrite: onBeforeClipboardWrite, diff --git a/ej2-javascript/code-snippet/rich-text-editor/clipboard-cleanup/index.ts b/ej2-javascript/code-snippet/rich-text-editor/clipboard-cleanup/index.ts index e0dfd9292..d6ee4e606 100644 --- a/ej2-javascript/code-snippet/rich-text-editor/clipboard-cleanup/index.ts +++ b/ej2-javascript/code-snippet/rich-text-editor/clipboard-cleanup/index.ts @@ -1,5 +1,5 @@ -import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipboardCleanup } from '@syncfusion/ej2-richtexteditor'; -RichTextEditor.Inject(Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipboardCleanup ); +import { RichTextEditor, Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipBoardCleanup } from '@syncfusion/ej2-richtexteditor'; +RichTextEditor.Inject(Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipBoardCleanup ); let editor: RichTextEditor = new RichTextEditor({}); editor.appendTo('#editor'); diff --git a/ej2-javascript/code-snippet/toast/toast-cs10/index.ts b/ej2-javascript/code-snippet/toast/toast-cs10/index.ts index b5e31e01e..5c7633fcb 100644 --- a/ej2-javascript/code-snippet/toast/toast-cs10/index.ts +++ b/ej2-javascript/code-snippet/toast/toast-cs10/index.ts @@ -7,9 +7,9 @@ enableRipple(true); let toast: Toast = new Toast({ title: 'Matt sent you a friend request', content: 'You have a new friend request yet to accept', - timeOut: 0 + created: () => { + toast.show(); + } }); -toast.appendTo('#element'); -toast.show(); - +toast.appendTo('#element'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/toast/toast-cs10/ts/index.html b/ej2-javascript/code-snippet/toast/toast-cs10/ts/index.html index e9a1e0a4b..439f98435 100644 --- a/ej2-javascript/code-snippet/toast/toast-cs10/ts/index.html +++ b/ej2-javascript/code-snippet/toast/toast-cs10/ts/index.html @@ -16,11 +16,7 @@
    LOADING....
    -
    -

    -
    -
    diff --git a/ej2-javascript/context-menu/ts/getting-started.md b/ej2-javascript/context-menu/ts/getting-started.md index 2cc613916..38c47a818 100644 --- a/ej2-javascript/context-menu/ts/getting-started.md +++ b/ej2-javascript/context-menu/ts/getting-started.md @@ -1,106 +1,93 @@ --- layout: post -title: Getting started with ##Platform_Name## Context menu control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Context menu control of Syncfusion Essential JS 2 and more details. +title: Getting started with Context Menu control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## Context Menu control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Context Menu +control: Context Menu publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- - + # Getting started in ##Platform_Name## Context menu control - -This section explains how to create a simple ContextMenu, and configure its available functionalities in TypeScript using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. - -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). - -## Dependencies - -The following list of dependencies are required to use the ContextMenu component in your application. - -```js -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons + +This section explains the steps to create a simple ContextMenu and demonstrates the basic usage of the ContextMenu component, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository.This seed repository is pre-configured with the Essential® JS 2 package. + +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). + +## Prerequisites + +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) + +## Set up the development environment + +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: + +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` + +Navigate to the project folder in the command prompt: + ``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - cd ej2-quickstart +``` + +## Install Syncfusion® TypeScript ContextMenu packages -{% endhighlight %} -{% endtabs %} - -## Add Syncfusion® JavaScript packages - -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. - -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. + +Use the following command to install the `@syncfusion/ej2-navigations` package: + +``` +npm install @syncfusion/ej2-navigations --save +``` + +Install the required npm packages: + +``` npm install - -{% endhighlight %} -{% endtabs %} - -## Import Syncfusion® CSS styles - -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). - +``` + +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). + +## Import Syncfusion® ContextMenu CSS styles + +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: - + {% tabs %} {% highlight bash tabtitle="npm" %} - + npm install @syncfusion/ej2-fluent2-theme --save - + {% endhighlight %} {% endtabs %} - -The required styles are imported in the `~/src/styles/styles.css` file, as shown below: - + +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: + {% tabs %} {% highlight bash tabtitle="styles.css" %} - -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; - + +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/context-menu/index.css"; + {% endhighlight %} {% endtabs %} - + > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add ContextMenu to the project +## Add Syncfusion® ContextMenu control to the application -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -Add the HTML div tag with the `id` attribute as `contextmenu` to your `index.html` file. +In this article, the ContextMenu control is used as an example. Add the following ContextMenu element to the `~/src/index.html` file. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +```html @@ -129,21 +116,15 @@ Add the HTML div tag with the `id` attribute as `contextmenu` to your `index.htm
    Right click / Touch hold to open the ContextMenu
    -
    +
      +``` +Now, to render the ContextMenu control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% endhighlight %} -{% endtabs %} - -Import the ContextMenu component in your `app.ts` file and initialize it with the `#contextmenu` and `target` option. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { ContextMenu, MenuItemModel, ContextMenuModel } from '@syncfusion/ej2-navigations'; import { enableRipple } from '@syncfusion/ej2-base'; @@ -168,20 +149,15 @@ let menuOptions: ContextMenuModel = { // Initialize ContextMenu component. let menuObj: ContextMenu = new ContextMenu(menuOptions, '#contextmenu') -{% endhighlight %} -{% endtabs %} +```` ## Run the application Run the application in the browser using the following command: -{% tabs %} -{% highlight bash tabtitle="NPM" %} - +``` npm start - -{% endhighlight %} -{% endtabs %} +``` The following example shows a basic ContextMenu component. @@ -193,20 +169,6 @@ The following example shows a basic ContextMenu component. {% previewsample "page.domainurl/code-snippet/context-menu/getting-started-cs5" %} -## Rendering items with Separator - -The Separators are the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the [`separator`](../api/context-menu/menuItemModel#separator) property. Cut, Copy, and Paste menu items are grouped using the `separator` property in the following sample. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/context-menu/getting-started-cs6/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/context-menu/getting-started-cs6" %} - -> The [`separator`](../api/context-menu/menuItemModel#separator) property `should not` be given along with the other fields in the [`MenuItem`](../api/context-menu/menuItemModel). - ## See Also * [ContextMenu with icons](./icons-and-navigation#icons) diff --git a/ej2-javascript/dashboard-layout/ts/getting-started.md b/ej2-javascript/dashboard-layout/ts/getting-started.md index 05618be67..04cb51ced 100644 --- a/ej2-javascript/dashboard-layout/ts/getting-started.md +++ b/ej2-javascript/dashboard-layout/ts/getting-started.md @@ -10,57 +10,51 @@ domainurl: ##DomainURL## --- # Getting started in ##Platform_Name## Dashboard layout control -This section explains how to create a simple **Dashboard Layout** control and configure its available functionalities, using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps to create a simple Dashboard Layout and demonstrates the basic usage of the Dashboard Layout component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies is required to use the Dashboard Layout control in your application. +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-layouts - |-- @syncfusion/ej2-base +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +## Set up the development environment -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Dashboard Layout package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-layouts` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-layouts --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Dashboard Layout CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -79,14 +73,14 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/dashboard-layout/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add Dashboard Layout to the application +## Add Syncfusion® Dashboard Layout control to the application You can render the Dashboard Layout control in the following two ways. @@ -99,11 +93,11 @@ The [`panels`](../api/dashboard-layout#panels) of the Dashboard layout control c The following sample demonstrates defining of [`panels`](../api/dashboard-layout#panels) by adding child elements within the root element. -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Dashboard Layout control is used as an example. Add the following Dashboard Layout element to the `~/src/index.html` file. +```html @@ -118,7 +112,7 @@ The following sample demonstrates defining of [`panels`](../api/dashboard-layout -
      +
      @@ -157,19 +151,32 @@ The following sample demonstrates defining of [`panels`](../api/dashboard-layout
      + +``` -{% endhighlight %} -{% endtabs %} - -Now, import the Dashboard Layout control into your `app.ts` and append it to `#dashboard_inline`. - -`[src/app/app.ts]` +Now, to render the Dashboard Layout control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { DashboardLayout } from '@syncfusion/ej2-layouts'; @@ -180,20 +187,15 @@ let dashboard: DashboardLayout = new DashboardLayout ({ // render initialized Dashboard Layout dashboard.appendTo('#dashboard_inline'); -{% endhighlight %} -{% endtabs %} +```` ## Run the application -Now, use the `npm run start` command to run the application in the browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm run start +Now, run the application in the browser using the following command. -{% endhighlight %} -{% endtabs %} +``` +npm start +``` The below output can be achieved by following the steps mentioned above. @@ -253,4 +255,6 @@ The following example shows a basic Dashboard Layout by defining the [`panels`]( {% previewsample "page.domainurl/code-snippet/dashboard-layout/getting-started-cs4" %} -> You can refer to our [JavaScript Dashboard Layout](https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Dashboard Layout example](https://ej2.syncfusion.com/demos/#/tailwind3/dashboard-layout/default.html) to knows how to present and manipulate data. +## See also + +* [How to register Syncfusion® license key in TypeScript(ES6) application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) diff --git a/ej2-javascript/dialog/ts/getting-started.md b/ej2-javascript/dialog/ts/getting-started.md index 379231fa9..d074f9f47 100644 --- a/ej2-javascript/dialog/ts/getting-started.md +++ b/ej2-javascript/dialog/ts/getting-started.md @@ -11,57 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Dialog control -This section explains how to create a simple Dialog component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps to create a simple Dialog and demonstrates the basic usage of the Dialog component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use Dialog component in your application. +Ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Dialog package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-popups` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-popups --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Dialog CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -80,37 +74,31 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/dialog/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Dialog to the project +## Add Syncfusion® Dialog control to the application -Add the div element with id attribute `#dialog` inside the body tag in your `index.html`. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Dialog control is used as an example. Add the following Dialog element to the `~/src/index.html` file. +```html - Essential JS 2 Dialog Component + Essential JS 2 - - - - - -
      + +
      @@ -118,61 +106,55 @@ Add the div element with id attribute `#dialog` inside the body tag in your `ind + ``` -{% endhighlight %} -{% endtabs %} - -> The [Custom Resource Generator (CRG)](https://crg.syncfusion.com/) is an online web tool, which can be used to generate the custom script and styles for a set of specific components. -> This web tool is useful to combine the required component scripts and styles in a single file. - -Now import the Dialog component into your `app.ts` and append it to `#dialog` -`[src/app/app.ts]` +To render the Dialog control, add the following JavaScript code to the `~/src/app/app.ts` file {% tabs %} -{% highlight ts tabtitle="app.ts" %} +{% highlight ts tabtitle="~/src/app/app.ts" %} import { Dialog } from '@syncfusion/ej2-popups'; -// Initialization of Dialog component -let dialog: Dialog = new Dialog({ +// Initialize Dialog component +let dialog = new Dialog({ + // Dialog content - content: 'This is a Dialog with content', + content: 'This is a Dialog', // The Dialog shows within the target element - target: document.getElementById("container"), + target: document.getElementById("container") as HTMLElement, // Dialog width - width: '250px' + width: '250px', + // Dialog position + position: { X: 'center', Y: 'center' } }); - // Render initialized Dialog dialog.appendTo('#dialog'); -{% endhighlight %} -{% endtabs %} - -> In the dialog control, max-height is calculated based on the dialog target element height. If the target property is not configured, the document.body is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element. - -## Run the application +// Sample level code to handle the button click action -The **Essential® JS 2 quickstart** application project is configured to compile and run the application in the browser. Use the following command to run the application: +document.getElementById('targetButton')!.onclick = (): void => { + if (dialog.visible) { + dialog.hide(); + } else { + dialog.show(); + } +}; -{% tabs %} -{% highlight bash tabtitle="NPM" %} +{% endhighlight %} +{% highlight css tabtitle="~/src/styles/styles.css" %} -npm start +html, +body, +#container { + height: 100%; + overflow: hidden; + width: 100%; +} {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dialog/getting-started-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dialog/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/dialog/getting-started-cs2" %} +> In the dialog control, max-height is calculated based on the dialog target element height. If the target property is not configured, the document.body is considered as a target. Therefore, to show a dialog in proper height, you need to add min-height to the target element. > If the dialog is rendered based on the body element, it gets the height based on the body's height. If the dialog height exceeds the body height, the dialog height will not be set. In this scenario, set the CSS height style for html and body elements: @@ -184,97 +166,16 @@ html, body { ``` -## Modal dialog - -A [modal](https://ej2.syncfusion.com/documentation/api/dialog/index-default#ismodal) dialog displays an overlay behind the dialog, requiring the user to interact with it before accessing other content in the application. - -When the user clicks the overlay, the action can be handled through the [`overlayClick`](https://ej2.syncfusion.com/documentation/api/dialog/index-default#overlayclick) event. In the sample below, the dialog closes when clicking the overlay. - -> When the modal dialog is opened, the Dialog's target scrolling will be disabled. The scrolling will be enabled again once close the Dialog. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dialog/modal-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dialog/modal-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/dialog/modal-cs2" %} - -## Enable header - -The Dialog header can be enabled by adding the header content as text or HTML content through the [`header`](https://ej2.syncfusion.com/documentation/api/dialog/index-default#header) property. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dialog/header-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dialog/header-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/dialog/header-cs2" %} - -## Configure action buttons - -The Dialog provides built-in support to render the action buttons on the footer (for ex: 'OK' or 'Cancel' buttons) by using [buttons](https://ej2.syncfusion.com/documentation/api/dialog/index-default#buttons) property. Each Dialog button allows the user to perform any action while clicking on it. - -The primary button will be focused automatically on open the Dialog, and add the [click](https://ej2.syncfusion.com/documentation/api/dialog/buttonpropsmodel#click) event to handle the actions - -> When the Dialog initialize with more than one primary buttons, the first primary button gets focus on open the Dialog. - -The below sample render with buttons and its action. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dialog/footer-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dialog/footer-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/dialog/footer-cs2" %} - -## Draggable - -The Dialog supports to [drag](https://ej2.syncfusion.com/documentation/api/dialog/index-default#allowdragging) within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically. +## Run the application -> The Dialog can be draggable only when the Dialog header is enabled. From `16.2.x` version, enabled draggable support for modal dialog also. +Now, run the application in the browser using the following command. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dialog/draggable-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dialog/draggable-cs2/index.html %} -{% endhighlight %} -{% endtabs %} +``` +npm start +``` -{% previewsample "page.domainurl/code-snippet/dialog/draggable-cs2" %} - -## Positioning - -The Dialog can be positioned using the [position](https://ej2.syncfusion.com/documentation/api/dialog/index-default#position) property by providing the X and Y co-ordinates. It can be positioned inside the target of the container or `` of the element based on the given X and Y values. - -for X is: left, center, right (or) any offset value -for Y is: top, center, bottom (or) any offset value - -The below example demonstrates the different Dialog positions. +{% previewsample "page.domainurl/code-snippet/dialog/getting-started-cs2" %} -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dialog/positioning-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dialog/positioning-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/dialog/positioning-cs2" %} ## See Also diff --git a/ej2-javascript/drop-down-button/ts/getting-started.md b/ej2-javascript/drop-down-button/ts/getting-started.md index b4ebc29bc..c687cd482 100644 --- a/ej2-javascript/drop-down-button/ts/getting-started.md +++ b/ej2-javascript/drop-down-button/ts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Drop down button control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Drop down button control of Syncfusion Essential JS 2 and more details. +title: Getting started with Dropdown Button control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## Dropdown Button control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started publishingplatform: ##Platform_Name## @@ -9,62 +9,56 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Drop down button control -This section explains how to create a simple Drop down button, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +# Getting started in ##Platform_Name## Dropdown Button control -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +This section explains the steps to create a simple Dropdown Button and demonstrates the basic usage of the Dropdown Button component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -## Dependencies +> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -The list of dependencies required to use the DropDownButton component in your application is given as follows: +## Prerequisites -```js -|-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Ensure the following tools are installed on your machine: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® TypeScript Drop down button packages -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the @syncfusion/ej2-buttons package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -81,22 +75,20 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/drop-down-button/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add DropDownButton to the project +## Add Syncfusion® Drop down button control to the application -Add the HTML button tag with ID attribute as the `element` to your `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the DropDownButton control is used as an example. Add the following DropDownButton element to the `~/src/index.html` file. +```html @@ -104,10 +96,6 @@ Add the HTML button tag with ID attribute as the `element` to your `index.html` Essential JS 2 - - - - @@ -118,17 +106,13 @@ Add the HTML button tag with ID attribute as the `element` to your `index.html` - -{% endhighlight %} -{% endtabs %} - -Then, import the DropDownButton component in your `app.ts` file and initialize with the `#element`. + + ``` -`[src/app/app.ts]` +To render the Dropdownbutton control, add the following TypeScript code to the `~/src/app/app.ts` file -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons'; @@ -150,36 +134,21 @@ let drpDownBtn: DropDownButton = new DropDownButton({ items: items }); // Render initialized DropDownButton. drpDownBtn.appendTo('#element'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start +``` + +{% previewsample "page.domainurl/code-snippet/drop-down-button/getting-started-cs1" %} -{% endhighlight %} -{% endtabs %} - -The following example shows a basic DropDownButton component. +## Registering Syncfusion license -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/drop-down-button/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/drop-down-button/getting-started-cs1/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/drop-down-button/getting-started-cs1/styles.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/drop-down-button/getting-started-cs1" %} +* [How to register Syncfusion® license key in TypeScript application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) ## See Also diff --git a/ej2-javascript/drop-down-list/ts/getting-started.md b/ej2-javascript/drop-down-list/ts/getting-started.md index f2f325723..bb0972fe8 100644 --- a/ej2-javascript/drop-down-list/ts/getting-started.md +++ b/ej2-javascript/drop-down-list/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Drop down list control | Syncfusion +title: Getting started with DropDown List control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Drop down list control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -9,57 +9,53 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Drop down list control +# Getting started in ##Platform_Name## DropDown List control -This section explains how to create a simple **DropDownList** component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. +This section explains the steps to create a simple DropDown List and demonstrates the basic usage of the DropDown List component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node.js v14.0 or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies -The following list of dependencies are required to use the DropDownList component in your application. +## Prerequisites -```javascript -|-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -## Setup the development environment +## Set up the development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: ``` -git clone https://github.com/syncfusion/ej2-quickstart.git quickstart -cd quickstart -npm install +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart ``` ->The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with common settings (`src/styles/styles.css`, `system.config.js` ) to start all the Essential® JS 2 components. +Navigate to the project folder in the command prompt: -## Add Syncfusion® JavaScript packages +``` +cd ej2-quickstart +``` -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +## Install Syncfusion® TypeScript DropDown List packages -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Use the following command to install the @syncfusion/ej2-dropdowns package: -{% tabs %} -{% highlight bash tabtitle="NPM" %} +``` +npm install @syncfusion/ej2-dropdowns --save +``` +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -76,14 +72,14 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/drop-down-list/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the DropDownList +## Add Syncfusion® DropDown List control to the application The DropDownList can be initialized through input, select, or textarea tags as described in the [Initialize Tags](../tags). @@ -99,16 +95,6 @@ Add the HTML input element that needs to be initialized as a DropDownList in `in Essential JS 2 DropDownList component - - - - - - - - - - @@ -124,24 +110,10 @@ Add the HTML input element that needs to be initialized as a DropDownList in `in Now, import the DropDownList component to your `app.ts` and initialize it to the element `#dropDown` as shown below. -`[src/app/app.ts]` - -```ts - -import { DropDownList } from '@syncfusion/ej2-dropdowns'; - -// initialize DropDownList component -let dropDownListObject: DropDownList = new DropDownList(); - -// render initialized DropDownList -dropDownListObject.appendTo('#dropDown'); - -``` - -## Binding data source - After initialization, populate the DropDownList with data using the [dataSource](https://ej2.syncfusion.com/documentation/api/drop-down-list#datasource) property. Here, an array of string values is passed to the DropDownList component. +`[src/app/app.ts]` + ```ts import { DropDownList } from '@syncfusion/ej2-dropdowns'; @@ -160,44 +132,16 @@ dropDownListObject.appendTo('#ddlelement'); ## Run the application -After completing the configuration required to render a basic DropDownList, run the following command to display the output in your default browser. +Now, run the application in the browser using the following command. ``` -npm run start +npm start ``` The following example illustrates the output in your browser. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dropdownlist/getting-started-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dropdownlist/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} {% previewsample "page.domainurl/code-snippet/dropdownlist/getting-started-cs3" %} -## Configure the popup list - -By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list is 300px. - -The height and width of the popup list can also be customized using the [popupHeight](https://ej2.syncfusion.com/documentation/api/drop-down-list#popupheight) and [popupWidth](https://ej2.syncfusion.com/documentation/api/drop-down-list#popupwidth) properties, respectively. - -In the following sample, popup list's width and height are configured. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dropdownlist/getting-started-cs4/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dropdownlist/getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/dropdownlist/getting-started-cs4" %} - ## See Also * [How to bind the data](./data-binding) diff --git a/ej2-javascript/drop-down-tree/ts/getting-started.md b/ej2-javascript/drop-down-tree/ts/getting-started.md index ee4545b7a..7b9dd5557 100644 --- a/ej2-javascript/drop-down-tree/ts/getting-started.md +++ b/ej2-javascript/drop-down-tree/ts/getting-started.md @@ -1,72 +1,62 @@ --- layout: post -title: Getting started with ##Platform_Name## Dropdown Tree control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Dropdown Tree control of Syncfusion Essential JS 2 and more details. +title: Getting started with ##Platform_Name## DropDown Tree control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## DropDown Tree control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Dropdown Tree +control: DropDown Tree publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## Dropdown Tree control +# Getting started with ##Platform_Name## DropDown Tree control -This section explains you about how to create a simple **Dropdown Tree** control and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart). +This section explains the steps to create a simple DropDown Tree and demonstrates the basic usage of the DropDown Tree component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -## Dependencies +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -The following list of dependencies are required to use the Dropdown Tree control in your application. -```javascript -|-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment +## Prerequisites -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Ensure the following tools are installed on your machine: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -## Add Syncfusion® JavaScript packages - -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +## Install Syncfusion® TypeScript DropDown Tree packages -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Use the following command to install the @syncfusion/ej2-dropdowns package: -{% tabs %} -{% highlight bash tabtitle="NPM" %} +``` +npm install @syncfusion/ej2-dropdowns --save +``` +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} + +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -83,14 +73,14 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/drop-down-tree/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the Dropdown Tree +## Add Syncfusion® DropDown Tree control to the application Add the HTML input element that needs to be initialized as a Dropdown Tree in `index.html`. @@ -103,10 +93,6 @@ Add the HTML input element that needs to be initialized as a Dropdown Tree in `i Essential JS 2 Dropdown Tree control - - - - @@ -119,26 +105,12 @@ Add the HTML input element that needs to be initialized as a Dropdown Tree in `i ``` +The Dropdown Tree control can load the data either from local data sources or remote data services. This can be done using the [`dataSource`](https://ej2.syncfusion.com/documentation/api/drop-down-tree/fieldsmodel#datasource) property that is a member of the [`fields`](https://ej2.syncfusion.com/documentation/api/drop-down-tree/dropdowntreemodel#fields) property. The dataSource property supports array of JavaScript objects and DataManager. Here, an array of JSON values is passed to the Dropdown Tree control. + Now, import the Dropdown Tree control to your `app.ts` and initialize it to the element `#ddTreeElement` as shown below. `[src/app/app.ts]` -```ts - -import { DropDownTree } from '@syncfusion/ej2-dropdowns'; - -// initialize Dropdown Tree control -let DropDownTreeObject: DropDownTree = new DropDownTree(); - -// render initialized Dropdown Tree -DropDownTreeObject.appendTo('#ddTreeElement'); - -``` - -## Binding data source - -The Dropdown Tree control can load the data either from local data sources or remote data services. This can be done using the [`dataSource`](https://ej2.syncfusion.com/documentation/api/drop-down-tree/fieldsmodel#datasource) property that is a member of the [`fields`](https://ej2.syncfusion.com/documentation/api/drop-down-tree/dropdowntreemodel#fields) property. The dataSource property supports array of JavaScript objects and DataManager. Here, an array of JSON values is passed to the Dropdown Tree control. - ```ts import { DropDownTree } from '@syncfusion/ej2-dropdowns'; @@ -181,24 +153,10 @@ DropDownTreeObject.appendTo('#ddTreeElement'); ## Run the application -After completing the configuration required to render a basic Dropdown Tree, run the following command to display the output in your default browser. +Now, run the application in the browser using the following command. ``` -npm run start +npm start ``` -The following example explains the output in your browser. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/dropdowntree/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/dropdowntree/getting-started-cs1/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/dropdowntree/getting-started-cs1/styles.css %} -{% endhighlight %} -{% endtabs %} - {% previewsample "page.domainurl/code-snippet/dropdowntree/getting-started-cs1" %} diff --git a/ej2-javascript/gantt/ts/getting-started.md b/ej2-javascript/gantt/ts/getting-started.md index 9eca9e418..39566f1cc 100644 --- a/ej2-javascript/gantt/ts/getting-started.md +++ b/ej2-javascript/gantt/ts/getting-started.md @@ -11,8 +11,6 @@ domainurl: ##DomainURL## # Getting Started in TypeScript Gantt Chart Control -The [JavaScript Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart) is a UI component used to visualize and manage project schedules using a timeline view. It supports hierarchical task data, scheduling, and rich interactive features. - This section explains the steps to create a simple Gantt Chart and demonstrates the basic usage of the gantt component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node **v14.15.0** or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). @@ -33,7 +31,7 @@ git --version ## Setup development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® Typescript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -53,9 +51,9 @@ cd ej2-quickstart-webpack {% endhighlight %} {% endtabs %} -## Add Syncfusion® JavaScript packages +## Add Syncfusion® TypeScript packages -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control, such as [@syncfusion/ej2-gantt](https://www.npmjs.com/package/@syncfusion/ej2-gantt) for just the Gantt Chart. +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control, such as [@syncfusion/ej2-gantt](https://www.npmjs.com/package/@syncfusion/ej2-gantt) for just the Gantt Chart. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package (version 21.x or higher) in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -69,19 +67,19 @@ npm install ## Import the Syncfusion® CSS styles -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® TypeScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® TypeScript controls to match the style of your application by referring to one of the built-in themes. + +The quickstart application is preconfigured to use the **Fluent 2** theme. To use the Tailwind 3 theme instead, install the **Tailwind 3** theme package using the following command: -Install the **Tailwind 3** theme package using the following command: - {% tabs %} {% highlight bash tabtitle="npm" %} - + npm install @syncfusion/ej2-tailwind3-theme --save - + {% endhighlight %} {% endtabs %} -The quickstart application is preconfigured to use the **Tailwind3** theme in the `~/src/styles/styles.css` file, as shown below: +After installing the Tailwind 3 theme, update the `~/src/styles/styles.css` file as shown below: {% tabs %} {% highlight css tabtitle="style.css" %} @@ -91,7 +89,7 @@ The quickstart application is preconfigured to use the **Tailwind3** theme in th {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes (material, bootstrap, fabric, etc.) and CSS reference for individual controls. To use a different theme, replace `tailwind3.css` with the desired theme name (e.g., `material.css`, `bootstrap5.css`). +> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes (material, bootstrap, fabric, etc.) and CSS reference for individual controls. To use a different theme, replace the theme name in the import statement with the desired theme name (e.g., `material.css`, `bootstrap5.css`). The imported CSS is added to the global stylesheet and styles are automatically applied to all Syncfusion components during application runtime. No additional configuration is required in the TypeScript (`.ts`) file. diff --git a/ej2-javascript/image-editor/ts/getting-started.md b/ej2-javascript/image-editor/ts/getting-started.md index f2a0e6aea..f936ef2ed 100644 --- a/ej2-javascript/image-editor/ts/getting-started.md +++ b/ej2-javascript/image-editor/ts/getting-started.md @@ -11,62 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Image editor control -This section explains how to create a basic Image Editor control and configure its available features in TypeScript using Essential® JS 2 with the [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps to create a simple Image editor and demonstrates the basic usage of the Image editor component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the Image Editor control in your application. +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-image-editor - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-splitbuttons -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Image editor package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-image-editor` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-image-editor --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Image editor CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -85,50 +74,41 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/image-editor/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Image Editor control to the application +## Add Syncfusion® Image editor control to the application -Add the HTML DIV tag with the `id` attribute as `image-editor` to your `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Image editor control is used as an example. Add the following Image editor element to the `~/src/index.html` file. +```html - Essential JS 2 - Image Editor + Essential JS 2 - - - -
      +
      +
      - -{% endhighlight %} -{% endtabs %} - -Import the Image Editor control in your `app.ts` file and initialize it with the `#image-editor`. - -`[src/app/app.ts]` + + ``` -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Image editor control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { ImageEditor } from '@syncfusion/ej2-image-editor'; new ImageEditor({ @@ -136,30 +116,18 @@ import { ImageEditor } from '@syncfusion/ej2-image-editor'; height: '350px', }, '#image-editor'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Execute the following command to build and run the application in the browser: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic Image Editor control. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/image-editor/getting-started-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/image-editor/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/image-editor/getting-started-cs3" %} + +## See Also + +* [Render Image Editor in Dialog](./how-to/render-dialog) diff --git a/ej2-javascript/installation-and-upgrade/common-installation-errors.md b/ej2-javascript/installation-and-upgrade/common-installation-errors.md index a1f560919..9e781e9d2 100644 --- a/ej2-javascript/installation-and-upgrade/common-installation-errors.md +++ b/ej2-javascript/installation-and-upgrade/common-installation-errors.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Common installation errors +# Common Installation Errors This article describes the most common installation errors, as well as the causes and solutions to those errors. diff --git a/ej2-javascript/installation-and-upgrade/download.md b/ej2-javascript/installation-and-upgrade/download.md index 9d07802aa..a8ab24b5a 100644 --- a/ej2-javascript/installation-and-upgrade/download.md +++ b/ej2-javascript/installation-and-upgrade/download.md @@ -16,14 +16,14 @@ The Syncfusion® JavaScript - EJ2 installer * Trial Installer * Licensed Installer -## Download the trial version +## Download the Trial Version Our 30-day trial can be downloaded in two ways. * Download Free Trial Setup * Start Trials if using components through [npm](https://www.npmjs.com/~syncfusionorg) -### Download free trial setup +### Download Free Trial Setup 1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the JavaScript platform. @@ -83,7 +83,7 @@ You should initiate an evaluation if you have already obtained our components th 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/start-trials) page. -### Download the license version +### Download the License Version 1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. diff --git a/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md index 1360044f2..f06db57e8 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-mac-installer.md @@ -26,7 +26,7 @@ domainurl: ##DomainURL## 3. When you click "Open" the installer window will be opened. -## Step-by-step installation +## Step-by-Step Installation The steps below show how to install the Essential Studio® JavaScript - EJ2 Mac installer. diff --git a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md index 7464f4f04..a0610bb4e 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-offline-installer.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Installation using offline installer +# Installation using Offline Installer You can refer to the [Download](../installation-and-upgrade/download) section to learn how to get the JavaScript – EJ2 trial or licensed installer. @@ -95,7 +95,7 @@ The steps below show how to install the Essential Studio® Essential Studio® JavaScript – EJ2 Installer supports installation and uninstallation via the command line. -### Command line installation +### Command Line Installation To install through the Command Line in Silent mode, follow the steps below. @@ -116,7 +116,7 @@ To install through the Command Line in Silent mode, follow the steps below. >Note: x.x.x.x should be replaced with the Essential Studio® version and the Product Unlock Key needs to be replaced with the Unlock Key for that version. -### Command line uninstallation +### Command Line Uninstallation Syncfusion® Essential® JavaScript – EJ2 can be uninstalled silently using the Command Line. diff --git a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md index bfa674019..7e6256b2d 100644 --- a/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md +++ b/ej2-javascript/installation-and-upgrade/installation-using-web-installer.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Installation using web installer +# Installation using Web Installer You can refer to the [Download](https://ej2.syncfusion.com/documentation/installation-and-upgrade/download/) section to learn how to get the JavaScript – EJ2 trial or licensed installer. diff --git a/ej2-javascript/installation-and-upgrade/installation.md b/ej2-javascript/installation-and-upgrade/installation.md index 6baea82f3..dba9c707f 100644 --- a/ej2-javascript/installation-and-upgrade/installation.md +++ b/ej2-javascript/installation-and-upgrade/installation.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## # Installation -## Install via npm CLI +## Install via npm CLI Syncfusion® JavaScript (Essential® JS 2) packages are published in [npm](https://www.npmjs.com/search?q=scope:syncfusion). You can install the necessary packages from npm’s install command. For example, grid package can be installed using following command. diff --git a/ej2-javascript/installation-and-upgrade/linux-installer/download.md b/ej2-javascript/installation-and-upgrade/linux-installer/download.md index 92dfcbeac..924d22211 100644 --- a/ej2-javascript/installation-and-upgrade/linux-installer/download.md +++ b/ej2-javascript/installation-and-upgrade/linux-installer/download.md @@ -18,7 +18,7 @@ The Syncfusion® installer can be downloaded You can download the Syncfusion® installer from [Syncfusion.com](https://www.syncfusion.com/) website -## Download the trial version +## Download the Trial Version Our 30-day trial can be downloaded in two ways. @@ -26,7 +26,7 @@ Our 30-day trial can be downloaded in two ways. * Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) -### Download free trial setup +### Download Free Trial Setup 1. You can evaluate our 30-day free trial by visiting the [Download Free Trial](https://www.syncfusion.com/downloads) page and select the product 2. After completing the required form or logging in with your registered Syncfusion® account, you can download the trial installer from the confirmation page. (as shown in below screenshot.) @@ -43,7 +43,7 @@ Our 30-day trial can be downloaded in two ways. ![License and downloads of Syncfusion JavaScript](images/start-trial-download-offline-installer.png) -### Start trials if using components through [nuget.org](https://www.nuget.org/packages?q=syncfusion) +### Start Trials if using components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) You should initiate an evaluation if you have already obtained our components through [NuGet.org](https://www.nuget.org/packages?q=syncfusion) @@ -65,7 +65,7 @@ You should initiate an evaluation if you have already obtained our components th 5. You can find your current active trial products on the [Trials & Downloads](https://www.syncfusion.com/account/manage-trials/downloads) page. -## Download the license version +## Download the License Version 1. Syncfusion® licensed products will be available in the [License & Downloads](https://www.syncfusion.com/account/downloads) page under your registered Syncfusion® account. 2. You can view all the licenses (both active and expired) associated with your account. diff --git a/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md b/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md index c57aab9c1..347e5ddb7 100644 --- a/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md +++ b/ej2-javascript/installation-and-upgrade/linux-installer/installation-using-linux-installer.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Installing Syncfusion® JavaScript Linux installer -## Step-by-step installation +## Step-by-Step Installation The steps below show how to install JavaScript Linux installer. diff --git a/ej2-javascript/multi-select/ts/getting-started.md b/ej2-javascript/multi-select/ts/getting-started.md index 1b230a12f..700730365 100644 --- a/ej2-javascript/multi-select/ts/getting-started.md +++ b/ej2-javascript/multi-select/ts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with ##Platform_Name## Multi select control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Multi select control of Syncfusion Essential JS 2 and more details. +title: Getting started with ##Platform_Name## MultiSelect control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## MultiSelect control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started publishingplatform: ##Platform_Name## @@ -9,67 +9,53 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Multi select control +# Getting started in ##Platform_Name## MultiSelect control -This section explains how to create a simple **MultiSelect** component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. +This section explains the steps to create a simple MultiSelect and demonstrates the basic usage of the MultiSelect component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node.js v14.0 or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies -The following list of dependencies are required to use the MultiSelect component in your application. +## Prerequisites -```javascript -|-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment +Ensure the following tools are installed on your machine: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -## Add Syncfusion® JavaScript packages - -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +## Install Syncfusion® TypeScript MultiSelect packages -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Use the following command to install the @syncfusion/ej2-dropdowns package: -{% tabs %} -{% highlight bash tabtitle="NPM" %} +``` +npm install @syncfusion/ej2-dropdowns --save +``` +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -86,14 +72,14 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/multi-select/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the MultiSelect +## Add Syncfusion® MultiSelect control to the application The MultiSelect can be initialized through three different tags as described in the [Initialize Tags](https://ej2.syncfusion.com/documentation/multi-select/tags). @@ -101,9 +87,7 @@ Add the HTML input element that needs to be initialized as a MultiSelect in `ind `[src/index.html]` -{% tabs %} -{% highlight html tabtitle="index.html" %} - +```html @@ -111,9 +95,6 @@ Add the HTML input element that needs to be initialized as a MultiSelect in `ind Essential JS 2 MultiSelect component - - - @@ -125,35 +106,15 @@ Add the HTML input element that needs to be initialized as a MultiSelect in `ind - -{% endhighlight %} -{% endtabs %} +``` Now, import the MultiSelect component to your `app.ts` and initialize it to the element `#select` as shown below. -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { MultiSelect } from '@syncfusion/ej2-dropdowns'; - -// initialize MultiSelect component -let msObject: MultiSelect = new MultiSelect(); - -// render initialized MultiSelect -msObject.appendTo('#select'); - -{% endhighlight %} -{% endtabs %} - -## Binding data source - After initialization, populate the MultiSelect with data using the [dataSource](https://ej2.syncfusion.com/documentation/api/multi-select#datasource)  property. Here, an array of string values is passed to the MultiSelect component. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +`[src/app/app.ts]` +```ts import { MultiSelect } from '@syncfusion/ej2-dropdowns'; // define the array of data @@ -167,54 +128,18 @@ let msObject: MultiSelect = new MultiSelect({ // render initialized MultiSelect msObject.appendTo('#select'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -After completing the configuration required to render a basic MultiSelect, run the following command to display the output in your default browser. +Now, run the application in the browser using the following command. -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm run start - -{% endhighlight %} -{% endtabs %} - -The following example illustrates the output in your browser. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/multiselect/getting-started-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/multiselect/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - +``` +npm start +``` + {% previewsample "page.domainurl/code-snippet/multiselect/getting-started-cs3" %} -## Configure the popup list - -By default, the width of the popup list automatically adjusts according to the MultiSelect input element's width, and the height auto adjust's according to the height of the popup list items. - -The height and width of the popup list can also be customized using the [popupHeight](https://ej2.syncfusion.com/documentation/api/multi-select#popupheight)  and [popupWidth](https://ej2.syncfusion.com/documentation/api/multi-select#popupwidth) properties respectively. - -In the following sample, popup list's width and height are configured. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/multiselect/getting-started-cs4/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/multiselect/getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/multiselect/getting-started-cs4" %} - ## See Also * [How to bind the data](./data-binding) diff --git a/ej2-javascript/query-builder/ts/getting-started.md b/ej2-javascript/query-builder/ts/getting-started.md index dfc192fd6..df78eeb7f 100644 --- a/ej2-javascript/query-builder/ts/getting-started.md +++ b/ej2-javascript/query-builder/ts/getting-started.md @@ -11,63 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Query builder control -This section explains how to create a simple Query Builder and to configure the [Query Builder component](https://www.syncfusion.com/javascript-ui-controls/js-query-builder). - -## Dependencies - -The list of dependencies required to use the Query Builder component in your application is given below: - -```js -|-- @syncfusion/ej2-querybuilder - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-datamanager - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-calendars - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-splitbuttons -``` +This section explains the steps to create a simple Querybuilder and demonstrates the basic usage of the Querybuilder component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -## Set up development environment +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +## Prerequisites -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Ensure the following tools are installed on your machine: -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% endhighlight %} -{% endtabs %} +## Setup for local development -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -cd ej2-quickstart +Navigate to the project folder in the command prompt: -{% endhighlight %} -{% endtabs %} +``` +cd ej2-quickstart +``` -## Add Syncfusion® JavaScript packages +## Adding Syncfusion® TypeScript Querybuilder packages -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the @syncfusion/ej2-querybuilder package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-querybuilder --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -84,22 +72,20 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/query-builder/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add Query Builder to the project - -Add the HTML Div tag with id attribute as the `element` to your `index.html` file. +## Add Syncfusion® Querybuilder control to the application -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Query builder control is used as an example. Add the following Query builder element to the `~/src/index.html` file. +```html @@ -107,29 +93,21 @@ Add the HTML Div tag with id attribute as the `element` to your `index.html` fil Essential JS 2 - - - -
      - +
      +
      + ``` -{% endhighlight %} -{% endtabs %} +To render the Querybuilder control, add the following TypeScript code to the `~/src/app/app.ts` file -Then, import the Query Builder component in your `app.ts` file, and initialize it with the `#element`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { QueryBuilder, ColumnsModel } from '@syncfusion/ej2-querybuilder'; @@ -152,122 +130,19 @@ import { QueryBuilder, ColumnsModel } from '@syncfusion/ej2-querybuilder'; }); qryBldrObj.appendTo('#querybuilder'); -{% endhighlight %} -{% endtabs %} -## Run the application +``` -Run the application in the browser using the following command: +## Run the application -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start +``` + +{% previewsample "psage.domainurl/code-snippet/query-builder/getting-started-cs17" %} -{% endhighlight %} -{% endtabs %} - -The following example shows a basic Query Builder component. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/query-builder/getting-started-cs16/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/query-builder/getting-started-cs16/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/query-builder/getting-started-cs16" %} - -## Rendering with rule - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder'; - -let employeeData: Object[] = [{ - 'EmployeeID': 1, - 'FirstName': 'Nancy', - 'Title': 'Sales Representative', - 'TitleOfCourtesy': 'Ms.', - 'HireDate': '22/07/2001', - 'City': 'Seattle', - 'Country': 'USA' - }, - { - 'EmployeeID': 2, - 'FirstName': 'Andrew', - 'Title': 'Vice President', - 'TitleOfCourtesy': 'Dr.', - 'HireDate': '21/04/2003', - 'City': 'Tacoma', - 'Country': 'USA' - }, - { - 'EmployeeID': 3, - 'FirstName': 'Janet', - 'Title': 'Sales Representative', - 'TitleOfCourtesy': 'Ms.', - 'HireDate': '22/07/2001', - 'City': 'Kirkland', - 'Country': 'USA' - }]; -/** - * Default querybuilder sample - */ - - let columnData: ColumnsModel[] = [ - { field: 'EmployeeID', label: 'EmployeeID', type: 'number'}, - { field: 'FirstName', label: 'FirstName', type: 'string' }, - { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] }, - { field: 'Title', label: 'Title', type: 'string' }, - { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' }, - { field: 'Country', label: 'Country', type: 'string' }, - { field: 'City', label: 'City', type: 'string' } - ]; - let importRules: RuleModel = { - 'condition': 'and', - 'rules': [{ - 'label': 'EmployeeID', - 'field': 'EmployeeID', - 'type': 'number', - 'operator': 'equal', - 'value': 1001 - }, - { - 'label': 'Title', - 'field': 'Title', - 'type': 'string', - 'operator': 'equal', - 'value': 'Sales Manager' - }] - }; - let qryBldrObj: QueryBuilder = new QueryBuilder({ - width: '70%', - dataSource: employeeData, - columns: columnData, - rule: importRules, - }); - qryBldrObj.appendTo('#querybuilder'); - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic QueryBuilder component. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/query-builder/getting-started-cs17/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/query-builder/getting-started-cs17/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/query-builder/getting-started-cs17" %} +## See also -> You can also explore our [JavaScript Query Builder example](https://ej2.syncfusion.com/demos/#/material/query-builder/getting-started) that shows how to render the Query Builder in JavaScript. \ No newline at end of file +* [How to register Syncfusion® license key in TypeScript application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) \ No newline at end of file diff --git a/ej2-javascript/rich-text-editor/clipboard-cleanup.md b/ej2-javascript/rich-text-editor/clipboard-cleanup.md index 4f2cac813..d5101296b 100644 --- a/ej2-javascript/rich-text-editor/clipboard-cleanup.md +++ b/ej2-javascript/rich-text-editor/clipboard-cleanup.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## The Rich Text Editor supports automatic cleanup of clipboard content during copy (`Ctrl + C`) and cut (`Ctrl + X`) operations. When this feature is enabled, unwanted inline styles are automatically removed from the clipboard content while preserving important structural elements such as tables, lists, and images. You can enable this behavior using the [enableClipboardCleanup](https://ej2.syncfusion.com/documentation/api/rich-text-editor/index-default#enableclipboardcleanup) property. -> Rich Text Editor features are segregated into individual feature-wise modules. To use clipboard cleanup, inject ClipboardCleanup module using the `RichTextEditor.Inject(ClipboardCleanup)`. +> Rich Text Editor features are segregated into individual feature-wise modules. To use clipboard cleanup, inject ClipBoardCleanup module using the `RichTextEditor.Inject(ClipBoardCleanup)`. When `enableClipboardCleanup` is set to `true`, copy and cut operations are intercepted to remove unwanted inline styles. When set to `false` the browser’s default copy and cut behavior applies. @@ -83,11 +83,11 @@ In this example, the `beforeClipboardWrite` event is used to customize the selec ### Best Practices -- Always include `ClipboardCleanup` in production application - it’s the #1 way to prevent style explosion. +- Always include `ClipBoardCleanup` in production application - it’s the #1 way to prevent style explosion. - Combine with Paste Cleanup module for even stricter incoming paste handling. - Use `beforeClipboardWrite` sparingly — heavy processing can slightly delay `Ctrl+C`. ### Common Issues -- “Copied content still has inline styles” → Confirm `ClipboardCleanup` is in providers. +- “Copied content still has inline styles” → Confirm `ClipBoardCleanup` is in providers. - “Event not firing” → Make sure you’re using the correct event name `beforeClipboardWrite` (camelCase in TypeScript & JavaScript). diff --git a/ej2-javascript/rich-text-editor/ts/module.md b/ej2-javascript/rich-text-editor/ts/module.md index d62961de5..db0e40252 100644 --- a/ej2-javascript/rich-text-editor/ts/module.md +++ b/ej2-javascript/rich-text-editor/ts/module.md @@ -63,7 +63,7 @@ The following example demonstrates how to import and inject modules. | `AutoFormat` | Injecting this module automatically converts Markdown syntax into HTML as you type, supporting inline and block-level formatting for a seamless editing experience. | | `Audio` | Injecting this module allows users to insert and manage audios in the Rich Text Editor. | | `Video` | Injecting this module allows users to insert and manage videos in the Rich Text Editor. | -| `ClipboardCleanup` | Injecting this module allows to automatically clean clipboard content during copy and cut—removing unwanted inline styles while preserving structure. | +| `ClipBoardCleanup` | Injecting this module allows to automatically clean clipboard content during copy and cut—removing unwanted inline styles while preserving structure. | | `AIAssistant` | Injecting this module provides AI Assistant functionalities to the Rich Text Editor. | diff --git a/ej2-javascript/sidebar/ts/getting-started.md b/ej2-javascript/sidebar/ts/getting-started.md index 46324d068..f5f0ea698 100644 --- a/ej2-javascript/sidebar/ts/getting-started.md +++ b/ej2-javascript/sidebar/ts/getting-started.md @@ -11,63 +11,50 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Sidebar control -This section briefly explains how to create a simple **Sidebar** control, and configure it in TypeScript using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains the steps to create a simple Sidebar and demonstrates the basic usage of the Sidebar component using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the Sidebar control in your application. +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-build - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -## Add Syncfusion® JavaScript packages - -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. - -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +## Install Syncfusion® Sidebar package -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-navigations` package: + +``` +npm install @syncfusion/ej2-navigations --save +``` + +Install the required npm packages: + +``` npm install +``` +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -{% endhighlight %} -{% endtabs %} - -## Import Syncfusion® CSS styles +## Import Syncfusion® Sidebar CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -86,24 +73,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/sidebar/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize Sidebar using HTML elements +## Add Syncfusion® Sidebar control to the application A Sidebar can be initialized using any HTML element. Most probably the `
      - - -{% endhighlight %} -{% endtabs %} - -* Import the Sidebar control to your `app.ts` file, and initialize it to the `#default` as follows: + +``` -`[src/app/app.ts]` +Now, to render the Sidebar control, add the following TypeScript code to the `~/src/app/app.ts` file, and initialize it to the `#default` as follows: -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { Sidebar } from '@syncfusion/ej2-navigations'; let defaultSidebar: Sidebar = new Sidebar(); defaultSidebar.appendTo('#default'); -{% endhighlight %} -{% endtabs %} - +```` ## Run the application -The **Essential® JS 2 quickstart** application project is configured to compile and run the application in browser. -Use the following command to run the application. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} +``` {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -178,102 +153,6 @@ npm start > Sidebar will, by default, fit the size of its content. There is also an option to set a certain width using the [`width`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#width) property. -## Enable backdrop - -Enabling the [`showBackdrop`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#showbackdrop) in the Sidebar control will prevent the main content from user interactions, when it is in expanded state. Here, the DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen. Sidebar can be rendered with specific width by setting [`width`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#width) property. - -N> To achieve a proper **backdrop**, we suggest that you create a wrapper parent container for the div block in which you intend to enable the backdrop. Set the class name of this parent container as the [`target`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#target) for the Sidebar. Alternatively, you can place an empty div container after the target container. - -The following example shows a Sidebar control with enabled backdrop. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/sidebar/sidebar-howTo-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sidebar/sidebar-howTo-cs3/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/sidebar/sidebar-howTo-cs3/styles.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sidebar/sidebar-howTo-cs3" %} - -## Position - -Positioning the Sidebar to the right or left of the main content can be achieved by using the [`position`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#position) property. If the position is not set, the Sidebar will expand from the left to the body element. [`enablePersistence`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#enablepersistence) will persist the control's state between page reloads. [`change`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#change) event will be triggered when the state(expand/collapse) of the control is changed. - -In the following sample, the position of the Sidebar can be changed using the radio buttons in the main content. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/sidebar/position-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sidebar/position-cs3/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/sidebar/position-cs3/styles.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sidebar/position-cs3" %} - -## Animate - -Animation transitions can be set while expanding or collapsing the Sidebar using the [`animate`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#animate) property. By default , [`animate`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#animate) property is set to **true**. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/sidebar/animate-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sidebar/animate-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/sidebar/animate-cs2/styles.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sidebar/animate-cs2" %} - -## Close on document click - -Sidebar can be closed on document click by setting [`closeOnDocumentClick`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#closeondocumentclick) to **true**. If this property is not set, the Sidebar will not close on document click since its default value is **false**. Sidebar can be kept opened during rendering using [`isOpen`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#isopen) property. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/sidebar/document-click-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sidebar/document-click-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/sidebar/document-click-cs2/styles.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sidebar/document-click-cs2" %} - -## Enable gestures - -Expand or collapse the Sidebar while swiping in touch devices using [`enableGestures`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#enablegestures) property. By default, [`enableGestures`](https://ej2.syncfusion.com/documentation/api/sidebar/index-default#enablegestures) is set to **true**. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/sidebar/gestures-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sidebar/gestures-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/sidebar/gestures-cs2/styles.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sidebar/gestures-cs2" %} - ## See Also * [Sidebar with navigation menu](https://ej2.syncfusion.com/demos/#/material/sidebar/sidebar-menu.html) diff --git a/ej2-javascript/splitter/ts/getting-started.md b/ej2-javascript/splitter/ts/getting-started.md index ac6239fcc..a78a4990c 100644 --- a/ej2-javascript/splitter/ts/getting-started.md +++ b/ej2-javascript/splitter/ts/getting-started.md @@ -11,57 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Splitter control -This section explains how to create a simple **Splitter** component and configure its available functionalities, using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. +This section explains the steps to create a simple Splitter and demonstrates the basic usage of the Splitter component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -## Dependencies +## Prerequisites -The following list of dependencies required to use the splitter control in your application: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-layouts - |-- @syncfusion/ej2-base +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -``` - -## Set up development environment +## Set up the development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Splitter package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-layouts` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-layouts --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Splitter CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -80,22 +74,20 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/splitter/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding splitter to the project +## Add Syncfusion® Splitter control to the application -The splitter can be initialized through div tag with child elements. Add the div element with the id attribute `#splitter` inside the body tag in your `index.html`. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Splitter control is used as an example. Add the following Splitter element to the `~/src/index.html` file. +```html @@ -122,17 +114,11 @@ The splitter can be initialized through div tag with child elements. Add the div +``` -{% endhighlight %} -{% endtabs %} - -Now, import the splitter control to your `app.ts` and initialize it to the element `#splitter` as follows. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +Now, to render the Splitter control, add the following TypeScript code to the `~/src/app/app.ts` file. +```ts import { Splitter } from '@syncfusion/ej2-layouts'; // Initialize Splitter control @@ -143,9 +129,7 @@ let splitObject: Splitter = new Splitter({ // Render initialized splitter splitObject.appendTo('#splitter'); - -{% endhighlight %} -{% endtabs %} +``` ## Load content to the pane @@ -153,12 +137,9 @@ You can load the pane contents in either HTML element or string types using [con For detailed information, refer to the [pane content](./pane-content) section. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - +```ts import { Splitter } from '@syncfusion/ej2-layouts'; -// Initialize splitter control let splitObj: Splitter = new Splitter({ paneSettings: [ // Content for Pane 1 @@ -173,26 +154,18 @@ let splitObj: Splitter = new Splitter({ height: '250px' }); -// Render initialized splitter splitObj.appendTo('#splitter'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -After completing the configuration to render the splitter, run the following command to display -the output in your default browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm run start +Now, run the application in the browser using the following command. -{% endhighlight %} -{% endtabs %} +``` +npm start +``` -The following example illustrates the output in your browser. +The below output can be achieved by following the steps mentioned above. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -205,8 +178,6 @@ The following example illustrates the output in your browser. {% previewsample "page.domainurl/code-snippet/splitter/getting-started-cs2" %} -## See Also +## See also -* [Resizable split panes](./resizing) -* [Collapsible panes](./expand-and-collapse) -* [Construct different layouts using Splitter](./different-layouts) \ No newline at end of file +* [How to register Syncfusion® license key in TypeScript(ES6) application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) \ No newline at end of file diff --git a/ej2-javascript/toast/ts/getting-started.md b/ej2-javascript/toast/ts/getting-started.md index 571eb4768..c684487cd 100644 --- a/ej2-javascript/toast/ts/getting-started.md +++ b/ej2-javascript/toast/ts/getting-started.md @@ -11,58 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Toast control -This section explains the steps required to create the Toast control using TypeScript and configure its properties using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps to create a simple Toast and demonstrates the basic usage of the Toast component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the toast control in your application: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Toast package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-notifications` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-notifications --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Toast CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -81,24 +74,20 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/toast/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add Toast to the Application - -The toast message can be rendered by defining an `title` or `content`. +## Add Syncfusion® Toast control to the application -* Add an HTML div tag with its `id` attribute as `element` in your `index.html` file to initialize the toast control. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Toast control is used as an example. Add the following Toast element to the `~/src/index.html` file. +```html @@ -121,46 +110,35 @@ The toast message can be rendered by defining an `title` or `content`. +``` -{% endhighlight %} -{% endtabs %} - -* Import the toast control to your `app.ts` file, and initialize it to the `#element` as shown. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +Now, to render the Toast control, add the following TypeScript code to the `~/src/app/app.ts` file. +```ts import { Toast } from '@syncfusion/ej2-notifications'; // Initialize Toast component let toast: Toast = new Toast({ title: 'Matt sent you a friend request', - content: 'You have a new friend request yet to accept' + content: 'You have a new friend request yet to accept', + created: () => { + toast.show(); + } }); // Render initialized Toast toast.appendTo('#element'); +``` -{% endhighlight %} -{% endtabs %} - -## Running the application - -* Run the application in the browser using the following command. +## Run the application -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start +``` -{% endhighlight %} -{% endtabs %} - -Output will be as follows: - -> In the example, the `#element` is the `id` of the HTML element in a page to which the toast is initialized. +The below output can be achieved by following the steps mentioned above. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -173,8 +151,6 @@ Output will be as follows: {% previewsample "page.domainurl/code-snippet/toast/toast-cs10" %} -## See Also +## See also -* [How to close the toast with click/tap](./how-to/close-the-toast-with-click-tap) -* [How to prevent duplicate toast display](./how-to/prevent-duplicate-toast-display) -* [How to show different types of toast](./how-to/show-different-types-of-toast) +* [How to register Syncfusion® license key in TypeScript(ES6) application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) diff --git a/ej2-javascript/tooltip/ts/getting-started.md b/ej2-javascript/tooltip/ts/getting-started.md index 436b72cf0..df7f8465d 100644 --- a/ej2-javascript/tooltip/ts/getting-started.md +++ b/ej2-javascript/tooltip/ts/getting-started.md @@ -11,62 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Tooltip control -This section briefly explains how to create a simple **Tooltip** control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps to create a simple Tooltip and demonstrates the basic usage of the Tooltip component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -Tooltip can be initialized on: +## Prerequisites -* A single element, or -* A container that has more than one sub-element within it, and the sub-elements are considered as targets. +Ensure the following tools are installed on your machine: -## Dependencies +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -The following list of dependencies are required to use the Tooltip control in your application. +## Set up the development environment -```js -|-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Tooltip package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-popups` package: -The quickstart application is pre configured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-popups --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Tooltip CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -85,117 +74,66 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/tooltip/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the Tooltip on a single element +## Add Syncfusion® Tooltip control to the application -* Add the HTML span tag with its id attribute set to `target` in your `index.html` file where the Tooltip is initialized. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Tooltip control is used as an example. Add the following Tooltip element to the `~/src/index.html` file. +```html - Essential JS 2 Tooltip + Essential JS 2 - - - - -
      +
      Show Tooltip
      - + ``` -{% endhighlight %} -{% endtabs %} - -* Import the Tooltip control to your `app.ts` file, and initialize it to the element `#target` as shown below. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Tooltip control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { Tooltip } from '@syncfusion/ej2-popups'; +import { Button } from '@syncfusion/ej2-buttons'; -// initialize Tooltip control let tooltip: Tooltip = new Tooltip({ content: 'Tooltip content' }); - -// render initialized Tooltip tooltip.appendTo('#target'); -{% endhighlight %} -{% endtabs %} +let button: Button = new Button({ + content: 'Show Tooltip' +}); +button.appendTo('#target'); -* Now, run the application in the browser using the following command. +``` +## Run the application -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The output will be as follows: - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/tooltip/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/tooltip/getting-started-cs1/index.html %} -{% endhighlight %} -{% highlight css tabtitle="index.css" %} -{% include code-snippet/tooltip/getting-started-cs1/index.css %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/tooltip/getting-started-cs1" %} -> In the above sample code, `#target` is the `id` of the HTML element in a page to which the Tooltip is initialized. - -## Initialize Tooltip within a container - -You can create Tooltips on multiple targets within a container. To do so, you have to define specific target elements to the [`target`](https://ej2.syncfusion.com/documentation/api/tooltip/index-default#target) property so that the Tooltip is initialized only on matched targets within a container. In this case, the Tooltip content is assigned from the `title` attribute of the target element. - -Refer to the following code example to create a Tooltip on multiple targets within a container. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/tooltip/getting-started-2-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/tooltip/getting-started-2-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="index.css" %} -{% include code-snippet/tooltip/getting-started-2-cs2/index.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/tooltip/getting-started-2-cs2" %} - -> In the above sample, `#details` refers to the container's id, and the target `.e-info` refers to the target elements available within that container. ## See Also diff --git a/ej2-javascript/treeview/ts/getting-started.md b/ej2-javascript/treeview/ts/getting-started.md index ede77886e..7654b319e 100644 --- a/ej2-javascript/treeview/ts/getting-started.md +++ b/ej2-javascript/treeview/ts/getting-started.md @@ -11,61 +11,49 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## TreeView control -This section explains the steps required to create a simple [JavaScript TreeView](https://www.syncfusion.com/javascript-ui-controls/js-treeview) control, and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is preconfigured with all the Essential® JS 2 packages. +This section explains the steps required to create a simple [JavaScript TreeView](https://www.syncfusion.com/javascript-ui-controls/js-treeview) and demonstrates the basic usage of the TreeView component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is preconfigured with all the Essential® JS 2 packages. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the TreeView control in your application. +Ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% endhighlight %} -{% endtabs %} +## Set up the development environment -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -## Add Syncfusion® JavaScript packages - -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. - -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +## Install Syncfusion® TreeView package -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-navigations` package: + +``` +npm install @syncfusion/ej2-navigations --save +``` + +Install the required npm packages: + +``` npm install +``` +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -{% endhighlight %} -{% endtabs %} - -## Import Syncfusion® CSS styles +## Import Syncfusion® TreeView CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -84,22 +72,22 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/treeview/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding TreeView control +## Add Syncfusion® TreeView control to the application Now, you can start adding Essential® JS 2 TreeView control to the application. To get started, add the TreeView control to `app.ts` and `index.html` files using the following code. Then, add the HTML `
      ` element with its `id` attribute set to `tree` for TreeView control to your `index.html`. -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the TreeView control is used as an example. Add the following TreeView element to the `~/src/index.html` file. +```html @@ -123,38 +111,11 @@ Now, you can start adding Essential® JS 2 T +``` -{% endhighlight %} -{% endtabs %} - -Place the following TreeView code in `app.ts`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { enableRipple } from '@syncfusion/ej2-base'; -enableRipple(true); -import { TreeView } from '@syncfusion/ej2-navigations' - -//Initialize TreeView control -let treeViewInstance: TreeView = new TreeView(); - -//Render initialized TreeView -treeViewInstance.appendTo("#tree"); - -{% endhighlight %} -{% endtabs %} - -## Binding data source - -TreeView can load data either from local data sources or remote data services. This can be done using the [`dataSource`](../api/treeview/fieldsSettingsModel#datasource) property that is a member of the [`fields`](../api/treeview#fields) property. The dataSource property supports array of JavaScript objects and `DataManager`. Here, an array of JSON values is passed to the TreeView control. +Now, to render the Dashboard Layout control, add the following TypeScript code to the `~/src/app/app.ts` file. -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); @@ -194,20 +155,15 @@ let treeViewInstance: TreeView = new TreeView({ //Render initialized TreeView treeViewInstance.appendTo("#tree"); -{% endhighlight %} -{% endtabs %} +```` ## Run the application -You have to use the `npm start` command to run the application in the browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} +``` {% tabs %} {% highlight ts tabtitle="index.ts" %} From 68a0803c4587fd792b3ea48facd5915dabf655e8 Mon Sep 17 00:00:00 2001 From: SyncfusionBuild <89958145+SyncfusionBuild@users.noreply.github.com> Date: Fri, 24 Jul 2026 18:48:59 +0530 Subject: [PATCH 20/26] Add GitHub PR files pagination --- Jenkinsfile | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index dd47e4d1e..d6c363cae 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -17,7 +17,10 @@ String platform='ej2-javascript'; { checkout scm - def branchCommit = 'https://api.github.com/repos/syncfusion-content/'+env.githubSourceRepoHttpUrl.split('/')[env.githubSourceRepoHttpUrl.split('/').size() - 1]+'/pulls/' + env.pullRequestId + '/files' + def page = 1 + while(true) + { + def branchCommit = 'https://api.github.com/repos/syncfusion-content/'+env.githubSourceRepoHttpUrl.split('/')[env.githubSourceRepoHttpUrl.split('/').size() - 1]+'/pulls/' + env.pullRequestId + '/files?per_page=100^&page='+ page String branchCommitDetails = bat returnStdout: true, script: 'curl -H "Accept: application/vnd.github.v3+json" -u SyncfusionBuild:' + env.GithubBuildAutomation_PrivateToken + " " + branchCommit @@ -27,7 +30,15 @@ String platform='ej2-javascript'; { def ChangeFile= ChangeFiles[i].split(',')[0].replace('"', '') Content += env.WORKSPACE + "\\Spell-Checker\\" + ChangeFile + "\r\n"; - } + } + + // Last page + if((ChangeFiles.size() - 1) < 100) + { + break + } + page++ + } if (Content) { writeFile file: env.WORKSPACE+"/cireports/content.txt", text: Content From 7147f1b84602c893164d4f08e1b76b6ba545dd68 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Sat, 25 Jul 2026 13:45:08 +0530 Subject: [PATCH 21/26] Integrated latest changes at 07-25-2026 1:30:05 PM --- ej2-javascript-toc.html | 1 + .../3D-chart/images/3D-Chart-TS.png | Bin 0 -> 22712 bytes ej2-javascript/3D-chart/images/3D-Chart.png | Bin 0 -> 28807 bytes .../3D-chart/js/es5-getting-started.md | 257 +-- ej2-javascript/3D-chart/ts/getting-started.md | 227 +-- .../block-editor/ts/getting-started.md | 2 +- .../bullet-chart/js/es5-getting-started.md | 225 +-- .../bullet-chart/ts/getting-started.md | 191 +-- .../chart/js/es5-getting-started.md | 14 +- ej2-javascript/chart/ts/getting-started.md | 12 +- .../js/es5-getting-started.md | 165 +- .../circular-chart-3d/ts/getting-started.md | 111 +- .../images/circular-gauge-TS.png | Bin 0 -> 16160 bytes .../circular-gauge/images/circular-gauge.png | Bin 0 -> 16160 bytes .../circular-gauge/js/es5-getting-started.md | 201 +-- .../circular-gauge/ts/getting-started.md | 172 +- .../getting-started/systemjs.config.js | 1 + .../bullet-chart/getting-started-cs2/index.ts | 10 +- .../getting-started-cs2/js/index.html | 2 +- .../chart3d/getting-started-cs7/index.js | 10 +- .../chart3d/getting-started-cs7/index.ts | 14 +- .../chart3d/getting-started-cs7/js/index.html | 2 +- .../circular-chart/getting-started/index.js | 17 +- .../circular-chart/getting-started/index.ts | 21 +- .../getting-started/js/index.html | 2 +- .../es5-getting-started-cs1/index.ts | 6 + .../es5-getting-started-cs1/js/index.html | 4 +- .../heatmap/getting-started-cs1/index.js | 3 +- .../heatmap/getting-started-cs1/index.ts | 6 +- .../heatmap/getting-started-cs1/js/index.html | 2 +- .../es5-getting-started-cs1/index.ts | 31 +- .../es5-getting-started-cs1/js/index.html | 2 +- .../es5-getting-started-cs2/index.ts | 7 + .../getting-started-cs10/datasource.ts | 1481 +---------------- .../getting-started-cs10/es5-datasource.js | 1479 +--------------- .../getting-started-cs10/index.js | 3 +- .../getting-started-cs10/index.ts | 3 +- .../getting-started-cs10/js/index.html | 36 +- .../getting-started-cs10/ts/index.html | 1 + .../sankey/getting-started/data-cs1/index.js | 4 +- .../sankey/getting-started/data-cs1/index.ts | 8 +- .../getting-started/data-cs1/js/index.html | 21 +- .../getting-started/tooltip-cs1/index.ts | 6 +- .../getting-started/tooltip-cs1/ts/index.html | 2 +- .../smithchart/getting-started-cs1/index.ts | 22 +- .../getting-started-cs1/js/index.html | 4 +- .../sparkline/getting-started-cs1/index.js | 4 +- .../sparkline/getting-started-cs1/index.ts | 23 + .../getting-started-cs1/js/index.html | 4 +- .../treemap/getting-started-cs1/index.js | 3 +- .../treemap/getting-started-cs1/index.ts | 27 + .../treemap/getting-started-cs1/js/index.html | 2 +- ej2-javascript/heatmap-chart/axis.md | 83 +- .../heatmap-chart/images/heatmap.png | Bin 0 -> 38394 bytes .../heatmap-chart/js/getting-started.md | 265 +-- .../heatmap-chart/ts/getting-started.md | 257 ++- .../linear-gauge/images/linear-gauge-TS.png | Bin 0 -> 4349 bytes .../linear-gauge/images/linear-gauge.png | Bin 0 -> 4349 bytes .../linear-gauge/js/es5-getting-started.md | 226 +-- ej2-javascript/linear-gauge/title.md | 74 + .../linear-gauge/ts/getting-started.md | 223 ++- ej2-javascript/maps/js/es5-getting-started.md | 32 +- ej2-javascript/maps/ts/getting-started.md | 61 +- .../progressbar/images/progressbar-TS.png | Bin 0 -> 921 bytes .../progressbar/images/progressbar.png | Bin 0 -> 1196 bytes .../progressbar/js/es5-getting-started.md | 176 +- .../progressbar/ts/getting-started.md | 114 +- .../query-builder/ts/getting-started.md | 2 +- .../range-navigator/images/navigator.png | Bin 0 -> 30143 bytes .../range-navigator/js/es5-getting-started.md | 195 +-- .../range-navigator/ts/getting-started.md | 152 +- ej2-javascript/sankey/images/sankey-TS.png | Bin 0 -> 95970 bytes ej2-javascript/sankey/images/sankey.png | Bin 0 -> 358354 bytes .../sankey/js/es5-getting-started.md | 105 +- ej2-javascript/sankey/ts/getting-started.md | 143 +- .../js/es5-getting-started.md | 54 +- .../smart-paste-button/ts/getting-started.md | 29 +- .../smart-textarea/js/es5-getting-started.md | 84 +- .../smart-textarea/ts/getting-started.md | 31 +- .../smithchart/images/smithchart-TS.png | Bin 0 -> 66375 bytes .../smithchart/images/smithchart.png | Bin 0 -> 90935 bytes .../smithchart/js/es5-getting-started.md | 225 +-- .../smithchart/ts/getting-started.md | 204 +-- .../sparkline/images/sparkline-TS.png | Bin 0 -> 3117 bytes ej2-javascript/sparkline/images/sparkline.png | Bin 0 -> 4338 bytes .../sparkline/js/es5-getting-started.md | 163 +- .../sparkline/ts/getting-started.md | 181 +- .../stock-chart/js/es5-getting-started.md | 48 +- .../stock-chart/ts/getting-started.md | 59 +- ej2-javascript/treemap/data-label.md | 34 +- ej2-javascript/treemap/images/treemap-Ts.png | Bin 0 -> 17955 bytes ej2-javascript/treemap/images/treemap.png | Bin 0 -> 17955 bytes .../treemap/js/es5-getting-started.md | 277 +-- ej2-javascript/treemap/legend.md | 31 + ej2-javascript/treemap/ts/getting-started.md | 284 ++-- ej2-typescript-toc.html | 1 + 96 files changed, 2318 insertions(+), 6346 deletions(-) create mode 100644 ej2-javascript/3D-chart/images/3D-Chart-TS.png create mode 100644 ej2-javascript/3D-chart/images/3D-Chart.png create mode 100644 ej2-javascript/circular-gauge/images/circular-gauge-TS.png create mode 100644 ej2-javascript/circular-gauge/images/circular-gauge.png create mode 100644 ej2-javascript/heatmap-chart/images/heatmap.png create mode 100644 ej2-javascript/linear-gauge/images/linear-gauge-TS.png create mode 100644 ej2-javascript/linear-gauge/images/linear-gauge.png create mode 100644 ej2-javascript/linear-gauge/title.md create mode 100644 ej2-javascript/progressbar/images/progressbar-TS.png create mode 100644 ej2-javascript/progressbar/images/progressbar.png create mode 100644 ej2-javascript/range-navigator/images/navigator.png create mode 100644 ej2-javascript/sankey/images/sankey-TS.png create mode 100644 ej2-javascript/sankey/images/sankey.png create mode 100644 ej2-javascript/smithchart/images/smithchart-TS.png create mode 100644 ej2-javascript/smithchart/images/smithchart.png create mode 100644 ej2-javascript/sparkline/images/sparkline-TS.png create mode 100644 ej2-javascript/sparkline/images/sparkline.png create mode 100644 ej2-javascript/treemap/images/treemap-Ts.png create mode 100644 ej2-javascript/treemap/images/treemap.png diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html index a8e76f349..821c9ae38 100644 --- a/ej2-javascript-toc.html +++ b/ej2-javascript-toc.html @@ -1653,6 +1653,7 @@
    • Annotations
    • Animation
    • User Interaction
      • +
    • Title
    • Print and Export
    • Appearance
    • Accessibility
      • diff --git a/ej2-javascript/3D-chart/images/3D-Chart-TS.png b/ej2-javascript/3D-chart/images/3D-Chart-TS.png new file mode 100644 index 0000000000000000000000000000000000000000..f7593e614302fe6ab5be1fbf94745b1e1110b177 GIT binary patch literal 22712 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 CspKU9 literal 0 HcmV?d00001 diff --git a/ej2-javascript/3D-chart/js/es5-getting-started.md b/ej2-javascript/3D-chart/js/es5-getting-started.md index 58d627770..02476bdaa 100644 --- a/ej2-javascript/3D-chart/js/es5-getting-started.md +++ b/ej2-javascript/3D-chart/js/es5-getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: ES5 getting started with ##Platform_Name## 3D Chart control | Syncfusion -description: Checkout and learn about ES5 getting started with ##Platform_Name## 3D Chart control of Syncfusion Essential JS 2 and more details. +description: Check out and learn about ES5 getting started with ##Platform_Name## 3D Chart control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: 3D Chart publishingplatform: ##Platform_Name## @@ -9,13 +9,19 @@ documentation: ug domainurl: ##DomainURL## --- -# ES5 getting started with ##Platform_Name## 3D Chart control +# Getting Started with Syncfusion® JavaScript (ES5) 3D Chart Control -This section explains the steps required to create a simple 3D Chart and demonstrates the basic usage of the 3D Chart control. +Build your first Syncfusion JavaScript (ES5) application with a simple 3D Chart in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) 3D Chart from the CDN, initializes it with sample data, and renders an interactive Column chart with a title. + +## Prerequisites + +* [Visual Studio Code](https://code.visualstudio.com) (or any text editor) +* A web browser to view the result +* A local web server such as the VS Code [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension ## Dependencies -Below is the list of minimum dependencies required to use the 3D Chart. +The 3D Chart control ships as part of the `@syncfusion/ej2-charts` package. Below is the list of minimum dependencies required. ``` |-- @syncfusion/ej2-charts @@ -27,244 +33,73 @@ Below is the list of minimum dependencies required to use the 3D Chart. |-- @syncfusion/ej2-svg-base ``` -## Setup for local environment - -Follow these steps to set up your local environment. - -**Step 1:** Create a root folder **myapp** for your application. - -**Step 2:** Create **myapp/resources** folder to store local scripts and styles. - -**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing the Syncfusion Essential JS 2 3D Chart control. - -## Adding Syncfusion resources - -The Syncfusion Essential JS 2 3D Chart control can be initialized in either of the following ways: - -* Using local script. -* Using CDN links for scripts. - -### Using local script - -You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. - -After installing the Essential JS 2 product build, you can copy the chart and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. - -The following shows the path to the chart's script and style files. - -**Syntax:** - -> Dependency script: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{DEPENDENCY_PACKAGE_NAME}/dist/global/{DEPENDENCY_PACKAGE_NAME}.min.js` -> -> Script: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> - -**Example:** - -> Dependency script: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-base/dist/global/ej2-base.min.js` -> -> Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-charts/dist/global/ej2-charts.min.js` -> - -After copying the files, reference the chart scripts from `index.html`. The following HTML shows the minimal chart dependencies. - -``` - - - - - Essential JS 2 3D Chart - - - - +## Quick Setup - - - - - - +### Step 1: Create Folder and HTML file -``` +* Create a folder named `quickstart` in your desired directory. +* Inside the `quickstart` folder, create two new files: `index.html` and `index.js`. -### Using CDN links for scripts +### Step 2: Add Syncfusion® CDN Resources -Using a CDN, you can reference the chart control's script in the `index.html`. - -Refer the chart's CDN links as follows. - -**Syntax:** - -> Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` - -**Example:** - -> Script: [`https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js`](https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js) - -The following HTML shows the minimal chart dependencies using CDN scripts. +Include the following JavaScript links in the `` section. +**Scripts (JavaScript):** ```html - - - - Essential JS 2 3D Chart - - - - - - - + + + + ``` -## Adding 3D Chart control - -Now you can add the 3D Chart control to the application. To get started, add a **div** element for the 3D Chart in **index.html**. Then reference the **index.js** file in **index.html**. - -This document uses `ej2.min.js`, which includes all Essential JS 2 components and dependencies. +**Or**, to load all Syncfusion components in a single combined bundle: ```html - - - - Essential JS 2 3D Chart - - - - - -
      - - - - -``` - -Place the following 3D Chart initialization code in `index.js`. - -```javascript - -var chart3D = new ej.charts.Chart3D(); -chart3D.appendTo('#element'); - -``` - -The following example shows a basic 3D Chart. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/chart3d/getting-started-cs1/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/chart3d/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs1" %} - -## Populate 3D Chart with data - -This section explains how to plot the following JSON data to the 3D Chart. - -```javascript - -var chartData = [ - { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, - { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, - { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, - { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, - { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, - { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } -]; - + ``` -Add a series object to the 3D Chart by using the [`series`](../api/chart3d/chart3dseriesmodel) property. Map the JSON fields `month` and `sales` to the series [`xName`](../api/chart3d/chart3dseriesmodel#xname) and [`yName`](../api/chart3d/chart3dseriesmodel#yname) properties, and set the JSON array as the [`dataSource`](../api/chart3d/chart3dseriesmodel#datasource) property. +### Step 3: Add the Syncfusion® 3D Chart Control to the Application -Since the JSON contains category data, set the [`valueType`](../api/chart3d/chart3daxismodel#valuetype) for the horizontal axis (primaryXAxis) to `Category`. By default, the axis valueType is `Numeric`. +The `index.html` file references a separate `index.js` file that contains the 3D Chart initialization. This keeps your markup and script logic cleanly separated, which is the recommended pattern for Syncfusion® JavaScript (ES5) apps. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/chart3d/getting-started-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/chart3d/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs2" %} +The global scripts added in Step 2 register the `ej.charts.Chart3D` class on the `ej` namespace, so `index.js` does not import anything manually. The script then builds the 3D Chart with sample monthly sales data, applies a value-type of `'Category'` to the horizontal axis, formats the vertical axis labels, sets a chart title, and renders the control into the `#element` container defined in `index.html`. -The sales values are in thousands, so format the vertical axis label by adding `$` as a prefix and `K` as a suffix to each label. This can be achieved by setting `${value}K` to the [`labelFormat`](../api/chart3d/chart3daxismodel#labelformat) property of the axis. Here, `{value}` acts as a placeholder for each axis label. +Key options used in the configuration object: -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/chart3d/getting-started-cs3/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/chart3d/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs3" %} +- [`primaryXAxis.valueType`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3daxismodel#valuetype) — Axis data type. Set to `'Category'` because the sample data uses month names. +- [`primaryYAxis.labelFormat`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3daxismodel#labelformat) — Format string applied to the axis labels. The example uses `'${value}K'` to add a `$` prefix and `K` suffix to each label, where `{value}` is a placeholder for the raw number. +- [`series`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3daxismodel#labelformat) — Array of series to render. Each series has a [`dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3daxismodel#labelformat), [`xName`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3dseriesmodel#xname), [`yName`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3dseriesmodel#yname), [`type`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3dseriesmodel#type) (e.g. `'Column'`), and an optional [`name`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3dseriesmodel#name) used by the legend. +- [`title`](https://ej2.syncfusion.com/javascript/documentation/api/chart3d/chart3daxismodel#title) — Text shown above the 3D Chart. -## Add 3D Chart title +Finally, `chart3D.appendTo('#element')` renders the control into the `
      ` element declared in `index.html`. -You can add a title using the [`title`](../api/chart3d/chart3DModel#title) property to the 3D Chart to provide quick information to the user about the data plotted in the 3D Chart. +Copy the snippets below into the matching files in your `quickstart` folder. {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/chart3d/getting-started-cs4/index.js %} +{% include code-snippet/chart3d/getting-started-cs7/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/chart3d/getting-started-cs4/index.html %} +{% include code-snippet/chart3d/getting-started-cs7/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs4" %} -## Enable legend +### Step 4: Open in Browser -You can enable the legend for the 3D Chart by setting the [`visible`](../api/chart3d/chart3dlegendsettingsmodel#visible) property to `true` in the [`legendSettings`](../api/chart3d/chart3DModel#legendsettings) object. +Open `quickstart/index.html` through a local web server. With the VS Code **Live Server** extension installed, right-click `index.html` in the Explorer and choose **Open with Live Server**, then visit the URL it prints (for example, `http://127.0.0.1:5500/`). You should see the Syncfusion 3D Chart control displaying the sample sales data. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/chart3d/getting-started-cs5/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/chart3d/getting-started-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs5" %} +## Output -## Add data label +The 3D Chart shows 12 months of sales data rendered as 3D columns. The title "Sales Analysis" appears above the chart. -You can add data labels to improve the readability of the 3D Chart. This can be achieved by setting the [`visible`](../api/chart3d/chart3ddatalabelsettingsmodel#visible) property to `true` in the [`dataLabel`](../api/chart3d/chart3dseriesmodel#datalabel) object. Now, the data labels are arranged smartly based on series. +{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs7" %} -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/chart3d/getting-started-cs6/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/chart3d/getting-started-cs6/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs6" %} - -## Enable tooltip +![Syncfusion 3D Chart Quick Start Output](../images/3D-Chart.png) -The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable the tooltip by setting the [`enable`](../api/chart3d/chart3dtooltipsettingsmodel#enable) property to `true` in the [`tooltip`](../api/chart3d/chart3DModel#tooltip) object. +## Troubleshooting -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/chart3d/getting-started-cs7/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/chart3d/getting-started-cs7/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs7" %} \ No newline at end of file +- **The page is blank.** Open the page through a local web server (for example, the VS Code **Live Server** extension) instead of double-clicking the file. Syncfusion charts require an `http://` or `https://` origin. +- **`ej is not defined`.** Confirm that `ej2-charts.min.js` is loaded before your script. Place the ` - +### Step 2: Add Syncfusion® CDN Resources - - - - - - - -``` - -### Using CDN links for scripts - -Using CDN links, you can reference the Bullet Chart control's script in the `index.html`. - -Refer the Bullet Chart's CDN links as follows. - -**Syntax:** - -> Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` - -**Example:** - -> Script: [`https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js`](https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js) - -The following HTML shows the minimal bullet chart dependencies using CDN scripts. +Include the following JavaScript links in the `` section. +**Scripts (JavaScript):** ```html - - - - Essential JS 2 Bullet Chart - - - - - - - + + + + ``` -## Adding Bullet Chart control - -Now you can add the Bullet Chart control to the application. To get started, add a **div** element for the Bullet Chart in **index.html**. Then reference the **index.js** file in **index.html**. - -This document uses `ej2.min.js`, which includes all Essential JS 2 components and dependencies. +**Or**, to load all Syncfusion components in a single combined bundle: ```html - - - - Essential JS 2 Bullet Chart - - - - - -
      - - - - + ``` -Place the following Bullet Chart initialization code in `index.js`. - -```javascript +### Step 3: Add the Syncfusion® Bullet Chart Control to the Application -var bulletChart = new ej.charts.BulletChart(); -bulletChart.appendTo('#element'); - -``` +The `index.html` file references a separate `index.js` file that contains the Bullet Chart component initialization. This keeps your markup and script logic cleanly separated, which is the recommended pattern for Syncfusion® JavaScript (ES5) apps. -The following example shows a basic Bullet Chart. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/bullet-chart/getting-started-cs1/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/bullet-chart/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/bullet-chart/getting-started-cs1" %} - -## Bullet Chart With Data - -This section explains how to plot local data to the Bullet Chart. - -```javascript - -var data = [ - { value: 100, target: 80 }, - { value: 200, target: 180 }, - { value: 300, target: 280 }, - { value: 400, target: 380 }, - { value: 500, target: 480 }, -]; -``` - -Now assign the local data to the `dataSource` property. The `value` and `target` fields should be mapped to `valueField` and `targetField`, respectively. +`index.js` imports nothing manually — the global scripts added in Step 2 register the `ej.charts.BulletChart` class on the `ej` namespace. The script then builds the Bullet Chart component with sample `value`/`target` data and renders the control into the `#element` container declared in `index.html`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -188,50 +73,30 @@ Now assign the local data to the `dataSource` property. The `value` and `target` {% include code-snippet/bullet-chart/getting-started-cs2/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/bullet-chart/getting-started-cs2" %} -## Add Bullet Chart Title +The `new ej.charts.BulletChart({...})` call creates the Bullet Chart component. The configuration object accepts the following key options: -You can add a title using the `title` property to the Bullet Chart to provide quick information to the user about the data plotted in the Bullet Chart. +- [`dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/index-default#datasource) — Array of data points. Each item needs a `value` and a `target` (or remap them with `valueField`/`targetField`). +- [`valueField`](https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/index-default#valuefield) — Field name in `dataSource` mapped to the value bar. +- [`targetField`](https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/index-default#targetfield) — Field name in `dataSource` mapped to the target marker. +- [`minimum`](https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/index-default#minimum), [`maximum`](https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/index-default#maximum), [`interval`](https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/index-default#interval) — Numeric axis range and tick spacing. +- [`title`](https://ej2.syncfusion.com/javascript/documentation/api/bullet-chart/index-default#title) — Text shown above the chart. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/bullet-chart/getting-started-cs3/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/bullet-chart/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/bullet-chart/getting-started-cs3" %} +Finally, `bulletChart.appendTo('#element')` renders the control into the `
      ` element declared in `index.html`. -## Ranges +### Step 4: Open in Browser -You can add a range using the `ranges` property to the Bullet Chart. +Open `quickstart/index.html` through a local web server. With the VS Code **Live Server** extension installed, right-click `index.html` in the Explorer and choose **Open with Live Server**, then visit the URL it prints (for example, `http://127.0.0.1:5500/`). You should see the Syncfusion Bullet Chart control displaying the sample data. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/bullet-chart/getting-started-cs4/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/bullet-chart/getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/bullet-chart/getting-started-cs4" %} +## Output -## Tooltip +The chart now renders five value bars with their target markers between `0` and `500`, with tick marks every `50` units. -You can use the tooltip for the Bullet Chart by setting the `enable` property to `true` in the `tooltip` object. +{% previewsample "page.domainurl/code-snippet/bullet-chart/getting-started-cs2" %} -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/bullet-chart/getting-started-cs5/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/bullet-chart/getting-started-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/bullet-chart/getting-started-cs5" %} \ No newline at end of file +## Troubleshooting + +- **`ej is not defined`.** Confirm that `ej2-charts.min.js` is loaded before your script. Place the ` - - +### Step 1: Create Folder and HTML file - - - - - - +* Create a folder named `quickstart` in your desired directory. +* Inside the `quickstart` folder, create two new files: `index.html` and `index.js`. -``` - -### Using CDN link for script - -Using CDN link, you can directly refer the chart control's script into the `index.html`. - -Refer the chart's CDN links as below. - -**Syntax:** - -> Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` +### Step 2: Add Syncfusion® CDN Resources -**Example:** - -> Script: [`https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js`](https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js) - -Use the following CDN links. +Include the following JavaScript links in the `` section. +**Scripts (JavaScript):** ```html - - - - Essential JS 2 3D Circular Chart - - - - - - - + + + + ``` -## Adding 3D Circular Chart control - -Now you can add the 3D Circular Chart control to the application. To get started, add a **div** element for the 3D Circular Chart control in **index.html**. Then reference the **index.js** file in **index.html**. - +**Or**, to load all Syncfusion components in a single combined bundle: ```html - - - - Essential JS 2 3D Circular Chart - - - - - -
      - - - - + ``` -Place the following 3D Circular Chart initialization code in `index.js`. +### Step 3: Add the Syncfusion® 3D Circular Chart Control to the Application -```javascript +The `index.html` file contains the chart container and loads `index.js`. The `index.js` file initializes the 3D Circular Chart with sample data. -var circularchart = new ej.charts.CircularChart3D(); -circularchart.appendTo('#element'); +The Syncfusion CDN scripts provide the `ej.charts.CircularChart3D` class. The sample displays browser market-share data as a 3D Pie chart, applies a tilt angle, adds a title, and renders the chart in the `#element` container. -``` +The main configuration options are: + +- [`series`](https://ej2.syncfusion.com/javascript/documentation/api/circularchart3d/index-default#series) - Defines the chart data and maps the data fields using [`xName`](https://ej2.syncfusion.com/javascript/documentation/api/circularchart3d/circularchart3dseriesmodel#xname) and [`yName`](https://ej2.syncfusion.com/javascript/documentation/api/circularchart3d/circularchart3dseriesmodel#yname). +- [`tilt`](https://ej2.syncfusion.com/javascript/documentation/api/circularchart3d/index-default#tilt) - Sets the tilt angle of the 3D chart. +- [`title`](https://ej2.syncfusion.com/javascript/documentation/api/circularchart3d/index-default#title) - Sets the chart title. -**Pie Series** +Finally, `circularChart.appendTo('#element')` renders the chart in the `
      ` container. -By default, the pie series will be rendered when assigning the JSON data to the series using the `dataSource` property. Map the field names in the JSON data to the `xName` and `yName` properties of the series. +Copy the snippets below into the matching files in your `quickstart` folder. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -162,5 +82,20 @@ By default, the pie series will be rendered when assigning the JSON data to the {% include code-snippet/circular-chart/getting-started/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/circular-chart/getting-started" %} \ No newline at end of file + +### Step 4: Open in Browser + +Open `quickstart/index.html` through a local web server. With the VS Code **Live Server** extension installed, right-click `index.html` in the Explorer and choose **Open with Live Server**, then visit the URL it prints (for example, `http://127.0.0.1:5500/`). You should see the Syncfusion 3D Circular Chart control displaying the browser-market-share sample data as a 3D Pie series with a title. + +## Output + +The 3D Circular Chart shows 6 browser vendors rendered as a 3D Pie series. The title "Browser Market Shares in November 2023" appears above the chart. + +{% previewsample "page.domainurl/code-snippet/circular-chart/getting-started" %} + +## Troubleshooting + +- **The page is blank.** Open the page through a local web server (for example, the VS Code **Live Server** extension) instead of double-clicking the file. Syncfusion charts require an `http://` or `https://` origin. +- **`ej is not defined`.** Confirm that `ej2-charts.min.js` is loaded before your script. Place the ` - - - - - - + + + ``` -**Step 5:** Now, initiate the **Syncfusion® JavaScript (ES5) Circulargauge** control in the `~/quickstart/index.html` by using following code. +If the application uses PDF export, add the following script before the Circular Gauge script: ```html - - - - Essential JS 2 - - - - - - - -
      Circular Gauge
      - - - + ``` -**Step 6:** Open `index.html` in a web browser to render the Circular Gauge Component. - -### Using CDN link for script reference - -**Step 1:** Create an app folder `quickstart` for getting started. - -**Step 2:** Access the Circular Gauge scripts from the Syncfusion CDN. The following link formats are available: - -**Common Control Script:** -> Syntax: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js` - -**Example:** -> Script: [`https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js) - -**or** +#### Combined Bundle -**Individual Control Scripts:** +Alternatively, load all Syncfusion JavaScript components from a single combined bundle: -**Syntax** ->`http://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` - -**Example:** -> Circular Gauge Script: [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-circulargauge/dist/global/ej2-circulargauge.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-circulargauge/dist/global/ej2-circulargauge.min.js) -> ->Dependency Scripts -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-pdf-export/dist/global/ej2-pdf-export.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-pdf-export/dist/global/ej2-pdf-export.min.js) - -Create a HTML page (**index.html**) in **~/quickstart** location and add the CDN link references. Now, initiate the **Syncfusion® JavaScript (ES5) Circular Gauge** control in the **index.html** by using following code. - -``` - - - - Essential JS 2 - - - - - - - - -
      Circular Gauge
      - - - +```html + ``` -> Replace `{RELEASE_VERSION}` with the latest Syncfusion release version number. Find available versions on the [CDN releases page](https://www.syncfusion.com/downloads/essential-js2). -**Step 3:** Open `index.html` in a web browser to render the Circular Gauge Component. +### Step 3: Add the Syncfusion® Circular Gauge Control + +The `index.html` file contains the gauge container and references `index.js`, which contains the Circular Gauge initialization. -The following example shows a complete, working Circular Gauge Component implementation. +The global scripts added in Step 2 register the `ej.circulargauge.CircularGauge` class in the `ej` namespace. Therefore, no module imports are required. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -162,19 +84,34 @@ The following example shows a complete, working Circular Gauge Component impleme {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/circular-gauge/es5-getting-started-cs1" %} +The `new ej.circulargauge.CircularGauge({...})` call creates the Circular Gauge. -## Set Pointer Value +`circulargauge.appendTo('#element')` renders the control inside the `
      ` element declared in `index.html`. -The pointer value displayed on the gauge can be controlled using the [value](../api/circular-gauge/pointer#value-number) property of the [pointers](../api/circular-gauge/pointer) API. The following example demonstrates how to set a custom pointer value. +### Step 4: Open the Application in a Browser -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/circular-gauge/es5-getting-started-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/circular-gauge/es5-getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/circular-gauge/es5-getting-started-cs2" %} +Open `quickstart/index.html` through a local web server. + +If you are using the Visual Studio Code **Live Server** extension: + +1. Right-click `index.html` in the Explorer. +2. Select **Open with Live Server**. +3. Open the URL displayed by Live Server, such as `http://127.0.0.1:5500/`. + +The browser displays the initialized Circular Gauge. + +## Output + +The following screenshot shows the output of the Syncfusion Circular Gauge quick start application: + +![Syncfusion Circular Gauge Quick Start Output](../images/circular-gauge.png) + +{% previewsample "page.domainurl/code-snippet/circular-gauge/es5-getting-started-cs1" %} + +## Troubleshooting + +- **The page is blank.** Open `index.html` through a local web server instead of opening the file directly from the file system. +- **`ej is not defined`.** Ensure that the Syncfusion CDN scripts are loaded before `index.js`. +- **`ej.circulargauge` is undefined.** Verify that `ej2-circulargauge.min.js` is loaded after its required dependencies. +- **The gauge is not displayed.** Make sure the container ID in `index.html` matches the selector passed to `appendTo('#element')`. +- **The pointer does not appear at the expected position.** Confirm that the pointer `value` is within the axis `minimum` and `maximum` range. diff --git a/ej2-javascript/circular-gauge/ts/getting-started.md b/ej2-javascript/circular-gauge/ts/getting-started.md index 64fd5d655..548bb9dee 100644 --- a/ej2-javascript/circular-gauge/ts/getting-started.md +++ b/ej2-javascript/circular-gauge/ts/getting-started.md @@ -1,68 +1,74 @@ --- layout: post -title: Getting started with ##Platform_Name## Circular Gauge Component | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Circular Gauge Component of Syncfusion Essential JS 2 and more details. +title: Getting started with ##Platform_Name## Circular Gauge control | Syncfusion +description: Create and configure a Syncfusion JavaScript Circular Gauge in TypeScript using the Essential JS 2 webpack quickstart project. platform: ej2-javascript -control: Getting started +control: Circular Gauge publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- +# Getting Started with ##Platform_Name## Circular Gauge Control -# Getting started in ##Platform_Name## Circular Gauge Component +This document explains how to create a Circular Gauge and configure its pointer value in TypeScript using the Essential JS 2 webpack [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. -This guide demonstrates how to create and configure a **Circular gauge** component in TypeScript using Syncfusion Essential® JS 2. The Circular gauge is a data visualization control that displays values on a circular scale, useful for dashboards, monitoring systems, and data presentation applications. - -By the end of this guide, you will: -- Set up a TypeScript development environment for Syncfusion components -- Create your first Circular gauge instance -- Configure basic properties like pointer values and axes -- Run the application in your browser - -> This guide uses the Syncfusion quickstart repository, preconfigured with webpack for TypeScript compilation. The application requires Node.js `v14.15.0` or higher and leverages the [webpack-cli](https://webpack.js.org/api/cli/#commands) for bundling. Learn more about [webpack configuration and features](https://webpack.js.org/guides/getting-started/). +> This application uses the `webpack.config.js` configuration provided by the quickstart repository. For information about webpack and its features, refer to the [webpack getting-started guide](https://webpack.js.org/guides/getting-started/). ## Prerequisites -Before getting started, ensure your development environment meets these requirements: +Before you begin, ensure that the following software is installed: + +* Node.js with npm +* [Visual Studio Code](https://code.visualstudio.com) or another text editor +* [Git](https://git-scm.com/) for cloning the quickstart repository +* A modern web browser such as Chrome, Edge, Firefox, or Safari -- **Node.js**: Version 14.15.0 or higher (verify with `node --version` in your terminal) -- **npm**: Version 6.0 or higher (included with Node.js) -- **TypeScript**: Basic familiarity with TypeScript syntax -- **Code Editor**: Visual Studio Code or any preferred IDE with TypeScript support +> Register your Syncfusion license key before initializing the control. For more information, refer to the [license key registration documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). ## Dependencies -The Circular gauge requires the following minimum Syncfusion packages: +The Circular Gauge control is available in the `@syncfusion/ej2-circulargauge` package. -```javascript +The following dependencies are required: + +```text |-- @syncfusion/ej2-circulargauge |-- @syncfusion/ej2-base |-- @syncfusion/ej2-svg-base |-- @syncfusion/ej2-pdf-export ``` -These dependencies are automatically installed when you use the quickstart repository. +Compatible package versions are resolved from the `package.json` file in the quickstart project. Keep all Syncfusion package versions consistent to avoid dependency conflicts. + +## Quick Setup -## Set up the development environment +### Step 1: Create a Project Folder -### Step 1: Clone the quickstart project +Create a folder named `my-circular-gauge` in your preferred location. This folder will contain the Circular Gauge TypeScript project. -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +### Step 2: Open a Terminal + +Open a terminal and navigate to the `my-circular-gauge` folder. + +* On Windows, use Command Prompt or PowerShell. +* On macOS or Linux, use Terminal. + +### Step 3: Clone the Quickstart Repository + +Run the following command to clone the Syncfusion JavaScript quickstart project: {% tabs %} {% highlight bash tabtitle="CMD" %} -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart {% endhighlight %} {% endtabs %} -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -### Step 2: Navigate to the project folder +### Step 4: Navigate to the Project Folder -Change to the newly created project directory: +Navigate to the cloned project directory: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -72,11 +78,11 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion® JavaScript packages +### Step 5: Install the Required Packages -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +The quickstart application includes its required packages in the project-root `package.json` file. -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Run the following command to install the project dependencies: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -86,32 +92,29 @@ npm install {% endhighlight %} {% endtabs %} -This command downloads and installs all packages specified in `package.json`, including the Circular gauge and its dependencies. +### Step 6: Add the Circular Gauge Container -## Create your first Circular gauge - -### Step 1: Define the HTML container - -Add a container `
      ` element in the **index.html** file where the Circular gauge will render: +Open the `src/index.html` file. Preserve the existing content generated by the seed project and add a `div` element with the ID `container` inside the `body` element. {% tabs %} -{% highlight html tabtitle="index.html" %} +{% highlight html tabtitle="src/index.html" %} - EJ2 Circular Gauge - - - - + Essential JS 2 Circular Gauge + + + + + - -
      -
      +

      Syncfusion Circular Gauge

      + +
      @@ -119,66 +122,59 @@ Add a container `
      ` element in the **index.html** file where the Circular ga {% endhighlight %} {% endtabs %} -### Step 2: Initialize the Circular gauge in TypeScript - -In your **app.ts** file, import the Circular gauge component and initialize it: - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +The webpack configuration supplied by the quickstart project compiles the TypeScript entry file and loads the generated bundle in this page. -import { CircularGauge } from '@syncfusion/ej2-circulargauge'; +### Step 7: Initialize the Circular Gauge -// initialize CircularGauge component -let gauge: CircularGauge = new CircularGauge(); - -// render initialized CircularGauge -gauge.appendTo('#container'); +Open the `src/app/app.ts` file and add the following code: +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/circular-gauge/getting-started-cs1/index.ts %} {% endhighlight %} {% endtabs %} -The `appendTo()` method attaches the Circular gauge instance to the DOM element with the ID `container`. +The `CircularGauge` constructor creates the component and the `appendTo()` method attaches the Circular gauge instance to the DOM element with the ID `element`. -## Build and run the application +{% previewsample "page.domainurl/code-snippet/circular-gauge/getting-started-cs1" %} + +### Step 8: Run the Application -The quickstart project uses webpack to compile TypeScript and bundle your application. To start the development server and run the application in your browser: +Run the following command from the project root: {% tabs %} {% highlight bash tabtitle="NPM" %} -npm start +npm run start {% endhighlight %} {% endtabs %} -The build process will compile your TypeScript code and launch the application at `http://localhost:8080/` (or another port if 8080 is busy). Your browser will automatically open to display your Circular gauge. +Wait for webpack to finish compiling the application. If the browser does not open automatically, open the local URL displayed in the terminal. -### View a complete example +The project commonly runs at: -The example below demonstrates a basic Circular gauge with default configuration: +```text +http://localhost:4000/ +``` -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/circular-gauge/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/circular-gauge/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/circular-gauge/getting-started-cs1" %} +The exact port can vary based on the webpack development-server configuration. -## Set Pointer Value +To stop the development server, press `Ctrl+C` in the terminal. -You can change the pointer value in the above sample using [`value`](../api/circular-gauge/pointer#value-number) property in [`pointers`](../api/circular-gauge/pointer). +## Output -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/circular-gauge/getting-started-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/circular-gauge/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/circular-gauge/getting-started-cs2" %} +The following screenshot shows the output of the Syncfusion Circular Gauge quick start application: + +![Syncfusion Circular Gauge Quick Start Output](../images/circular-gauge-TS.png) + +{% previewsample "page.domainurl/code-snippet/circular-gauge/es5-getting-started-cs1" %} + +## Troubleshooting + +* **The repository cannot be cloned.** Verify that Git is installed, confirm your internet connection, and run `git --version`. +* **`npm install` fails.** Verify that Node.js and npm are installed, and run `node --version` and `npm --version`. +* **`Cannot find module '@syncfusion/ej2-circulargauge'`.** Run `npm install @syncfusion/ej2-circulargauge --save` from the project root. +* **The TypeScript application does not compile.** Ensure that all Syncfusion packages use compatible versions and review the complete error by running `npm run build`. +* **The page is blank.** Check the browser console for errors and confirm that webpack completed the build successfully. +* **The gauge is not displayed.** Ensure that the HTML container ID is `container` and that `appendTo('#container')` uses the same ID. diff --git a/ej2-javascript/code-snippet/block-editor/getting-started/systemjs.config.js b/ej2-javascript/code-snippet/block-editor/getting-started/systemjs.config.js index a1802297b..e74887c32 100644 --- a/ej2-javascript/code-snippet/block-editor/getting-started/systemjs.config.js +++ b/ej2-javascript/code-snippet/block-editor/getting-started/systemjs.config.js @@ -26,6 +26,7 @@ System.config({ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", "@syncfusion/ej2-progressbar": "syncfusion:ej2-progressbar/dist/ej2-progressbar.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", "@syncfusion/ej2-blockeditor": "syncfusion:ej2-blockeditor/dist/ej2-blockeditor.umd.min.js" } }); diff --git a/ej2-javascript/code-snippet/bullet-chart/getting-started-cs2/index.ts b/ej2-javascript/code-snippet/bullet-chart/getting-started-cs2/index.ts index 5a3e4d0d3..5306352eb 100644 --- a/ej2-javascript/code-snippet/bullet-chart/getting-started-cs2/index.ts +++ b/ej2-javascript/code-snippet/bullet-chart/getting-started-cs2/index.ts @@ -1,15 +1,17 @@ -var bulletChart = new ej.charts.BulletChart({ + +import { BulletChart } from '@syncfusion/ej2-charts'; +let bulletChart: BulletChart = new BulletChart({ dataSource: [{ value: 100, target: 80 }, { value: 200, target: 180 }, { value: 300, target: 280 }, { value: 400, target: 380 }, { value: 500, target: 480 }], - valueName: 'value', - targetName: 'target', + valueField: 'value', + targetField: 'target', height: '300', - minimum: 0, maximum: 300, interval: 50, + minimum: 0, maximum: 500, interval: 50, }); bulletChart.appendTo('#element'); diff --git a/ej2-javascript/code-snippet/bullet-chart/getting-started-cs2/js/index.html b/ej2-javascript/code-snippet/bullet-chart/getting-started-cs2/js/index.html index 8fb3b7b5d..8f6b93d8f 100644 --- a/ej2-javascript/code-snippet/bullet-chart/getting-started-cs2/js/index.html +++ b/ej2-javascript/code-snippet/bullet-chart/getting-started-cs2/js/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-javascript/code-snippet/chart3d/getting-started-cs7/index.js b/ej2-javascript/code-snippet/chart3d/getting-started-cs7/index.js index dccfd7f11..e150d26fe 100644 --- a/ej2-javascript/code-snippet/chart3d/getting-started-cs7/index.js +++ b/ej2-javascript/code-snippet/chart3d/getting-started-cs7/index.js @@ -7,10 +7,6 @@ var chartData = [ { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } ]; var chart3D = new ej.charts.Chart3D({ - // Tooltip for 3d chart - tooltip: { - enable: true - }, primaryXAxis: { valueType: 'Category' }, @@ -22,12 +18,8 @@ var chart3D = new ej.charts.Chart3D({ name:'Sales', xName: 'month', yName: 'sales', - type: 'Column', - dataLabel: { - visible: true - } + type: 'Column' }], - legendSettings: { visible: true }, title: 'Sales Analysis' }, '#element'); diff --git a/ej2-javascript/code-snippet/chart3d/getting-started-cs7/index.ts b/ej2-javascript/code-snippet/chart3d/getting-started-cs7/index.ts index 6081f8738..de6210004 100644 --- a/ej2-javascript/code-snippet/chart3d/getting-started-cs7/index.ts +++ b/ej2-javascript/code-snippet/chart3d/getting-started-cs7/index.ts @@ -1,8 +1,8 @@ -import { Chart3D, ColumnSeries3D, Legend3D, Category3D, Tooltip3D, DataLabel3D } from '@syncfusion/ej2-charts'; -Chart3D.Inject(ColumnSeries3D, Legend3D, Category3D, Tooltip3D, DataLabel3D); +import { Chart3D, ColumnSeries3D, Category3D } from '@syncfusion/ej2-charts'; +Chart3D.Inject(ColumnSeries3D, Category3D); let chartData: Object[] = [ { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, @@ -12,10 +12,6 @@ let chartData: Object[] = [ { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } ]; let chart: Chart3D = new Chart3D({ - // Tooltip for 3d chart - tooltip: { - enable: true - }, primaryXAxis: { valueType: 'Category' }, @@ -27,12 +23,8 @@ let chart: Chart3D = new Chart3D({ name:'Sales', xName: 'month', yName: 'sales', - type: 'Column', - dataLabel: { - visible: true - } + type: 'Column' }], - legendSettings: { visible: true }, title: 'Sales Analysis' }, '#element'); diff --git a/ej2-javascript/code-snippet/chart3d/getting-started-cs7/js/index.html b/ej2-javascript/code-snippet/chart3d/getting-started-cs7/js/index.html index 51a99bbc0..c2dd33210 100644 --- a/ej2-javascript/code-snippet/chart3d/getting-started-cs7/js/index.html +++ b/ej2-javascript/code-snippet/chart3d/getting-started-cs7/js/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-javascript/code-snippet/circular-chart/getting-started/index.js b/ej2-javascript/code-snippet/circular-chart/getting-started/index.js index eba799e94..52a2aebe7 100644 --- a/ej2-javascript/code-snippet/circular-chart/getting-started/index.js +++ b/ej2-javascript/code-snippet/circular-chart/getting-started/index.js @@ -10,23 +10,10 @@ var circularchart = new ej.charts.CircularChart3D({ { x: 'Others', y: 2.34 } ], xName: 'x', - yName: 'y', - dataLabel: { - visible: true, - name: 'x', - position: 'Outside', - font: { - fontWeight: '600' - }, - connectorStyle: { length: '40px' } - }, + yName: 'y' } ], tilt: -45, - title: 'Browser Market Shares in November 2023', - legendSettings: { - visible: true, - position: 'Right' - } + title: 'Browser Market Shares in November 2023' }, '#element'); diff --git a/ej2-javascript/code-snippet/circular-chart/getting-started/index.ts b/ej2-javascript/code-snippet/circular-chart/getting-started/index.ts index b541c4d3e..fc393a82d 100644 --- a/ej2-javascript/code-snippet/circular-chart/getting-started/index.ts +++ b/ej2-javascript/code-snippet/circular-chart/getting-started/index.ts @@ -1,8 +1,8 @@ -import { CircularChart3D, PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D } from '@syncfusion/ej2-charts'; -CircularChart3D.Inject(PieSeries3D, CircularChartDataLabel3D, CircularChartLegend3D); +import { CircularChart3D, PieSeries3D } from '@syncfusion/ej2-charts'; +CircularChart3D.Inject(PieSeries3D); let circularchart: CircularChart3D = new CircularChart3D({ series: [ { @@ -15,24 +15,11 @@ let circularchart: CircularChart3D = new CircularChart3D({ { x: 'Others', y: 2.34 } ], xName: 'x', - yName: 'y', - dataLabel: { - visible: true, - name: 'x', - position: 'Outside', - font: { - fontWeight: '600' - }, - connectorStyle: { length: '40px' } - } + yName: 'y' } ], tilt: -45, - title: 'Browser Market Shares in November 2023', - legendSettings: { - visible: true, - position: 'Right' - } + title: 'Browser Market Shares in November 2023' }, '#element'); diff --git a/ej2-javascript/code-snippet/circular-chart/getting-started/js/index.html b/ej2-javascript/code-snippet/circular-chart/getting-started/js/index.html index 51a99bbc0..c2dd33210 100644 --- a/ej2-javascript/code-snippet/circular-chart/getting-started/js/index.html +++ b/ej2-javascript/code-snippet/circular-chart/getting-started/js/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-javascript/code-snippet/circular-gauge/es5-getting-started-cs1/index.ts b/ej2-javascript/code-snippet/circular-gauge/es5-getting-started-cs1/index.ts index 8b1378917..f5fe4201f 100644 --- a/ej2-javascript/code-snippet/circular-gauge/es5-getting-started-cs1/index.ts +++ b/ej2-javascript/code-snippet/circular-gauge/es5-getting-started-cs1/index.ts @@ -1 +1,7 @@ +import { CircularGauge } from '@syncfusion/ej2-circulargauge'; +// initialize CircularGauge component +let gauge: CircularGauge = new CircularGauge(); + +// render initialized CircularGauge +gauge.appendTo('#container'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/circular-gauge/es5-getting-started-cs1/js/index.html b/ej2-javascript/code-snippet/circular-gauge/es5-getting-started-cs1/js/index.html index 7d605c218..b9c6fe721 100644 --- a/ej2-javascript/code-snippet/circular-gauge/es5-getting-started-cs1/js/index.html +++ b/ej2-javascript/code-snippet/circular-gauge/es5-getting-started-cs1/js/index.html @@ -5,10 +5,10 @@ - + - + diff --git a/ej2-javascript/code-snippet/heatmap/getting-started-cs1/index.js b/ej2-javascript/code-snippet/heatmap/getting-started-cs1/index.js index b8caac833..bdf6729e8 100644 --- a/ej2-javascript/code-snippet/heatmap/getting-started-cs1/index.js +++ b/ej2-javascript/code-snippet/heatmap/getting-started-cs1/index.js @@ -14,5 +14,6 @@ var heatmapData = [ var heatmap = new ej.heatmap.HeatMap({ dataSource: heatmapData -}, '#element'); +}); +heatmap.appendTo('#element'); diff --git a/ej2-javascript/code-snippet/heatmap/getting-started-cs1/index.ts b/ej2-javascript/code-snippet/heatmap/getting-started-cs1/index.ts index d11db95ea..4b809084a 100644 --- a/ej2-javascript/code-snippet/heatmap/getting-started-cs1/index.ts +++ b/ej2-javascript/code-snippet/heatmap/getting-started-cs1/index.ts @@ -1,8 +1,7 @@ -import { HeatMap, Legend, Tooltip } from '@syncfusion/ej2-heatmap'; -HeatMap.Inject(Legend, Tooltip); +import { HeatMap } from '@syncfusion/ej2-heatmap'; let heatmapData: any [] = [ [73, 39, 26, 39, 94, 0], @@ -20,7 +19,8 @@ let heatmapData: any [] = [ let heatmap: HeatMap = new HeatMap({ dataSource: heatmapData, - }, '#element'); + }); +heatmap.appendTo('#element'); diff --git a/ej2-javascript/code-snippet/heatmap/getting-started-cs1/js/index.html b/ej2-javascript/code-snippet/heatmap/getting-started-cs1/js/index.html index a118d9eb8..5f704ce13 100644 --- a/ej2-javascript/code-snippet/heatmap/getting-started-cs1/js/index.html +++ b/ej2-javascript/code-snippet/heatmap/getting-started-cs1/js/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs1/index.ts b/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs1/index.ts index 7d1c12db3..dc95a3106 100644 --- a/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs1/index.ts +++ b/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs1/index.ts @@ -1,29 +1,4 @@ +import { LinearGauge } from '@syncfusion/ej2-lineargauge'; - - - - - - Essential JS 2 - - - - - - - - - - -
      Linear Gauge
      - - - - - +let gauge: LinearGauge = new LinearGauge(); +gauge.appendTo('#element'); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs1/js/index.html b/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs1/js/index.html index 51a99bbc0..c2dd33210 100644 --- a/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs1/js/index.html +++ b/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs1/js/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs2/index.ts b/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs2/index.ts index 8b1378917..484ba2812 100644 --- a/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs2/index.ts +++ b/ej2-javascript/code-snippet/linear-gauge/es5-getting-started-cs2/index.ts @@ -1 +1,8 @@ +import { LinearGauge } from '@syncfusion/ej2-lineargauge'; +let gauge: LinearGauge = new LinearGauge({ + // Title for linear gauge + title: 'linear gauge' +}, '#element'); + + diff --git a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/datasource.ts b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/datasource.ts index a941c2810..c6bd61a7f 100644 --- a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/datasource.ts +++ b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/datasource.ts @@ -1,1467 +1,20 @@ /** * Range Navigator datasource */ - - -export let datasrc: Object[] = [ - { - x: new Date("2017-05-01"), - y: 1402.08 - }, - { - x: new Date("2017-05-02"), - y: 1443.68 - }, - { - x: new Date("2017-05-03"), - y: 1492 - }, - { - x: new Date("2017-05-04"), - y: 1515.63 - }, - { - x: new Date("2017-05-05"), - y: 1512.21 - }, - { - x: new Date("2017-05-06"), - y: 1548.29 - }, - { - x: new Date("2017-05-07"), - y: 1555.47 - }, - { - x: new Date("2017-05-08"), - y: 1639.32 - }, - { - x: new Date("2017-05-09"), - y: 1706.93 - }, - { - x: new Date("2017-05-10"), - y: 1756.8 - }, - { - x: new Date("2017-05-11"), - y: 1807.37 - }, - { - x: new Date("2017-05-12"), - y: 1676.99 - }, - { - x: new Date("2017-05-13"), - y: 1759.96 - }, - { - x: new Date("2017-05-14"), - y: 1772.42 - }, - { - x: new Date("2017-05-15"), - y: 1697.38 - }, - { - x: new Date("2017-05-16"), - y: 1718.2 - }, - { - x: new Date("2017-05-17"), - y: 1802.16 - }, - { - x: new Date("2017-05-18"), - y: 1887.33 - }, - { - x: new Date("2017-05-19"), - y: 1968.1 - }, - { - x: new Date("2017-05-20"), - y: 2051.73 - }, - { - x: new Date("2017-05-21"), - y: 2055.62 - }, - { - x: new Date("2017-05-22"), - y: 2139.03 - }, - { - x: new Date("2017-05-23"), - y: 2291.48 - }, - { - x: new Date("2017-05-24"), - y: 2476.3 - }, - { - x: new Date("2017-05-25"), - y: 2357.5 - }, - { - x: new Date("2017-05-26"), - y: 2247.48 - }, - { - x: new Date("2017-05-27"), - y: 2106.31 - }, - { - x: new Date("2017-05-28"), - y: 2207.58 - }, - { - x: new Date("2017-05-29"), - y: 2289.87 - }, - { - x: new Date("2017-05-30"), - y: 2197.23 - }, - { - x: new Date("2017-05-31"), - y: 2330.23 - }, - { - x: new Date("2017-06-01"), - y: 2452.18 - }, - { - x: new Date("2017-06-02"), - y: 2517.41 - }, - { - x: new Date("2017-06-03"), - y: 2555.65 - }, - { - x: new Date("2017-06-04"), - y: 2552.81 - }, - { - x: new Date("2017-06-05"), - y: 2736.59 - }, - { - x: new Date("2017-06-06"), - y: 2914.08 - }, - { - x: new Date("2017-06-07"), - y: 2694.22 - }, - { - x: new Date("2017-06-08"), - y: 2825.03 - }, - { - x: new Date("2017-06-09"), - y: 2826.7 - }, - { - x: new Date("2017-06-10"), - y: 2942.34 - }, - { - x: new Date("2017-06-11"), - y: 3018.54 - }, - { - x: new Date("2017-06-12"), - y: 2682.59 - }, - { - x: new Date("2017-06-13"), - y: 2738.93 - }, - { - x: new Date("2017-06-14"), - y: 2494.48 - }, - { - x: new Date("2017-06-15"), - y: 2456.92 - }, - { - x: new Date("2017-06-16"), - y: 2528.1 - }, - { - x: new Date("2017-06-17"), - y: 2664 - }, - { - x: new Date("2017-06-18"), - y: 2576.17 - }, - { - x: new Date("2017-06-19"), - y: 2641.66 - }, - { - x: new Date("2017-06-20"), - y: 2778.83 - }, - { - x: new Date("2017-06-21"), - y: 2712.16 - }, - { - x: new Date("2017-06-22"), - y: 2740.79 - }, - { - x: new Date("2017-06-23"), - y: 2738.22 - }, - { - x: new Date("2017-06-24"), - y: 2619.12 - }, - { - x: new Date("2017-06-25"), - y: 2594.45 - }, - { - x: new Date("2017-06-26"), - y: 2485.36 - }, - { - x: new Date("2017-06-27"), - y: 2593.17 - }, - { - x: new Date("2017-06-28"), - y: 2584.56 - }, - { - x: new Date("2017-06-29"), - y: 2561.56 - }, - { - x: new Date("2017-06-30"), - y: 2499.98 - }, - { - x: new Date("2017-07-01"), - y: 2460.2 - }, - { - x: new Date("2017-07-02"), - y: 2529.78 - }, - { - x: new Date("2017-07-03"), - y: 2581.07 - }, - { - x: new Date("2017-07-04"), - y: 2625.07 - }, - { - x: new Date("2017-07-05"), - y: 2629.27 - }, - { - x: new Date("2017-07-06"), - y: 2619.11 - }, - { - x: new Date("2017-07-07"), - y: 2521.24 - }, - { - x: new Date("2017-07-08"), - y: 2579.93 - }, - { - x: new Date("2017-07-09"), - y: 2525.67 - }, - { - x: new Date("2017-07-10"), - y: 2371.96 - }, - { - x: new Date("2017-07-11"), - y: 2332.19 - }, - { - x: new Date("2017-07-12"), - y: 2423.16 - }, - { - x: new Date("2017-07-13"), - y: 2364.52 - }, - { - x: new Date("2017-07-14"), - y: 2232.65 - }, - { - x: new Date("2017-07-15"), - y: 1993.26 - }, - { - x: new Date("2017-07-16"), - y: 1938.94 - }, - { - x: new Date("2017-07-17"), - y: 2244.26 - }, - { - x: new Date("2017-07-18"), - y: 2327.9 - }, - { - x: new Date("2017-07-19"), - y: 2294.4 - }, - { - x: new Date("2017-07-20"), - y: 2877.39 - }, - { - x: new Date("2017-07-21"), - y: 2694.29 - }, - { - x: new Date("2017-07-22"), - y: 2838.81 - }, - { - x: new Date("2017-07-23"), - y: 2762.63 - }, - { - x: new Date("2017-07-24"), - y: 2779.04 - }, - { - x: new Date("2017-07-25"), - y: 2591.22 - }, - { - x: new Date("2017-07-26"), - y: 2550.18 - }, - { - x: new Date("2017-07-27"), - y: 2697.47 - }, - { - x: new Date("2017-07-28"), - y: 2805.18 - }, - { - x: new Date("2017-07-29"), - y: 2720.08 - }, - { - x: new Date("2017-07-30"), - y: 2746.33 - }, - { - x: new Date("2017-07-31"), - y: 2873.83 - }, - { - x: new Date("2017-08-01"), - y: 2735.59 - }, - { - x: new Date("2017-08-02"), - y: 2723.58 - }, - { - x: new Date("2017-08-03"), - y: 2814.36 - }, - { - x: new Date("2017-08-04"), - y: 2883.68 - }, - { - x: new Date("2017-08-05"), - y: 3301.76 - }, - { - x: new Date("2017-08-06"), - y: 3255 - }, - { - x: new Date("2017-08-07"), - y: 3431.97 - }, - { - x: new Date("2017-08-08"), - y: 3453.16 - }, - { - x: new Date("2017-08-09"), - y: 3377.54 - }, - { - x: new Date("2017-08-10"), - y: 3445.28 - }, - { - x: new Date("2017-08-11"), - y: 3679.61 - }, - { - x: new Date("2017-08-12"), - y: 3917.65 - }, - { - x: new Date("2017-08-13"), - y: 4111.2 - }, - { - x: new Date("2017-08-14"), - y: 4382.74 - }, - { - x: new Date("2017-08-15"), - y: 4204.43 - }, - { - x: new Date("2017-08-16"), - y: 4425.3 - }, - { - x: new Date("2017-08-17"), - y: 4316.34 - }, - { - x: new Date("2017-08-18"), - y: 4159.46 - }, - { - x: new Date("2017-08-19"), - y: 4206.13 - }, - { - x: new Date("2017-08-20"), - y: 4111.22 - }, - { - x: new Date("2017-08-21"), - y: 4054.94 - }, - { - x: new Date("2017-08-22"), - y: 4137.67 - }, - { - x: new Date("2017-08-23"), - y: 4191.22 - }, - { - x: new Date("2017-08-24"), - y: 4362.47 - }, - { - x: new Date("2017-08-25"), - y: 4408.32 - }, - { - x: new Date("2017-08-26"), - y: 4387.46 - }, - { - x: new Date("2017-08-27"), - y: 4394.51 - }, - { - x: new Date("2017-08-28"), - y: 4439.66 - }, - { - x: new Date("2017-08-29"), - y: 4648.13 - }, - { - x: new Date("2017-08-30"), - y: 4630.73 - }, - { - x: new Date("2017-08-31"), - y: 4764.87 - }, - { - x: new Date("2017-09-01"), - y: 4950.72 - }, - { - x: new Date("2017-09-02"), - y: 4643.97 - }, - { - x: new Date("2017-09-03"), - y: 4631.69 - }, - { - x: new Date("2017-09-04"), - y: 4319.72 - }, - { - x: new Date("2017-09-05"), - y: 4422.12 - }, - { - x: new Date("2017-09-06"), - y: 4626.72 - }, - { - x: new Date("2017-09-07"), - y: 4638.1 - }, - { - x: new Date("2017-09-08"), - y: 4317.54 - }, - { - x: new Date("2017-09-09"), - y: 4291.88 - }, - { - x: new Date("2017-09-10"), - y: 4191.17 - }, - { - x: new Date("2017-09-11"), - y: 4188.84 - }, - { - x: new Date("2017-09-12"), - y: 4148.27 - }, - { - x: new Date("2017-09-13"), - y: 3874.26 - }, - { - x: new Date("2017-09-14"), - y: 3226.41 - }, - { - x: new Date("2017-09-15"), - y: 3686.9 - }, - { - x: new Date("2017-09-16"), - y: 3678.74 - }, - { - x: new Date("2017-09-17"), - y: 3672.57 - }, - { - x: new Date("2017-09-18"), - y: 4067.08 - }, - { - x: new Date("2017-09-19"), - y: 3897 - }, - { - x: new Date("2017-09-20"), - y: 3858.09 - }, - { - x: new Date("2017-09-21"), - y: 3612.68 - }, - { - x: new Date("2017-09-22"), - y: 3603.31 - }, - { - x: new Date("2017-09-23"), - y: 3777.29 - }, - { - x: new Date("2017-09-24"), - y: 3662.12 - }, - { - x: new Date("2017-09-25"), - y: 3927.5 - }, - { - x: new Date("2017-09-26"), - y: 3895.51 - }, - { - x: new Date("2017-09-27"), - y: 4208.56 - }, - { - x: new Date("2017-09-28"), - y: 4185.29 - }, - { - x: new Date("2017-09-29"), - y: 4164.1 - }, - { - x: new Date("2017-09-30"), - y: 4353.05 - }, - { - x: new Date("2017-10-01"), - y: 4394.64 - }, - { - x: new Date("2017-10-02"), - y: 4404.1 - }, - { - x: new Date("2017-10-03"), - y: 4320.09 - }, - { - x: new Date("2017-10-04"), - y: 4225.92 - }, - { - x: new Date("2017-10-05"), - y: 4322.75 - }, - { - x: new Date("2017-10-06"), - y: 4370.24 - }, - { - x: new Date("2017-10-07"), - y: 4437.03 - }, - { - x: new Date("2017-10-08"), - y: 4596.96 - }, - { - x: new Date("2017-10-09"), - y: 4772.97 - }, - { - x: new Date("2017-10-10"), - y: 4754.7 - }, - { - x: new Date("2017-10-11"), - y: 4830.77 - }, - { - x: new Date("2017-10-12"), - y: 5439.13 - }, - { - x: new Date("2017-10-13"), - y: 5640.13 - }, - { - x: new Date("2017-10-14"), - y: 5809.69 - }, - { - x: new Date("2017-10-15"), - y: 5697.39 - }, - { - x: new Date("2017-10-16"), - y: 5754.22 - }, - { - x: new Date("2017-10-17"), - y: 5595.23 - }, - { - x: new Date("2017-10-18"), - y: 5572.2 - }, - { - x: new Date("2017-10-19"), - y: 5699.58 - }, - { - x: new Date("2017-10-20"), - y: 5984.09 - }, - { - x: new Date("2017-10-21"), - y: 6013.23 - }, - { - x: new Date("2017-10-22"), - y: 5984.96 - }, - { - x: new Date("2017-10-23"), - y: 5895.3 - }, - { - x: new Date("2017-10-24"), - y: 5518.85 - }, - { - x: new Date("2017-10-25"), - y: 5733.9 - }, - { - x: new Date("2017-10-26"), - y: 5888.14 - }, - { - x: new Date("2017-10-27"), - y: 5767.68 - }, - { - x: new Date("2017-10-28"), - y: 5732.82 - }, - { - x: new Date("2017-10-29"), - y: 6140.53 - }, - { - x: new Date("2017-10-30"), - y: 6121.8 - }, - { - x: new Date("2017-10-31"), - y: 6447.67 - }, - { - x: new Date("2017-11-01"), - y: 6750.17 - }, - { - x: new Date("2017-11-02"), - y: 7030 - }, - { - x: new Date("2017-11-03"), - y: 7161.45 - }, - { - x: new Date("2017-11-04"), - y: 7387 - }, - { - x: new Date("2017-11-05"), - y: 7382.45 - }, - { - x: new Date("2017-11-06"), - y: 6958.21 - }, - { - x: new Date("2017-11-07"), - y: 7118.8 - }, - { - x: new Date("2017-11-08"), - y: 7458.79 - }, - { - x: new Date("2017-11-09"), - y: 7146.78 - }, - { - x: new Date("2017-11-10"), - y: 6570.31 - }, - { - x: new Date("2017-11-11"), - y: 6337 - }, - { - x: new Date("2017-11-12"), - y: 5857.32 - }, - { - x: new Date("2017-11-13"), - y: 6517.68 - }, - { - x: new Date("2017-11-14"), - y: 6598.77 - }, - { - x: new Date("2017-11-15"), - y: 7279 - }, - { - x: new Date("2017-11-16"), - y: 7843.94 - }, - { - x: new Date("2017-11-17"), - y: 7689.91 - }, - { - x: new Date("2017-11-18"), - y: 7776.94 - }, - { - x: new Date("2017-11-19"), - y: 8033.94 - }, - { - x: new Date("2017-11-20"), - y: 8238.2 - }, - { - x: new Date("2017-11-21"), - y: 8095.59 - }, - { - x: new Date("2017-11-22"), - y: 8230.69 - }, - { - x: new Date("2017-11-23"), - y: 8002.64 - }, - { - x: new Date("2017-11-24"), - y: 8201.46 - }, - { - x: new Date("2017-11-25"), - y: 8763.78 - }, - { - x: new Date("2017-11-26"), - y: 9326.59 - }, - { - x: new Date("2017-11-27"), - y: 9739.05 - }, - { - x: new Date("2017-11-28"), - y: 9908.23 - }, - { - x: new Date("2017-11-29"), - y: 9816.35 - }, - { - x: new Date("2017-11-30"), - y: 9916.54 - }, - { - x: new Date("2017-12-01"), - y: 10859.56 - }, - { - x: new Date("2017-12-02"), - y: 10895.01 - }, - { - x: new Date("2017-12-03"), - y: 11180.89 - }, - { - x: new Date("2017-12-04"), - y: 11616.85 - }, - { - x: new Date("2017-12-05"), - y: 11696.06 - }, - { - x: new Date("2017-12-06"), - y: 13708.99 - }, - { - x: new Date("2017-12-07"), - y: 16858.02 - }, - { - x: new Date("2017-12-08"), - y: 16057.14 - }, - { - x: new Date("2017-12-09"), - y: 14913.4 - }, - { - x: new Date("2017-12-10"), - y: 15036.96 - }, - { - x: new Date("2017-12-11"), - y: 16699.68 - }, - { - x: new Date("2017-12-12"), - y: 17178.1 - }, - { - x: new Date("2017-12-13"), - y: 16407.2 - }, - { - x: new Date("2017-12-14"), - y: 16531.08 - }, - { - x: new Date("2017-12-15"), - y: 17601.94 - }, - { - x: new Date("2017-12-16"), - y: 19343.04 - }, - { - x: new Date("2017-12-17"), - y: 19086.64 - }, - { - x: new Date("2017-12-18"), - y: 18960.52 - }, - { - x: new Date("2017-12-19"), - y: 17608.35 - }, - { - x: new Date("2017-12-20"), - y: 16454.72 - }, - { - x: new Date("2017-12-21"), - y: 15561.05 - }, - { - x: new Date("2017-12-22"), - y: 13857.14 - }, - { - x: new Date("2017-12-23"), - y: 14548.71 - }, - { - x: new Date("2017-12-24"), - y: 13975.44 - }, - { - x: new Date("2017-12-25"), - y: 13917.03 - }, - { - x: new Date("2017-12-26"), - y: 15745.26 - }, - { - x: new Date("2017-12-27"), - y: 15378.28 - }, - { - x: new Date("2017-12-28"), - y: 14428.76 - }, - { - x: new Date("2017-12-29"), - y: 14427.87 - }, - { - x: new Date("2017-12-30"), - y: 12629.81 - }, - { - x: new Date("2017-12-31"), - y: 13860.14 - }, - { - x: new Date("2018-01-01"), - y: 13412.44 - }, - { - x: new Date("2018-01-02"), - y: 14740.76 - }, - { - x: new Date("2018-01-03"), - y: 15134.65 - }, - { - x: new Date("2018-01-04"), - y: 15155.23 - }, - { - x: new Date("2018-01-05"), - y: 16937.17 - }, - { - x: new Date("2018-01-06"), - y: 17135.84 - }, - { - x: new Date("2018-01-07"), - y: 16178.49 - }, - { - x: new Date("2018-01-08"), - y: 14970.36 - }, - { - x: new Date("2018-01-09"), - y: 14439.47 - }, - { - x: new Date("2018-01-10"), - y: 14890.72 - }, - { - x: new Date("2018-01-11"), - y: 13287.26 - }, - { - x: new Date("2018-01-12"), - y: 13812.71 - }, - { - x: new Date("2018-01-13"), - y: 14188.78 - }, - { - x: new Date("2018-01-14"), - y: 13619.03 - }, - { - x: new Date("2018-01-15"), - y: 13585.9 - }, - { - x: new Date("2018-01-16"), - y: 11348.02 - }, - { - x: new Date("2018-01-17"), - y: 11141.25 - }, - { - x: new Date("2018-01-18"), - y: 11250.65 - }, - { - x: new Date("2018-01-19"), - y: 11514.92 - }, - { - x: new Date("2018-01-20"), - y: 12759.64 - }, - { - x: new Date("2018-01-21"), - y: 11522.86 - }, - { - x: new Date("2018-01-22"), - y: 10772.15 - }, - { - x: new Date("2018-01-23"), - y: 10839.83 - }, - { - x: new Date("2018-01-24"), - y: 11399.52 - }, - { - x: new Date("2018-01-25"), - y: 11137.24 - }, - { - x: new Date("2018-01-26"), - y: 11090.06 - }, - { - x: new Date("2018-01-27"), - y: 11407.15 - }, - { - x: new Date("2018-01-28"), - y: 11694.47 - }, - { - x: new Date("2018-01-29"), - y: 11158.39 - }, - { - x: new Date("2018-01-30"), - y: 10035 - }, - { - x: new Date("2018-01-31"), - y: 10166.51 - }, - { - x: new Date("2018-02-01"), - y: 9052.58 - }, - { - x: new Date("2018-02-02"), - y: 8827.63 - }, - { - x: new Date("2018-02-03"), - y: 9224.39 - }, - { - x: new Date("2018-02-04"), - y: 8186.65 - }, - { - x: new Date("2018-02-05"), - y: 6914.26 - }, - { - x: new Date("2018-02-06"), - y: 7700.39 - }, - { - x: new Date("2018-02-07"), - y: 7581.8 - }, - { - x: new Date("2018-02-08"), - y: 8237.24 - }, - { - x: new Date("2018-02-09"), - y: 8689.84 - }, - { - x: new Date("2018-02-10"), - y: 8556.61 - }, - { - x: new Date("2018-02-11"), - y: 8070.8 - }, - { - x: new Date("2018-02-12"), - y: 8891.21 - }, - { - x: new Date("2018-02-13"), - y: 8516.24 - }, - { - x: new Date("2018-02-14"), - y: 9477.84 - }, - { - x: new Date("2018-02-15"), - y: 10016.49 - }, - { - x: new Date("2018-02-16"), - y: 10178.71 - }, - { - x: new Date("2018-02-17"), - y: 11092.15 - }, - { - x: new Date("2018-02-18"), - y: 10396.63 - }, - { - x: new Date("2018-02-19"), - y: 11159.72 - }, - { - x: new Date("2018-02-20"), - y: 11228.24 - }, - { - x: new Date("2018-02-21"), - y: 10456.17 - }, - { - x: new Date("2018-02-22"), - y: 9830.43 - }, - { - x: new Date("2018-02-23"), - y: 10149.46 - }, - { - x: new Date("2018-02-24"), - y: 9682.38 - }, - { - x: new Date("2018-02-25"), - y: 9586.46 - }, - { - x: new Date("2018-02-26"), - y: 10313.08 - }, - { - x: new Date("2018-02-27"), - y: 10564.42 - }, - { - x: new Date("2018-02-28"), - y: 10309.64 - }, - { - x: new Date("2018-03-01"), - y: 10907.59 - }, - { - x: new Date("2018-03-02"), - y: 11019.52 - }, - { - x: new Date("2018-03-03"), - y: 11438.65 - }, - { - x: new Date("2018-03-04"), - y: 11479.73 - }, - { - x: new Date("2018-03-05"), - y: 11432.98 - }, - { - x: new Date("2018-03-06"), - y: 10709.53 - }, - { - x: new Date("2018-03-07"), - y: 9906.8 - }, - { - x: new Date("2018-03-08"), - y: 9299.28 - }, - { - x: new Date("2018-03-09"), - y: 9237.05 - }, - { - x: new Date("2018-03-10"), - y: 8787.16 - }, - { - x: new Date("2018-03-11"), - y: 9532.74 - }, - { - x: new Date("2018-03-12"), - y: 9118.27 - }, - { - x: new Date("2018-03-13"), - y: 9144.15 - }, - { - x: new Date("2018-03-14"), - y: 8196.9 - }, - { - x: new Date("2018-03-15"), - y: 8256.99 - }, - { - x: new Date("2018-03-16"), - y: 8269.33 - }, - { - x: new Date("2018-03-17"), - y: 7862.11 - }, - { - x: new Date("2018-03-18"), - y: 8196.02 - }, - { - x: new Date("2018-03-19"), - y: 8594.19 - }, - { - x: new Date("2018-03-20"), - y: 8915.9 - }, - { - x: new Date("2018-03-21"), - y: 8895.4 - }, - { - x: new Date("2018-03-22"), - y: 8712.89 - }, - { - x: new Date("2018-03-23"), - y: 8918.74 - }, - { - x: new Date("2018-03-24"), - y: 8535.89 - }, - { - x: new Date("2018-03-25"), - y: 8449.83 - }, - { - x: new Date("2018-03-26"), - y: 8138.34 - }, - { - x: new Date("2018-03-27"), - y: 7790.16 - }, - { - x: new Date("2018-03-28"), - y: 7937.2 - }, - { - x: new Date("2018-03-29"), - y: 7086.49 - }, - { - x: new Date("2018-03-30"), - y: 6844.32 - }, - { - x: new Date("2018-03-31"), - y: 6926.02 - }, - { - x: new Date("2018-04-01"), - y: 6816.74 - }, - { - x: new Date("2018-04-02"), - y: 7049.79 - }, - { - x: new Date("2018-04-03"), - y: 7417.89 - }, - { - x: new Date("2018-04-04"), - y: 6789.3 - }, - { - x: new Date("2018-04-05"), - y: 6774.75 - }, - { - x: new Date("2018-04-06"), - y: 6620.41 - }, - { - x: new Date("2018-04-07"), - y: 6896.28 - }, - { - x: new Date("2018-04-08"), - y: 7022.71 - }, - { - x: new Date("2018-04-09"), - y: 6773.94 - }, - { - x: new Date("2018-04-10"), - y: 6830.9 - }, - { - x: new Date("2018-04-11"), - y: 6939.55 - }, - { - x: new Date("2018-04-12"), - y: 7916.37 - }, - { - x: new Date("2018-04-13"), - y: 7889.23 - }, - { - x: new Date("2018-04-14"), - y: 8003.68 - }, - { - x: new Date("2018-04-15"), - y: 8357.04 - }, - { - x: new Date("2018-04-16"), - y: 8051.34 - }, - { - x: new Date("2018-04-17"), - y: 7890.15 - }, - { - x: new Date("2018-04-18"), - y: 8163.69 - }, - { - x: new Date("2018-04-19"), - y: 8273.74 - }, - { - x: new Date("2018-04-20"), - y: 8863.5 - }, - { - x: new Date("2018-04-21"), - y: 8917.6 - }, - { - x: new Date("2018-04-22"), - y: 8792.83 - }, - { - x: new Date("2018-04-23"), - y: 8938.3 - }, - { - x: new Date("2018-04-24"), - y: 9652.16 - }, - { - x: new Date("2018-04-25"), - y: 8864.09 - }, - { - x: new Date("2018-04-26"), - y: 9279 - }, - { - x: new Date("2018-04-27"), - y: 8978.33 - }, - { - x: new Date("2018-04-28"), - y: 9342.47 - }, - { - x: new Date("2018-04-29"), - y: 9392.03 - }, - { - x: new Date("2018-04-30"), - y: 9244.32 - } -]; +export const datasrc: Object[] = [ + { x: new Date("2017-05-01"), y: 1402.08 }, + { x: new Date("2017-05-02"), y: 1443.68 }, + { x: new Date("2017-05-03"), y: 1492.00 }, + { x: new Date("2017-05-04"), y: 1515.63 }, + { x: new Date("2017-05-05"), y: 1512.21 }, + { x: new Date("2017-05-06"), y: 1548.29 }, + { x: new Date("2017-05-07"), y: 1555.47 }, + { x: new Date("2017-05-08"), y: 1639.32 }, + { x: new Date("2017-05-09"), y: 1706.93 }, + { x: new Date("2017-05-10"), y: 1756.80 }, + { x: new Date("2017-05-11"), y: 1807.37 }, + { x: new Date("2017-05-12"), y: 1676.99 }, + { x: new Date("2017-05-13"), y: 1759.96 }, + { x: new Date("2017-05-14"), y: 1772.42 }, + { x: new Date("2017-05-15"), y: 1697.38 } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/es5-datasource.js b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/es5-datasource.js index 08a42fdfa..a0c9b4d4b 100644 --- a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/es5-datasource.js +++ b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/es5-datasource.js @@ -1,1467 +1,20 @@ /** * Range Navigator datasource */ - - var datasrc = [ - { - x: new Date("2017-05-01"), - y: 1402.08 - }, - { - x: new Date("2017-05-02"), - y: 1443.68 - }, - { - x: new Date("2017-05-03"), - y: 1492 - }, - { - x: new Date("2017-05-04"), - y: 1515.63 - }, - { - x: new Date("2017-05-05"), - y: 1512.21 - }, - { - x: new Date("2017-05-06"), - y: 1548.29 - }, - { - x: new Date("2017-05-07"), - y: 1555.47 - }, - { - x: new Date("2017-05-08"), - y: 1639.32 - }, - { - x: new Date("2017-05-09"), - y: 1706.93 - }, - { - x: new Date("2017-05-10"), - y: 1756.8 - }, - { - x: new Date("2017-05-11"), - y: 1807.37 - }, - { - x: new Date("2017-05-12"), - y: 1676.99 - }, - { - x: new Date("2017-05-13"), - y: 1759.96 - }, - { - x: new Date("2017-05-14"), - y: 1772.42 - }, - { - x: new Date("2017-05-15"), - y: 1697.38 - }, - { - x: new Date("2017-05-16"), - y: 1718.2 - }, - { - x: new Date("2017-05-17"), - y: 1802.16 - }, - { - x: new Date("2017-05-18"), - y: 1887.33 - }, - { - x: new Date("2017-05-19"), - y: 1968.1 - }, - { - x: new Date("2017-05-20"), - y: 2051.73 - }, - { - x: new Date("2017-05-21"), - y: 2055.62 - }, - { - x: new Date("2017-05-22"), - y: 2139.03 - }, - { - x: new Date("2017-05-23"), - y: 2291.48 - }, - { - x: new Date("2017-05-24"), - y: 2476.3 - }, - { - x: new Date("2017-05-25"), - y: 2357.5 - }, - { - x: new Date("2017-05-26"), - y: 2247.48 - }, - { - x: new Date("2017-05-27"), - y: 2106.31 - }, - { - x: new Date("2017-05-28"), - y: 2207.58 - }, - { - x: new Date("2017-05-29"), - y: 2289.87 - }, - { - x: new Date("2017-05-30"), - y: 2197.23 - }, - { - x: new Date("2017-05-31"), - y: 2330.23 - }, - { - x: new Date("2017-06-01"), - y: 2452.18 - }, - { - x: new Date("2017-06-02"), - y: 2517.41 - }, - { - x: new Date("2017-06-03"), - y: 2555.65 - }, - { - x: new Date("2017-06-04"), - y: 2552.81 - }, - { - x: new Date("2017-06-05"), - y: 2736.59 - }, - { - x: new Date("2017-06-06"), - y: 2914.08 - }, - { - x: new Date("2017-06-07"), - y: 2694.22 - }, - { - x: new Date("2017-06-08"), - y: 2825.03 - }, - { - x: new Date("2017-06-09"), - y: 2826.7 - }, - { - x: new Date("2017-06-10"), - y: 2942.34 - }, - { - x: new Date("2017-06-11"), - y: 3018.54 - }, - { - x: new Date("2017-06-12"), - y: 2682.59 - }, - { - x: new Date("2017-06-13"), - y: 2738.93 - }, - { - x: new Date("2017-06-14"), - y: 2494.48 - }, - { - x: new Date("2017-06-15"), - y: 2456.92 - }, - { - x: new Date("2017-06-16"), - y: 2528.1 - }, - { - x: new Date("2017-06-17"), - y: 2664 - }, - { - x: new Date("2017-06-18"), - y: 2576.17 - }, - { - x: new Date("2017-06-19"), - y: 2641.66 - }, - { - x: new Date("2017-06-20"), - y: 2778.83 - }, - { - x: new Date("2017-06-21"), - y: 2712.16 - }, - { - x: new Date("2017-06-22"), - y: 2740.79 - }, - { - x: new Date("2017-06-23"), - y: 2738.22 - }, - { - x: new Date("2017-06-24"), - y: 2619.12 - }, - { - x: new Date("2017-06-25"), - y: 2594.45 - }, - { - x: new Date("2017-06-26"), - y: 2485.36 - }, - { - x: new Date("2017-06-27"), - y: 2593.17 - }, - { - x: new Date("2017-06-28"), - y: 2584.56 - }, - { - x: new Date("2017-06-29"), - y: 2561.56 - }, - { - x: new Date("2017-06-30"), - y: 2499.98 - }, - { - x: new Date("2017-07-01"), - y: 2460.2 - }, - { - x: new Date("2017-07-02"), - y: 2529.78 - }, - { - x: new Date("2017-07-03"), - y: 2581.07 - }, - { - x: new Date("2017-07-04"), - y: 2625.07 - }, - { - x: new Date("2017-07-05"), - y: 2629.27 - }, - { - x: new Date("2017-07-06"), - y: 2619.11 - }, - { - x: new Date("2017-07-07"), - y: 2521.24 - }, - { - x: new Date("2017-07-08"), - y: 2579.93 - }, - { - x: new Date("2017-07-09"), - y: 2525.67 - }, - { - x: new Date("2017-07-10"), - y: 2371.96 - }, - { - x: new Date("2017-07-11"), - y: 2332.19 - }, - { - x: new Date("2017-07-12"), - y: 2423.16 - }, - { - x: new Date("2017-07-13"), - y: 2364.52 - }, - { - x: new Date("2017-07-14"), - y: 2232.65 - }, - { - x: new Date("2017-07-15"), - y: 1993.26 - }, - { - x: new Date("2017-07-16"), - y: 1938.94 - }, - { - x: new Date("2017-07-17"), - y: 2244.26 - }, - { - x: new Date("2017-07-18"), - y: 2327.9 - }, - { - x: new Date("2017-07-19"), - y: 2294.4 - }, - { - x: new Date("2017-07-20"), - y: 2877.39 - }, - { - x: new Date("2017-07-21"), - y: 2694.29 - }, - { - x: new Date("2017-07-22"), - y: 2838.81 - }, - { - x: new Date("2017-07-23"), - y: 2762.63 - }, - { - x: new Date("2017-07-24"), - y: 2779.04 - }, - { - x: new Date("2017-07-25"), - y: 2591.22 - }, - { - x: new Date("2017-07-26"), - y: 2550.18 - }, - { - x: new Date("2017-07-27"), - y: 2697.47 - }, - { - x: new Date("2017-07-28"), - y: 2805.18 - }, - { - x: new Date("2017-07-29"), - y: 2720.08 - }, - { - x: new Date("2017-07-30"), - y: 2746.33 - }, - { - x: new Date("2017-07-31"), - y: 2873.83 - }, - { - x: new Date("2017-08-01"), - y: 2735.59 - }, - { - x: new Date("2017-08-02"), - y: 2723.58 - }, - { - x: new Date("2017-08-03"), - y: 2814.36 - }, - { - x: new Date("2017-08-04"), - y: 2883.68 - }, - { - x: new Date("2017-08-05"), - y: 3301.76 - }, - { - x: new Date("2017-08-06"), - y: 3255 - }, - { - x: new Date("2017-08-07"), - y: 3431.97 - }, - { - x: new Date("2017-08-08"), - y: 3453.16 - }, - { - x: new Date("2017-08-09"), - y: 3377.54 - }, - { - x: new Date("2017-08-10"), - y: 3445.28 - }, - { - x: new Date("2017-08-11"), - y: 3679.61 - }, - { - x: new Date("2017-08-12"), - y: 3917.65 - }, - { - x: new Date("2017-08-13"), - y: 4111.2 - }, - { - x: new Date("2017-08-14"), - y: 4382.74 - }, - { - x: new Date("2017-08-15"), - y: 4204.43 - }, - { - x: new Date("2017-08-16"), - y: 4425.3 - }, - { - x: new Date("2017-08-17"), - y: 4316.34 - }, - { - x: new Date("2017-08-18"), - y: 4159.46 - }, - { - x: new Date("2017-08-19"), - y: 4206.13 - }, - { - x: new Date("2017-08-20"), - y: 4111.22 - }, - { - x: new Date("2017-08-21"), - y: 4054.94 - }, - { - x: new Date("2017-08-22"), - y: 4137.67 - }, - { - x: new Date("2017-08-23"), - y: 4191.22 - }, - { - x: new Date("2017-08-24"), - y: 4362.47 - }, - { - x: new Date("2017-08-25"), - y: 4408.32 - }, - { - x: new Date("2017-08-26"), - y: 4387.46 - }, - { - x: new Date("2017-08-27"), - y: 4394.51 - }, - { - x: new Date("2017-08-28"), - y: 4439.66 - }, - { - x: new Date("2017-08-29"), - y: 4648.13 - }, - { - x: new Date("2017-08-30"), - y: 4630.73 - }, - { - x: new Date("2017-08-31"), - y: 4764.87 - }, - { - x: new Date("2017-09-01"), - y: 4950.72 - }, - { - x: new Date("2017-09-02"), - y: 4643.97 - }, - { - x: new Date("2017-09-03"), - y: 4631.69 - }, - { - x: new Date("2017-09-04"), - y: 4319.72 - }, - { - x: new Date("2017-09-05"), - y: 4422.12 - }, - { - x: new Date("2017-09-06"), - y: 4626.72 - }, - { - x: new Date("2017-09-07"), - y: 4638.1 - }, - { - x: new Date("2017-09-08"), - y: 4317.54 - }, - { - x: new Date("2017-09-09"), - y: 4291.88 - }, - { - x: new Date("2017-09-10"), - y: 4191.17 - }, - { - x: new Date("2017-09-11"), - y: 4188.84 - }, - { - x: new Date("2017-09-12"), - y: 4148.27 - }, - { - x: new Date("2017-09-13"), - y: 3874.26 - }, - { - x: new Date("2017-09-14"), - y: 3226.41 - }, - { - x: new Date("2017-09-15"), - y: 3686.9 - }, - { - x: new Date("2017-09-16"), - y: 3678.74 - }, - { - x: new Date("2017-09-17"), - y: 3672.57 - }, - { - x: new Date("2017-09-18"), - y: 4067.08 - }, - { - x: new Date("2017-09-19"), - y: 3897 - }, - { - x: new Date("2017-09-20"), - y: 3858.09 - }, - { - x: new Date("2017-09-21"), - y: 3612.68 - }, - { - x: new Date("2017-09-22"), - y: 3603.31 - }, - { - x: new Date("2017-09-23"), - y: 3777.29 - }, - { - x: new Date("2017-09-24"), - y: 3662.12 - }, - { - x: new Date("2017-09-25"), - y: 3927.5 - }, - { - x: new Date("2017-09-26"), - y: 3895.51 - }, - { - x: new Date("2017-09-27"), - y: 4208.56 - }, - { - x: new Date("2017-09-28"), - y: 4185.29 - }, - { - x: new Date("2017-09-29"), - y: 4164.1 - }, - { - x: new Date("2017-09-30"), - y: 4353.05 - }, - { - x: new Date("2017-10-01"), - y: 4394.64 - }, - { - x: new Date("2017-10-02"), - y: 4404.1 - }, - { - x: new Date("2017-10-03"), - y: 4320.09 - }, - { - x: new Date("2017-10-04"), - y: 4225.92 - }, - { - x: new Date("2017-10-05"), - y: 4322.75 - }, - { - x: new Date("2017-10-06"), - y: 4370.24 - }, - { - x: new Date("2017-10-07"), - y: 4437.03 - }, - { - x: new Date("2017-10-08"), - y: 4596.96 - }, - { - x: new Date("2017-10-09"), - y: 4772.97 - }, - { - x: new Date("2017-10-10"), - y: 4754.7 - }, - { - x: new Date("2017-10-11"), - y: 4830.77 - }, - { - x: new Date("2017-10-12"), - y: 5439.13 - }, - { - x: new Date("2017-10-13"), - y: 5640.13 - }, - { - x: new Date("2017-10-14"), - y: 5809.69 - }, - { - x: new Date("2017-10-15"), - y: 5697.39 - }, - { - x: new Date("2017-10-16"), - y: 5754.22 - }, - { - x: new Date("2017-10-17"), - y: 5595.23 - }, - { - x: new Date("2017-10-18"), - y: 5572.2 - }, - { - x: new Date("2017-10-19"), - y: 5699.58 - }, - { - x: new Date("2017-10-20"), - y: 5984.09 - }, - { - x: new Date("2017-10-21"), - y: 6013.23 - }, - { - x: new Date("2017-10-22"), - y: 5984.96 - }, - { - x: new Date("2017-10-23"), - y: 5895.3 - }, - { - x: new Date("2017-10-24"), - y: 5518.85 - }, - { - x: new Date("2017-10-25"), - y: 5733.9 - }, - { - x: new Date("2017-10-26"), - y: 5888.14 - }, - { - x: new Date("2017-10-27"), - y: 5767.68 - }, - { - x: new Date("2017-10-28"), - y: 5732.82 - }, - { - x: new Date("2017-10-29"), - y: 6140.53 - }, - { - x: new Date("2017-10-30"), - y: 6121.8 - }, - { - x: new Date("2017-10-31"), - y: 6447.67 - }, - { - x: new Date("2017-11-01"), - y: 6750.17 - }, - { - x: new Date("2017-11-02"), - y: 7030 - }, - { - x: new Date("2017-11-03"), - y: 7161.45 - }, - { - x: new Date("2017-11-04"), - y: 7387 - }, - { - x: new Date("2017-11-05"), - y: 7382.45 - }, - { - x: new Date("2017-11-06"), - y: 6958.21 - }, - { - x: new Date("2017-11-07"), - y: 7118.8 - }, - { - x: new Date("2017-11-08"), - y: 7458.79 - }, - { - x: new Date("2017-11-09"), - y: 7146.78 - }, - { - x: new Date("2017-11-10"), - y: 6570.31 - }, - { - x: new Date("2017-11-11"), - y: 6337 - }, - { - x: new Date("2017-11-12"), - y: 5857.32 - }, - { - x: new Date("2017-11-13"), - y: 6517.68 - }, - { - x: new Date("2017-11-14"), - y: 6598.77 - }, - { - x: new Date("2017-11-15"), - y: 7279 - }, - { - x: new Date("2017-11-16"), - y: 7843.94 - }, - { - x: new Date("2017-11-17"), - y: 7689.91 - }, - { - x: new Date("2017-11-18"), - y: 7776.94 - }, - { - x: new Date("2017-11-19"), - y: 8033.94 - }, - { - x: new Date("2017-11-20"), - y: 8238.2 - }, - { - x: new Date("2017-11-21"), - y: 8095.59 - }, - { - x: new Date("2017-11-22"), - y: 8230.69 - }, - { - x: new Date("2017-11-23"), - y: 8002.64 - }, - { - x: new Date("2017-11-24"), - y: 8201.46 - }, - { - x: new Date("2017-11-25"), - y: 8763.78 - }, - { - x: new Date("2017-11-26"), - y: 9326.59 - }, - { - x: new Date("2017-11-27"), - y: 9739.05 - }, - { - x: new Date("2017-11-28"), - y: 9908.23 - }, - { - x: new Date("2017-11-29"), - y: 9816.35 - }, - { - x: new Date("2017-11-30"), - y: 9916.54 - }, - { - x: new Date("2017-12-01"), - y: 10859.56 - }, - { - x: new Date("2017-12-02"), - y: 10895.01 - }, - { - x: new Date("2017-12-03"), - y: 11180.89 - }, - { - x: new Date("2017-12-04"), - y: 11616.85 - }, - { - x: new Date("2017-12-05"), - y: 11696.06 - }, - { - x: new Date("2017-12-06"), - y: 13708.99 - }, - { - x: new Date("2017-12-07"), - y: 16858.02 - }, - { - x: new Date("2017-12-08"), - y: 16057.14 - }, - { - x: new Date("2017-12-09"), - y: 14913.4 - }, - { - x: new Date("2017-12-10"), - y: 15036.96 - }, - { - x: new Date("2017-12-11"), - y: 16699.68 - }, - { - x: new Date("2017-12-12"), - y: 17178.1 - }, - { - x: new Date("2017-12-13"), - y: 16407.2 - }, - { - x: new Date("2017-12-14"), - y: 16531.08 - }, - { - x: new Date("2017-12-15"), - y: 17601.94 - }, - { - x: new Date("2017-12-16"), - y: 19343.04 - }, - { - x: new Date("2017-12-17"), - y: 19086.64 - }, - { - x: new Date("2017-12-18"), - y: 18960.52 - }, - { - x: new Date("2017-12-19"), - y: 17608.35 - }, - { - x: new Date("2017-12-20"), - y: 16454.72 - }, - { - x: new Date("2017-12-21"), - y: 15561.05 - }, - { - x: new Date("2017-12-22"), - y: 13857.14 - }, - { - x: new Date("2017-12-23"), - y: 14548.71 - }, - { - x: new Date("2017-12-24"), - y: 13975.44 - }, - { - x: new Date("2017-12-25"), - y: 13917.03 - }, - { - x: new Date("2017-12-26"), - y: 15745.26 - }, - { - x: new Date("2017-12-27"), - y: 15378.28 - }, - { - x: new Date("2017-12-28"), - y: 14428.76 - }, - { - x: new Date("2017-12-29"), - y: 14427.87 - }, - { - x: new Date("2017-12-30"), - y: 12629.81 - }, - { - x: new Date("2017-12-31"), - y: 13860.14 - }, - { - x: new Date("2018-01-01"), - y: 13412.44 - }, - { - x: new Date("2018-01-02"), - y: 14740.76 - }, - { - x: new Date("2018-01-03"), - y: 15134.65 - }, - { - x: new Date("2018-01-04"), - y: 15155.23 - }, - { - x: new Date("2018-01-05"), - y: 16937.17 - }, - { - x: new Date("2018-01-06"), - y: 17135.84 - }, - { - x: new Date("2018-01-07"), - y: 16178.49 - }, - { - x: new Date("2018-01-08"), - y: 14970.36 - }, - { - x: new Date("2018-01-09"), - y: 14439.47 - }, - { - x: new Date("2018-01-10"), - y: 14890.72 - }, - { - x: new Date("2018-01-11"), - y: 13287.26 - }, - { - x: new Date("2018-01-12"), - y: 13812.71 - }, - { - x: new Date("2018-01-13"), - y: 14188.78 - }, - { - x: new Date("2018-01-14"), - y: 13619.03 - }, - { - x: new Date("2018-01-15"), - y: 13585.9 - }, - { - x: new Date("2018-01-16"), - y: 11348.02 - }, - { - x: new Date("2018-01-17"), - y: 11141.25 - }, - { - x: new Date("2018-01-18"), - y: 11250.65 - }, - { - x: new Date("2018-01-19"), - y: 11514.92 - }, - { - x: new Date("2018-01-20"), - y: 12759.64 - }, - { - x: new Date("2018-01-21"), - y: 11522.86 - }, - { - x: new Date("2018-01-22"), - y: 10772.15 - }, - { - x: new Date("2018-01-23"), - y: 10839.83 - }, - { - x: new Date("2018-01-24"), - y: 11399.52 - }, - { - x: new Date("2018-01-25"), - y: 11137.24 - }, - { - x: new Date("2018-01-26"), - y: 11090.06 - }, - { - x: new Date("2018-01-27"), - y: 11407.15 - }, - { - x: new Date("2018-01-28"), - y: 11694.47 - }, - { - x: new Date("2018-01-29"), - y: 11158.39 - }, - { - x: new Date("2018-01-30"), - y: 10035 - }, - { - x: new Date("2018-01-31"), - y: 10166.51 - }, - { - x: new Date("2018-02-01"), - y: 9052.58 - }, - { - x: new Date("2018-02-02"), - y: 8827.63 - }, - { - x: new Date("2018-02-03"), - y: 9224.39 - }, - { - x: new Date("2018-02-04"), - y: 8186.65 - }, - { - x: new Date("2018-02-05"), - y: 6914.26 - }, - { - x: new Date("2018-02-06"), - y: 7700.39 - }, - { - x: new Date("2018-02-07"), - y: 7581.8 - }, - { - x: new Date("2018-02-08"), - y: 8237.24 - }, - { - x: new Date("2018-02-09"), - y: 8689.84 - }, - { - x: new Date("2018-02-10"), - y: 8556.61 - }, - { - x: new Date("2018-02-11"), - y: 8070.8 - }, - { - x: new Date("2018-02-12"), - y: 8891.21 - }, - { - x: new Date("2018-02-13"), - y: 8516.24 - }, - { - x: new Date("2018-02-14"), - y: 9477.84 - }, - { - x: new Date("2018-02-15"), - y: 10016.49 - }, - { - x: new Date("2018-02-16"), - y: 10178.71 - }, - { - x: new Date("2018-02-17"), - y: 11092.15 - }, - { - x: new Date("2018-02-18"), - y: 10396.63 - }, - { - x: new Date("2018-02-19"), - y: 11159.72 - }, - { - x: new Date("2018-02-20"), - y: 11228.24 - }, - { - x: new Date("2018-02-21"), - y: 10456.17 - }, - { - x: new Date("2018-02-22"), - y: 9830.43 - }, - { - x: new Date("2018-02-23"), - y: 10149.46 - }, - { - x: new Date("2018-02-24"), - y: 9682.38 - }, - { - x: new Date("2018-02-25"), - y: 9586.46 - }, - { - x: new Date("2018-02-26"), - y: 10313.08 - }, - { - x: new Date("2018-02-27"), - y: 10564.42 - }, - { - x: new Date("2018-02-28"), - y: 10309.64 - }, - { - x: new Date("2018-03-01"), - y: 10907.59 - }, - { - x: new Date("2018-03-02"), - y: 11019.52 - }, - { - x: new Date("2018-03-03"), - y: 11438.65 - }, - { - x: new Date("2018-03-04"), - y: 11479.73 - }, - { - x: new Date("2018-03-05"), - y: 11432.98 - }, - { - x: new Date("2018-03-06"), - y: 10709.53 - }, - { - x: new Date("2018-03-07"), - y: 9906.8 - }, - { - x: new Date("2018-03-08"), - y: 9299.28 - }, - { - x: new Date("2018-03-09"), - y: 9237.05 - }, - { - x: new Date("2018-03-10"), - y: 8787.16 - }, - { - x: new Date("2018-03-11"), - y: 9532.74 - }, - { - x: new Date("2018-03-12"), - y: 9118.27 - }, - { - x: new Date("2018-03-13"), - y: 9144.15 - }, - { - x: new Date("2018-03-14"), - y: 8196.9 - }, - { - x: new Date("2018-03-15"), - y: 8256.99 - }, - { - x: new Date("2018-03-16"), - y: 8269.33 - }, - { - x: new Date("2018-03-17"), - y: 7862.11 - }, - { - x: new Date("2018-03-18"), - y: 8196.02 - }, - { - x: new Date("2018-03-19"), - y: 8594.19 - }, - { - x: new Date("2018-03-20"), - y: 8915.9 - }, - { - x: new Date("2018-03-21"), - y: 8895.4 - }, - { - x: new Date("2018-03-22"), - y: 8712.89 - }, - { - x: new Date("2018-03-23"), - y: 8918.74 - }, - { - x: new Date("2018-03-24"), - y: 8535.89 - }, - { - x: new Date("2018-03-25"), - y: 8449.83 - }, - { - x: new Date("2018-03-26"), - y: 8138.34 - }, - { - x: new Date("2018-03-27"), - y: 7790.16 - }, - { - x: new Date("2018-03-28"), - y: 7937.2 - }, - { - x: new Date("2018-03-29"), - y: 7086.49 - }, - { - x: new Date("2018-03-30"), - y: 6844.32 - }, - { - x: new Date("2018-03-31"), - y: 6926.02 - }, - { - x: new Date("2018-04-01"), - y: 6816.74 - }, - { - x: new Date("2018-04-02"), - y: 7049.79 - }, - { - x: new Date("2018-04-03"), - y: 7417.89 - }, - { - x: new Date("2018-04-04"), - y: 6789.3 - }, - { - x: new Date("2018-04-05"), - y: 6774.75 - }, - { - x: new Date("2018-04-06"), - y: 6620.41 - }, - { - x: new Date("2018-04-07"), - y: 6896.28 - }, - { - x: new Date("2018-04-08"), - y: 7022.71 - }, - { - x: new Date("2018-04-09"), - y: 6773.94 - }, - { - x: new Date("2018-04-10"), - y: 6830.9 - }, - { - x: new Date("2018-04-11"), - y: 6939.55 - }, - { - x: new Date("2018-04-12"), - y: 7916.37 - }, - { - x: new Date("2018-04-13"), - y: 7889.23 - }, - { - x: new Date("2018-04-14"), - y: 8003.68 - }, - { - x: new Date("2018-04-15"), - y: 8357.04 - }, - { - x: new Date("2018-04-16"), - y: 8051.34 - }, - { - x: new Date("2018-04-17"), - y: 7890.15 - }, - { - x: new Date("2018-04-18"), - y: 8163.69 - }, - { - x: new Date("2018-04-19"), - y: 8273.74 - }, - { - x: new Date("2018-04-20"), - y: 8863.5 - }, - { - x: new Date("2018-04-21"), - y: 8917.6 - }, - { - x: new Date("2018-04-22"), - y: 8792.83 - }, - { - x: new Date("2018-04-23"), - y: 8938.3 - }, - { - x: new Date("2018-04-24"), - y: 9652.16 - }, - { - x: new Date("2018-04-25"), - y: 8864.09 - }, - { - x: new Date("2018-04-26"), - y: 9279 - }, - { - x: new Date("2018-04-27"), - y: 8978.33 - }, - { - x: new Date("2018-04-28"), - y: 9342.47 - }, - { - x: new Date("2018-04-29"), - y: 9392.03 - }, - { - x: new Date("2018-04-30"), - y: 9244.32 - } -]; + { x: new Date("2017-05-01"), y: 1402.08 }, + { x: new Date("2017-05-02"), y: 1443.68 }, + { x: new Date("2017-05-03"), y: 1492.00 }, + { x: new Date("2017-05-04"), y: 1515.63 }, + { x: new Date("2017-05-05"), y: 1512.21 }, + { x: new Date("2017-05-06"), y: 1548.29 }, + { x: new Date("2017-05-07"), y: 1555.47 }, + { x: new Date("2017-05-08"), y: 1639.32 }, + { x: new Date("2017-05-09"), y: 1706.93 }, + { x: new Date("2017-05-10"), y: 1756.80 }, + { x: new Date("2017-05-11"), y: 1807.37 }, + { x: new Date("2017-05-12"), y: 1676.99 }, + { x: new Date("2017-05-13"), y: 1759.96 }, + { x: new Date("2017-05-14"), y: 1772.42 }, + { x: new Date("2017-05-15"), y: 1697.38 } +]; \ No newline at end of file diff --git a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/index.js b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/index.js index ca78e53b1..b9708a7fc 100644 --- a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/index.js +++ b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/index.js @@ -1,7 +1,6 @@ var range = new ej.charts.RangeNavigator({ valueType: 'DateTime', - value: [new Date('2017-09-01'), new Date('2018-02-01')], - labelFormat: 'MMM-yy', + labelFormat: 'dd-MMM', series: [{ dataSource: datasrc, xName: 'x', yName: 'y', type: 'Area', width: 2, }], diff --git a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/index.ts b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/index.ts index 6883640b1..8896d405d 100644 --- a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/index.ts +++ b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/index.ts @@ -7,8 +7,7 @@ import { datasrc } from "./datasource.ts"; let range: RangeNavigator = new RangeNavigator({ valueType: 'DateTime', - value: [new Date('2017-09-01'), new Date('2018-02-01')], - labelFormat: 'MMM-yy', + labelFormat: 'dd-MMM', series: [{ dataSource: datasrc, xName: 'x', yName: 'y', type: 'Area', width: 2, }], diff --git a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/js/index.html b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/js/index.html index b3f61f7cd..65f1f4497 100644 --- a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/js/index.html +++ b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/js/index.html @@ -1,28 +1,24 @@ - - EJ2 Animation + + + + + Essential JS 2 Range Navigator - + - - - - + + + + + - -
      -
      -
      - +

      Syncfusion Range Navigator

      +
      + + - - - \ No newline at end of file + \ No newline at end of file diff --git a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/ts/index.html b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/ts/index.html index 1ebdb16ad..ef7668a45 100644 --- a/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/ts/index.html +++ b/ej2-javascript/code-snippet/rangenavigator/getting-started-cs10/ts/index.html @@ -14,6 +14,7 @@
      Loading....
      +

      Syncfusion Range Navigator

      diff --git a/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/index.js b/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/index.js index 21a26dd6b..597a59565 100644 --- a/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/index.js +++ b/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/index.js @@ -17,9 +17,7 @@ const sankey = new ej.charts.Sankey( height: '420px', title: 'Energy Flow Diagram', nodes: nodes, - links: links, - tooltip: { enable: true }, - legendSettings: { visible: true } + links: links }, '#sankey-container' ); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/index.ts b/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/index.ts index 2ec88fc9c..c6ff9eb38 100644 --- a/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/index.ts +++ b/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/index.ts @@ -1,6 +1,4 @@ -import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport } from '@syncfusion/ej2-charts'; - -Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport); +import { Sankey, SankeyNodeModel, SankeyLinkModel } from '@syncfusion/ej2-charts'; const nodes: SankeyNodeModel[] = [ { id: 'Energy Input', label: { text: 'Energy Input' } }, @@ -21,9 +19,7 @@ const sankey: Sankey = new Sankey( height: '420px', title: 'Energy Flow Diagram', nodes: nodes, - links: links, - tooltip: { enable: true }, - legendSettings: { visible: true } + links: links }, '#sankey-container' ); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/js/index.html b/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/js/index.html index b319e9ae9..6e270a4ef 100644 --- a/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/js/index.html +++ b/ej2-javascript/code-snippet/sankey/getting-started/data-cs1/js/index.html @@ -2,25 +2,20 @@ - EJ2 Animation + Syncfusion Sankey - Quick Start - + - - + + + + -
      -
      -
      - +

      Syncfusion Sankey

      +
      diff --git a/ej2-javascript/code-snippet/sankey/getting-started/tooltip-cs1/index.ts b/ej2-javascript/code-snippet/sankey/getting-started/tooltip-cs1/index.ts index 9bf4bdc4c..cf6a42d1c 100644 --- a/ej2-javascript/code-snippet/sankey/getting-started/tooltip-cs1/index.ts +++ b/ej2-javascript/code-snippet/sankey/getting-started/tooltip-cs1/index.ts @@ -1,8 +1,6 @@ -import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport } from '@syncfusion/ej2-charts'; +import { Sankey, SankeyNodeModel, SankeyLinkModel } from '@syncfusion/ej2-charts'; import { Browser } from '@syncfusion/ej2-base'; -Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport); - const onLoaded = () => { const element = document.getElementById('sankey-container'); if (element) element.setAttribute('title', ''); @@ -65,8 +63,6 @@ const sankey: Sankey = new Sankey( subTitle: 'Source: Lawrence Livermore National Laboratory', linkStyle: { opacity: 0.6, curvature: 0.55, colorType: 'Source' }, labelSettings: { visible: Browser.isDevice ? false : true }, - tooltip: { enable: true }, - legendSettings: { visible: true, position: 'Bottom', itemPadding: 8 }, loaded: onLoaded, nodes: nodes, links: links diff --git a/ej2-javascript/code-snippet/sankey/getting-started/tooltip-cs1/ts/index.html b/ej2-javascript/code-snippet/sankey/getting-started/tooltip-cs1/ts/index.html index 5b8a56e19..f355e1695 100644 --- a/ej2-javascript/code-snippet/sankey/getting-started/tooltip-cs1/ts/index.html +++ b/ej2-javascript/code-snippet/sankey/getting-started/tooltip-cs1/ts/index.html @@ -2,7 +2,7 @@ - EJ2 Animation + Syncfusion Sankey - Quick Start diff --git a/ej2-javascript/code-snippet/smithchart/getting-started-cs1/index.ts b/ej2-javascript/code-snippet/smithchart/getting-started-cs1/index.ts index e3c195c6f..b185c9755 100644 --- a/ej2-javascript/code-snippet/smithchart/getting-started-cs1/index.ts +++ b/ej2-javascript/code-snippet/smithchart/getting-started-cs1/index.ts @@ -2,7 +2,27 @@ import { Smithchart } from '@syncfusion/ej2-charts'; -let smithchart: Smithchart = new Smithchart(); +let smithchart: Smithchart = new Smithchart({ + series: [ + { + dataSource: [ + { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 }, + { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 }, + { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 }, + { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 }, + { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 }, + { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 }, + { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 }, + { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 }, + { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 }, + { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 }, + { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 } + ], + name: 'Transmission1', + reactance: 'reactance', resistance: 'resistance' + } + ] +}); smithchart.appendTo('#container'); diff --git a/ej2-javascript/code-snippet/smithchart/getting-started-cs1/js/index.html b/ej2-javascript/code-snippet/smithchart/getting-started-cs1/js/index.html index 2d7376573..0e1abb81a 100644 --- a/ej2-javascript/code-snippet/smithchart/getting-started-cs1/js/index.html +++ b/ej2-javascript/code-snippet/smithchart/getting-started-cs1/js/index.html @@ -7,10 +7,10 @@ - + - + diff --git a/ej2-javascript/code-snippet/sparkline/getting-started-cs1/index.js b/ej2-javascript/code-snippet/sparkline/getting-started-cs1/index.js index fe8767fd7..866406631 100644 --- a/ej2-javascript/code-snippet/sparkline/getting-started-cs1/index.js +++ b/ej2-javascript/code-snippet/sparkline/getting-started-cs1/index.js @@ -15,7 +15,9 @@ var sparklineInstance = new ej.charts.Sparkline({ { x: 9, xval: '2014', yval: 22507620 }, ], // Assign the dataSource values to series of Sparkline 'xName and yName' - xName: 'xval', yName: 'yval' + xName: 'xval', yName: 'yval', + // Assign the 'area' as type of Sparkline + type:'Area' }); //Render initialized Sparkline sparklineInstance.appendTo("#element"); diff --git a/ej2-javascript/code-snippet/sparkline/getting-started-cs1/index.ts b/ej2-javascript/code-snippet/sparkline/getting-started-cs1/index.ts index 8b1378917..1f3cb9eb0 100644 --- a/ej2-javascript/code-snippet/sparkline/getting-started-cs1/index.ts +++ b/ej2-javascript/code-snippet/sparkline/getting-started-cs1/index.ts @@ -1 +1,24 @@ +import { Sparkline } from '@syncfusion/ej2-charts'; + +let sparkline: Sparkline = new Sparkline({ + height: '100px', + width: '70%', + dataSource: [ + { x: 0, xval: '2005', yval: 20090440 }, + { x: 1, xval: '2006', yval: 20264080 }, + { x: 2, xval: '2007', yval: 20434180 }, + { x: 3, xval: '2008', yval: 21007310 }, + { x: 4, xval: '2009', yval: 21262640 }, + { x: 5, xval: '2010', yval: 21515750 }, + { x: 6, xval: '2011', yval: 21766710 }, + { x: 7, xval: '2012', yval: 22015580 }, + { x: 8, xval: '2013', yval: 22262500 }, + { x: 9, xval: '2014', yval: 22507620 }, + ], + // Assign the dataSource values to series of sparkline 'xName and yName' + xName: 'xval', yName: 'yval', + // Assign the 'area' as type of Sparkline + type:'Area' +}); +sparkline.appendTo("#element"); \ No newline at end of file diff --git a/ej2-javascript/code-snippet/sparkline/getting-started-cs1/js/index.html b/ej2-javascript/code-snippet/sparkline/getting-started-cs1/js/index.html index 162dbe60b..e3544fef9 100644 --- a/ej2-javascript/code-snippet/sparkline/getting-started-cs1/js/index.html +++ b/ej2-javascript/code-snippet/sparkline/getting-started-cs1/js/index.html @@ -5,10 +5,10 @@ - + - + diff --git a/ej2-javascript/code-snippet/treemap/getting-started-cs1/index.js b/ej2-javascript/code-snippet/treemap/getting-started-cs1/index.js index 1acdbbefb..979df3057 100644 --- a/ej2-javascript/code-snippet/treemap/getting-started-cs1/index.js +++ b/ej2-javascript/code-snippet/treemap/getting-started-cs1/index.js @@ -19,6 +19,7 @@ var treemap = new ej.treemap.TreeMap({ leafItemSettings: { labelPath: 'State', } -}, '#container'); +}); +treemap.appendTo('#container'); diff --git a/ej2-javascript/code-snippet/treemap/getting-started-cs1/index.ts b/ej2-javascript/code-snippet/treemap/getting-started-cs1/index.ts index 8b1378917..4d2b88216 100644 --- a/ej2-javascript/code-snippet/treemap/getting-started-cs1/index.ts +++ b/ej2-javascript/code-snippet/treemap/getting-started-cs1/index.ts @@ -1 +1,28 @@ +import { TreeMap } from '@syncfusion/ej2-treemap'; +let treemap: TreeMap = new TreeMap({ + dataSource: [ + { Title: 'State wise International Airport count in South America', State: "Brazil", Count: 25 }, + { Title: 'State wise International Airport count in South America', State: "Colombia", Count: 12 }, + { Title: 'State wise International Airport count in South America', State: "Argentina", Count: 9 }, + { Title: 'State wise International Airport count in South America', State: "Ecuador", Count: 7 }, + { Title: 'State wise International Airport count in South America', State: "Chile", Count: 6 }, + { Title: 'State wise International Airport count in South America', State: "Peru", Count: 3 }, + { Title: 'State wise International Airport count in South America', State: "Venezuela", Count: 3 }, + { Title: 'State wise International Airport count in South America', State: "Bolivia", Count: 2 }, + { Title: 'State wise International Airport count in South America', State: "Paraguay", Count: 2 }, + { Title: 'State wise International Airport count in South America', State: "Uruguay", Count: 2 }, + { Title: 'State wise International Airport count in South America', State: "Falkland Islands", Count: 1 }, + { Title: 'State wise International Airport count in South America', State: "French Guiana", Count: 1 }, + { Title: 'State wise International Airport count in South America', State: "Guyana", Count: 1 }, + { Title: 'State wise International Airport count in South America', State: "Suriname", Count: 1 }, + ], + weightValuePath: 'Count', + leafItemSettings: { + labelPath: 'State', + } +}); +treemap.appendTo('#container'); + + + diff --git a/ej2-javascript/code-snippet/treemap/getting-started-cs1/js/index.html b/ej2-javascript/code-snippet/treemap/getting-started-cs1/js/index.html index 5955c16f6..8b20600d2 100644 --- a/ej2-javascript/code-snippet/treemap/getting-started-cs1/js/index.html +++ b/ej2-javascript/code-snippet/treemap/getting-started-cs1/js/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-javascript/heatmap-chart/axis.md b/ej2-javascript/heatmap-chart/axis.md index 9300bc01d..b87dd608d 100644 --- a/ej2-javascript/heatmap-chart/axis.md +++ b/ej2-javascript/heatmap-chart/axis.md @@ -16,7 +16,7 @@ You can define the type, format, and other customizing options for both axes in ## Types -There are three different axis types available in the HeatMap, which defines the data type of the axis labels. You can define the axis type by using the [valueType](../api/heatmap/axis/#valuetype) property in the HeatMap. +There are three different axis types available in the HeatMap, which defines the data type of the axis labels. You can define the axis type by using the [valueType](../api/heatmap/axis#valuetype) property in the HeatMap. ### Category axis @@ -82,7 +82,7 @@ Numeric axis type is used to represent the numeric values in axis labels. ### Date-time axis -Date-time axis type is used to represent the date-time values in axis labels with a specific format. In date-time axis, you can define the start and end date/time using the [minimum](../api/heatmap/axis/#minimum) and [maximum](../api/heatmap/axis/#maximum) properties. +Date-time axis type is used to represent the date-time values in axis labels with a specific format. In date-time axis, you can define the start and end date/time using the [minimum](../api/heatmap/axis#minimum) and [maximum](../api/heatmap/axis#maximum) properties. {% if page.publishingplatform == "typescript" %} @@ -113,7 +113,7 @@ Date-time axis type is used to represent the date-time values in axis labels wit ## Inversed axis -HeatMap supports inversing the axis origin for both axes, where the axis labels are placed in an inversed manner. You can enable axis inversing by enabling the [isInversed](../api/heatmap/axis/#isinversed) property. +HeatMap supports inversing the axis origin for both axes, where the axis labels are placed in an inversed manner. You can enable axis inversing by enabling the [isInversed](../api/heatmap/axis#isinversed) property. {% if page.publishingplatform == "typescript" %} @@ -144,7 +144,7 @@ HeatMap supports inversing the axis origin for both axes, where the axis labels ## Opposed axis -In HeatMap, you can place the axis label in an opposite position of its default axis label position by using the [opposedPosition](../api/heatmap/axis/#opposedposition) property. +In HeatMap, you can place the axis label in an opposite position of its default axis label position by using the [opposedPosition](../api/heatmap/axis#opposedposition) property. {% if page.publishingplatform == "typescript" %} @@ -173,19 +173,52 @@ In HeatMap, you can place the axis label in an opposite position of its default {% previewsample "page.domainurl/code-snippet/heatmap/axis-cs5" %} {% endif %} + +## Enable axis labels + +You can add axis labels to the HeatMap and format those labels using the [xAxis](../api/heatmap#xaxis) and [yAxis](../api/heatmap#yaxis) properties. Axis labels provide additional information about the data points populated in the HeatMap. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight js tabtitle="index.ts" %} +{% include code-snippet/heatmap/getting-started-cs2/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/heatmap/getting-started-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs2" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/heatmap/getting-started-cs2/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/heatmap/getting-started-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs2" %} + +{% endif %} + ## Axis labels customization ### Customizing the text style -The text style of the axis labels can be customized using the following options available in the [textStyle](../api/heatmap/axisModel/#textstyle) property. +The text style of the axis labels can be customized using the following options available in the [textStyle](../api/heatmap/axisModel#textstyle) property. -* [color](../api/heatmap/fontModel/#color) - It is used to change the text color of the axis labels. -* [fontFamily](../api/heatmap/fontModel/#fontfamily) - It is used to change the font family of the axis labels. -* [fontStyle](../api/heatmap/fontModel/#fontstyle) - It is used to change the font style of the axis labels. -* [fontWeight](../api/heatmap/fontModel/#fontweight) - It is used to change the font weight of the axis labels. -* [size](../api/heatmap/fontModel/#size) - It is used to change the font size of the axis labels. -* [textAlignment](../api/heatmap/fontModel/#textalignment) - It is used to position and align the axis labels. This property allows you to specify values such as **Near**, **Center**, and **Far**. -* [textOverflow](../api/heatmap/fontModel/#textoverflow) - When the axis label exceeds the intended space, this property is used to trim or wrap it. This property takes values such as **None**, **Trim**, and **Wrap**. +* [color](../api/heatmap/fontModel#color) - It is used to change the text color of the axis labels. +* [fontFamily](../api/heatmap/fontModel#fontfamily) - It is used to change the font family of the axis labels. +* [fontStyle](../api/heatmap/fontModel#fontstyle) - It is used to change the font style of the axis labels. +* [fontWeight](../api/heatmap/fontModel#fontweight) - It is used to change the font weight of the axis labels. +* [size](../api/heatmap/fontModel#size) - It is used to change the font size of the axis labels. +* [textAlignment](../api/heatmap/fontModel#textalignment) - It is used to position and align the axis labels. This property allows you to specify values such as **Near**, **Center**, and **Far**. +* [textOverflow](../api/heatmap/fontModel#textoverflow) - When the axis label exceeds the intended space, this property is used to trim or wrap it. This property takes values such as **None**, **Trim**, and **Wrap**. {% if page.publishingplatform == "typescript" %} @@ -247,7 +280,7 @@ Axis labels with line breaks improve the readability of the HeatMap by splitting ### Customizing labels when intersecting with other labels -When the axis labels intersect, [labelIntersectAction](../api/heatmap/axisModel/#labelintersectaction) property is used to handle the intersection. The `labelIntersectAction` property can take the following values. +When the axis labels intersect, [labelIntersectAction](../api/heatmap/axisModel#labelintersectaction) property is used to handle the intersection. The `labelIntersectAction` property can take the following values. * **None** - It specifies that no action is taken when the axis labels intersect. * **Trim** - It specifies to trim the axis labels when they intersect. @@ -285,7 +318,7 @@ The below example demonstrates to trim the axis labels by using the `labelInters ### Rotating labels -The axis labels can be rotated to the desired angles by using the [labelRotation](../api/heatmap/axisModel/#labelrotation) property. +The axis labels can be rotated to the desired angles by using the [labelRotation](../api/heatmap/axisModel#labelrotation) property. {% if page.publishingplatform == "typescript" %} @@ -316,7 +349,7 @@ The axis labels can be rotated to the desired angles by using the [labelRotation ### Label formatting -HeatMap supports formatting the axis labels by using the [labelFormat](../api/heatmap/axis/#labelformat) property. Using this property, you can customize the axis label by global string format ('P', 'C', etc) or customized format like '{value}°C'. +HeatMap supports formatting the axis labels by using the [labelFormat](../api/heatmap/axis#labelformat) property. Using this property, you can customize the axis label by global string format ('P', 'C', etc) or customized format like '{value}°C'. {% if page.publishingplatform == "typescript" %} @@ -347,7 +380,7 @@ HeatMap supports formatting the axis labels by using the [labelFormat](../api/he ## Axis intervals -In HeatMap, you can define an interval between the axis labels using the [interval](../api/heatmap/axis/#interval) property. In date-time axis, you can change the interval mode by using the [intervalType](../api/heatmap/axis/#intervaltype) property. The date-time axis supports the following interval types: +In HeatMap, you can define an interval between the axis labels using the [interval](../api/heatmap/axis#interval) property. In date-time axis, you can change the interval mode by using the [intervalType](../api/heatmap/axis#intervaltype) property. The date-time axis supports the following interval types: * Years * Months @@ -384,7 +417,7 @@ In HeatMap, you can define an interval between the axis labels using the [interv ## Axis label increment -Axis label increment in the HeatMap is used to display the axis labels with regular interval values in numeric and date-time axes. The labels will be displayed with tick gaps when you set the label interval. But, to achieve the same behavior without tick gaps, use the label increment. You can set the axis label increment using the [increment](../api/heatmap/axis/#increment) property and the default value of this property is **1**. +Axis label increment in the HeatMap is used to display the axis labels with regular interval values in numeric and date-time axes. The labels will be displayed with tick gaps when you set the label interval. But, to achieve the same behavior without tick gaps, use the label increment. You can set the axis label increment using the [increment](../api/heatmap/axis#increment) property and the default value of this property is **1**. {% if page.publishingplatform == "typescript" %} @@ -415,7 +448,7 @@ Axis label increment in the HeatMap is used to display the axis labels with regu ## Limiting labels in date-time axis -You can display the axis labels at specific time intervals along with the date-time axis using the [showLabelOn](../api/heatmap/axis/#showlabelon) property. This property supports the following types: +You can display the axis labels at specific time intervals along with the date-time axis using the [showLabelOn](../api/heatmap/axis#showlabelon) property. This property supports the following types: * None: Displays the axis labels based on the `intervalType` and `interval` property of the axis. This type is default value of the `showLabelOn` property. * Years: Displays the axis labels on every year between given date-time range. @@ -452,16 +485,16 @@ You can display the axis labels at specific time intervals along with the date-t ## Multilevel Labels -Multilevel labels are used to classify a group of axis labels as a single category, which is then displayed with a label. By using [multiLevelLabels](../api/heatmap/axis/#multilevellabels), you can add multiple levels on top of the axis labels. +Multilevel labels are used to classify a group of axis labels as a single category, which is then displayed with a label. By using [multiLevelLabels](../api/heatmap/axis#multilevellabels), you can add multiple levels on top of the axis labels. -To divide and group the axis labels, you can use `multiLevelLabels` property. The starting and ending indexes of the axis labels can be set using the [start](../api/heatmap/multiLevelCategoriesModel/#start) and [end](../api/heatmap/multiLevelCategoriesModel/#end) properties in the [categories](../api/heatmap/multiLevelCategoriesModel/). The [text](../api/heatmap/multiLevelCategoriesModel/#text) property can be used to specify a name for the grouped axis labels. +To divide and group the axis labels, you can use `multiLevelLabels` property. The starting and ending indexes of the axis labels can be set using the [start](../api/heatmap/multiLevelCategoriesModel#start) and [end](../api/heatmap/multiLevelCategoriesModel#end) properties in the [categories](../api/heatmap/multiLevelCategoriesModel). The [text](../api/heatmap/multiLevelCategoriesModel#text) property can be used to specify a name for the grouped axis labels. The multilevel labels can be customized by using the following properties. -* [overflow](../api/heatmap/multiLevelLabels/#overflow) - It is used to trim or wrap the multilevel labels when the label overflows the intended space. NOTE: This property is only for x-axis. -* [alignment](../api/heatmap/multiLevelLabels/#alignment) - It is used to place and align the multilevel labels. -* [maximumTextWidth](../api/heatmap/multiLevelCategoriesModel/#maximumtextwidth) - It is used to set the maximum width of the text. When the text length exceeds the maximum text width, the overflow action will be performed. -* [textStyle](../api/heatmap/multiLevelLabels/#textstyle) - It is used to customize the font style of the multilevel labels. -* [border](../api/heatmap/multiLevelLabels/#border) - It is used to customize the border of the multilevel labels displayed in the x-axis and y-axis. +* [overflow](../api/heatmap/multiLevelLabels#overflow) - It is used to trim or wrap the multilevel labels when the label overflows the intended space. NOTE: This property is only for x-axis. +* [alignment](../api/heatmap/multiLevelLabels#alignment) - It is used to place and align the multilevel labels. +* [maximumTextWidth](../api/heatmap/multiLevelCategoriesModel#maximumtextwidth) - It is used to set the maximum width of the text. When the text length exceeds the maximum text width, the overflow action will be performed. +* [textStyle](../api/heatmap/multiLevelLabels#textstyle) - It is used to customize the font style of the multilevel labels. +* [border](../api/heatmap/multiLevelLabels#border) - It is used to customize the border of the multilevel labels displayed in the x-axis and y-axis. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/heatmap-chart/images/heatmap.png b/ej2-javascript/heatmap-chart/images/heatmap.png new file mode 100644 index 0000000000000000000000000000000000000000..453d0d20ac7e1839747c10bacbd88543131440c1 GIT binary patch literal 38394 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® JS 2 for JavaScript (global script) framework provides a pure JavaScript implementation that runs in modern web browsers without dependencies. +Build your first Syncfusion JavaScript (ES5) application with a HeatMap in a few minutes. This quickstart guides you through creating a minimal HTML page, loading the required Syncfusion scripts from the CDN, supplying two-dimensional data, and rendering a color-coded data grid. -## HeatMap Component Initialization +## Prerequisites -Initialize the HeatMap component using either of the following approaches: +* [Visual Studio Code](https://code.visualstudio.com) or another text editor +* A modern web browser +* A local web server, such as the Visual Studio Code [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension -* **Local setup**: Reference scripts and styles hosted locally on your machine -* **CDN approach**: Reference scripts and styles from a Content Delivery Network (faster for most use cases) +> Register your Syncfusion license key before using the component. For more information, refer to the [license key registration documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). -### Using local script and style references in a HTML page +## Dependencies -**Step 1:** Create an app folder `quickstart` for Essential® JS 2 JavaScript controls. +The HeatMap component is available in the `@syncfusion/ej2-heatmap` package. The following dependencies are required: -**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. - -**Syntax:** -> Script: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` - -**Example:** - -> Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/16.2.45/Essential JS 2/ej2-heatmap/dist/global/ej2-heatmap.min.js` - -**Step 3:** Create a folder `quickstart/resources` and copy/paste the dependent scripts and styles from the above installed location to `quickstart/resources` location. - -**Step 4:** Create a HTML page (index.html) in `quickstart` location and add the Essential® JS 2 script and style references. - -```html - - - - Essential JS 2 - - - - - - - - +```text +|-- @syncfusion/ej2-heatmap + |-- @syncfusion/ej2-base + |-- @syncfusion/ej2-data + |-- @syncfusion/ej2-svg-base ``` -**Step 5:** Now, add the `div` element and initiate the **Essential® JS 2 HeatMap** component in the **index.html** by using following code +The HeatMap is a pure JavaScript component and does not require a third-party framework. -```html - - - - Essential JS 2 - - - - - - - -
      - - - -``` +## Quick Setup -**Step 6:** Now, run the **index.html** in web browser, it will render the **Essential® JS 2 HeatMap** component. +### Step 1: Create the Folder and Files -### Using CDN links for script and style reference +Create a folder named `quickstart` in your preferred directory. -**Step 1:** Create an app folder `quickstart` for the Essential® JS 2 JavaScript controls. +Inside the `quickstart` folder, create the following files: -**Step 2:** The Essential® JS 2 controls' global scripts are already hosted in the below CDN link formats. +* `index.html` +* `index.js` -**Common Control Script:** -> Syntax: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js` +### Step 2: Add Syncfusion® CDN Resources -**Example:** -> Script: [`https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js) +You can load the HeatMap component by using individual package scripts or the combined Syncfusion bundle. Choose only one of these approaches. -**or** +#### Individual Package Scripts -**Individual Control Scripts:** +Add the following script references to the `` section of `index.html`. Load the dependencies before the HeatMap component script. -**Syntax** ->`http://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` +```html + + + + +``` -**Example:** -> HeatMap Script: [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-heatmap/dist/global/ej2-heatmap.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-heatmap/dist/global/ej2-heatmap.min.js) -> ->Dependency Scripts -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js) +#### Combined Bundle -Create a HTML page (**index.html**) in **~/quickstart** location and add the CDN link references. Now, add the **div** element and initiate the **Essential® JS 2 HeatMap** component in the **index.html** by using following code. +Alternatively, load all Syncfusion JavaScript components from a single combined bundle: +```html + ``` - - - - Essential JS 2 - - - - - - - -
      - - - -``` - -> Please replace {RELEASE_VERSION} with the latest version number in the script file referred to in the sample. -**Step 3:** Now, run the **index.html** in web browser, it will render the **Essential® JS 2 HeatMap** component. +> Do not include the combined bundle together with the individual package scripts. -The following example demonstrates a basic HeatMap component initialized with default settings. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/es5-getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/es5-getting-started-cs1" %} +### Step 3: Add the Syncfusion® HeatMap Control -## Populate HeatMap with data +The `index.html` file contains the HeatMap container and references a separate `index.js` file that contains the component initialization. -The HeatMap requires a two-dimensional array where each element represents a data point with its corresponding value. Rows typically represent categories on the Y-axis, and columns represent categories on the X-axis. Values are color-encoded based on the palette settings. +The global scripts added in Step 2 register the `ej.heatmap.HeatMap` class in the `ej` namespace. Therefore, no module imports are required. {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/heatmap/getting-started-cs1/index.js %} +{% include code-snippet/heatmap/es5-getting-started-cs1/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs1/index.html %} +{% include code-snippet/heatmap/es5-getting-started-cs1/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs1" %} -## Enable axis labels +The `new ej.heatmap.HeatMap({...})` call creates the HeatMap component. The configuration object uses the following key property: -You can add axis labels to the HeatMap and format those labels using the [xAxis](../api/heatmap#xaxis) and [yAxis](../api/heatmap#yaxis) properties. Axis labels provide additional information about the data points populated in the HeatMap. +- [`dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/heatmap/index-default#datasource) — Specifies the data displayed in the HeatMap. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/heatmap/getting-started-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs2" %} +Finally, `heatmap.appendTo('#element')` renders the component inside the `
      ` element declared in `index.html`. -## Add HeatMap title +### Step 4: Open the Application in a Browser -Add a title using the [titleSettings](../api/heatmap#titlesettings) property to the HeatMap to provide quick information to the user about the data populated in the HeatMap. +Open `quickstart/index.html` through a local web server. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/heatmap/getting-started-cs3/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs3" %} - -## Enable legend - -Use a legend for the HeatMap in the [legendSettings](../api/heatmap#legendsettings) object by setting the [visible](../api/heatmap/legendSettings#visible) property to **true** and injecting the `Legend` module using the `HeatMap.Inject(Legend)` method. +If you are using the Visual Studio Code **Live Server** extension: -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/heatmap/getting-started-cs4/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs4" %} +1. Right-click `index.html` in the Explorer. +2. Select **Open with Live Server**. +3. Open the URL displayed by Live Server, such as `http://127.0.0.1:5500/`. -## Add data label +The browser displays the initialized HeatMap. -Add data labels to improve the readability of the HeatMap. This can be achieved by setting the [showLabel](../api/heatmap/cellSettings#showlabel) property to **true** in the [cellSettings](../api/heatmap#cellsettings) object. +## Output -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/heatmap/getting-started-cs5/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs5" %} +After completing the quick setup, the browser displays a HeatMap. -## Add custom cell palette - -The default palette settings of the HeatMap cells can be customized by using the [paletteSettings](../api/heatmap#palettesettings) property. -Using the [palette](../api/heatmap/paletteSettings#palette) property in `paletteSettings` object, you can change the color set for the cells. -You can change the color mode of the cells to fixed or gradient mode using the [type](../api/heatmap/paletteSettings#type) property. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/heatmap/getting-started-cs6/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs6/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs6" %} +{% previewsample "page.domainurl/code-snippet/heatmap/es5-getting-started-cs1" %} -## Enable tooltip +![Syncfusion HeatMap Quick Start Output](../images/heatmap.png) -The tooltip is used when you cannot display information by using the data labels due to space constraints. You can enable the tooltip by setting the [showTooltip](../api/heatmap#showtooltip) property to **true** and injecting the `Tooltip` module using the `HeatMap.Inject(Tooltip)` method. +## Troubleshooting -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/heatmap/getting-started-cs7/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs7/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs7" %} +- **The page is blank.** Open `index.html` through a local web server instead of opening the file directly from the file system. +- **`ej is not defined`.** Ensure that the Syncfusion CDN scripts are loaded before `index.js`. +- **`ej.heatmap` is undefined.** Verify that `ej2-heatmap.min.js` is loaded after `ej2-base.min.js`, `ej2-data.min.js`, and `ej2-svg-base.min.js`. +- **The HeatMap is empty.** Confirm that `dataSource` contains a valid two-dimensional numeric array and that the container ID matches `appendTo('#container')`. \ No newline at end of file diff --git a/ej2-javascript/heatmap-chart/ts/getting-started.md b/ej2-javascript/heatmap-chart/ts/getting-started.md index e1f7aedf8..c04e2f375 100644 --- a/ej2-javascript/heatmap-chart/ts/getting-started.md +++ b/ej2-javascript/heatmap-chart/ts/getting-started.md @@ -1,52 +1,74 @@ --- layout: post -title: Getting started with ##Platform_Name## HeatMap | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## HeatMap Chart Component of Syncfusion Essential JS 2 and more details. +title: Getting started with ##Platform_Name## HeatMap component | Syncfusion +description: Create and configure a Syncfusion JavaScript HeatMap in TypeScript using the Essential JS 2 webpack quickstart project. platform: ej2-javascript -control: Getting started +control: HeatMap publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## HeatMap Chart Component +# Getting Started with ##Platform_Name## HeatMap Component -This section explains how to create a HeatMap component in a TypeScript project using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. The repository comes pre-configured with necessary dependencies and is integrated with webpack for bundling and development workflows. +This document explains how to create a HeatMap and configure its features in TypeScript using the Essential JS 2 webpack [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. -> The application uses `webpack.config.js` and the latest [webpack-cli](https://webpack.js.org/api/cli#commands). Node.js v14.15.0 or higher is required. Refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/) for more information about webpack features and configuration. +> The quickstart project uses its included `webpack.config.js` file to compile and bundle the TypeScript application. For more information, refer to the [webpack getting-started guide](https://webpack.js.org/guides/getting-started/). ## Prerequisites -Before getting started, ensure the following requirements are met: +Before you begin, ensure that the following software is installed: -- TypeScript knowledge and basic understanding of npm/webpack -- Node.js v14.15.0 or higher installed -- npm or yarn package manager available +* Node.js with npm +* [Visual Studio Code](https://code.visualstudio.com) or another text editor +* [Git](https://git-scm.com/) for cloning the quickstart repository +* A modern web browser such as Chrome, Edge, Firefox, or Safari + +Basic familiarity with TypeScript, npm, and webpack is recommended. + +> Register your Syncfusion license key before initializing the component. For more information, refer to the [license key registration documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). ## Dependencies -The HeatMap component requires the following npm packages: +The HeatMap component is available in the `@syncfusion/ej2-heatmap` package. The following packages are its minimum dependencies: -```javascript +```text |-- @syncfusion/ej2-heatmap |-- @syncfusion/ej2-base |-- @syncfusion/ej2-data |-- @syncfusion/ej2-svg-base ``` -## Set up development environment +Compatible package versions are resolved from the project-root `package.json` file. Keep all Syncfusion package versions consistent to avoid dependency conflicts. + +## Quick Setup + +### Step 1: Create a Project Folder + +Create a folder named `my-heatmap` in your preferred location. This folder will contain the HeatMap TypeScript project. -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +### Step 2: Open a Terminal + +Open a terminal and navigate to the `my-heatmap` folder. + +* On Windows, use Command Prompt or PowerShell. +* On macOS or Linux, use Terminal. + +### Step 3: Clone the Quickstart Repository + +Run the following command to clone the Syncfusion JavaScript quickstart project: {% tabs %} {% highlight bash tabtitle="CMD" %} -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart {% endhighlight %} {% endtabs %} -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +### Step 4: Navigate to the Project Folder + +Navigate to the cloned project directory: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -56,11 +78,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion® JavaScript packages +### Step 5: Install the Required Packages -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. - -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Run the following command from the project root to install the dependencies listed in `package.json`: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -70,28 +90,31 @@ npm install {% endhighlight %} {% endtabs %} -## Add HeatMap to the project +### Step 6: Update the HTML Template + +Open the `ej2-quickstart` folder in Visual Studio Code or another text editor. -Add an HTML container element to your `index.html` file. +Locate `src/index.html`. Preserve the existing content generated by the seed project and add a `
      ` element with the ID `element` inside the `` element. {% tabs %} -{% highlight html tabtitle="index.html" %} +{% highlight html tabtitle="src/index.html" %} - EJ2 HeatMap - - - - + Essential JS 2 HeatMap + + + + + - -
      -
      +

      Syncfusion HeatMap

      + +
      @@ -99,168 +122,74 @@ Add an HTML container element to your `index.html` file. {% endhighlight %} {% endtabs %} -Import the HeatMap component into your `app.ts` file and initialize it with the container element. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { HeatMap } from '@syncfusion/ej2-heatmap'; +The webpack configuration supplied by the quickstart project compiles the TypeScript entry file and loads the generated bundle in this page. -// initialize HeatMap component -let heatmap: HeatMap = new HeatMap(); +### Step 7: Create the HeatMap Component -// render initialized HeatMap -heatmap.appendTo('#element'); - -{% endhighlight %} -{% endtabs %} - -Use the `npm start` command to run the application in the browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm start - -{% endhighlight %} -{% endtabs %} - -The below example shows a basic HeatMap. +Locate `src/app/app.ts` and add the following code: {% tabs %} {% highlight ts tabtitle="index.ts" %} -{% include code-snippet/heatmap/getting-started-cs8/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs8/index.html %} +{% include code-snippet/heatmap/getting-started-cs1/index.ts %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs8" %} - -## Module Injection -The HeatMap component is structured with modular features. To use optional features like Legend and Tooltip, inject the corresponding module using the `HeatMap.Inject()` method. This ensures only necessary modules are bundled, reducing application size. +The `HeatMap` constructor creates the component. The [`dataSource`](https://ej2.syncfusion.com/documentation/api/heatmap/index-default#datasource) property supplies the values displayed in its cells. -The following modules are available: - -* Legend - Provides the legend feature by injecting it. -* Tooltip - Provides the tooltip feature by injecting it. - -Now, import the above-mentioned modules from the heat map package and inject them into the heat map control using the `HeatMap.Inject()` method. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import {Legend, Tooltip} from '@syncfusion/ej2-heatmap'; -HeatMap.Inject(Legend, Tooltip); - -{% endhighlight %} -{% endtabs %} +The `appendTo('#element')` call renders the component in the HTML element whose ID matches the supplied selector. -## Populate HeatMap with data +### Step 8: Run the Application -The HeatMap requires a two-dimensional array where each element represents a data point with its corresponding value. Rows typically represent categories on the Y-axis, and columns represent categories on the X-axis. Values are color-encoded based on the palette settings. +Run the following command from the project root: {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/heatmap/getting-started-cs9/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs9/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs9" %} - -## Enable axis labels +{% highlight bash tabtitle="NPM" %} -You can add axis labels to the heat map and format those labels using the [xAxis](../api/heatmap#xaxis) and [yAxis](../api/heatmap#yaxis) properties. Axis labels provide additional information about the data points populated in the heat map. +npm run start -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/heatmap/getting-started-cs10/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs10/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs10" %} -## Add HeatMap title +Wait for webpack to finish compiling the application. If the browser does not open automatically, open the local URL displayed in the terminal. -Display a title for the HeatMap using the [titleSettings](../api/heatmap#titlesettings) property to describe the data being visualized. +The project commonly runs at: -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/heatmap/getting-started-cs11/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs11/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs11" %} +```text +http://localhost:4000/ +``` -## Enable legend +The exact port can vary based on the webpack development-server configuration. To stop the development server, press `Ctrl+C` in the terminal. -Display a legend for the HeatMap by setting the [visible](../api/heatmap/legendSettings#visible) property to **true** in the [legendSettings](../api/heatmap#legendsettings) object and injecting the `Legend` module using `HeatMap.Inject(Legend)`. +## Output -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/heatmap/getting-started-cs12/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs12/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs12" %} +After completing the quick setup, the browser displays HeatMap. -## Add data labels +{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs1" %} -Add data labels to improve the readability of the heat map. This can be achieved by setting the [showLabel](../api/heatmap/cellSettings#showlabel) property to **true** in the [cellSettings](../api/heatmap#cellsettings) object. +## Module Injection -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/heatmap/getting-started-cs13/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs13/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs13" %} +Basic HeatMap rendering does not require feature-module injection. Inject optional modules only when the corresponding features are used: -## Add custom cell palette +* `Legend` enables the HeatMap legend. +* `Tooltip` enables cell tooltips. -The default palette settings of the heat map cells can be customized by using the [paletteSettings](../api/heatmap#palettesettings) property. -Using the [palette](../api/heatmap/paletteSettings#palette) property in `paletteSettings` object, you can change the color set for the cells. -You can change the color mode of the cells to fixed or gradient mode using the [type](../api/heatmap/paletteSettings#type) property. +Import `HeatMap` with the required modules and call `HeatMap.Inject()` before creating the component: -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/heatmap/getting-started-cs14/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs14/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs14" %} +```typescript +import { + HeatMap, + Legend, + Tooltip +} from '@syncfusion/ej2-heatmap'; -## Enable tooltip +HeatMap.Inject(Legend, Tooltip); +``` -The tooltip is used when you cannot display information by using the data labels due to space constraints. You can enable the tooltip by setting the [showTooltip](../api/heatmap#showtooltip) property to `true` and injecting the `Tooltip` module using the `HeatMap.Inject(Tooltip)` method. +## Troubleshooting -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/heatmap/getting-started-cs15/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/heatmap/getting-started-cs15/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/heatmap/getting-started-cs15" %} \ No newline at end of file +* **The repository cannot be cloned.** Verify that Git is installed, confirm the internet connection, and run `git --version`. +* **`npm install` fails.** Verify that Node.js and npm are installed by running `node --version` and `npm --version`. +* **`Cannot find module '@syncfusion/ej2-heatmap'`.** Run `npm install @syncfusion/ej2-heatmap --save` from the project root. +* **The TypeScript application does not compile.** Ensure that all Syncfusion packages use compatible versions and run `npm run build` to view the complete error. +* **The page is blank.** Check the browser console for errors and confirm that webpack completed the build successfully. +* **The HeatMap is empty.** Confirm that `dataSource` contains a valid two-dimensional numeric array and that the container ID matches `appendTo('#element')`. \ No newline at end of file diff --git a/ej2-javascript/linear-gauge/images/linear-gauge-TS.png b/ej2-javascript/linear-gauge/images/linear-gauge-TS.png new file mode 100644 index 0000000000000000000000000000000000000000..d371044acd16efa727bc28e450e61522e3a8fb53 GIT binary patch literal 4349 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 ycsw34-U0® JS 2 JavaScript controls can be initialized by using either of the following approaches: +* [Visual Studio Code](https://code.visualstudio.com) or another text editor +* A modern web browser +* A local web server, such as the Visual Studio Code [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension -* Using local script references in an HTML page. -* Using a CDN link for script reference. +> Register your Syncfusion license key before using the component. For more information, refer to the [license key registration documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). -### Using local script references in an HTML page +## Dependencies -**Step 1:** Create an app folder named **quickstart** for your project. +The Linear Gauge component is available in the `@syncfusion/ej2-lineargauge` package. The following dependencies are required: -**Step 2:** Obtain the global scripts from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. - -**Syntax:** -> Dependency Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js` -> -> Control Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js` - -**Example:** -> Dependency Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\32.1.19\Web (Essential JS 2)\JavaScript\ej2-base\dist\global\ej2-base.min.js` -> -> Control Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\32.1.19\Web (Essential JS 2)\JavaScript\ej2-lineargauge\dist\global\ej2-lineargauge.min.js` - -Alternatively, you can reference the comprehensive script file that contains all Syncfusion® JavaScript (ES5) UI control resources in a single file: - -> Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` - -For optimized bundles containing only your required controls, use the [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/), an online web tool that generates custom scripts for specific Syncfusion controls. - -**Step 3:** Create a folder **~/quickstart/resources** and copy the global scripts from the installed location into **~/quickstart/resources/package** directories that match their corresponding package names. - -**Step 4:** Create an HTML page (**index.html**) in **~/quickstart/index.html** and add the Essential® JS 2 script references. - -```html - - - - Essential JS 2 - - - - - - - - - +```text +|-- @syncfusion/ej2-lineargauge + |-- @syncfusion/ej2-base + |-- @syncfusion/ej2-svg-base + |-- @syncfusion/ej2-pdf-export ``` -**Step 5:** Initialize the **Syncfusion® JavaScript (ES5) LinearGauge** component in the **~/quickstart/index.html** file using the following code. +> `@syncfusion/ej2-pdf-export` is required only when using PDF export features. -```html - - - - Essential JS 2 - - - - - - - - -
      Linear Gauge
      - - - -``` +## Quick Setup -**Step 6:** Run the **index.html** file in a web browser. The page will render the **Syncfusion® JavaScript Linear Gauge** control. +### Step 1: Create the Folder and Files -### Using CDN link for script reference +Create a folder named `quickstart` in your preferred directory. -**Step 1:** Create an app folder named **quickstart** for your project. +Inside the `quickstart` folder, create the following files: -**Step 2:** The Essential® JS 2 controls' global scripts are already hosted in the CDN. You can reference them using either a common bundled script or individual control scripts. +* `index.html` +* `index.js` -**Common Control Script:** -> Syntax: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js` +### Step 2: Add Syncfusion® CDN Resources -**Example:** -> Script: [`https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js) +You can load the Linear Gauge component by using individual package scripts or the combined Syncfusion bundle. Choose only one of these approaches. -**or** +#### Individual Package Scripts -**Individual Control Scripts:** +Add the following script references to the `` section of `index.html`. Load the dependencies before the Linear Gauge component script. -**Syntax** ->`http://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` - -**Example:** -> Linear Gauge Script: [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-lineargauge/dist/global/ej2-lineargauge.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-lineargauge/dist/global/ej2-lineargauge.min.js) -> ->Dependency Scripts -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-pdf-export/dist/global/ej2-pdf-export.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-pdf-export/dist/global/ej2-pdf-export.min.js) +```html + + + +``` +#### Combined Bundle -Create an HTML page (**index.html**) in the **~/quickstart** location and add the CDN link references. Then, initialize the **Syncfusion® JavaScript (ES5) Linear Gauge** control in the **index.html** file using the following code. +Alternatively, load all Syncfusion JavaScript components from a single combined bundle: ```html - - - - Essential JS 2 - - - - - - - -
      Linear Gauge
      - - - + ``` -> Replace {RELEASE_VERSION} with the latest version number in the script file references. +> Do not include the combined bundle together with the individual package scripts. -**Step 3:** Open the **index.html** file in a web browser. The page will render the **Syncfusion® JavaScript Linear Gauge** control. +### Step 3: Add the Syncfusion® Linear Gauge Control to the Application -The following example demonstrates a basic Linear Gauge Component. +The `index.html` file contains the Linear Gauge container and references a separate `index.js` file that contains the component initialization. + +The global scripts added in Step 2 register the `ej.lineargauge.LinearGauge` class in the `ej` namespace. Therefore, no module imports are required. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -159,63 +82,32 @@ The following example demonstrates a basic Linear Gauge Component. {% include code-snippet/linear-gauge/es5-getting-started-cs1/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/es5-getting-started-cs1" %} -## Adding the Linear Gauge Title +The `new ej.lineargauge.LinearGauge({...})` call creates the Linear Gauge component and the `lineargauge.appendTo('#element')` renders the component inside the `
      ` element declared in `index.html`. -Add a title to the Linear Gauge component using the [`title`](../api/linear-gauge/linearGaugeModel#title) property. +### Step 4: Open the Application in a Browser -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/linear-gauge/es5-getting-started-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/es5-getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/es5-getting-started-cs2" %} +Open `quickstart/index.html` through a local web server. -## Setting the start and end of the axis line +If you are using the Visual Studio Code **Live Server** extension: -Define the range of the axis using the [`minimum`](../api/linear-gauge/axis#minimum) and [`maximum`](../api/linear-gauge/axis#maximum) properties. +1. Right-click `index.html` in the Explorer. +2. Select **Open with Live Server**. +3. Open the URL displayed by Live Server, such as `http://127.0.0.1:5500/`. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/linear-gauge/es5-getting-started-cs3/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/es5-getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/es5-getting-started-cs3" %} +The browser displays the initialized Linear Gauge. -To add units like °C to axis labels, set the [`format`](../api/linear-gauge/labelModel#format) property in the [`labelStyle`](../api/linear-gauge/axis#labelstyle) object of the axis to **{value}°C**. The **{value}** placeholder is replaced with each axis label. To customize the pointer position, set the [`value`](../api/linear-gauge/pointer#value) property in the [`pointers`](../api/linear-gauge/pointerModel) array of the axis. +## Output -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/linear-gauge/es5-getting-started-cs4/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/es5-getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/es5-getting-started-cs4" %} +After completing the quick setup, the browser displays a Linear Gauge. -## Setting the value of the pointer +{% previewsample "page.domainurl/code-snippet/linear-gauge/es5-getting-started-cs1" %} -Modify the pointer value using the [`value`](../api/linear-gauge/pointer#value) property in the [`pointers`](../api/linear-gauge/pointer) array of the axis. +![Syncfusion Linear Gauge Quick Start Output](../images/linear-gauge.png) -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/linear-gauge/es5-getting-started-cs5/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/es5-getting-started-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/es5-getting-started-cs5" %} +## Troubleshooting + +- **The page is blank.** Open `index.html` through a local web server instead of opening the file directly from the file system. +- **`ej is not defined`.** Ensure that the Syncfusion CDN scripts are loaded before `index.js`. +- **`ej.lineargauge` is undefined.** Verify that `ej2-lineargauge.min.js` is loaded after `ej2-base.min.js` and `ej2-svg-base.min.js`. +- **The Linear Gauge is not displayed.** Ensure that the container ID in `index.html` matches the selector passed to `appendTo('#element')`. \ No newline at end of file diff --git a/ej2-javascript/linear-gauge/title.md b/ej2-javascript/linear-gauge/title.md new file mode 100644 index 000000000..1a930cc09 --- /dev/null +++ b/ej2-javascript/linear-gauge/title.md @@ -0,0 +1,74 @@ +--- +layout: post +title: Title in ##Platform_Name## Linear gauge control | Syncfusion +description: Learn here all about Title in Syncfusion ##Platform_Name## Linear gauge control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: Title +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Title in ##Platform_Name## Linear Gauge Control + +## Adding the Linear Gauge Title + +Add a title to the Linear Gauge component using the [`title`](../api/linear-gauge/linearGaugeModel#title) property. + + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight js tabtitle="index.ts" %} +{% include code-snippet/linear-gauge/es5-getting-started-cs2/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/linear-gauge/es5-getting-started-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/linear-gauge/es5-getting-started-cs2" %} + +{% elsif page.publishingplatform == "javascript" %} + + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/linear-gauge/es5-getting-started-cs2/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/linear-gauge/es5-getting-started-cs2/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/linear-gauge/es5-getting-started-cs2" %} + +{% endif %} + + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/linear-gauge/annotations-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/linear-gauge/annotations-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/linear-gauge/annotations-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/linear-gauge/annotations-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/linear-gauge/annotations-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/linear-gauge/annotations-cs1" %} +{% endif %} diff --git a/ej2-javascript/linear-gauge/ts/getting-started.md b/ej2-javascript/linear-gauge/ts/getting-started.md index 54f84230e..9177b0d85 100644 --- a/ej2-javascript/linear-gauge/ts/getting-started.md +++ b/ej2-javascript/linear-gauge/ts/getting-started.md @@ -1,44 +1,72 @@ --- layout: post -title: Getting started with ##Platform_Name## Linear Gauge | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Linear Gauge Component of Syncfusion Essential JS 2 and more details. +title: Getting started with ##Platform_Name## Linear Gauge control | Syncfusion +description: Create and configure a Syncfusion JavaScript Linear Gauge in TypeScript using the Essential JS 2 webpack quickstart project. platform: ej2-javascript -control: Getting started +control: Linear Gauge publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## Linear Gauge Component +# Getting Started with ##Platform_Name## Linear Gauge Control -This section walks you through creating a **Linear Gauge** component and configuring its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. By the end of this guide, you will have a fully functional Linear Gauge integrated into a webpack-based TypeScript project. +This document explains how to create a Linear Gauge and configure its features in TypeScript using the Essential JS 2 webpack [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. -> This application uses the `webpack.config.js` configuration and the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node.js `v14.15.0` or higher. For more information about webpack and its features, see the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> The quickstart project uses the provided `webpack.config.js` configuration to compile and bundle the TypeScript application. For more information about webpack, refer to the [webpack getting-started guide](https://webpack.js.org/guides/getting-started/). + +## Prerequisites + +Before you begin, ensure that the following software is installed: + +* Node.js with npm +* [Visual Studio Code](https://code.visualstudio.com) or another text editor +* [Git](https://git-scm.com/) for cloning the quickstart repository +* A modern web browser such as Chrome, Edge, Firefox, or Safari + +> Register your Syncfusion license key before initializing the component. For more information, refer to the [license key registration documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). ## Dependencies -The following lists the minimum dependencies required to use the Linear Gauge: +The Linear Gauge component is available in the `@syncfusion/ej2-lineargauge` package. The following packages are its minimum dependencies: -```javascript +```text |-- @syncfusion/ej2-lineargauge |-- @syncfusion/ej2-base |-- @syncfusion/ej2-pdf-export |-- @syncfusion/ej2-svg-base ``` -## Set up development environment +Compatible package versions are resolved from the project-root `package.json` file. Keep all Syncfusion package versions consistent to avoid dependency conflicts. + +## Quick Setup + +### Step 1: Create a Project Folder + +Create a folder named `my-linear-gauge` in your preferred location. This folder will contain the Linear Gauge TypeScript project. + +### Step 2: Open a Terminal -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open a terminal and navigate to the `my-linear-gauge` folder. + +* On Windows, use Command Prompt or PowerShell. +* On macOS or Linux, use Terminal. + +### Step 3: Clone the Quickstart Repository + +Run the following command to clone the Syncfusion JavaScript quickstart project: {% tabs %} {% highlight bash tabtitle="CMD" %} -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart {% endhighlight %} {% endtabs %} -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +### Step 4: Navigate to the Project Folder + +Navigate to the cloned project directory: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -48,11 +76,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion® JavaScript packages +### Step 5: Install the Required Packages -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. - -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Run the following command from the project root to install the dependencies listed in `package.json`: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -62,30 +88,31 @@ npm install {% endhighlight %} {% endtabs %} -## Adding Linear Gauge component to the project +### Step 6: Update the HTML Template -The Essential® JS2 Linear Gauge component can be added to the application. To get started, add the Linear Gauge component to the **app.ts** and **index.html** files using the following code. +Open the `ej2-quickstart` folder in Visual Studio Code or another text editor. -Add an HTML div element to act as the Linear Gauge element in the **index.html** file using the following code. +Locate the `src/index.html` file. Preserve the existing content generated by the seed project and add a `
      ` element with the ID `container` inside the `` element. {% tabs %} -{% highlight html tabtitle="index.html" %} +{% highlight html tabtitle="src/index.html" %} - EJ2 Linear gauge - - - - + Essential JS 2 Linear Gauge + + + + + - -
      -
      +

      Syncfusion Linear Gauge

      + +
      @@ -93,121 +120,93 @@ Add an HTML div element to act as the Linear Gauge element in the **index.html** {% endhighlight %} {% endtabs %} -Import the LinearGauge component in the **app.ts** file to initialize the Linear Gauge and append the Linear Gauge instance to the `#container`. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { LinearGauge } from '@syncfusion/ej2-lineargauge'; +The webpack configuration supplied by the quickstart project compiles the TypeScript entry file and loads the generated bundle in this page. -// initialize linear gauge component -let gauge: LinearGauge = new LinearGauge(); +### Step 7: Create the Linear Gauge Component -// render initialized linear gauge -gauge.appendTo('#container'); +Locate the `src/app/app.ts` file and add the following code: +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/linear-gauge/getting-started-cs2/index.ts %} {% endhighlight %} {% endtabs %} -## Run the application +The `LinearGauge` constructor creates the component and the `appendTo('#element')` call renders the component in the HTML element whose ID matches the supplied selector. + +### Step 8: Run the Application -The quickstart project is configured to compile and run the application in the browser. +Run the following command from the project root: {% tabs %} {% highlight bash tabtitle="NPM" %} -npm start +npm run start {% endhighlight %} {% endtabs %} -The following example demonstrates a basic Linear Gauge component. +Wait for webpack to finish compiling the application. If the browser does not open automatically, open the local URL displayed in the terminal. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/linear-gauge/getting-started-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs2" %} - -## Module Injection +The project commonly runs at: -The Linear Gauge component uses modular architecture to optimize bundle size. Features are provided as individual modules that must be explicitly injected to enable them. This approach allows you to include only the features your application requires. +```text +http://localhost:4000/ +``` -**Available Feature Modules:** +The exact port can vary based on the webpack development-server configuration. To stop the development server, press `Ctrl+C` in the terminal. - * Annotation - Inject this module to use the annotation features. - * GaugeTooltip - Inject this module to use the tooltip features. +## Output -Import the required feature modules from the Linear Gauge package and inject them using **LinearGauge.Inject()**. +After completing the quick setup, the browser displays a Linear Gauge with its default axis. The additional examples demonstrate how to add a title, define the axis range, format axis labels, enable optional modules, and set the pointer value. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs2" %} -import { GaugeTooltip, Annotations } from '@syncfusion/ej2-lineargauge'; -LinearGauge.Inject(Annotations, GaugeTooltip); +![Syncfusion Linear Gauge Quick Start Output](../images/linear-gauge-TS.png) -{% endhighlight %} -{% endtabs %} +## Module Injection -## Adding the Linear Gauge Title +Basic Linear Gauge rendering does not require feature-module injection. Inject a module only when its corresponding optional feature is used. -Add a title to the Linear Gauge component using the [`title`](../api/linear-gauge/linearGaugeModel#title) property. +The following optional feature modules are available: -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/linear-gauge/getting-started-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs3" %} +* [`Annotations`](https://ej2.syncfusion.com/documentation/api/linear-gauge/annotationmodel) enables annotation content in the Linear Gauge. +* [`GaugeTooltip`](https://ej2.syncfusion.com/documentation/api/linear-gauge/tooltipsettingsmodel) enables tooltips for gauge elements. -## Axis Range +Import `LinearGauge` with the required modules and call `LinearGauge.Inject()` before creating the component: -Configure the axis range using the [`minimum`](../api/linear-gauge/axis#minimum) and [`maximum`](../api/linear-gauge/axis#maximum) properties to define the scale of your Linear Gauge. +```typescript +import { + Annotations, + GaugeTooltip, + LinearGauge +} from '@syncfusion/ej2-lineargauge'; -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/linear-gauge/getting-started-cs4/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs4" %} +LinearGauge.Inject(Annotations, GaugeTooltip); -To add units like °C to axis labels, set the [`format`](../api/linear-gauge/labelModel#format) property in the [`labelStyle`](../api/linear-gauge/axis#labelstyle) object of the axis to **{value}°C**. The **{value}** placeholder is replaced with each axis label. To customize the pointer position, set the [`value`](../api/linear-gauge/pointer#value) property in the [`pointers`](../api/linear-gauge/pointerModel) array of the axis. +const gauge: LinearGauge = new LinearGauge({ + tooltip: { + enable: true + }, + axes: [{ + annotations: [{ + content: '
      Temperature
      ', + x: 0, + y: 0 + }] + }] +}); -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/linear-gauge/getting-started-cs5/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/getting-started-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs5" %} +gauge.appendTo('#container'); +``` -## Setting the value of the pointer +Only inject [`Annotations`](https://ej2.syncfusion.com/documentation/api/linear-gauge/annotationmodel) or [`GaugeTooltip`](https://ej2.syncfusion.com/documentation/api/linear-gauge/tooltipsettingsmodel) when the application configures the corresponding annotation or tooltip feature. -Modify the pointer value using the [`value`](../api/linear-gauge/pointer#value) property in the [`pointers`](../api/linear-gauge/pointer) array of the axis. +## Troubleshooting -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/linear-gauge/getting-started-cs6/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/linear-gauge/getting-started-cs6/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/linear-gauge/getting-started-cs6" %} +* **The repository cannot be cloned.** Verify that Git is installed, confirm the internet connection, and run `git --version`. +* **`npm install` fails.** Verify that Node.js and npm are installed by running `node --version` and `npm --version`. +* **`Cannot find module '@syncfusion/ej2-lineargauge'`.** Run `npm install @syncfusion/ej2-lineargauge --save` from the project root. +* **The TypeScript application does not compile.** Ensure that all Syncfusion packages use compatible versions and run `npm run build` to view the complete error. +* **The page is blank.** Check the browser console for errors and confirm that webpack completed the build successfully. +* **The Linear Gauge is not displayed.** Ensure that the HTML container ID is `container` and that `appendTo('#container')` uses the same ID. diff --git a/ej2-javascript/maps/js/es5-getting-started.md b/ej2-javascript/maps/js/es5-getting-started.md index 6aa0605dc..899f70127 100644 --- a/ej2-javascript/maps/js/es5-getting-started.md +++ b/ej2-javascript/maps/js/es5-getting-started.md @@ -1,9 +1,9 @@ --- layout: post -title: Es5 getting started with ##Platform_Name## Maps component | Syncfusion -description: Checkout and learn about Es5 getting started with ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more details. +title: ES5 getting started with ##Platform_Name## Maps component | Syncfusion +description: Check out and learn about getting started with ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Es5 getting started +control: ES5 getting started publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -18,7 +18,7 @@ Build your first Syncfusion JavaScript (ES5) application with a simple Maps cont ## Prerequisites * [Visual Studio Code](https://code.visualstudio.com) (or any text editor) -* A web browser to view the result +* A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result ## Quick Setup @@ -49,19 +49,19 @@ Copy and paste the following complete code into your `index.html` file: Syncfusion Maps - Quick Start - - + + - +

      Syncfusion Maps

      - + @@ -83,10 +83,16 @@ Copy and paste the following complete code into your `index.html` file: ### Step 4: Open in Browser -Open the `quickstart/index.html` file in your web browser. You should see the Syncfusion Maps control displaying the sample map data. +Open `quickstart/index.html` through a local web server (for example, right-click the file in VS Code with the Live Server extension installed and choose **Open with Live Server**). The page should display the Syncfusion Maps control rendered with the sample world map. ## Output The following screenshot shows the output of the Syncfusion Maps quick start application: -![Syncfusion Maps Quick Start Output](../maps/images/MapProviders/maps.png) +![Syncfusion Maps Quick Start Output](../images/MapProviders/maps.png) + +## Next Steps + +* Explore the [Maps API reference](https://ej2.syncfusion.com/javascript/documentation/api/maps) to learn about the available properties, events, and methods. +* Add additional [layers](https://ej2.syncfusion.com/javascript/documentation/maps/layers), [markers](https://ej2.syncfusion.com/javascript/documentation/maps/markers), and [legends](https://ej2.syncfusion.com/javascript/documentation/maps/legend) to enrich the map. +* Browse the [Maps samples](https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/maps/default) for runnable examples. diff --git a/ej2-javascript/maps/ts/getting-started.md b/ej2-javascript/maps/ts/getting-started.md index c16cb6c69..cece4d32f 100644 --- a/ej2-javascript/maps/ts/getting-started.md +++ b/ej2-javascript/maps/ts/getting-started.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting started with ##Platform_Name## Maps component | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more details. +title: Getting Started with ##Platform_Name## Maps Component | Syncfusion +description: Check out and learn about getting started with the ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Getting started +control: Getting started publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## Maps component +# Getting Started with the ##Platform_Name## Maps Component This section explains how to create a Maps component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. @@ -26,7 +26,7 @@ Before you begin, ensure you have the following installed on your machine: * [Node.js](https://nodejs.org/en) (v14.15.0 or higher) * [Visual Studio Code](https://code.visualstudio.com) (or any text editor) * [Git](https://git-scm.com/) (for cloning the quickstart repository) -* A web browser to view the result +* A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result * Basic knowledge of TypeScript and webpack ## Dependencies @@ -53,12 +53,12 @@ Create a folder named `my-maps` in your desired location. This folder will conta Open the command prompt and navigate to your desired directory where you want to create the project. You can do this by: -* **For Windows**: Open Command Prompt (cmd) or PowerShell -* **For macOS/Linux**: Open Terminal +* **Windows**: Command Prompt (cmd) or PowerShell +* **macOS / Linux**: Terminal ### Step 3: Clone the Quickstart Repository -Run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). The repository will be cloned into a sub-folder named `ej2-quickstart`. {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -68,7 +68,7 @@ git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quick {% endhighlight %} {% endtabs %} -### Step 4: Navigate to Project Folder +### Step 4: Navigate to the Project Folder After cloning the application in the `ej2-quickstart` folder, run the following command to navigate to the project directory. @@ -94,11 +94,11 @@ npm install {% endhighlight %} {% endtabs %} -This command will download and install all necessary dependencies for your project. +This downloads and installs every package the project needs. ### Step 6: Update the HTML Template -Open the `ej2-quickstart` folder in Visual Studio Code or any text editor of your choice. +Open the `ej2-quickstart` folder in Visual Studio Code and edit `src/index.html`. Replace its `` with the snippet below, which adds a `
      ` that the Maps control will render into. The container has an explicit width and height so the map is visible. > Note: Code snippets here use webpack for local development. For online demos or StackBlitz, SystemJS may be used—ignore loader/helper scripts in rendered previews. @@ -109,20 +109,17 @@ Locate the `~/src/index.html` file in the project. Add the HTML div tag with its - EJ2 Maps - + -

      Syncfusion Maps

      - -
      -
      + +
      @@ -149,7 +146,7 @@ const shapeData: object = { } }; -// Initialize and render Maps +// Create the Maps control with one layer const map: Maps = new Maps({ layers: [ { @@ -158,7 +155,7 @@ const map: Maps = new Maps({ ] }); -// Append Maps to container +// Render the map into the
      with id="container" map.appendTo('#container'); {% endhighlight %} @@ -166,7 +163,7 @@ map.appendTo('#container'); ### Step 8: Run the Application -Open the integrated terminal in Visual Studio Code or use your command prompt to run the application. Use the `npm start` command: +Open the integrated terminal in Visual Studio Code and run: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -186,4 +183,26 @@ Wait for the webpack dev server to complete the build process. Once completed, y The following screenshot shows the output of the Syncfusion Maps quick start application: -![Syncfusion Maps Quick Start Output](../maps/images/MapProviders/maps.png) \ No newline at end of file +![Syncfusion Maps Quick Start Output](../images/MapProviders/maps.png) + +## Troubleshooting + +If the Maps control does not render as expected, review the most common issues below and apply the suggested fix for each. + +* **Browser console shows `Maps is not a constructor` (or `ej.maps is undefined`).** + *Possible cause:* the `@syncfusion/ej2-maps` package was not installed, or two different versions are present. + *Suggested fix:* run `npm install @syncfusion/ej2-maps` and ensure a single `@syncfusion/ej2*` version is used in `package-lock.json`. + +* **Map shapes are missing or only borders appear.** + *Possible cause:* the GeoJSON URL returned an error, or the `shapeData` path is wrong. + *Suggested fix:* open the `shapeData` URL directly in the browser to confirm it returns valid GeoJSON. + +* **`git clone` fails with `Repository not found`.** + *Possible cause:* the URL is outdated or the repository was renamed. + *Suggested fix:* confirm the URL at [github.com/SyncfusionExamples/ej2-quickstart-webpack](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). + +## Next Steps + +* Explore the [Maps API reference](https://ej2.syncfusion.com/javascript/documentation/api/maps) for available properties, events, and methods. +* Add additional [layers](https://ej2.syncfusion.com/javascript/documentation/maps/layers), [markers](https://ej2.syncfusion.com/javascript/documentation/maps/markers), and [legends](https://ej2.syncfusion.com/javascript/documentation/maps/legend). +* Browse the [Maps samples](https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/maps/default) for runnable examples. \ No newline at end of file diff --git a/ej2-javascript/progressbar/images/progressbar-TS.png b/ej2-javascript/progressbar/images/progressbar-TS.png new file mode 100644 index 0000000000000000000000000000000000000000..7261b60f6fb3f056c64c20bab217f8f9df9e7222 GIT binary patch literal 921 zcmeAS@N?(olHy`uVBq!ia0y~yV9x`xeL2{GWL|{J10cm%9OUlAuRz>v_63hE&A8y}hxJDNuyPk&m1C`ymCM zLka>-3U-Gof81{j@|5byD-NDv;K&=e4Gc(#KN!eaQN|4FVdQ&MBb@0GuP98~^|S literal 0 HcmV?d00001 diff --git a/ej2-javascript/progressbar/images/progressbar.png b/ej2-javascript/progressbar/images/progressbar.png new file mode 100644 index 0000000000000000000000000000000000000000..627a72869bd4eff60d7b9829fac95f57b7e695cc GIT binary patch literal 1196 zcmeAS@N?(olHy`uVBq!ia0y~yV9x@w(>d6HeHH=|kQ{KppfLi9@U6Q+v&(vmva*n5~pUXO@geCx4V7=%7 literal 0 HcmV?d00001 diff --git a/ej2-javascript/progressbar/js/es5-getting-started.md b/ej2-javascript/progressbar/js/es5-getting-started.md index 46076881a..f777e2593 100644 --- a/ej2-javascript/progressbar/js/es5-getting-started.md +++ b/ej2-javascript/progressbar/js/es5-getting-started.md @@ -1,21 +1,27 @@ --- layout: post -title: Getting started with ##Platform_Name## ProgressBar | Syncfusion -description: Check out and learn about ES5 getting started with ##Platform_Name## ProgressBar control of Syncfusion Essential JS 2 and more details. +title: ES5 getting started with ##Platform_Name## ProgressBar | Syncfusion +description: Check out and learn about ES5 getting started with ##Platform_Name## ProgressBar control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: ProgressBar +control: ProgressBar publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## ProgressBar control +# Getting Started with Syncfusion® JavaScript (ES5) ProgressBar Control -This section explains the steps required to create a simple ProgressBar and demonstrate the basic usage of the ProgressBar control. +Build your first Syncfusion JavaScript (ES5) application with a simple ProgressBar in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) ProgressBar control from the CDN, initializes it with a value, and renders an interactive progress indicator. + +## Prerequisites + +* [Visual Studio Code](https://code.visualstudio.com) (or any text editor) +* A web browser to view the result +* A local web server such as the VS Code [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension ## Dependencies -The following list of dependencies are required to use the ProgressBar control in your application: +The ProgressBar control ships as part of the `@syncfusion/ej2-progressbar` package. Below is the list of minimum dependencies required. ``` |-- @syncfusion/ej2-progressbar @@ -24,130 +30,90 @@ The following list of dependencies are required to use the ProgressBar control i |-- @syncfusion/ej2-svg-base ``` -## Set up for local environment - -Refer to the following steps to set up your local environment. - -**Step 1:** Create a root folder **myapp** for your application. - -**Step 2:** Create **myapp/resources** folder to store local scripts and styles files. - -**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential® JS 2 ProgressBar control. - -## Adding Syncfusion® resources - -The Essential® JS 2 Progress Bar control can be initialized by using either of the following ways. +## Quick Setup -* Using local script. -* Using CDN link for script. +### Step 1: Create Folder and HTML file -### Using local script +* Create a folder named `quickstart` in your desired directory. +* Inside the `quickstart` folder, create two new files: `index.html` and `index.js`. -You can get the global scripts and styles from the installed location of [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2). +### Step 2: Add Syncfusion® CDN Resources -After installing the product, copy the ProgressBar and its dependency scripts and style files into the **resources/scripts** and **resources/styles** folders. +Include the following JavaScript links in the `` section. -Refer to the following paths to locate the ProgressBar script and style files. - -**Syntax:** - -> Dependency script: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{DEPENDENCY_PACKAGE_NAME}.min.js` -> -> Script: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> - -**Example:** - -> Dependency script: `C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-svg-base/dist/global/ej2-svg-base.min.js` -> -> Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-progressbar/dist/global/ej2-progressbar.min.js` -> - -After copying the files, reference the ProgressBar scripts in the `index.html` file. The HTML below shows a minimal setup using the bundled script: +**Scripts (JavaScript):** ```html - - - - - Essential JS 2 ProgressBar - - - - - - - - - - - + + + + ``` -### Using CDN link for script +**Or**, to load all Syncfusion components in a single combined bundle: -Using CDN link, you can directly refer the ProgressBar control's script into the `index.html`. +```html + +``` -Refer the ProgressBar's CDN links as below +### Step 3: Add the Syncfusion® ProgressBar Control to the Application -**Syntax:** +The `index.html` file references a separate `index.js` file that contains the ProgressBar component initialization. This keeps your markup and script logic cleanly separated, which is the recommended pattern for Syncfusion® JavaScript (ES5) apps. -> Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` +`index.js` imports nothing manually — the global scripts added in Step 2 register the `ej.progressbar.ProgressBar` class on the `ej` namespace. The script then builds the ProgressBar component with a numeric `value` and renders the control into the `#element` container declared in `index.html`. -**Example:** +{% tabs %} +{% highlight js tabtitle="index.js" %} -> Script: [`https://cdn.syncfusion.com/ej2/ej2-progressbar/dist/global/ej2-progressbar.min.js`](https://cdn.syncfusion.com/ej2/ej2-progressbar/dist/global/ej2-progressbar.min.js) + var percentageProgress = new ej.progressbar.ProgressBar({ + value: 40 + }); + percentageProgress.appendTo('#element'); -The below html code example shows the minimal dependency of ProgressBar. +{% endhighlight %} +{% highlight html tabtitle="index.html" %} -```html - - - Essential JS 2 ProgressBar - - - - - - - - - - + + + Essential JS 2 ProgressBar + + + + + + +
      + + + -``` +{% endhighlight %} +{% endtabs %} -## Adding ProgressBar control +The `new ej.progressbar.ProgressBar({...})` call creates the ProgressBar component. The configuration object accepts the following key options: -Now, you can start adding the ProgressBar control in the application. For getting started, add a **div** element for the ProgressBar control in **index.html**. Then reference the **index.js** file in the **index.html** file. +- [`value`](https://ej2.syncfusion.com/javascript/documentation/api/progressbar/index-default#value) — Numeric progress value (default `null`). The value is interpreted as a percentage between `0` and `100` for both the linear and circular ProgressBar variants. +- [`type`](https://ej2.syncfusion.com/javascript/documentation/api/progressbar/index-default#type) — ProgressBar variant to render. Use `'Linear'` (default) for a horizontal bar or `'Circular'` for a radial indicator. +- [`minimum`](https://ej2.syncfusion.com/javascript/documentation/api/progressbar/index-default#minimum) / [`maximum`](https://ej2.syncfusion.com/javascript/documentation/api/progressbar/index-default#maximum) — Minimum and maximum range of the progress value. Defaults are `0` and `100`. +- [`height`](https://ej2.syncfusion.com/javascript/documentation/api/progressbar/index-default#height) / [`width`](https://ej2.syncfusion.com/javascript/documentation/api/progressbar/index-default#width) — Control height and width in pixels (or CSS units). For a circular ProgressBar, set `width` to render the SVG canvas size. +- [`showProgressValue`](https://ej2.syncfusion.com/javascript/documentation/api/progressbar/index-default#showprogressvalue) — When `true`, displays the numeric value on the bar. Defaults to `true`. +- [`animation`](https://ej2.syncfusion.com/javascript/documentation/api/progressbar/index-default#animation) — Object that controls the load animation (`enable`, `duration`, `delay`). -In this document context we are going to use **ej2.min.js** which includes all the Essential® JS 2 components and its dependent scripts. +Finally, `percentageProgress.appendTo('#element')` renders the control into the `
      ` element declared in `index.html`. -```html - - - - Essential JS 2 ProgressBar - - - - - -
      - - - +### Step 4: Open in Browser -``` +Open `quickstart/index.html` through a local web server. With the VS Code **Live Server** extension installed, right-click `index.html` in the Explorer and choose **Open with Live Server**, then visit the URL it prints (for example, `http://127.0.0.1:5500/`). You should see the Syncfusion ProgressBar control rendered with the value `40`. -Place the following Progress Bar code in the **index.js** +## Output -```javascript +The following screenshot shows the output of the Syncfusion ProgressBar quick start application: - var percentageProgress = new ej.progressbar.ProgressBar({ - value: 40}); - percentageProgress.appendTo('#element'); +![Syncfusion ProgressBar Quick Start Output](../images/progressbar.png) -``` -{% previewsample "page.domainurl/code-snippet/progressbar/progressbar-cs14" %} \ No newline at end of file +## Troubleshooting + +- **`ej is not defined`.** Confirm that `ej2.min.js` (or `ej2-progressbar.min.js` plus its dependencies) is loaded before your script. Place the ` - - - - - - - - - - -``` - -### Using CDN links for scripts - -Using CDN links, you can reference the control's script in the `index.html`. - -Refer the control's CDN links as follows. - -**Syntax:** - -> Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` - -**Example:** - -> Script: [`https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js`](https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js) - -The following HTML shows the minimal dependencies using CDN scripts. - -``` - - - - - Essential JS 2 Range Navigator - - - - - - - +**Scripts (JavaScript):** +```html + + + + ``` -## Adding Range Navigator control - -Now you can add the Range Navigator control to the application. To get started, add a **div** element for the Range Navigator in **index.html**. Then reference the **index.js** file in **index.html**. - -This document uses `ej2.min.js`, which includes all Essential JS 2 components and dependencies. +**Or**, to load all Syncfusion components in a single combined bundle: ```html - - - - Essential JS 2 Range Navigator - - - - - -
      - - - - + ``` -Place the following Range Navigator initialization code in `index.js`. +### Step 3: Add the Syncfusion® Range Navigator Control to the Application -```javascript -var range = new ej.charts.RangeNavigator(); -range.appendTo('#element'); -``` +The `index.html` file loads `es5-datasource.js` and `index.js`. The `es5-datasource.js` file contains the sample data, while `index.js` initializes the Range Navigator. -The following example shows a basic Range Navigator. +The Syncfusion scripts provide the `ej.charts.RangeNavigator` class. The Range Navigator uses the global datasrc array, displays the data as an Area series on a DateTime axis, and renders inside the `#element` container. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/rangenavigator/getting-started-cs9/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/rangenavigator/getting-started-cs9/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/rangenavigator/getting-started-cs9" %} +Key options used in the configuration object: + +- [`valueType`](https://ej2.syncfusion.com/javascript/documentation/api/range-navigator/index-default#valuetype) — Axis data type. Set to `'DateTime'` because the sample data uses date strings. +- [`labelFormat`](https://ej2.syncfusion.com/javascript/documentation/api/range-navigator/index-default#valuetype) — Format string applied to the axis labels (for example, `'dd-MMM'`). +- [`series`](https://ej2.syncfusion.com/javascript/documentation/api/range-navigator/index-default#series) — Array of series to render. Each series has a [`dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/range-navigator/rangenavigatorseriesmodel#datasource), [`xName`](https://ej2.syncfusion.com/javascript/documentation/api/range-navigator/rangenavigatorseriesmodel#xname), [`yName`](https://ej2.syncfusion.com/javascript/documentation/api/range-navigator/rangenavigatorseriesmodel#yname), and [`type`](https://ej2.syncfusion.com/javascript/documentation/api/range-navigator/rangenavigatorseriesmodel#type) (e.g. `'Area'`). -## Populate Range Navigator with Data +Finally, `range.appendTo('#element')` renders the control into the `
      ` element declared in `index.html`. -Now, provide data to the Range Navigator. Add a series object to the Range Navigator by using the `series` property. Map the field names `x` and `y` in the JSON data to the `xName` and `yName` properties of the series, then set the JSON data to the `dataSource` property. -Since the JSON contains DateTime data, set the `valueType` as `DateTime`. By default, the axis `valueType` is `Numeric`. +Copy the snippets below into the matching files in your `quickstart` folder. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -176,25 +82,30 @@ Since the JSON contains DateTime data, set the `valueType` as `DateTime`. By def {% highlight html tabtitle="index.html" %} {% include code-snippet/rangenavigator/getting-started-cs10/index.html %} {% endhighlight %} +{% highlight js tabtitle="es5-datasource.js" %} +{% include code-snippet/rangenavigator/getting-started-cs10/es5-datasource.js %} +{% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/rangenavigator/getting-started-cs10" %} - > Note: Get data from [here](https://ej2.syncfusion.com/demos/src/range-navigator/data-source/default-data.json). The sample should look like the [default](https://ej2.syncfusion.com/javascript/demos/#/material/range-navigator/default.html). Don’t worry about the gradient color; let it take the default color. -## Enable Tooltip +### Step 4: Open in Browser -The tooltip is useful to show the selected data. You can enable the tooltip by setting the `enable` property to `true` in the `tooltip` object. +Open `quickstart/index.html` through a local web server. With the VS Code **Live Server** extension installed, right-click `index.html` in the Explorer and choose **Open with Live Server**, then visit the URL it prints (for example, `http://127.0.0.1:5500/`). You should see the Syncfusion Range Navigator control displaying the sample data. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/rangenavigator/getting-started-cs11/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/rangenavigator/getting-started-cs11/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/rangenavigator/getting-started-cs11" %} \ No newline at end of file +## Output + +The Range Navigator shows 15 days of data. Drag the thumbs to select a date range. + +{% previewsample "page.domainurl/code-snippet/rangenavigator/getting-started-cs10" %} + +![Syncfusion Range Navigator Quick Start Output](../images/navigator.png) + +## Troubleshooting + +- **`ej is not defined`.** Confirm that `ej2-charts.min.js` is loaded before your script. Place the ` - - - - - - -
      - - - + + + + ``` -### Using CDN links +**Or**, to load all Syncfusion components in a single combined bundle: ```html - - - - + ``` -## Sample 1 — Initialize Sankey +### Step 3: Add the Syncfusion® Sankey Control to the Application -Add a `div` element for the Sankey in `index.html` and initialize it from `index.js`. +The `index.html` file references a separate `index.js` file that contains the Sankey component initialization. This keeps your markup and script logic cleanly separated, which is the recommended pattern for Syncfusion® JavaScript (ES5) apps. + +`index.js` imports nothing manually — the global scripts added in Step 2 register the `ej.charts.Sankey` class on the `ej` namespace. The script then builds the Sankey component with sample node/link data and renders the control into the `#element` container declared in `index.html`. {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/sankey/getting-started/initialize-cs1/index.js %} +{% include code-snippet/sankey/getting-started/data-cs1/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/sankey/getting-started/initialize-cs1/index.html %} +{% include code-snippet/sankey/getting-started/data-cs1/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/sankey/getting-started/initialize-cs1" %} +The `new ej.charts.Sankey({...})` call creates the Sankey component. The configuration object accepts the following key options: -## Sample 2 — Add data to Sankey +- [`nodes`](https://ej2.syncfusion.com/javascript/documentation/api/sankey/index-default#nodes) — Array of node objects. Each node needs a unique `id`; the optional `label.text` property controls the displayed label. +- [`links`](https://ej2.syncfusion.com/javascript/documentation/api/sankey/index-default#links) — Array of link objects. Each link needs a [`sourceId`](https://ej2.syncfusion.com/javascript/documentation/api/sankey/sankeylinkmodel#sourceid) and [`targetId`](https://ej2.syncfusion.com/javascript/documentation/api/sankey/sankeylinkmodel#sourceid) matching a node `id`, plus a numeric [`value`](https://ej2.syncfusion.com/javascript/documentation/api/sankey/sankeylinkmodel#value) that controls the link thickness. +- [`title`](https://ej2.syncfusion.com/javascript/documentation/api/sankey/index-default#title) — Text shown above the diagram. -Provide nodes and links to the Sankey component via the data configuration. See the example: +Finally, `sankey.appendTo('#element')` renders the control into the `
      ` element declared in `index.html`. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/sankey/getting-started/data-cs1/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sankey/getting-started/data-cs1/index.html %} -{% endhighlight %} -{% endtabs %} +### Step 4: Open in Browser -{% previewsample "page.domainurl/code-snippet/sankey/getting-started/data-cs1" %} +Open `quickstart/index.html` through a local web server. With the VS Code **Live Server** extension installed, right-click `index.html` in the Explorer and choose **Open with Live Server**, then visit the URL it prints (for example, `http://127.0.0.1:5500/`). You should see the Syncfusion Sankey control displaying the energy-flow sample data. -## Sample 3 — Tooltip and module injection +## Output -Enable tooltip and legend by injecting required modules when using modular imports. For global script usage (CDN or combined bundle), modules are often available without explicit injection. +The following screenshot shows the output of the Syncfusion Sankey quick start application: -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/sankey/getting-started/tooltip-cs1/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sankey/getting-started/tooltip-cs1/index.html %} -{% endhighlight %} -{% endtabs %} +![Syncfusion Sankey Quick Start Output](../images/sankey.png) + +## Troubleshooting + +- **The page is blank.** Open the page through a local web server (for example, the VS Code **Live Server** extension) instead of double-clicking the file. Syncfusion charts require an `http://` or `https://` origin. +- **`ej is not defined`.** Confirm that `ej2-charts.min.js` is loaded before your script. Place the ` @@ -101,7 +101,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 5:** Now, add the `Smart TextArea` element and initiate the **Syncfusion® JavaScript Smart TextArea** control in the `index.html` by using following code. In **Smart TextArea**, the [aiSuggestionHandler](https://ej2.syncfusion.com/javascript/documentation/api/smart-textarea#aisuggestionhandler) property, which sends prompts to the `AI` model and receives context-aware suggestions. These suggestions appear inline for non-touch devices and as an overlay popup for touch devices by default, helping users type faster and more accurately. +**Step 5:** Now, add the `Smart TextArea` element and initiate the **Syncfusion® JavaScript Smart TextArea** control in the `index.html` by using the following code. In **Smart TextArea**, the [aiSuggestionHandler](https://ej2.syncfusion.com/javascript/documentation/api/smart-textarea#aisuggestionhandler) property sends prompts to the `AI` model and receives context-aware suggestions. These suggestions appear inline for non-touch devices and as an overlay popup for touch devices by default, helping users type faster and more accurately. ```html @@ -109,11 +109,11 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin Essential JS 2 - Smart TextArea - - + + - - + + @@ -167,29 +167,31 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Smart TextArea** control. +**Step 6:** Now, run the `index.html` in a web browser; it will render the **Syncfusion® JavaScript Smart TextArea** control. ### Using CDN link for script and style reference **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** The Essential® JS 2 control's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 control's global scripts and styles are already hosted in the following CDN link formats. **Syntax:** -> Dependency Script: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` +> Dependency Script: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` > -> Control Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` +> Control Script: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` > -> Dependency Styles: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/material.css` +> Dependency Styles: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{DEPENDENCY_PACKAGE_NAME}/styles/tailwind3.css` > -> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css` +> Control Styles: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/styles/tailwind3.css` **Example:** -> Script: [`https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js`](https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js) +> Script: [`https://cdn.syncfusion.com/ej2/34.1.29/ej2-inputs/dist/global/ej2-inputs.min.js`](https://cdn.syncfusion.com/ej2/34.1.29/ej2-inputs/dist/global/ej2-inputs.min.js) > -> Styles: [`https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css`](https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css) +> Styles: [`https://cdn.syncfusion.com/ej2/34.1.29/ej2-inputs/styles/tailwind3.css`](https://cdn.syncfusion.com/ej2/34.1.29/ej2-inputs/styles/tailwind3.css) -**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `Smart TextArea` element and initiate the **Syncfusion® JavaScript Smart TextArea** control in the index.html by using following code. +**Step 3:** Create an HTML page (index.html) in the `~/quickstart/index.html` location and add the CDN link references by using the following code. + +**Step 4:** Now, add the `Smart TextArea` element and initiate the **Syncfusion® JavaScript Smart TextArea** control in the `index.html` by using the following code. In **Smart TextArea**, the [aiSuggestionHandler](https://ej2.syncfusion.com/javascript/documentation/api/smart-textarea#aisuggestionhandler) property sends prompts to the `AI` model and receives context-aware suggestions. These suggestions appear inline for non-touch devices and as an overlay popup for touch devices by default, helping users type faster and more accurately. ```html @@ -197,17 +199,17 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin Essential JS 2 - Smart TextArea - - + + - - + + - + - + @@ -255,7 +257,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ## Adding Smart TextArea control to the application -* Add the HTML textarea tag with the `id` attribute as `Smart TextArea` to your `index.html` file. The following example shows the Smart TextArea control. +* Add the HTML textarea tag with the `id` attribute as `Smart TextArea` to your `index.html` file. The following example shows the Smart TextArea control's output. > In our demonstration, Azure AI is used, but you can integrate any text-generative AI of your choice. diff --git a/ej2-javascript/smart-textarea/ts/getting-started.md b/ej2-javascript/smart-textarea/ts/getting-started.md index b77c4dd6d..5da84d73b 100644 --- a/ej2-javascript/smart-textarea/ts/getting-started.md +++ b/ej2-javascript/smart-textarea/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with ##Platform_Name## Smart Textarea control | Syncfusion +title: Getting started with ##Platform_Name## Smart TextArea | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Smart Textarea control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting Started in ##Platform_Name## Smart TextArea Control +# Getting Started with ##Platform_Name## Smart TextArea Control The **Smart TextArea** is an advanced control designed to elevate the text input experience by providing intelligent autocomplete suggestions for entire sentences through text-generative AI functionality. This control enhances user productivity by predicting and offering relevant completions based on the context of what is being typed. @@ -19,7 +19,7 @@ This section explains how to create a simple **Smart TextArea** Control and conf ## Prerequisites -To get started with application, ensure the following software to be installed in the machine. +To get started with the application, ensure the following software is installed on the machine. * [git](https://git-scm.com/downloads) * [Node.js](https://nodejs.org/en/) @@ -73,13 +73,24 @@ npm install ## Import the Syncfusion® CSS styles -To render Smart TextArea Control, need to import inputs and its dependent controls styles as given below in the `~/src/styles/index.css` file, as shown below: +Themes for Syncfusion® JavaScript components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). + +This example uses the `tailwind3` theme for the Smart TextArea component from the theme package. To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="npm" %} + +npm install @syncfusion/ej2-tailwind3-theme --save + +{% endhighlight %} +{% endtabs %} + +Add the Smart TextArea component's styles as given below in the `~/src/styles/index.css` file. + +{% tabs %} +{% highlight css tabtitle="index.css" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/textarea/index.css'; {% endhighlight %} {% endtabs %} @@ -101,8 +112,8 @@ Add the HTML Smart TextArea tag with the `id` attribute as `default` to your `in - - + + @@ -119,7 +130,7 @@ Add the HTML Smart TextArea tag with the `id` attribute as `default` to your `in {% endhighlight %} {% endtabs %} -Then, import the Smart TextArea Control in your `src/app/app.ts` file and initialize it with the `#default`. In **Smart TextArea**, the [aiSuggestionHandler](https://ej2.syncfusion.com/documentation/api/smart-textarea#aisuggestionhandler) property, which sends prompts to the `AI` model and receives context-aware suggestions. These suggestions appear inline for non-touch devices and as an overlay popup for touch devices by default, helping users type faster and more accurately. +Then, import the Smart TextArea Control in your `src/app/app.ts` file and initialize it with `#default`. In **Smart TextArea**, the [aiSuggestionHandler](https://ej2.syncfusion.com/documentation/api/smart-textarea#aisuggestionhandler) property sends prompts to the `AI` model and receives context-aware suggestions. These suggestions appear inline for non-touch devices and as an overlay popup for touch devices by default, helping users type faster and more accurately. {% tabs %} {% highlight ts tabtitle="app.ts" %} diff --git a/ej2-javascript/smithchart/images/smithchart-TS.png b/ej2-javascript/smithchart/images/smithchart-TS.png new file mode 100644 index 0000000000000000000000000000000000000000..cfc28591cf457dfc382a188e082681cb10fce95f GIT binary patch literal 66375 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® JS 2 for JavaScript (global script) is an ES5-formatted pure JavaScript framework that runs directly in modern web browsers. +Build your first Syncfusion JavaScript (ES5) application with a simple Smith Chart in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Smith Chart control from the CDN, binds it to sample transmission-line data, and renders an interactive impedance plot. + +## Prerequisites + +* [Visual Studio Code](https://code.visualstudio.com) (or any text editor) +* A web browser to view the result +* A local web server such as the VS Code [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension ## Dependencies -Below is the list of minimum dependencies required to use the Smith Chart. +The Smith Chart control ships as part of the `@syncfusion/ej2-charts` package. Below is the list of minimum dependencies required. ``` |-- @syncfusion/ej2-charts @@ -27,212 +33,67 @@ Below is the list of minimum dependencies required to use the Smith Chart. |-- @syncfusion/ej2-file-utils ``` -## Control initialization - -The Syncfusion Essential® JS 2 Smith Chart control can be initialized in either of the following ways: - -* Using local script. -* Using CDN link for script. - -### Using local script references in a HTML page - -**Step 1:** Create an app folder `quickstart` for getting started. - -**Step 2:** You can get the global scripts from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. - -**Syntax:** +## Quick Setup -> Dependency script: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{DEPENDENCY_PACKAGE_NAME}/dist/global/{DEPENDENCY_PACKAGE_NAME}.min.js` -> -> Script: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> +### Step 1: Create Folder and HTML file -**Example:** +* Create a folder named `quickstart` in your desired directory. +* Inside the `quickstart` folder, create two new files: `index.html` and `index.js`. -> Dependency script: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-base/dist/global/ej2-base.min.js` -> -> Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-charts/dist/global/ej2-charts.min.js` -> +### Step 2: Add Syncfusion® CDN Resources -The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. - -> Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` - -The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an online web tool, which can be used to generate the custom script for a set of specific controls. This web tool is useful to combine the required control scripts in a single file. - -**Step 3:** Create a folder `~/quickstart/resources` and copy the global scripts from the above installed location into `~/quickstart/resources/` in the corresponding package locations (for example, `base`, `svg-base`, `charts`). - -**Step 4:** Create an HTML page (index.html) in `~/quickstart/index.html` and add the Essential® JS 2 script references. +Include the following JavaScript and CSS links in the `` section of `index.html`. +**Scripts (JavaScript):** ```html - - - - Essential JS 2 - - - - - - - - - + + + ``` -**Step 5:** Add a container `div` and initialize the **Syncfusion® JavaScript (ES5) Smith Chart** control in `~/quickstart/index.html` using the following code. +**Or**, to load all Syncfusion components in a single combined bundle: ```html - - - - Essential JS 2 - - - - - - - - - - -
      - - - + ``` -**Step 6:** Open `index.html` in a web browser to render the **Syncfusion® JavaScript Smithchart** control. - -### Using CDN link for script reference - -**Step 1:** Create an app folder `quickstart` for getting started. - -**Step 2:** The Essential® JS 2 controls' global scripts are already hosted in the below CDN link formats. - -**Syntax:** -> Dependency Script: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` -> -> Control Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` +### Step 3: Add the Syncfusion® Smith Chart Control to the Application -**Example:** -> Script: [`https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js`](https://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js) +The `index.html` file references a separate `index.js` file that contains the Smith Chart component initialization. This keeps your markup and script logic cleanly separated, which is the recommended pattern for Syncfusion® JavaScript (ES5) apps. -**Step 3:** Create an HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `Smithchart` element and initiate the **Syncfusion® JavaScript (ES5) Smithchart** control in the index.html by using following code. +`index.js` imports nothing manually — the global scripts added in Step 2 register the `ej.charts.Smithchart` class on the `ej` namespace. The script then builds the Smith Chart with a single [`dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/smithchart/smithchartseriesmodel#datasource)-bound series and renders the control into the `#element` container declared in `index.html`. {% tabs %} {% highlight js tabtitle="index.js" %} -{% include code-snippet/smithchart/smithchart-axis-cs1/index.js %} +{% include code-snippet/smithchart/getting-started-cs1/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/smithchart/smithchart-axis-cs1/index.html %} +{% include code-snippet/smithchart/getting-started-cs1/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/smithchart/smithchart-axis-cs1" %} -**Step 4:** Open `index.html` in a web browser to render the **Syncfusion® JavaScript Smithchart** control. +The `new ej.charts.Smithchart({...})` call creates the Smith Chart component. The configuration object accepts the following key options: -## Add series to Smithchart +- [`series`](https://ej2.syncfusion.com/javascript/documentation/api/smithchart/index-default#series) — Array of series objects. Each series is rendered as a curve on the chart. +- [`series[].dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/smithchart/smithchartseriesmodel#datasource) — Array of `{ resistance, reactance }` objects. Use this when you want to bind a dataset to the series. +- [`series[].resistance`](https://ej2.syncfusion.com/javascript/documentation/api/smithchart/smithchartseriesmodel#resistance) / [`series[].reactance`](https://ej2.syncfusion.com/javascript/documentation/api/smithchart/smithchartseriesmodel#resistance) — Names of the data fields that hold the resistance and reactance values when binding to a [`dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/smithchart/smithchartseriesmodel#datasource). -The Smithchart has two ways to add series: +Finally, `smithchart.appendTo('#element')` renders the control into the `
      ` element declared in `index.html`. -* dataSource — Bind a data object by specifying resistance and reactance values; the series renders from the provided dataSource. -* points — Provide a collection of resistance and reactance value points for the series. +### Step 4: Open in Browser -The sample below demonstrates adding two series to the Smithchart in both ways. +Open `quickstart/index.html` through a local web server. With the VS Code **Live Server** extension installed, right-click `index.html` in the Explorer and choose **Open with Live Server**, then visit the URL it prints (for example, `http://127.0.0.1:5500/`). You should see the Syncfusion Smith Chart control displaying the transmission-line sample data. -* First series `Transmission1` shows dataSource bound series. -* Second series `Transmission2` shows points bound series. +## Output -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/smithchart/smithchart-axis-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/smithchart/smithchart-axis-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/smithchart/smithchart-axis-cs2" %} - -## Add title to Smith Chart - -You can add a title using the [`title`](../api/smithchart/smithchartmodel#title) property to the Smith Chart to provide quick information to the user about the data plotted in the Smith Chart. +The following screenshot shows the output of the Syncfusion Smith Chart quick start application: -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/smithchart/smithchart-axis-cs3/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/smithchart/smithchart-axis-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/smithchart/smithchart-axis-cs3" %} +{% previewsample "page.domainurl/code-snippet/smithchart/getting-started-cs2" %} -## Enable markers in the Smithchart +![Syncfusion Smith Chart Quick Start Output](../images/smithchart.png) -You can add and customize markers in the Smith Chart. This can be achieved by setting the [`visible`](../api/smithchart/seriesmarkermodel#visible) property to `true` in the [`marker`](../api/smithchart/smithchartseriesmodel#marker) object. The sample below enables markers for the first series. +## Troubleshooting -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/smithchart/smithchart-axis-cs4/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/smithchart/smithchart-axis-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/smithchart/smithchart-axis-cs4" %} - -## Enable data labels for Smithchart markers - -You can add data labels to improve the readability of the Smith Chart. This can be achieved by setting the [`visible`](../api/smithchart/seriesmarkerdatalabelmodel#visible) property to `true` in the [`dataLabel`](../api/smithchart/seriesmarkermodel#datalabel) object. The sample below enables data labels for the first series. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/smithchart/smithchart-axis-cs5/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/smithchart/smithchart-axis-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/smithchart/smithchart-axis-cs5" %} - -## Enable legend for Smithchart - -You can use a legend for the Smith Chart by setting the [`visible`](../api/smithchart/smithchartlegendsettingsmodel#visible) property to `true` in the [`legendSettings`](../api/smithchart/smithchartmodel#legendsettings) object. The following example shows enabling the legend for the Smithchart. The series name can be customized using the series `name`. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/smithchart/smithchart-axis-cs6/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/smithchart/smithchart-axis-cs6/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/smithchart/smithchart-axis-cs6" %} - -## Enable tooltip for smithchart series - -The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [`visible`](../api/smithchart/seriestooltipmodel#visible) property as `true` in [`tooltip`](../api/smithchart/smithchartseries#tooltip) object. - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/smithchart/smithchart-axis-cs7/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/smithchart/smithchart-axis-cs7/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/smithchart/smithchart-axis-cs7" %} \ No newline at end of file +- **`ej is not defined`.** Confirm that `ej2-charts.min.js` is loaded before your script. Place the ` - - - - - - - - - + + + + ``` -**Step 5:** Now, add the `Charts` element and initiate the **Syncfusion® JavaScript (ES5) Charts** control in the `~/quickstart/index.html` by using following code. +Alternatively, load all Syncfusion components using a single combined bundle: ```html - - - - Essential JS 2 - - - - - - - - - Sparkline - - - + ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Sparkline** control. +### Step 3: Add the Syncfusion® Sparkline control -## Bind data source to sparkline +The `index.html` file references a separate `index.js` file that contains the Sparkline initialization. This keeps the markup and script logic separated, which is the recommended pattern for Syncfusion JavaScript (ES5) applications. -The `dataSource` property enables data binding for the sparkline. It accepts a collection of values as input, such as a list of objects. +The global scripts added in the previous step register the `ej.charts.Sparkline` class in the `ej` namespace. The `index.js` file creates a Sparkline instance with sample data and renders it inside the `#element` container declared in `index.html`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -119,35 +75,36 @@ The `dataSource` property enables data binding for the sparkline. It accepts a c {% include code-snippet/sparkline/getting-started-cs1/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sparkline/getting-started-cs1" %} -## Change the type of sparkline +The `new ej.charts.Sparkline({...})` call creates the Sparkline control. The configuration object accepts options such as the following: -The sparkline type can be configured using the `type` property, which supports `Line`, `Column`, `WinLoss`, `Pie`, and `Area`. Here, the `area` type is applied. +* [`dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/sparkline/index-default#datasource): Specifies the collection of values or objects displayed by the Sparkline. +* [`type`](https://ej2.syncfusion.com/javascript/documentation/api/sparkline/index-default#type): Specifies the Sparkline type, such as `Line`, `Column`, `WinLoss`, `Pie`, or `Area`. +* [`height`](https://ej2.syncfusion.com/javascript/documentation/api/sparkline/index-default#height): Specifies the height of the Sparkline. +* [`width`](https://ej2.syncfusion.com/javascript/documentation/api/sparkline/index-default#width): Specifies the width of the Sparkline. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/sparkline/getting-started-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sparkline/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sparkline/getting-started-cs2" %} +Finally, `sparkline.appendTo('#element')` renders the control inside the `
      ` element declared in `index.html`. -## Enable tooltip for sparkline +### Step 4: Open the application in a browser -The sparkline provides additional information through a tooltip that appears when the mouse pointer hovers over the chart. You can enable tooltip by setting the [`visible`] property to true in [`tooltipSettings`] and injecting `SparklineTooltip` module using the `Sparkline.Inject(SparklineTooltip )` method. +Open `quickstart/index.html` through a local web server. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/sparkline/getting-started-cs3/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sparkline/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sparkline/getting-started-cs3" %} \ No newline at end of file +If the VS Code **Live Server** extension is installed, right-click `index.html` in the Explorer and select **Open with Live Server**. Then, open the URL generated by Live Server, such as `http://127.0.0.1:5500/`. + +The browser displays the Syncfusion Sparkline control with the configured sample data. + +## Output + +After completing the previous steps, the application displays a Sparkline representing the supplied data. + +{% previewsample "page.domainurl/code-snippet/sparkline/getting-started-cs1" %} + +![Syncfusion Sparkline Quick Start Output](../images/sparkline.png) + +## Troubleshooting + +* **The page is blank:** Open the page through a local web server, such as the VS Code **Live Server** extension, instead of opening the HTML file directly. +* **`ej is not defined`:** Make sure the Syncfusion global scripts are loaded before `index.js`. +* **`ej.charts.Sparkline is not a constructor`:** Verify that `ej2-charts.min.js` or the combined `ej2.min.js` bundle is loaded successfully. +* **The Sparkline container is empty:** Confirm that the element ID in `index.html` matches the selector passed to `appendTo('#element')`. +* **The data is not displayed correctly:** When binding an object collection, verify that `xName` and `yName` match the corresponding property names in the data source. diff --git a/ej2-javascript/sparkline/ts/getting-started.md b/ej2-javascript/sparkline/ts/getting-started.md index c0d2eaf8f..bb6429c47 100644 --- a/ej2-javascript/sparkline/ts/getting-started.md +++ b/ej2-javascript/sparkline/ts/getting-started.md @@ -1,196 +1,155 @@ --- layout: post title: Getting started with ##Platform_Name## Sparkline control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Sparkline control of Syncfusion Essential JS 2 and more details. +description: Check out and learn how to get started with the ##Platform_Name## Sparkline control in Syncfusion Essential JS 2. platform: ej2-javascript -control: Getting started +control: Sparkline publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Sparkline control +# Getting started with ##Platform_Name## Sparkline control -This document explains the steps to create a simple Sparkline and demonstrates the basic usage of the TreeGrid component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. +This document explains how to create a simple Sparkline and configure its basic features in TypeScript using the Essential JS 2 webpack [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application uses the `webpack.config.js` configuration included in the quickstart repository. It requires Node.js `v14.15.0` or later. For information about webpack and its features, refer to the [webpack getting-started guide](https://webpack.js.org/guides/getting-started/). + +## Prerequisites + +Before you begin, ensure that the following software is installed: + +* Node.js `v14.15.0` or later, including npm +* [Visual Studio Code](https://code.visualstudio.com) or another text editor +* [Git](https://git-scm.com/) for cloning the quickstart repository +* A modern web browser, such as Chrome, Edge, Firefox, or Safari ## Dependencies -The following list of minimum dependencies are required to use the sparkline: +The Sparkline control is part of the `@syncfusion/ej2-charts` package. The following minimum dependencies are installed automatically with the charts package: -```javascript +```text |-- @syncfusion/ej2-charts |-- @syncfusion/ej2-base |-- @syncfusion/ej2-data |-- @syncfusion/ej2-svg-base ``` -## Set up development environment +## Quick setup + +### Step 1: Create a project folder + +Create a folder named `my-sparkline` in your desired location. This folder will contain the Syncfusion Sparkline TypeScript project. + +### Step 2: Open a terminal + +Open a terminal and navigate to the `my-sparkline` folder created in Step 1. + +* **Windows**: Open Command Prompt or PowerShell and navigate to the `my-sparkline` folder. +* **macOS/Linux**: Open Terminal and navigate to the `my-sparkline` folder. + +### Step 3: Clone the quickstart repository -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Run the following command to clone the Syncfusion JavaScript quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack): {% tabs %} {% highlight bash tabtitle="CMD" %} - git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart - {% endhighlight %} {% endtabs %} -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +### Step 4: Navigate to the project folder + +After cloning the project, navigate to the `ej2-quickstart` directory: {% tabs %} {% highlight bash tabtitle="CMD" %} - cd ej2-quickstart - {% endhighlight %} {% endtabs %} -## Add Syncfusion® JavaScript packages +### Step 5: Install the required packages -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion JavaScript packages are available in the [npm registry](https://www.npmjs.com/~syncfusionorg). The quickstart application is preconfigured with the [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in `package.json`. -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Run the following command to install the project dependencies: {% tabs %} {% highlight bash tabtitle="NPM" %} - npm install - {% endhighlight %} {% endtabs %} -## Add sparkline to project +The sample imports the Sparkline control from `@syncfusion/ej2-charts`, which is included through the preconfigured Syncfusion package. To use only the charts package in another project, install it with `npm install @syncfusion/ej2-charts` and keep all Syncfusion package versions aligned. + +> If the installed Syncfusion package requires license registration, follow the [Syncfusion license key registration documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). -Add an HTML div element for map into your `index.html`. `[src/index.html]` +### Step 6: Update the HTML template + +Open the `ej2-quickstart` folder in Visual Studio Code or another text editor. Locate `src/index.html`, preserve any existing `link` and `script` elements generated by the seed project, and add a `div` element with the ID `element` inside the `body` element. {% tabs %} {% highlight html tabtitle="index.html" %} - - - EJ2 Sparkline + Essential JS 2 Sparkline - + + - - -
      -
      + +
      - - {% endhighlight %} {% endtabs %} -Next, import the sparkline control into `index.ts`, create a sparkline instance, and append it to the `#container`. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { Sparkline } from '@syncfusion/ej2-charts'; - -// Initialize the sparkline control -let sparkline: Sparkline = new Sparkline(); - -// Render initialized sparkline -sparkline.appendTo('#element'); - -{% endhighlight %} -{% endtabs %} - -Now, use the `npm run start` command to run the application in browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +### Step 7: Create the Sparkline with data -npm run start +Locate `src/app/app.ts`. Import the `Sparkline` class, initialize it with a data source, and append it to the `#element` container. Providing data in the initial configuration ensures that the first run produces visible output. -{% endhighlight %} -{% endtabs %} +The [`dataSource`](https://ej2.syncfusion.com/documentation/api/sparkline/index-default#datasource) property accepts numeric values or objects. When using objects, set [`xName`](https://ej2.syncfusion.com/documentation/api/sparkline/index-default#xname) and [`yName`](https://ej2.syncfusion.com/documentation/api/sparkline/index-default#yname) to the corresponding field names in the data source. {% tabs %} {% highlight ts tabtitle="app.ts" %} - -import { Sparkline } from '@syncfusion/ej2-charts'; - -let sparkline: Sparkline = new Sparkline(); - -sparkline.appendTo('#element'); - +{% include code-snippet/sparkline/getting-started-cs1/index.ts %} {% endhighlight %} {% endtabs %} -Since the data source has not been specified to the sparkline, no shapes will be rendered. Only an empty SVG element is appended to the sparkline container. +The `sparkline.appendTo('#element')` call renders the control in the element whose ID is `element`. -## Module injection +### Step 8: Run the application -The sparkline component is segregated into individual feature-wise modules. To use a particular feature, inject its feature module using the `Sparkline.Inject()` method. The module available in sparkline and its description is as follows. - -* SparklineTooltip - Inject this provider to use tooltip series. - -In this application, the basic sparkline is modified to demonstrate various sparkline types. - -In this application, the tooltip feature of the sparkline is used. Now, import the SparklineTooltip module from the sparkline package, and inject it into the sparkline control using the `Sparkline.Inject` method. +Run the following command from the project directory: {% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts'; -Sparkline.Inject(SparklineTooltip); - +{% highlight bash tabtitle="NPM" %} +npm run start {% endhighlight %} {% endtabs %} -## Bind data source to sparkline +The webpack development server compiles the project and opens it in the default browser. The application typically runs at `http://localhost:4000`. To stop the development server, press `Ctrl+C` in the terminal. -The `dataSource` property enables data binding for the sparkline. It accepts a collection of values as input, such as a list of objects. +### Step 9: View the Sparkline -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/sparkline/getting-started-cs4/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sparkline/getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sparkline/getting-started-cs4" %} +Wait for webpack to complete the build. The browser displays the Sparkline using the data configured in `src/app/app.ts`. -## Change the type of sparkline +## Output -The sparkline type can be configured using the `type` property, which supports `Line`, `Column`, `WinLoss`, `Pie`, and `Area`. Here, the `area` type is applied. +After completing the quick setup, the application displays a Sparkline for the configured data. When the tooltip module is injected and `tooltipSettings.visible` is enabled, moving the pointer over a data point displays its value. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/sparkline/getting-started-cs5/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sparkline/getting-started-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sparkline/getting-started-cs5" %} +{% previewsample "page.domainurl/code-snippet/sparkline/getting-started-cs4" %} -## Enable tooltip for sparkline +![Syncfusion Sparkline Quick Start Output](../images/sparkline-TS.png) -The sparkline provides additional information through a tooltip that appears when the mouse pointer hovers over the chart. You can enable tooltip by setting the [`visible`] property to true in [`tooltipSettings`] and injecting `SparklineTooltip` module using the `Sparkline.Inject(SparklineTooltip )` method. +## Troubleshooting -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/sparkline/getting-started-cs6/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/sparkline/getting-started-cs6/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/sparkline/getting-started-cs6" %} \ No newline at end of file +* **The page is blank:** Confirm that `npm install` completed successfully and check the browser console and network panel for errors. +* **`Cannot find module '@syncfusion/ej2-charts'`:** Run `npm install` again, or install the package directly with `npm install @syncfusion/ej2-charts`. +* **The Sparkline is not displayed:** Verify that the data source contains valid values and that the selector passed to `appendTo('#element')` matches `
      `. +* **Only an empty SVG element is rendered:** Add a valid `dataSource` and ensure that `xName` and `yName` match the fields in an object data source. +* **TypeScript errors occur after package installation:** Ensure that all Syncfusion packages use compatible versions and remove `node_modules` and the lock file before running `npm install` again if versions are mismatched. diff --git a/ej2-javascript/stock-chart/js/es5-getting-started.md b/ej2-javascript/stock-chart/js/es5-getting-started.md index 0dd4dab96..28835abdf 100644 --- a/ej2-javascript/stock-chart/js/es5-getting-started.md +++ b/ej2-javascript/stock-chart/js/es5-getting-started.md @@ -1,9 +1,9 @@ --- layout: post title: Getting started with ##Platform_Name## Stock Chart control | Syncfusion -description: Check out and learn about Getting started with ##Platform_Name## Stock Chart control of Syncfusion Essential JS 2 and more details. +description: Check out and learn about Getting started with ##Platform_Name## Stock Chart control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Stock Chart +control: Stock Chart publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -18,11 +18,11 @@ Build your first Syncfusion JavaScript (ES5) application with a simple Stock Cha ## Prerequisites * [Visual Studio Code](https://code.visualstudio.com) (or any text editor) -* A web browser to view the result +* A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result ## Quick Setup -### Step 1: Create Folder and HTML file +### Step 1: Create Folder and HTML File * Create a folder named `quickstart` in your desired directory * Inside the `quickstart` folder, create a new file named `index.html` @@ -33,7 +33,7 @@ Syncfusion® JavaScript (Essential` section of your HTML file: ``` https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js @@ -41,7 +41,7 @@ https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js **Option 2: Using Individual CDN Packages** -Include the following CSS and JavaScript links in the `` section: +Include only the styles and scripts required for the Stock Chart control. Add the following CSS and JavaScript links in the `` section: **Styles (CSS):** ``` @@ -67,13 +67,13 @@ https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/dist/global/ej2-splitbutt https://cdn.syncfusion.com/ej2/33.2.3/ej2-charts/dist/global/ej2-charts.min.js ``` -### Step 3: Add Syncfusion® Stock Chart control to the application +### Step 3: Add Syncfusion® Stock Chart Control to the Application Copy and paste the following complete code into your `index.html` file: ```html - + Syncfusion Stock Chart - Quick Start @@ -110,8 +110,12 @@ Copy and paste the following complete code into your `index.html` file: var chart = new ej.charts.StockChart({ series: [{ dataSource: chartData, - type: 'Candle', - high: 'high', low: 'low', open: 'open', close: 'close', xName: 'x', + type: 'Candle', // Series type: renders OHLC as candlesticks + xName: 'x', // Field mapped to the x-axis (date) + open: 'open', // Field mapped to the open price + high: 'high', // Field mapped to the high price + low: 'low', // Field mapped to the low price + close: 'close' // Field mapped to the close price }] }); // Render Chart @@ -122,12 +126,32 @@ Copy and paste the following complete code into your `index.html` file: ``` +#### Series Property Reference + +| Property | Description | +| --- | --- | +| `dataSource` | The data array used to render the chart | +| `type` | The series type. For Stock Chart, use `'Candle'`, `'OHLC'`, `'Line'`, `'Area'`, or `'Column'` | +| `xName` | The field in the data source that maps to the x-axis (typically a date) | +| `open` | The field in the data source that maps to the open price | +| `high` | The field in the data source that maps to the high price | +| `low` | The field in the data source that maps to the low price | +| `close` | The field in the data source that maps to the close price | + + ### Step 4: Open in Browser -Open the `quickstart/index.html` file in your web browser. You should see the Syncfusion Stock Chart control displaying the sample data. +Open `quickstart/index.html` through a local web server (for example, right-click the file in VS Code with the Live Server extension installed and choose **Open with Live Server**). The page should display the Syncfusion Stock Chart control rendered with the candle series. ## Output -The following screenshot shows the output of the Syncfusion Stock Chart quick start application: +The page should display the Syncfusion Stock Chart control rendered with the candle series. ![Syncfusion Stock Chart Quick Start Output](../images/stockchart.png) + +## Troubleshooting + +* **Blank page, no chart** — The CDN script failed to load. Verify internet access and that the CDN URL returns a `200 OK` response. +* **`ej is not defined`** — `ej2.min.js` did not load before the chart script. Move the ` - - - - - - - - -``` +#### Individual Package Scripts -**Step 5:** Initialize the TreeMap component by adding the following code to `~/quickstart/index.html`. This example displays hierarchical data representing international airports across South American countries +Add the following script references to the `` section of `index.html`. Load the dependencies before the TreeMap component script. ```html - - - - Essential JS 2 - - - - - - - - -
      - - - + + + + ``` +#### Combined Bundle -**Step 6:** Now, run the **index.html** in web browser, it will render the **Syncfusion® JavaScript TreeMap** control. - -### Using CDN link for script reference - -**Step 1:** Create an app folder `quickstart` to organize your project files. - -**Step 2:** The Essential® JS 2 scripts are hosted on a CDN. You can reference them using the following link formats. - -**Common Control Scripts:** -> Syntax: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js` - -**Example:** -> Script: [`https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js) - -**or** - -**Individual Control Scripts:** - -**Syntax** ->`https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` - -**Example:** -> TreeMap Script: [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-treemap/dist/global/ej2-treemap.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-treemap/dist/global/ej2-treemap.min.js) -> -> Dependency Scripts -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/dist/global/ej2-base.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-data/dist/global/ej2-data.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-svg-base/dist/global/ej2-svg-base.min.js) -> -> [`https://cdn.syncfusion.com/ej2/32.1.19/ej2-pdf-export/dist/global/ej2-pdf-export.min.js`](https://cdn.syncfusion.com/ej2/32.1.19/ej2-pdf-export/dist/global/ej2-pdf-export.min.js) - -Create a HTML page (**index.html**) in **~/quickstart** location and add the following CDN link references. Now, initiate the **Syncfusion® JavaScript (ES5) TreeMap** control in the **index.html** by using following code. +Alternatively, load all Syncfusion JavaScript components from a single combined bundle: ```html - - - - Essential JS 2 - - - - - - -
      - - - + ``` -> Please replace {RELEASE_VERSION} with the latest version number in the script file referred to in the sample. -**Step 3:** Now, run the index.html in web browser, it will render the Essential® JS 2 TreeMap Component. +> Do not include the combined bundle together with the individual package scripts. + +### Step 3: Add the Syncfusion® TreeMap Control to the Application -The below example shows a basic TreeMap Component. +The `index.html` file contains the TreeMap container and references a separate `index.js` file that contains the component initialization. + +The global scripts added in Step 2 register the `ej.treemap.TreeMap` class in the `ej` namespace. Therefore, no module imports are required. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -202,66 +82,39 @@ The below example shows a basic TreeMap Component. {% include code-snippet/treemap/getting-started-cs1/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs1" %} +The `new ej.treemap.TreeMap({...})` call creates the TreeMap component. The configuration object uses the following key properties: -## Apply color mapping +- [`dataSource`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/index-default#datasource) — Specifies the collection of records displayed by the TreeMap. +- [`weightValuePath`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/index-default#weightvaluepath) — Maps the numeric data field that determines each item's area. +- [`leafItemSettings`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/index-default#leafitemsettings) — Configures the appearance and behavior of leaf items. +- [`labelPath`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/leafitemsettingsmodel#labelpath) — Maps the data field displayed as each leaf item's label. -Use color mapping to visually represent data values with different colors. The TreeMap automatically assigns colors based on the values in your data source. Specify the field to evaluate using the [`equalColorValuePath`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/index-default#equalcolorvaluepath) property for discrete colors or [`rangeColorValuePath`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/index-default#rangecolorvaluepath) for gradient-based color ranges. +Finally, `treemap.appendTo('#container')` renders the component inside the `
      ` element declared in `index.html`. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/treemap/getting-started-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs2" %} +### Step 4: Open the Application in a Browser -## Enable legend +Open `quickstart/index.html` through a local web server. -A legend helps viewers interpret the data represented in the TreeMap. Enable the legend by setting the [`visible`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/legendsettingsmodel#visible) property to `true` in the [`legendSettings`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/legendsettingsmodel) object to display a visual guide for data categories or color ranges. +If you are using the Visual Studio Code **Live Server** extension: -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/treemap/getting-started-cs3/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs3" %} +1. Right-click `index.html` in the Explorer. +2. Select **Open with Live Server**. +3. Open the URL displayed by Live Server, such as `http://127.0.0.1:5500/`. -## Add labels +The browser displays the initialized TreeMap. -Labels display descriptive text directly on TreeMap items, providing immediate context without requiring a legend lookup. Labels are shown by default, but you can customize their visibility and appearance using the [`showLabels`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/leafitemsettingsmodel#showlabels) property in the [`leafItemSettings`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/leafitemsettingsmodel) object. +## Output -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/treemap/getting-started-cs4/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs4" %} +After completing the quick setup, the browser displays a TreeMap. -## Enable tooltip +{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs1" %} -Tooltips provide additional information on demand when users hover over TreeMap items, making them ideal for displaying details that don't fit directly on items. Enable tooltips by setting the [`visible`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/tooltipsettingsmodel#visible) property to `true` in the [`tooltipSettings`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/tooltipsettingsmodel) object. +![Syncfusion TreeMap Quick Start Output](../images/treemap-Ts.png) -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/treemap/getting-started-cs5/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs5" %} +## Troubleshooting + +- **The page is blank.** Open `index.html` through a local web server instead of opening the file directly from the file system. +- **`ej is not defined`.** Ensure that the Syncfusion CDN scripts are loaded before `index.js`. +- **`ej.treemap` is undefined.** Verify that `ej2-treemap.min.js` is loaded after `ej2-base.min.js`, `ej2-data.min.js`, and `ej2-svg-base.min.js`. +- **The TreeMap is empty.** Confirm that `dataSource` contains records and that `weightValuePath` maps to a numeric field in every record. diff --git a/ej2-javascript/treemap/legend.md b/ej2-javascript/treemap/legend.md index a8a3b8163..1a6908442 100644 --- a/ej2-javascript/treemap/legend.md +++ b/ej2-javascript/treemap/legend.md @@ -13,6 +13,37 @@ domainurl: ##DomainURL## Legend is used to provide valuable information for interpreting what the TreeMap displays. The legends can be represented in various colors, shapes or other identifiers based on the data. +## Enable legend + +A legend helps viewers interpret the data represented in the TreeMap. Enable the legend by setting the [`visible`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/legendsettingsmodel#visible) property to `true` in the [`legendSettings`](https://ej2.syncfusion.com/javascript/documentation/api/treemap/legendsettingsmodel) object to display a visual guide for data categories or color ranges. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight js tabtitle="index.ts" %} +{% include code-snippet/treemap/getting-started-cs3/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/treemap/getting-started-cs3/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs3" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/treemap/getting-started-cs3/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/treemap/getting-started-cs3/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs3" %} +{% endif %} + ## Position and alignment Legend position is used to place legend in various positions. Based on the legend position, the legend item will be aligned. For example, if the position is top or bottom, the legend items are placed by rows. If the position is left or right, the legend items are placed by columns. diff --git a/ej2-javascript/treemap/ts/getting-started.md b/ej2-javascript/treemap/ts/getting-started.md index 5b185c1d7..596e8df87 100644 --- a/ej2-javascript/treemap/ts/getting-started.md +++ b/ej2-javascript/treemap/ts/getting-started.md @@ -1,26 +1,38 @@ --- layout: post -title: Getting started with ##Platform_Name## TreeMap Component | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## TreeMap Component of Syncfusion Essential JS 2 and more details. +title: Getting started with ##Platform_Name## TreeMap component | Syncfusion +description: Create and configure a Syncfusion JavaScript TreeMap in TypeScript using the Essential JS 2 webpack quickstart project.. platform: ej2-javascript -control: Getting started +control: TreeMap publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- +# Getting Started with ##Platform_Name## TreeMap Component -# Getting started in ##Platform_Name## TreeMap Component +This document explains how to create a TreeMap and configure its features in TypeScript using the Essential JS 2 webpack [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. -This section explains the steps to create a simple TreeMap and demonstrates the basic usage of the TreeMap component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. +> The quickstart project uses its included `webpack.config.js` file to compile and bundle the TypeScript application. For more information, refer to the [webpack getting-started guide](https://webpack.js.org/guides/getting-started/). -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +## Prerequisites + +Before you begin, ensure that the following software is installed: + +* Node.js with npm +* [Visual Studio Code](https://code.visualstudio.com) or another text editor +* [Git](https://git-scm.com/) for cloning the quickstart repository +* A modern web browser such as Chrome, Edge, Firefox, or Safari + +Basic familiarity with TypeScript, npm, and webpack is recommended. + +> Register your Syncfusion license key before initializing the component. For more information, refer to the [license key registration documentation](https://ej2.syncfusion.com/documentation/licensing/license-key-registration). ## Dependencies -The following list of minimum dependencies are required to use the TreeMap Component: +The TreeMap component is available in the `@syncfusion/ej2-treemap` package. The following packages are its minimum dependencies: -```javascript +```text |-- @syncfusion/ej2-treemap |-- @syncfusion/ej2-base |-- @syncfusion/ej2-data @@ -28,19 +40,36 @@ The following list of minimum dependencies are required to use the TreeMap Compo |-- @syncfusion/ej2-svg-base ``` -## Set up development environment +Compatible package versions are resolved from the project-root `package.json` file. Keep all Syncfusion package versions consistent to avoid dependency conflicts. + +## Quick Setup + +### Step 1: Create a Project Folder -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Create a folder named `my-treemap` in your preferred location. This folder will contain the TreeMap TypeScript project. + +### Step 2: Open a Terminal + +Open a terminal and navigate to the `my-treemap` folder. + +* On Windows, use Command Prompt or PowerShell. +* On macOS or Linux, use Terminal. + +### Step 3: Clone the Quickstart Repository + +Run the following command to clone the Syncfusion JavaScript quickstart project: {% tabs %} {% highlight bash tabtitle="CMD" %} -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart {% endhighlight %} {% endtabs %} -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +### Step 4: Navigate to the Project Folder + +Navigate to the cloned project directory: {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -50,11 +79,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion® JavaScript packages +### Step 5: Install the Required Packages -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. - -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +Run the following command from the project root to install the dependencies listed in `package.json`: {% tabs %} {% highlight bash tabtitle="NPM" %} @@ -64,30 +91,31 @@ npm install {% endhighlight %} {% endtabs %} -## Add TreeMap Component to the project +### Step 6: Update the HTML Template -The Essential® JS2 TreeMap Component can be added to the application. To get started, add the TreeMap Component to the **app.ts** and **index.html** files using the following code. +Open the `ej2-quickstart` folder in Visual Studio Code or another text editor. -Add an HTML div element to act as the TreeMap element in the **index.html** file using the following code. +Locate `src/index.html`. Preserve the existing content generated by the seed project and add a `
      ` element with the ID `container` inside the `` element. {% tabs %} -{% highlight html tabtitle="index.html" %} +{% highlight html tabtitle="src/index.html" %} - EJ2 TreeMap - - - - + Essential JS 2 TreeMap + + + + + - -
      -
      +

      Syncfusion TreeMap

      + +
      @@ -95,180 +123,94 @@ Add an HTML div element to act as the TreeMap element in the **index.html** file {% endhighlight %} {% endtabs %} -Import the TreeMap Component in the `app.ts` to initialize the TreeMap. The following properties are used in this example: +The webpack configuration supplied by the quickstart project compiles the TypeScript entry file and loads the generated bundle in this page. + +### Step 7: Create the TreeMap Component -* [`dataSource`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#datasource): Binds the data array containing hierarchical information about companies and sales. -* [`weightValuePath`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#weightvaluepath): Specifies which data property ("Sales") determines the size of each item in the TreeMap. -* [`leafItemSettings`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#leafitemsettings): Configures the appearance of leaf items (car companies), including label path, border color, and font styling. -* [`levels`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#levels): Defines hierarchical grouping levels. This example groups data by "Continent" and applies border settings. -* [`palette`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#palette): Sets a custom color palette to visualize the items based on their hierarchical position. +Locate `src/app/app.ts` and add the following code: -The TreeMap is rendered using `treemap.appendTo('#container')`, which displays the control within the HTML element with the ID "container". +The following example shows a complete TreeMap with a bound data source: {% tabs %} {% highlight ts tabtitle="app.ts" %} - -import { TreeMap } from '@syncfusion/ej2-treemap'; - -const data: Object[] = [ - { Continent: "China", Company: "Volkswagen", Sales: 3005994 }, - { Continent: "China", Company: "General Motors", Sales: 1230044 }, - { Continent: "China", Company: "Honda", Sales: 1197023 }, - { Continent: "United States", Company: "General Motors", Sales:3042775 }, - { Continent: "United States", Company: "Ford", Sales:2599193 }, - { Continent: "United States", Company: "Toyota", Sales:2449587 }, - { Continent: "Japan",Company: "Toyota", Sales:1527977 }, - { Continent: "Japan", Company: "Honda", Sales:706982 }, - { Continent: "Japan", Company: "Suzuki", Sales:623041 }, - { Continent: "Germany",Company: "Volkswagen", Sales:655977 }, - { Continent: "Germany", Company: "Mercedes", Sales:310845 }, - { Continent: "Germany", Company: "BMW", Sales:261931 }, - { Continent: "United Kingdom", Company: "Ford ", Sales:319442 }, - { Continent: "United Kingdom", Company: "Vauxhall", Sales: 251146 }, - { Continent: "United Kingdom", Company: "Volkswagen", Sales:206994 }, - { Continent: "India", Company: "Maruti Suzuki", Sales:1443654 }, - { Continent: "India", Company: "Hyundai", Sales:476241 }, - { Continent: "India", Company: "Mahindra", Sales:205041 }, - { Continent: "France", Company: "Renault", Sales:408183 }, - { Continent: "France", Company: "Peugeot", Sales:336242 }, - { Continent: "France", Company: "Citroen", Sales:194986 }, - { Continent: "Brazil", Company: "Flat Chrysler", Sales:368842 }, - { Continent: "Brazil", Company: "General Motors", Sales: 348351 }, - { Continent: "Brazil", Company: "Volkswagen", Sales: 245895 }, - { Continent: "Italy", Company: "Flat Chrysler", Sales:386260 }, - { Continent: "Italy", Company: "Volkswagen", Sales: 138984 }, - { Continent: "Italy", Company: "Ford", Sales: 125144 }, - { Continent: "Canada", Company: "Ford", Sales:305086}, - { Continent: "Canada", Company: "FCA", Sales:278011 }, - { Continent: "Canada", Company: "GM", Sales: 266884 } -]; -// Initialize the tree map control -let treemap: TreeMap = new TreeMap({ - dataSource: data, - weightValuePath: 'Sales', - leafItemSettings: { - labelPath: 'Company', - border: { color: 'white', width: 0.5 }, - labelStyle: { - fontFamily: 'Segoe UI' - } - }, - levels: [ - { - groupPath: 'Continent', border: { color: 'white', width: 0.5 }, - } - ], - palette: ['#C33764', '#AB3566', '#993367', '#853169', '#742F6A', '#632D6C', '#532C6D', '#412A6F', '#312870', '#1D2671'], -}); - -// Render the initialized tree map -treemap.appendTo('#container'); - +{% include code-snippet/treemap/getting-started-cs1/index.ts %} {% endhighlight %} {% endtabs %} -This example renders a hierarchical TreeMap with the provided data source. The items are sized proportionally based on their sales values and grouped by continent. +The configuration uses the following properties: + +* [`dataSource`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#datasource) binds the records displayed by the TreeMap. +* [`weightValuePath`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#weightvaluepath) maps the numeric field that determines each item's area. +* [`leafItemSettings`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#leafitemsettings) configures leaf-item labels and appearance. +* [`labelPath`](https://ej2.syncfusion.com/documentation/api/treemap/leafitemsettingsmodel#labelpath) maps the field displayed as each leaf-item label. + +The `appendTo('#container')` call renders the TreeMap in the HTML element whose ID matches the supplied selector. -## Run the application +### Step 8: Run the Application -The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application. +Run the following command from the project root: {% tabs %} {% highlight bash tabtitle="NPM" %} -npm start +npm run start {% endhighlight %} {% endtabs %} -## Module injection - -The TreeMap Component is segregated into individual feature-wise modules. To enable additional functionality beyond basic rendering, inject the required feature modules using the `TreeMap.Inject()` method. The following modules are available: - -* TreeMapHighlight - Inject this provider to use highlight feature. -* TreeMapSelection - Inject this provider to use selection feature. -* TreeMapLegend - Inject this provider to use legend feature. -* TreeMapTooltip - Inject this provider to use tooltip series. - -In current application, the above basic tree map is modified to visualize international airport counts in South America. - -In this demo, the tree map is rendered with labels only. So, you need not to import any modules. - -## Render tree map +Wait for webpack to finish compiling the application. If the browser does not open automatically, open the local URL displayed in the terminal. -This section demonstrates how to render a TreeMap with a bound data source. +The project commonly runs at: -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/treemap/getting-started-cs6/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs6/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs6" %} +```text +http://localhost:4000/ +``` -In this example, the TreeMap is bound to a data source with [`weightValuePath`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#weightvaluepath) set to the count property, which determines item sizes. Customize the appearance of leaf-level items using [`leafItemSettings`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#leafitemsettings), where you can modify properties such as [`fill`](https://ej2.syncfusion.com/documentation/api/treemap/leafitemsettingsmodel#fill) (color), [`border`](https://ej2.syncfusion.com/documentation/api/treemap/leafitemsettingsmodel#border), and [`labelPosition`](https://ej2.syncfusion.com/documentation/api/treemap/leafitemsettingsmodel#labelposition). +The exact port can vary based on the webpack development-server configuration. To stop the development server, press `Ctrl+C` in the terminal. -## Apply color mapping +## Output -The color mapping feature enables customization of item colors based on values from the bound data source. Specify the data field to evaluate using either [`equalColorValuePath`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#equalcolorvaluepath) (for discrete values) or [`rangeColorValuePath`](https://ej2.syncfusion.com/documentation/api/treemap/index-default#rangecolorvaluepath) (for continuous ranges). Choose the appropriate property based on whether your data requires exact value matching or range-based color gradients. +After completing the quick setup, the browser displays a TreeMap. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/treemap/getting-started-cs7/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs7/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs7" %} +{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs1" %} -## Enable legend +![Syncfusion TreeMap Quick Start Output](../images/treemap-Ts.png) -Enable the legend feature by setting the [`visible`](https://ej2.syncfusion.com/documentation/api/treemap/legendsettingsmodel#visible) property to `true` in the [`legendSettings`](https://ej2.syncfusion.com/documentation/api/treemap/legendsettingsmodel) object and injecting the `TreeMapLegend` module using `TreeMap.Inject(TreeMapLegend)`. +## Module Injection +Basic TreeMap rendering and labels do not require feature-module injection. Inject optional modules only when their corresponding features are used. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/treemap/getting-started-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs3" %} - -## Add labels +* `TreeMapHighlight` enables item highlighting. +* `TreeMapSelection` enables item selection. +* `TreeMapLegend` enables legends. +* `TreeMapTooltip` enables tooltips. -Labels display additional information within TreeMap items and are visible by default. Control label visibility using the [`showLabels`](https://ej2.syncfusion.com/documentation/api/treemap/leafitemsettingsmodel#showlabels) property in [`leafItemSettings`](https://ej2.syncfusion.com/documentation/api/treemap/leafitemsettingsmodel). +Import `TreeMap` with the required modules and call `TreeMap.Inject()` before creating the component: -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/treemap/getting-started-cs4/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs4/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs4" %} +```typescript +import { + TreeMap, + TreeMapHighlight, + TreeMapLegend, + TreeMapSelection, + TreeMapTooltip +} from '@syncfusion/ej2-treemap'; -## Enable tooltip +TreeMap.Inject( + TreeMapHighlight, + TreeMapSelection, + TreeMapLegend, + TreeMapTooltip +); +``` -Tooltips provide an alternative way to display information when space constraints prevent labels from showing all details. Enable tooltips by setting the [`visible`](https://ej2.syncfusion.com/documentation/api/treemap/tooltipsettingsmodel#visible) property to `true` in the [`tooltipSettings`](https://ej2.syncfusion.com/documentation/api/treemap/tooltipsettingsmodel) object and injecting the `TreeMapTooltip` module using `TreeMap.Inject(TreeMapTooltip)`. +Inject only the modules required by the application. +## Troubleshooting -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/treemap/getting-started-cs5/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/treemap/getting-started-cs5/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/treemap/getting-started-cs5" %} +* **The repository cannot be cloned.** Verify that Git is installed, confirm the internet connection, and run `git --version`. +* **`npm install` fails.** Verify that Node.js and npm are installed by running `node --version` and `npm --version`. +* **`Cannot find module '@syncfusion/ej2-treemap'`.** Run `npm install @syncfusion/ej2-treemap --save` from the project root. +* **The TypeScript application does not compile.** Ensure that all Syncfusion packages use compatible versions and run `npm run build` to view the complete error. +* **The page is blank.** Check the browser console for errors and confirm that webpack completed the build successfully. +* **The TreeMap is empty.** Confirm that `dataSource` contains records and that `weightValuePath` maps to a numeric field in every record. \ No newline at end of file diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html index fa0055241..4b6f279d8 100644 --- a/ej2-typescript-toc.html +++ b/ej2-typescript-toc.html @@ -1651,6 +1651,7 @@
    • Annotations
    • Animation
    • User Interaction
      • +
    • Title
    • Print and Export
    • Appearance
    • Accessibility
      • From b01695589fb2d8b40e6dbd7246eed2691eae31c3 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 28 Jul 2026 13:43:34 +0530 Subject: [PATCH 22/26] Integrated latest changes at 07-28-2026 1:30:04 PM --- ej2-javascript/avatar/ts/getting-started.md | 126 +++++----- ej2-javascript/card/ts/getting-started.md | 138 +++++------ .../check-box/ts/getting-started.md | 138 +++-------- .../common/getting-started-cs1/index.ts | 9 +- .../color-picker/ts/getting-started.md | 137 +++-------- .../js/getting-started/images/quickstart.png | Bin 27014 -> 23290 bytes .../js/getting-started/quick-start.md | 75 +++--- .../maskedtextbox/ts/getting-started.md | 135 +++-------- .../numerictextbox/ts/getting-started.md | 177 +++----------- .../otp-input/ts/getting-started.md | 113 +++------ .../range-slider/ts/getting-started.md | 124 +++------- ej2-javascript/rating/ts/getting-started.md | 132 +++-------- .../signature/ts/getting-started.md | 113 +++------ ej2-javascript/switch/ts/getting-started.md | 131 +++-------- ej2-javascript/textarea/ts/getting-started.md | 222 +++--------------- ej2-javascript/textbox/ts/getting-started.md | 159 +++---------- ej2-javascript/timeline/ts/getting-started.md | 137 +++++------ ej2-javascript/uploader/ts/getting-started.md | 173 ++++---------- 18 files changed, 687 insertions(+), 1552 deletions(-) diff --git a/ej2-javascript/avatar/ts/getting-started.md b/ej2-javascript/avatar/ts/getting-started.md index f39649f49..b4677d57e 100644 --- a/ej2-javascript/avatar/ts/getting-started.md +++ b/ej2-javascript/avatar/ts/getting-started.md @@ -1,67 +1,64 @@ --- layout: post -title: Getting started with ##Platform_Name## Avatar control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more details. +title: Getting started with Avatar control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Avatar +control: Getting started publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## Avatar control -This section explains how to create a simple Avatar control and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +# Getting started in ##Platform_Name## Avatar control -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). +This section explains the steps to create a simple Avatar and demonstrates the basic usage of the Avatar component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -## Dependencies +> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -Install the following required dependent packages to render the avatar control. +## Prerequisites -```javascript -|-- @syncfusion/ej2-layouts -``` - -## Set up development environment +Ensure the following tools are installed on your machine: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® TypeScript Avatar packages -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the @syncfusion/ej2-layouts package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-layouts --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -76,54 +73,55 @@ npm install @syncfusion/ej2-fluent2-theme --save The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight bash tabtitle="styles.css" %} +{% highlight css tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/avatar/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add avatar into the application +## Add Syncfusion® Avatar control to the application -Add an HTML span element with `e-avatar` class into your `index.html`. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` +In this article, the Avatar control is used as an example. Add the following Avatar element to the `~/src/index.html` file. -{% tabs %} -{% highlight html tabtitle="index.html" %} +```html + + -GR + + Essential JS 2 + + + -{% endhighlight %} -{% endtabs %} + +
      + +
      + + -## Run the application + + ``` -Run the application in the browser using the following command. +## Run the application -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic avatar component. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/avatar/getting-started-cs1/index.html %} -{% endhighlight %} -{% highlight css tabtitle="index.css" %} -{% include code-snippet/avatar/getting-started-cs1/index.css %} -{% endhighlight %} -{% endtabs %} - +``` + {% previewsample "page.domainurl/code-snippet/avatar/getting-started-cs1" %} -## See Also +## See also -[Types of Avatar](./types) +* [How to register Syncfusion® license key in TypeScript(ES6) application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) \ No newline at end of file diff --git a/ej2-javascript/card/ts/getting-started.md b/ej2-javascript/card/ts/getting-started.md index 8e228ed0c..4c1698991 100644 --- a/ej2-javascript/card/ts/getting-started.md +++ b/ej2-javascript/card/ts/getting-started.md @@ -1,67 +1,64 @@ --- layout: post -title: Getting started with ##Platform_Name## Card control | Syncfusion +title: Getting started with Card control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Card control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Card +control: Getting started publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Card control - -This section explains how to create a simple **Card** using styles by configuring the structure for the header, content, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. - -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -## Dependencies +# Getting started in ##Platform_Name## Card control -The Card is pure CSS component so no other package dependencies are needed to render the Card. +This section explains the steps to create a simple Card and demonstrates the basic usage of the Card component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -```js -|-- @syncfusion/ej2-layouts -``` +> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -## Set up development environment +## Prerequisites -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Ensure the following tools are installed on your machine: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® TypeScript Card packages -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the @syncfusion/ej2-layouts package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-layouts --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -76,72 +73,57 @@ npm install @syncfusion/ej2-fluent2-theme --save The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight bash tabtitle="styles.css" %} +{% highlight css tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/card/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding a simple Card - -* Add the HTML `div` element with `e-card` class into your `index.html`. +## Add Syncfusion® Card control to the application -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} - -
      - Sample Card -
      - -{% endhighlight %} -{% endtabs %} +In this article, the Card control is used as an example. Add the following Card element to the `~/src/index.html` file. -## Adding a header and content +```html + + -You can create Card with a header in a specific structure. For adding header you need to create a `div` element with `e-card-header` class added. + + Essential JS 2 + + + -* You can include heading inside the Card header by adding a `div` element with `e-card-header-caption` class, and also content will be added by adding element with `e-card-content`. For detailed information, refer to the [Header and Content](./header-content). - -{% tabs %} -{% highlight html tabtitle="index.html" %} - -
      --> Root Element -
      --> Root Header Element -
      --> Root Heading Element -
      --> Heading Title Element + +
      +
      +
      +
      Welcome
      -
      --> Card content Element +
      +
      + This is a simple card component.
      + -{% endhighlight %} -{% endtabs %} + + ``` -* Now, run the application in the browser using the following command. +## Run the application -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -Output will be as follows: - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/card/card-header-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - +``` + {% previewsample "page.domainurl/code-snippet/card/card-header-cs1" %} -## See Also +## See also -* [How to add a header and content](./header-content) \ No newline at end of file +* [How to register Syncfusion® license key in TypeScript(ES6) application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) \ No newline at end of file diff --git a/ej2-javascript/check-box/ts/getting-started.md b/ej2-javascript/check-box/ts/getting-started.md index aa0e48394..4e2475e16 100644 --- a/ej2-javascript/check-box/ts/getting-started.md +++ b/ej2-javascript/check-box/ts/getting-started.md @@ -15,52 +15,47 @@ This section explains how to create a simple CheckBox control and configure its > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following dependencies are required to use the CheckBox component in your application: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-base -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Check box package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-popups` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-popups --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Check box CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -79,22 +74,21 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/check-box/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add CheckBox to the project +## Add Syncfusion® Check box control to the application -Add the HTML input tag with an id attribute as the `element` to your `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -`[src/index.html]` +In this article, the Check box control is used as an example. Add the following element to the `~/src/index.html` file. -{% tabs %} -{% highlight html tabtitle="index.html" %} +```html @@ -102,32 +96,21 @@ Add the HTML input tag with an id attribute as the `element` to your `index.html Essential JS 2 - - - - -
      +
      - + ``` -{% endhighlight %} -{% endtabs %} - -Import the CheckBox component in your `app.ts` file and initialize it with the `#element` selector as shown below. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Check box control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { CheckBox } from '@syncfusion/ej2-buttons'; // Initialize CheckBox component. @@ -135,61 +118,14 @@ let checkbox: CheckBox = new CheckBox({ label: 'Default' }); // Render initialized CheckBox. checkbox.appendTo('#element'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic CheckBox component. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/check-box/getting-started-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/check-box/getting-started-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/check-box/getting-started-cs2/styles.css %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/check-box/getting-started-cs2" %} - -## Change the CheckBox state - -The Essential® JS 2 CheckBox contains 3 different states visually, they are: -* Checked -* Unchecked -* Indeterminate - -The CheckBox [`checked`](https://ej2.syncfusion.com/documentation/api/check-box/index-default#checked) property manages the checked and unchecked states. When checked, a tick mark appears in the CheckBox visualization. - -### Indeterminate - -The CheckBox indeterminate state can be set through [`indeterminate`](https://ej2.syncfusion.com/documentation/api/check-box/index-default#indeterminate) property. CheckBox indeterminate state masks the real value of CheckBox visually. The Checkbox cannot be changed to indeterminate state through the user interface, this state can be achieved only through the property. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/check-box/state-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/check-box/state-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/check-box/state-cs2/styles.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/check-box/state-cs2" %} diff --git a/ej2-javascript/code-snippet/common/getting-started-cs1/index.ts b/ej2-javascript/code-snippet/common/getting-started-cs1/index.ts index 5eff850b5..e506ce931 100644 --- a/ej2-javascript/code-snippet/common/getting-started-cs1/index.ts +++ b/ej2-javascript/code-snippet/common/getting-started-cs1/index.ts @@ -1,4 +1,3 @@ - import { Grid } from '@syncfusion/ej2-grids'; // Grid data @@ -24,10 +23,10 @@ import { Grid } from '@syncfusion/ej2-grids'; let grid: Grid = new Grid({ dataSource: data, columns: [ - { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' }, - { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }, - { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' }, - { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' } + { field: 'OrderID', headerText: 'Order ID', width: 120, type: 'number', textAlign: 'Center' }, + { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string', textAlign: 'Center' }, + { field: 'Freight', headerText: 'Freight', width: 120, format: 'C', textAlign: 'Center' }, + { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'M/d/yyyy', type: 'date', textAlign: 'Center' } ] }); diff --git a/ej2-javascript/color-picker/ts/getting-started.md b/ej2-javascript/color-picker/ts/getting-started.md index 7c0dd884e..2f618b978 100644 --- a/ej2-javascript/color-picker/ts/getting-started.md +++ b/ej2-javascript/color-picker/ts/getting-started.md @@ -15,55 +15,47 @@ This section explains how to create a simple ColorPicker component and configure > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the ColorPicker component in your application. +Ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-splitbuttons -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Color picker package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-inputs` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-inputs --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Color picker CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -82,112 +74,59 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/color-picker/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add ColorPicker to the project - -Add the HTML input tag with ID attribute as the `element` to your `index.html` file. +## Add Syncfusion® Color picker control to the application -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Color picker control is used as an example. Add the following element to the `~/src/index.html` file. +```html - Essential JS 2 ColorPicker + Essential JS 2 - - - - -
      +
      - + ``` -{% endhighlight %} -{% endtabs %} +To render the Color picker control, add the following JavaScript code to the `~/src/app/app.ts` file -Then, import the ColorPicker component in your `app.ts` file and initialize it with the `#element`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { ColorPicker } from '@syncfusion/ej2-inputs'; // Initializes the ColorPicker component let colorPicker: ColorPicker = new ColorPicker({}, '#element'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example demonstrates a default ColorPicker component. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/colorpicker/getting-started/default-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/colorpicker/getting-started/default-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/colorpicker/getting-started/default-cs2/styles.css %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/colorpicker/getting-started/default-cs2" %} -## Inline type - -By default, the ColorPicker is rendered using SplitButton and opens a pop-up to access the color picker. To render the ColorPicker container alone and access it directly, set the [`inline`](../api/color-picker#inline) property to `true`. - -The following example demonstrates inline type rendering of the ColorPicker. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/colorpicker/getting-started/inline-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/colorpicker/getting-started/inline-cs1/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/colorpicker/getting-started/inline-cs1/styles.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/colorpicker/getting-started/inline-cs1" %} - ->> The `showButtons` property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the [`showButtons`](https://ej2.syncfusion.com/documentation/color-picker/how-to/hide-control-buttons) sample. ## See Also diff --git a/ej2-javascript/js/getting-started/images/quickstart.png b/ej2-javascript/js/getting-started/images/quickstart.png index 81941cf5fc829191236264be417d095d3b29fbff..2c825d189c59b471481cce09bc66f32b3a064031 100644 GIT binary patch literal 23290 zcmdqI2T)V#`#&1j@50vxA|fDd7X*|ly%Sdvlq$W0CKTztm*BcehXn+rD+ow8)KG&; zh;-?lNJ0pqhZZ0t`5)B%mANx_?%bLC``>#r!{j6+dCz&z^FGg~Ja6nHeXUF9ub&5j zK$jjq&@cjl7-1mL8T)@T0PpDAGF$N9&|dEyKp?B+hZ=vF1lw&;VF{*$kekO~o8~JW+Bd|CmAxmGEyUgupv_}b7ljOGBt@)u?!1{E8yfni zGa>eDk3(m=ZJFsKHknzW{I~uq&vw<)6a0&6QdWzaVe5Q#2QzM4(`PS!8z2aH^z2qQ zOwy#D7wmToQPj6`dw>UUx~GqC0vq%P3O|lP+rt7!7k(UnWw-%5^W$(PYDx0P(H*Y8 zPfo8BcsxCuiu`c|^0>3Z{^Rh?r3bWMejL`H>9PND6ea)L|GR(mnVUY%E`(sQNBu}B z^!u16g3H{D`xQyDP$l;g5&p%?>xv%&q1-z1Quy9tMQX1fY0671rZuwc#C9-? z)o*h(VJO1GE0@-^$LcAbNek3b4R$7~VU9XweAchQkP7|L=7oo8XNSoRXza)PWtfdz zB`Lz-ukhc<%~OX1YEmcq1K`)GO$G5uHT^VX_Syj@tVU8ft)OOem@{IlxZq#k=d!aQ zTSiGqDa+HnCmphGiD8?CdEbh7H^H+DrB0H&caO$XT5A<}Dfq=H`6Jg#{eqyJ){``6 z?4oIe;mK`&e)b{ydMPPU<+xCWY;#pqcpyyGPKE4RnQy*3X8kFh&pr0n3UW8z0ap_# z5P7^yz&%q*O>9cBzl!^+pnz_qpP1?H*1VheR6TWK;BeZmsFzD#G4Wpw@R->v#`+T*u&`R^T8^JD+Igg%NNuaIJt~sF-LT` zf*mh!V*D2D(Q%Ws5@#A;8y`FD02h2@&;p_Hu=qStJXq$7A8g%BPznm{_M^W>bc$sq zVlZsOtz9jNMGw} zP|XGHb9((R=_Q7ZDY7&L}LpG5tYN&$Ny?>KJ1QtP71zIy5PAGzE
        j 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 literal 27014 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 diff --git a/ej2-javascript/js/getting-started/quick-start.md b/ej2-javascript/js/getting-started/quick-start.md index 98d794d30..1dc57a12f 100644 --- a/ej2-javascript/js/getting-started/quick-start.md +++ b/ej2-javascript/js/getting-started/quick-start.md @@ -1,50 +1,52 @@ --- layout: post title: Quick start with ##Platform_Name## Getting started control | Syncfusion -description: Checkout and learn about Quick start with ##Platform_Name## Getting started control of Syncfusion Essential JS 2 and more details. +description: Checkout and learn about Quick start with ##Platform_Name## Getting started control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Quick start +control: Quick start publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- - + # Getting Started with Syncfusion® JavaScript (ES5) UI Controls - -Build your first Syncfusion JavaScript (ES5) application with a simple Grid control in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Grid from the CDN, initializes it with sample data, and renders a responsive data table. The example uses CDN version `34.1.29` and the `bootstrap5.3` theme; substitute the version that matches your target release. - - + +Build your first Syncfusion JavaScript (ES5) application with a simple Grid control in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Grid from the CDN, initializes it with sample data, and renders a data table. The example uses CDN version `34.1.29` and the `bootstrap5.3` theme; substitute the version that matches your target release. + + ## Prerequisites * [Visual Studio Code](https://code.visualstudio.com) (or any text editor) to create the HTML file * A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result - +* An active internet connection to load the Syncfusion CDN resources + ## Quick Setup - + ### Step 1: Create a Folder and HTML File - + * Create a folder named `quickstart` in your desired directory. * Inside the `quickstart` folder, create a new file named `index.html`. - -### Step 2: Add Syncfusion® CDN Resources - -Include the following CSS and JavaScript links in the `` section of `index.html`. The `ej2-base`, `ej2-data`, and `ej2-popups` scripts are required dependencies of the Grid component. - + +### Step 2: Add Syncfusion® CSS Styles and Scripts + + +Include the following CSS from `UNPKG` and JavaScript links in the `` section of `index.html`. The `ej2-base`, `ej2-data`, and `ej2-popups` scripts are required dependencies of the Grid component. Advanced Grid features such as paging, filtering, sorting, and column menus require additional dependency scripts (for example, `ej2-buttons`, `ej2-navigations`, `ej2-dropdowns`, `ej2-lists`, `ej2-inputs`, and `ej2-calendars`). + **Styles (CSS):** +```text +https://unpkg.com/@syncfusion/ej2-base@34.1.29/styles/bootstrap5.3.css +https://unpkg.com/@syncfusion/ej2-grids@34.1.29/styles/bootstrap5.3.css ``` -https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/styles/bootstrap5.3.css -https://cdn.syncfusion.com/ej2/34.1.29/ej2-grids/styles/bootstrap5.3.css -``` - + **Scripts (JavaScript):** -``` +```html https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/dist/global/ej2-base.min.js https://cdn.syncfusion.com/ej2/34.1.29/ej2-data/dist/global/ej2-data.min.js https://cdn.syncfusion.com/ej2/34.1.29/ej2-popups/dist/global/ej2-popups.min.js https://cdn.syncfusion.com/ej2/34.1.29/ej2-grids/dist/global/ej2-grids.min.js ``` -### Step 3: Add the Syncfusion® Control to the Application +### Step 3: Add the Syncfusion® Grid Control to the Application Copy and paste the following complete code into your `index.html` file: @@ -54,20 +56,20 @@ Copy and paste the following complete code into your `index.html` file: Syncfusion Grid - Quick Start - - - + + + - +

        Syncfusion Grid

        - + - + -
        +
        + ``` -{% endhighlight %} -{% endtabs %} - -Then, import the TextArea control in your `app.ts` file and initialize it with the `#default` element. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the TextArea control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { TextArea } from "@syncfusion/ej2-inputs"; // Initializes the TextArea control @@ -140,137 +118,15 @@ let textareaObj: TextArea = new TextArea(); // Render initialized TextArea. textareaObj.appendTo("#default"); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic TextArea control. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/textarea/default-textarea-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/textarea/default-textarea-cs1/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/textarea/default-textarea-cs1/index.css %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/textarea/default-textarea-cs1" %} - -## Getting and setting values - -To set the initial value of the TextArea Control, you can utilize the [value](https://ej2.syncfusion.com/documentation/api/textarea/index-default#value) property. Here's how you can achieve it: - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { TextArea } from '@syncfusion/ej2-inputs'; - -// initializes the TextArea Control -let textareaObj: TextArea = new TextArea({ - // sets value to the TextArea - value: 'Comments' -}); -// Append the component to the target element -textareaObj.appendTo('#default'); - -{% endhighlight %} -{% endtabs %} - -* You can also set the value by enclosing the desired text within the opening and closing tags of the textarea element. - -{% tabs %} -{% highlight ts tabtitle="app.html" %} - -// initializes the TextArea Control - - -{% endhighlight %} -{% endtabs %} - -* Alternatively, you can set the value to the textarea element by assigning text to the `value` property using the textarea instance. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { TextArea } from '@syncfusion/ej2-inputs'; - -// initializes the TextArea Control -let textareaObj: TextArea = new TextArea(); -textareaObj.appendTo('#default'); -// Set value to the TextArea Control -textareaObj.value = 'comments'; - -{% endhighlight %} -{% endtabs %} - -* You can dynamically retrieve the value of the TextArea Control using the `value` property from the TextArea Control instance. - -`[src/index.html]` - -{% tabs %} -{% highlight ts tabtitle="app.html" %} - -// initializes the TextArea Control -
        - - -
        - -{% endhighlight %} -{% endtabs %} - -`[src/index.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { TextArea } from '@syncfusion/ej2-inputs'; - -// initializes the TextArea Control -let textareaObj: TextArea = new TextArea(); -textareaObj.appendTo('#default'); -// gets value from TextArea Control instance -document.getElementById('valuebtn').onclick = function () { - let textareaValue = textareaObj.value; -} - -{% endhighlight %} -{% endtabs %} - -* You can retrieve the value of the TextArea by accessing it as an argument from the [change](https://ej2.syncfusion.com/documentation/api/textarea/index-default#change) event. - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { TextArea, ChangedEventArgs } from '@syncfusion/ej2-inputs'; - -// initializes the TextArea Control -let textareaObj: TextArea = new TextArea({ - change: (args: ChangedEventArgs )=> { - // Get the value of the TextArea from the arguments - console.log(args.value); - } -}); -textareaObj.appendTo('#default'); -// Set value to the TextArea Control -textareaObj.value = 'comments'; - -{% endhighlight %} -{% endtabs %} diff --git a/ej2-javascript/textbox/ts/getting-started.md b/ej2-javascript/textbox/ts/getting-started.md index 56814977c..897e91350 100644 --- a/ej2-javascript/textbox/ts/getting-started.md +++ b/ej2-javascript/textbox/ts/getting-started.md @@ -16,54 +16,47 @@ This section explains how to create a simple TextBox component and configure its > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the TextBox component in your application. +Ensure the following tools are installed on your machine: -```js +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -|-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-base +## Set up the development environment -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® TextBox package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-inputs` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-inputs --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® TextBox CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -82,49 +75,42 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/textbox/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding TextBox to the application - -Add an HTML input element with the `e-input` class to your `index.html` file. +## Add Syncfusion® TextBox control to the application -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the TextBox control is used as an example. Add the following input element to the `~/src/index.html` file. +```html - Essential JS 2 TextBox + Essential JS 2 - - - - -
        +
        + ``` -{% endhighlight %} +To render the TextBox control, add the following JavaScript code to the `~/src/app/app.ts` file -{% highlight html tabtitle="index.ts" %} - -``` +```ts import { TextBox } from '@syncfusion/ej2-inputs' let input: TextBox = new TextBox({ @@ -134,87 +120,16 @@ Add an HTML input element with the `e-input` class to your `index.html` file. input.appendTo('#firstName'); ``` -{% endhighlight %} -{% endtabs %} - -## Adding icons to the TextBox - -You can create a TextBox with icon as a group by creating the parent div element with the class `e-input-group` and add the icon element as span with the class `e-input-group-icon`. For detailed information, refer to the [Groups](./groups) section. - -{% tabs %} -{% highlight html tabtitle="index.html" %} - - -
        - -
        - -{% endhighlight %} -{% highlight html tabtitle="index.ts" %} -``` - import { TextBox } from '@syncfusion/ej2-inputs'; - +## Run the application - let iconTextBox: TextBox = new TextBox({ - placeholder: 'Enter Date', - created: createHandler, - }); - iconTextBox.appendTo('#textbox'); - - function createHandler() { - iconTextBox.addIcon('append', 'e-icons e-date-range'); - } +Now, run the application in the browser using the following command. ``` -{% endhighlight %} -{% endtabs %} - -* Now, run the application in the browser using the following command. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - npm start - -{% endhighlight %} -{% endtabs %} - -Output will be as follows: - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/textbox/icon-samples-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/textbox/icon-samples-cs3/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/textbox/icon-samples-cs3/index.css %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/textbox/icon-samples-cs3" %} -## Floating label - -The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. - -You can create the floating label TextBox by using the [floatLabelType](https://ej2.syncfusion.com/documentation/api/textbox/index-default#floatlabeltype) API. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/textbox/textbox-component-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/textbox/textbox-component-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/textbox/textbox-component-cs2/index.css %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/textbox/textbox-component-cs2" %} - ## See Also * [How to render TextBox programmatically](./how-to/add-textbox-programmatically) diff --git a/ej2-javascript/timeline/ts/getting-started.md b/ej2-javascript/timeline/ts/getting-started.md index f81dd76e1..fdd30e94f 100644 --- a/ej2-javascript/timeline/ts/getting-started.md +++ b/ej2-javascript/timeline/ts/getting-started.md @@ -1,68 +1,64 @@ --- layout: post -title: Getting started with ##Platform_Name## Timeline control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Timeline control of Syncfusion Essential JS 2 and more. +title: Getting started with Timeline control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## Timeline control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Timeline +control: Getting started publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started with ##Platform_Name## Timeline control -This section explains how to create a simple Timeline control and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +# Getting started in ##Platform_Name## Timeline control -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). +This section explains the steps to create a simple Timeline and demonstrates the basic usage of the Timeline component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -## Dependencies +> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -The following dependencies are required to use the Timeline control in your application: +## Prerequisites -```js -|-- @syncfusion/ej2-layouts - |-- @syncfusion/ej2-base -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Ensure the following tools are installed on your machine: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® TypeScript Timeline packages -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the @syncfusion/ej2-layouts package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-layouts --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -77,87 +73,62 @@ npm install @syncfusion/ej2-fluent2-theme --save The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight bash tabtitle="styles.css" %} +{% highlight css tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/timeline/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Timeline control to the application - -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +## Add Syncfusion® Timeline control to the application -Add the HTML div tag with the `id` attribute as `timeline` to your `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Timeline control is used as an example. Add the following Timeline element to the `~/src/index.html` file. +```html - - Essential JS 2 - Timeline + + Essential JS 2 - - - - - + - +
        - - - -{% endhighlight %} -{% endtabs %} - -Import the Timeline control in your `app.ts` file, define the items using [items](../api/timeline#items) property, and initialize it with `#timeline`. + -`[src/app/app.ts]` + +``` -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Timeline control, add the following TypeScript code to the `~/src/app/app.ts` file +```ts import { Timeline } from '@syncfusion/ej2-layouts'; let timeline: Timeline = new Timeline({ - items: [{}, {}, {}, {}], + items: [{}, {}, {}], }); timeline.appendTo("#timeline"); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser by using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start +``` + +{% previewsample "page.domainurl/code-snippet/timeline/getting-started" %} -{% endhighlight %} -{% endtabs %} - -The following example demonstrates the usage of a basic Timeline control. +## See Also -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/timeline/getting-started/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/timeline/getting-started/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/timeline/getting-started" %} \ No newline at end of file +* [How to register Syncfusion® license key in TypeScript application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) \ No newline at end of file diff --git a/ej2-javascript/uploader/ts/getting-started.md b/ej2-javascript/uploader/ts/getting-started.md index 660aad9ad..4406fa007 100644 --- a/ej2-javascript/uploader/ts/getting-started.md +++ b/ej2-javascript/uploader/ts/getting-started.md @@ -9,62 +9,57 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Uploader control -This section explains how to create a simple Uploader component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +# Getting started in ##Platform_Name## Uploader control -## Dependencies +This section explains the steps to create a simple Uploader and demonstrates the basic usage of the Uploader component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -The following are the dependencies required to use the uploader component in your application: +> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -```js -|-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons +## Prerequisites -``` +Ensure the following tools are installed on your machine: -## Set up development environment +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® TypeScript Uploader packages -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the @syncfusion/ej2-Uploader package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-inputs --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -81,56 +76,42 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/uploader/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the uploader +## Add Syncfusion® Uploader control to the application -The uploader can be initialized through an input tag. Add an HTML input element to be initialized as an uploader in your `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Uploader control is used as an example. Add the following Uploader element to the `~/src/index.html` file. +```html - Essential JS 2 Uploader component + Essential JS 2 - - - -
        +
        - +
        - + ``` -{% endhighlight %} -{% endtabs %} - -> The [Custom Resource Generator (CRG)](https://crg.syncfusion.com/) is an online web tool, which can be used to generate the custom script and styles for a set of specific components. -> This web tool is useful to combine the required component scripts and styles in a single file. - -Now, import the uploader component in your `app.ts` file and initialize it with the `#uploader` element. +To render the Uploader control, add the following TypeScript code to the `~/src/app/app.ts` file -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { Uploader } from '@syncfusion/ej2-inputs'; @@ -140,37 +121,17 @@ let uploadObject: Uploader = new Uploader(); // render initialized Uploader uploadObject.appendTo('#uploader'); -{% endhighlight %} -{% endtabs %} - -## Run the application - -After completing the configuration to render the basic uploader, run the following command to display the output in your default browser. -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm run start - -{% endhighlight %} -{% endtabs %} +``` -> From v16.2.41 version, the **Essential® JS2 AJAX** library has been integrated for uploader server requests. Hence, use the third party `promise` library like blue-bird to use the uploader in Internet Explorer. +## Run the application -The following example demonstrates the output in your browser. +Now, run the application in the browser using the following command. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/uploader/getting-started-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/uploader/getting-started-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/uploader/getting-started-cs2/index.css %} -{% endhighlight %} -{% endtabs %} - +``` +npm start +``` + {% previewsample "page.domainurl/code-snippet/uploader/getting-started-cs2" %} ## Adding drop area @@ -178,61 +139,27 @@ The following example demonstrates the output in your browser. By default, the uploader component allows to upload files by drag the files from file explorer, and drop into the drop area. You can configure any other external element as drop target using [dropArea](https://ej2.syncfusion.com/documentation/api/uploader/index-default#droparea) property. In the following sample, drop target is configured. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/uploader/drop-area-cs4/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/uploader/drop-area-cs4/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/uploader/drop-area-cs4/index.css %} -{% endhighlight %} -{% endtabs %} {% previewsample "page.domainurl/code-snippet/uploader/drop-area-cs4" %} ## Configure asynchronous settings The uploader component process the files to upload in Asynchronous mode by default. Define the properties [saveUrl](https://ej2.syncfusion.com/documentation/api/uploader/asyncsettingsmodel#saveurl) and [removeUrl](https://ej2.syncfusion.com/documentation/api/uploader/asyncsettingsmodel#removeurl) to handle the save and remove action as follows. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/uploader/async-settings-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/uploader/async-settings-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/uploader/async-settings-cs2/index.css %} -{% endhighlight %} -{% endtabs %} - + {% previewsample "page.domainurl/code-snippet/uploader/async-settings-cs2" %} ## Handle success and failed upload You can handle the success and failure actions using the [success](https://ej2.syncfusion.com/documentation/api/uploader/index-default#success) and [failure](https://ej2.syncfusion.com/documentation/api/uploader/index-default#failure)  events. To handle these event, define the function and assign it to corresponding event as follows. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/uploader/success-failed-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/uploader/success-failed-cs2/index.html %} -{% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/uploader/success-failed-cs2/index.css %} -{% endhighlight %} -{% endtabs %} {% previewsample "page.domainurl/code-snippet/uploader/success-failed-cs2" %} -> You can also explore [TypeScript File Upload](https://www.syncfusion.com/javascript-ui-controls/js-file-upload) feature tour page for its groundbreaking features. You can also explore our [TypeScript File Upload example](https://ej2.syncfusion.com/demos/#/material/uploader/default.html) that shows how to render the file upload and browse the files which you want to upload to the server. +## Registering Syncfusion license + +* [How to register Syncfusion® license key in TypeScript application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) ## See Also * [How to add additional data on upload](./how-to/add-additional-data-on-upload) * [Achieve file upload programmatically](./how-to/achieve-file-upload-programmatically) -* [Achieve invisible upload](./how-to/achieve-invisible-upload) +* [Achieve invisible upload](./how-to/achieve-invisible-upload) \ No newline at end of file From 2bca07f2bfe52229884c80281a0547e1063f4f4f Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 29 Jul 2026 13:47:21 +0530 Subject: [PATCH 23/26] Integrated latest changes at 07-29-2026 1:30:04 PM --- .../accordion/ts/getting-started.md | 147 ++-- ej2-javascript/appbar/ts/getting-started.md | 108 +-- .../auto-complete/ts/getting-started.md | 124 ++-- ej2-javascript/badge/ts/getting-started.md | 98 +-- .../js/real-time-collaboration.md | 645 +++++++++++++----- .../ts/real-time-collaboration.md | 554 +++++++++------ .../breadcrumb/ts/getting-started.md | 164 ++--- .../button-group/getting-started.md | 97 ++- ej2-javascript/button/ts/getting-started.md | 104 ++- ej2-javascript/calendar/ts/getting-started.md | 111 ++- ej2-javascript/carousel/ts/getting-started.md | 147 ++-- ej2-javascript/chips/ts/getting-started.md | 99 ++- .../combo-box/ts/getting-started.md | 128 ++-- .../datepicker/ts/getting-started.md | 114 ++-- .../daterangepicker/js/es5-getting-started.md | 2 +- .../daterangepicker/ts/getting-started.md | 117 ++-- .../datetimepicker/js/es5-getting-started.md | 2 +- .../datetimepicker/ts/getting-started.md | 118 ++-- ej2-javascript/diagram/js/getting-started.md | 2 +- ej2-javascript/diagram/ts/getting-started.md | 8 - .../ts/getting-started.md | 103 ++- .../in-place-editor/ts/getting-started.md | 194 ++---- ej2-javascript/list-box/ts/getting-started.md | 113 ++- ej2-javascript/listview/ts/getting-started.md | 155 ++--- .../images/getting-started.png | Bin 0 -> 11810 bytes .../markdown-editor/js/getting-started.md | 51 +- .../markdown-editor/ts/getting-started.md | 69 +- ej2-javascript/mention/ts/getting-started.md | 121 ++-- ej2-javascript/menu/ts/getting-started.md | 134 ++-- ej2-javascript/message/ts/getting-started.md | 108 ++- .../ts/getting-started.md | 121 ++-- .../progress-button/ts/getting-started.md | 102 ++- .../radio-button/ts/getting-started.md | 101 ++- .../images/getting-started.png | Bin 0 -> 11810 bytes .../rich-text-editor/js/getting-started.md | 56 +- .../rich-text-editor/ts/getting-started.md | 81 ++- ej2-javascript/skeleton/ts/getting-started.md | 110 ++- .../speed-dial/ts/getting-started.md | 100 ++- .../split-button/ts/getting-started.md | 98 ++- ej2-javascript/stepper/ts/getting-started.md | 142 ++-- ej2-javascript/tab/ts/getting-started.md | 222 ++---- .../timepicker/js/es5-getting-started.md | 2 +- .../timepicker/ts/getting-started.md | 116 ++-- ej2-javascript/toolbar/ts/getting-started.md | 117 ++-- 44 files changed, 2320 insertions(+), 2985 deletions(-) create mode 100644 ej2-javascript/markdown-editor/images/getting-started.png create mode 100644 ej2-javascript/rich-text-editor/images/getting-started.png diff --git a/ej2-javascript/accordion/ts/getting-started.md b/ej2-javascript/accordion/ts/getting-started.md index da43463fb..8b58efb4a 100644 --- a/ej2-javascript/accordion/ts/getting-started.md +++ b/ej2-javascript/accordion/ts/getting-started.md @@ -16,52 +16,47 @@ configure the Accordion items using Essential® This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the Accordion component in your application. +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base -``` - -## Set up development environment +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +## Set up the development environment -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Accordion package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-navigations` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-navigations --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Accordion CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -80,56 +75,42 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/accordion/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the Accordion using Items - -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +## Add Syncfusion® Accordion control to the application -The Accordion can be rendered by defining an array of [`items`](../api/accordion#items). +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -* Add the HTML div tag with its `id` attribute as `element` in your `index.html` file to initialize the Accordion. +In this article, the Accordion control is used as an example. Add the following element to the `~/src/index.html` file. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +```html - Essential JS 2 Accordion + Essential JS 2 - - - - -
        +
        -{% endhighlight %} -{% endtabs %} + ``` -* Import the Accordion component to your `app.ts` file and initialize it to the `#element` as shown below. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Accordion control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { Accordion } from '@syncfusion/ej2-navigations'; // Initialize Accordion component @@ -143,70 +124,20 @@ let accordion: Accordion = new Accordion({ // Render initialized Accordion accordion.appendTo('#element'); +``` -{% endhighlight %} -{% endtabs %} - -* Run the application in the browser using the following command. +## Run the application -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} +``` Output will be as follows: - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/accordion/accordion-cs7/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/accordion/accordion-cs7/index.html %} -{% endhighlight %} -{% endtabs %} {% previewsample "page.domainurl/code-snippet/accordion/accordion-cs7" %} -> In the above sample code, `#element` is the `id` of the HTML element in a page to which the Accordion is initialized. - -## Initialize the Accordion using HTML elements - -The Accordion component can be rendered based on the given HTML element using `id` as `target` property. -You need to follow the below structure of HTML elements to render the Accordion. - -{% tabs %} -{% highlight html tabtitle="index.html" %} - -
        --> Root Accordion Element -
        --> Accordion Item Container -
        --> Accordion Header Container -
        --> Accordion Header -
        -
        --> Accordion Panel Container -
        --> Accordion Content -
        -
        -
        - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/accordion/accordion-template-cs3/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/accordion/accordion-template-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/accordion/accordion-template-cs3" %} - -> You can add the custom class into Accordion component using [`cssClass`](../api/accordion/accordionItem#cssclass) property which is used to customize the Accordion component. - ## See Also * [How to load accordion items dynamically](./how-to/load-accordion-items-dynamically) diff --git a/ej2-javascript/appbar/ts/getting-started.md b/ej2-javascript/appbar/ts/getting-started.md index 8374320ba..04fd8c681 100644 --- a/ej2-javascript/appbar/ts/getting-started.md +++ b/ej2-javascript/appbar/ts/getting-started.md @@ -15,52 +15,47 @@ This section explains how to create a simple AppBar and configure its available > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the AppBar component in your application. +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® AppBar package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-navigations` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-navigations --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® AppBar CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -79,23 +74,20 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/appbar/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding AppBar component to the application +## Add Syncfusion® AppBar control to the application -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -Add the HTML div tag with its `id` attribute as `AppBar` in your `index.html` file to initialize the AppBar. +In this article, the AppBar control is used as an example. Add the following element to the `~/src/index.html` file. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +```html @@ -103,60 +95,34 @@ Add the HTML div tag with its `id` attribute as `AppBar` in your `index.html` fi Essential JS 2 - - - - -
        +
        -{% endhighlight %} -{% endtabs %} - -Import the AppBar component in your `app.ts` file and initialize it with the `#AppBar`. + ``` -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the AppBar control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { AppBar } from "@syncfusion/ej2-navigations"; const appbarObj = new AppBar({ colorMode: 'Primary' }); appbarObj.appendTo("#appbar"); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic AppBar component. - -{% tabs %} -{% highlight html tabtitle="index.ts" %} -{% include code-snippet/appbar/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/appbar/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/appbar/getting-started-cs1" %} diff --git a/ej2-javascript/auto-complete/ts/getting-started.md b/ej2-javascript/auto-complete/ts/getting-started.md index 2e07474f3..a44da313d 100644 --- a/ej2-javascript/auto-complete/ts/getting-started.md +++ b/ej2-javascript/auto-complete/ts/getting-started.md @@ -1,73 +1,60 @@ --- layout: post -title: Getting started with Auto complete control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Auto complete control of Syncfusion Essential JS 2 and more details. +title: Getting started with AutoComplete control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## AutoComplete control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Getting started +control: AutoComplete publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- +# Getting started in ##Platform_Name## AutoComplete control -# Getting started in ##Platform_Name## Auto complete control +This section explains the steps to create a simple AutoComplete and demonstrates the basic usage of the AutoComplete component using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -This section explains how to create a simple **AutoComplete** component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node.js v14.0 or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +## Prerequisites -## Dependencies +Ensure the following tools are installed on your machine: -The following list of dependencies are required to use the AutoComplete component in your application. +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -```javascript -|-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment +## Set up the development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: +``` git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® AutoComplete package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-dropdowns` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-dropdowns --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® AutoComplete CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -86,24 +73,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/auto-complete/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the AutoComplete +## Add Syncfusion® AutoComplete control to the application The AutoComplete can be initialized through input tags. Add the HTML input element which needs to be initialized as AutoComplete in `index.html`. -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the AutoComplete control is used as an example. Add the following AutoComplete element to the `~/src/index.html` file. +```html @@ -127,34 +114,12 @@ Add the HTML input element which needs to be initialized as AutoComplete in `in +``` -{% endhighlight %} -{% endtabs %} - -Now import the AutoComplete component in your `app.ts` and initialize it to the element `#auto`, as shown below. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { AutoComplete } from '@syncfusion/ej2-dropdowns'; - -// initialize AutoComplete component -let atcObject: AutoComplete = new AutoComplete(); - -// render initialized AutoComplete -atcObject.appendTo('#auto'); - -{% endhighlight %} -{% endtabs %} - -## Binding data source -After initialization, populate the AutoComplete with data using the [`dataSource`](https://ej2.syncfusion.com/documentation/api/auto-complete#datasource) property. Here, an array of string values is passed to the AutoComplete component. +Now, to render the AutoComplete control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { AutoComplete } from '@syncfusion/ej2-dropdowns'; @@ -170,21 +135,16 @@ let atcObject: AutoComplete = new AutoComplete({ // render initialized AutoComplete atcObject.appendTo('#atcelement'); -{% endhighlight %} -{% endtabs %} +```` ## Run the application -After completing the configuration required to render a basic AutoComplete, run the following command to display the output in your default browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm run start - -{% endhighlight %} -{% endtabs %} - +``` + The following example illustrates the output in your browser. {% tabs %} diff --git a/ej2-javascript/badge/ts/getting-started.md b/ej2-javascript/badge/ts/getting-started.md index cad05e2cf..07f595ee9 100644 --- a/ej2-javascript/badge/ts/getting-started.md +++ b/ej2-javascript/badge/ts/getting-started.md @@ -15,51 +15,29 @@ This section explains how to create a simple Badge control and configure its ava > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -Install the following required dependent package to render the `Badge` control. +Ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-notifications -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -## Add Syncfusion® JavaScript packages - -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. - -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm install - -{% endhighlight %} -{% endtabs %} - -## Import Syncfusion® CSS styles +## Import Syncfusion® badge CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -78,51 +56,43 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/badge/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add badge into application +## Add Syncfusion® badge control to the application -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -Add an HTML span element with `e-badge` class inside any wrapper element (h1) into your `index.html`. +Add an HTML span element with `e-badge` class inside any wrapper element (h1) into your `~/src/index.html`. -`[src/index.html]` +```html + + -{% tabs %} -{% highlight html tabtitle="index.html" %} + + Essential JS 2 + + + -

        Badge Control New

        + +

        Badge Control New

        + -{% endhighlight %} -{% endtabs %} + + ``` ## Run the application -Run the application in the browser using the following command. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic badge control. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/badge/getting-started-cs1/index.html %} -{% endhighlight %} -{% highlight css tabtitle="index.css" %} -{% include code-snippet/badge/getting-started-cs1/index.css %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/badge/getting-started-cs1" %} diff --git a/ej2-javascript/block-editor/js/real-time-collaboration.md b/ej2-javascript/block-editor/js/real-time-collaboration.md index a3bb38874..ba14ec1e3 100644 --- a/ej2-javascript/block-editor/js/real-time-collaboration.md +++ b/ej2-javascript/block-editor/js/real-time-collaboration.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Real-time Collaboration in ##Platform_Name## Block Editor control -The Block Editor supports real-time collaborative editing, enabling multiple users to work on the same document simultaneously. Collaboration is powered by **Yjs**, a Conflict-free Replicated Data Type (CRDT) framework that synchronizes document changes across all connected users and automatically resolves conflicts. +The Block Editor supports real-time collaborative editing, enabling multiple users to work on the same document simultaneously. Collaboration is powered by [**Yjs**](https://yjs.dev/), an open-source Conflict-free Replicated Data Type (CRDT) framework that synchronizes document changes across all connected users and automatically resolves conflicts. With collaboration enabled, users can: @@ -21,133 +21,249 @@ With collaboration enabled, users can: * Perform collaboration-aware undo and redo operations. * Create, restore, compare, export, and import document versions. -*Try the live demo [here](https://ej2.syncfusion.com/showcase/javascript/blockeditor-collaborative-editing/)* +{% doccards %} +{% doccard text="Live Demo" link="https://ej2.syncfusion.com/showcase/javascript/blockeditor-collaborative-editing/" %} +{% enddoccards %} -## Prerequisites +## Quick Start -Before enabling collaboration, install the `yjs` library and a Yjs provider. See [Yjs Providers](https://docs.yjs.dev/ecosystem/connection-provider) to choose the right provider for your use case. +Get real-time collaboration working in just a few minutes using `y-websocket` and a simple WebSocket server in our Block Editor component. -Inject the `Collaboration` module into the Block Editor before use. +### Step 1: Set up a basic Javascript Block Editor component -{% tabs %} -{% highlight js tabtitle="index.js" %} -ej.blockeditor.BlockEditor.Inject(Collaboration); -{% endhighlight %} -{% endtabs %} +Follow the [Getting Started guide](https://ej2.syncfusion.com/javascript/documentation/block-editor/es5-getting-started) to create a Javascript project with the Block Editor component. This ensures you have all required dependencies and the correct project structure before adding collaboration. -## Yjs Providers +### Step 2: Creation of Yjs and websocket provider bundle file using esbuild A Yjs provider handles the transport of document updates between connected users. Choose a provider based on your deployment requirements. +See [Yjs Providers](https://docs.yjs.dev/ecosystem/connection-provider) to choose the right provider for your use case. + | Provider | Type | Use Case | | -------- | ---- | -------- | -| `y-websocket` | Self-hosted | Production deployments with your own WebSocket server. | +| [y-websocket](https://docs.yjs.dev/ecosystem/connection-provider/y-websocket) | Self-hosted | Production deployments with your own WebSocket server. | | `y-webrtc` | Peer-to-peer | Quick local testing and development; no server required. | | `y-indexeddb` | Local storage | Offline persistence within a single browser. | | [Hocuspocus](https://tiptap.dev/docs/hocuspocus/getting-started/overview) | Open-source server | Scalable Node.js server with pluggable storage and Redis support. | | [Liveblocks](https://liveblocks.io/) | Fully managed | Hosted WebSocket infrastructure with REST API and DevTools. | | [PartyKit](https://www.partykit.io/) | Serverless | Serverless provider on Cloudflare; ideal for prototyping. | -> **Note:** For development and testing, `y-webrtc` or PartyKit allow you to get started without a server. For production, use `y-websocket` or a managed provider such as Liveblocks or Hocuspocus for reliable, persistent synchronization. +- In project, create a folder for bundle creation. +- Inside the folder, Initialize npm: -## Configure collaboration settings +```powershell +npm init -y +``` -Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor. It provides properties such as `provider`, `enableAwareness`, `adapter` and `versionHistory` which allows to customize the collaboration behavior. +- Install Dependencies: -## Getting Started +```powershell +npm install esbuild yjs y-websocket --save-dev +``` -The following steps will help you set up real-time collaboration in the Block Editor using `Yjs`. +- Create a file named `yjs-entry.js`. -### Step 1: Create a Yjs document +```js +// yjs-entry.js +import * as Y from 'yjs'; +import { WebsocketProvider } from 'y-websocket'; -Create a shared Yjs document and XML fragment. +// Expose to global scope +window.Y = Y; +window.WebsocketProvider = WebsocketProvider; -{% tabs %} -{% highlight js tabtitle="index.js" %} -var yDoc = new Y.Doc(); -var yFragment = yDoc.getXmlFragment('blockeditor'); -{% endhighlight %} -{% endtabs %} +console.log('Yjs and WebsocketProvider loaded globally'); +``` + +- Generate the bundle by running the following command: + +```powershell +npx esbuild yjs-entry.js --bundle --format=iife --outfile=yjs-bundle.js +``` + +- Bundle file named `yjs-bundle.js` will be generated. +- Copy `yjs-bundle.js` to your project folder and use in HTML: -### Step 2: Create a Yjs adapter +```html + +``` +Install the required libraries using npm: -Create an adapter that provides the Yjs runtime and the shared fragment to the Block Editor. +```powershell +npm install yjs y-websocket +``` + +### Step 3: Create a simple WebSocket server + +Create a folder named `server` and initialize npm: + +```powershell +npm init -y +``` + +Install the WebSocket server package in `server` folder: + +```powershell +npm install @y/websocket-server +``` + +#### Running the server: + +Open terminal in `server` folder: {% tabs %} -{% highlight js tabtitle="index.js" %} +{% highlight bash tabtitle="CMD" %} + +set HOST=localhost&& set PORT=1234&& npx y-websocket + +{% endhighlight %} +{% highlight bash tabtitle="Powershell" %} + +$env:HOST="localhost"; $env:PORT="1234"; npx y-websocket -var adapter = { - yRuntime: Y, - yXmlFragment: yFragment -} {% endhighlight %} {% endtabs %} -### Step 3: Configure a provider +You should see the message: -Create a provider that connects users to the same shared document. The following example uses `y-websocket` for production use. For local development, replace it with `y-webrtc` or a PartyKit provider — no server setup is required. +``` +running at 'localhost' on port 1234 +``` -**Production (y-websocket):** +### Step 4: Create a collaboration configuration file -{% tabs %} -{% highlight js tabtitle="index.js" %} +- Create a shared Yjs document and XML fragment. +- The `yjs` amd `WebsocketProvider` will be accessed from bundled globals. +- Create an adapter that provides the Yjs runtime and the shared fragment to the Block Editor. +- Create a provider that connects users to the same shared document. + +Create a `collaboration.js` file in your project add the following code to configure the Yjs document, provider, collaboration adapter and room allocation logic. +```js +// Access from bundled globals +var Y = window.Y; var WebsocketProvider = window.WebsocketProvider; + +// Get or create room name +var roomName = getRoomName(); + +// Create a shared Yjs document for collaborative editing +var yDoc = new Y.Doc(); +var yFragment = yDoc.getXmlFragment('blockeditor'); + +// Create adapter that provides Yjs runtime and shared fragment +var adapter = { + yRuntime: Y, + yXmlFragment: yFragment +}; + +// Create WebSocket provider for real-time synchronization +// Connects to local WebSocket server on port 1234 var provider = new WebsocketProvider( - 'wss://your-server-url', - 'document-room-id', + 'ws://localhost:1234', + roomName, yDoc ); -{% endhighlight %} -{% endtabs %} -**Development (y-webrtc):** - -{% tabs %} -{% highlight js tabtitle="index.js" %} -var WebrtcProvider = window.WebrtcProvider; +/** + * Get or create room ID and store in URL hash + */ +function getRoomName() { + // Check if room ID exists in URL hash + var roomId = getRoomIdFromHash(); + + // If no room ID in hash, generate a new one + if (!roomId) { + roomId = generateRoomId(); + setRoomIdInHash(roomId); + } -var provider = new WebrtcProvider('document-room-id', yDoc); -{% endhighlight %} -{% endtabs %} + return roomId; +} -### Step 4: Enable Collaboration +/** + * Get room ID from URL hash + */ +function getRoomIdFromHash() { + var hash = window.location.hash.substring(1); + return hash || null; +} -Pass the adapter and provider to the Block Editor through the `collaborationSettings` property. +/** + * Generate a unique 5-character room ID + */ +function generateRoomId() { + var chars = 'abcdefghijklmnopqrstuvwxyz0123456789'; + var roomId = ''; -{% tabs %} -{% highlight js tabtitle="index.js" %} -var blockEditor = new ej.blockeditor.BlockEditor({ - collaborationSettings: { - adapter: adapter, - provider: provider + for (var i = 0; i < 5; i++) { + roomId += chars.charAt(Math.floor(Math.random() * chars.length)); } -}); -{% endhighlight %} -{% endtabs %} -## User presence and remote cursors + return roomId; +} -The Block Editor can display remote cursors, text selection overlays, and user details on hover. To enable these user presence features, set `enableAwareness` to `true` in `collaborationSettings` property. +/** + * Set room ID in URL hash + */ +function setRoomIdInHash(roomId) { + window.location.hash = roomId; +} +``` -{% tabs %} -{% highlight js tabtitle="index.js" %} -var blockEditor = new ej.blockeditor.BlockEditor({ +Add below script on Html file: + +```html + +``` + + +### Step 5: Set up the Block Editor with collaboration + +- Use the `collaborationSettings` property to configure collaboration settings for your Block Editor. +- It provides properties such as `provider`, `enableAwareness`, `adapter` and `versionHistory` which allows to customize the collaboration behavior. +- Pass the adapter and provider to the Block Editor through the `collaborationSettings` property. +- Set `enableAwareness` to `true` in `collaborationSettings` property to display remote cursors, text selection overlays, and user details on hover. + +In your `index.js` file, replace the existing Block Editor with the following code: + +```js +var blockeditor = new ej.blockeditor.BlockEditor({ collaborationSettings: { adapter: adapter, provider: provider, enableAwareness: true } }); -{% endhighlight %} -{% endtabs %} + +blockeditor.appendTo('#blockeditor_default'); +``` + +Ensure that the following scripts are included in `index.html`: + +```html + + +``` + +### Step 6: Test the collaboration + +In your project, open the `index.html` page. + +> **Important:** Make sure your WebSocket server is still running in another terminal window. + +2. **Open a tab and duplicate it** with your Javascript application +3. **Type in one window** — you should see the text appear in the other window instantly + +If the text appears in both tabs, **real-time collaboration is achieved.** + +> **Note:** The BroadcastChannel mechanism only handles synchronization locally across tabs of the same browser. To synchronize data across entirely different browsers (e.g., Chrome to Firefox), you must utilize the WebSocket provider layer and connect both environments to a properly configured, centralized backend WebSocket server. ## Configure the current user Set the current user's display name and cursor highlight color using the `users` and `currentUserId` properties. The `avatarBgColor` value is used for that user's remote cursor and text selection overlay. The users property includes `id`, `user` and `avatarBgColor`. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js var blockEditor = new ej.blockeditor.BlockEditor({ users: [{ id: 'user-1', @@ -156,18 +272,15 @@ var blockEditor = new ej.blockeditor.BlockEditor({ }], currentUserId: 'user-1' }); -{% endhighlight %} -{% endtabs %} +``` ### Get active users Retrieve all currently connected users using the `users` property in the block editor. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js var users = ej.blockeditor.users; -{% endhighlight %} -{% endtabs %} +``` ## Version history @@ -175,14 +288,32 @@ var users = ej.blockeditor.users; ### Enable version history -Inject the `VersionHistory` module and configure the `versionHistory` property under `collaborationSettings` property. +- Version snapshots need to be persisted to enable version history across browser sessions. +- Implement the `IVersionStorage` interface to provide a custom storage backend for managing snapshots. You can use IndexedDB, a backend database, or any other storage solution suitable for your deployment. +- The `IVersionStorage` interface defines the following methods: + +| Method | Signature | Description | +| -------- | -------- | ----------- | +| `saveSnapshot` | `(snapshot: VersionSnapshot): Promise` | Persist a snapshot. | +| `loadAllSnapshots` | `(): Promise` | Load all persisted snapshots, ordered by timestamp ascending. | +| `loadSnapshot` | `(id: string): Promise` | Load a single snapshot by id. | +| `deleteSnapshot` | `(id: string): Promise` | Permanently remove a snapshot by id. | +| `clearAll` | `(): Promise` | Remove all snapshots from storage. | + +Before that need to create a storage service for snapshots. +- Create versionHistoryService.js with IndexedDBVersionStorage class +- This class implements IVersionStorage interface (required by Syncfusion) + +Make Storage Room-Specific by using roomName from collaboration.js to make each room gets its own isolated snapshot database. + +Create a `versionHistoryService.js` file in the src folder, replace the `index.js` file to configure the BlockEditorComponent, and replace the `index.css` file with the styles required for the version history panel. {% tabs %} {% highlight js tabtitle="index.js" %} -ej.blockeditor.BlockEditor.Inject(VersionHistory); - -var myStorage = new CustomVersionStorage(`blockeditor-${uniqueId}`); +// Version storage for the current collaboration room +var myStorage = new IndexedDBVersionStorage('blockeditor-versions-' + roomName); +// Create Block Editor var blockEditor = new ej.blockeditor.BlockEditor({ collaborationSettings: { adapter: adapter, @@ -193,34 +324,254 @@ var blockEditor = new ej.blockeditor.BlockEditor({ } } }); + +blockEditor.appendTo('#blockeditor_default'); + +// Update version history panel periodically +setInterval(function () { + updateSnapshots(); +}, 2000); + +/** + * Refresh version history panel + */ +function updateSnapshots() { + var versionHistory = blockEditor.getVersionHistory(); + if (!versionHistory) { + return; + } + + var snapshots = versionHistory.getSnapshots(); + var panel = document.getElementById('version-history-panel'); + + if (!panel) { + return; + } + + if (snapshots.length === 0) { + panel.innerHTML = + '

        Snapshots (0)

        ' + + '

        No snapshots yet...

        '; + return; + } + + var html = + '

        Snapshots (' + snapshots.length + ')

        ' + + '
        '; + + snapshots.forEach(function (snapshot) { + html += + '
        ' + + '
        ' + + new Date(snapshot.lastModifiedAt).toLocaleString() + + '
        ' + + '
        ' + + '' + + '' + + '
        ' + + '
        '; + }); + + html += '
        '; + panel.innerHTML = html; +} + +/** + * Restore a snapshot + */ +function restoreSnapshot(id) { + var versionHistory = blockEditor.getVersionHistory(); + if (versionHistory) { + versionHistory.restoreSnapshot(id); + } +} + +/** + * Delete a snapshot + */ +function deleteSnapshot(id) { + var versionHistory = blockEditor.getVersionHistory(); + if (versionHistory) { + versionHistory.deleteSnapshot(id); + } +} {% endhighlight %} -{% endtabs %} +{% highlight ts tabtitle="index.html" %} + + + + + Essential JS 2 - BlockEditor + + + + + + + + + + + + + + + + + + + + +
        +
        +
        +
        + +
        +

        Snapshots (0)

        +

        No snapshots yet...

        +
        +
        + + + + + + + + +{% endhighlight %} +{% highlight ts tabtitle="versionHistoryService.js" %} +class IndexedDBVersionStorage { + constructor(dbName) { + this.db = null; + + this.initPromise = new Promise((resolve) => { + var req = indexedDB.open(dbName, 1); + + req.onsuccess = () => { + this.db = req.result; + resolve(); + }; + + req.onupgradeneeded = (e) => { + var db = e.target.result; + + if (!db.objectStoreNames.contains('snapshots')) { + db.createObjectStore('snapshots', { + keyPath: 'id' + }); + } + }; + }); + } -### Configure snapshot storage + exec(mode, fn) { + return this.initPromise.then(() => { + return new Promise((resolve, reject) => { + var tx = this.db.transaction('snapshots', mode); + var req = fn(tx.objectStore('snapshots')); + + req.onsuccess = function () { + resolve(req.result); + }; + + req.onerror = function () { + reject(req.error); + }; + }); + }); + } -Version snapshots need to be persisted to enable version history across browser sessions. Implement the `IVersionStorage` interface to provide a custom storage backend for managing snapshots. You can use IndexedDB, a backend database, or any other storage solution suitable for your deployment. + saveSnapshot(snapshot) { + return this.exec('readwrite', function (store) { + return store.put(snapshot); + }); + } -The `IVersionStorage` interface defines the following methods: + loadAllSnapshots() { + return this.exec('readonly', function (store) { + return store.getAll(); + }); + } -| Method | Signature | Description | -| -------- | -------- | ----------- | -| `saveSnapshot` | `(snapshot: VersionSnapshot): Promise` | Persist a snapshot. | -| `loadAllSnapshots` | `(): Promise` | Load all persisted snapshots, ordered by timestamp ascending. | -| `loadSnapshot` | `(id: string): Promise` | Load a single snapshot by id. | -| `deleteSnapshot` | `(id: string): Promise` | Permanently remove a snapshot by id. | -| `clearAll` | `(): Promise` | Remove all snapshots from storage. | + loadSnapshot(id) { + return this.exec('readonly', function (store) { + return store.get(id); + }); + } -### Access the version history instance + deleteSnapshot(id) { + return this.exec('readwrite', function (store) { + return store.delete(id); + }); + } -After the Block Editor initializes, retrieve the version history instance and wait for snapshot data to load before calling any version history methods. + clearAll() { + return this.exec('readwrite', function (store) { + return store.clear(); + }); + } +} +{% endhighlight %} +{% highlight ts tabtitle="index.css" %} +.app-container { + display: flex; + gap: 20px; + padding: 20px; +} -{% tabs %} -{% highlight js tabtitle="index.js" %} -var versionHistory = ej.blockeditor.getVersionHistory(); -await versionHistory.whenReady(); +.editor-section { + flex: 1; +} + +.version-history-panel { + width: 350px; + padding: 15px; + border: 1px solid #ddd; +} + +.snapshots-container { + max-height: 600px; + overflow-y: auto; +} + +.snapshot-item { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #eee; +} + +.snapshot-timestamp { + font-size: 12px; + color: #666; + margin-bottom: 8px; +} + +.snapshot-actions { + display: flex; + gap: 5px; +} + +.snapshot-actions button { + padding: 5px 10px; + border: none; + cursor: pointer; + color: white; +} + +.restore-btn { + background-color: #007bff; +} + +.delete-btn { + background-color: #dc3545; +} {% endhighlight %} {% endtabs %} +Once done, run to see versionHistory panel for individual rooms. + ### Methods The following are the methods available in the `IVersionHistory`: @@ -229,48 +580,44 @@ The following are the methods available in the `IVersionHistory`: Creates a new snapshot of the current document state with an optional label and metadata. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js +var versionHistory = ej.blockeditor.getVersionHistory(); var snapshot = await versionHistory.createSnapshot({ label: 'Before major update', modifiedBy: currentUserId }); -{% endhighlight %} -{% endtabs %} +``` #### List snapshots Retrieves all saved snapshots or a paginated subset. Snapshots are returned in chronological order. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js +var versionHistory = ej.blockeditor.getVersionHistory(); // Retrieve all snapshots var snapshots = versionHistory.getSnapshots(); // Retrieve a paginated subset — getSnapshots(skip, take) var snapshots = versionHistory.getSnapshots(20, 40); -{% endhighlight %} -{% endtabs %} +``` #### Rename a snapshot Updates the label or metadata of an existing snapshot without modifying its content. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js +var versionHistory = ej.blockeditor.getVersionHistory(); await versionHistory.renameSnapshot(snapshotId, 'Release Candidate'); -{% endhighlight %} -{% endtabs %} +``` #### Restore a snapshot Reverts the document to a previously saved snapshot state. The current document state is automatically backed up before restoration. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js +var versionHistory = ej.blockeditor.getVersionHistory(); await versionHistory.restoreSnapshot(snapshotId); -{% endhighlight %} -{% endtabs %} +``` > **Note:** When a snapshot is restored, the current document state is automatically > backed up before the restore operation is applied. @@ -279,11 +626,10 @@ await versionHistory.restoreSnapshot(snapshotId); Compares two snapshots to identify differences such as added, removed, or modified content. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js +var versionHistory = ej.blockeditor.getVersionHistory(); var diff = versionHistory.compareVersions(snapshotIdA, snapshotIdB); -{% endhighlight %} -{% endtabs %} +``` The returned `VersionDiff` object provides a summary of the differences between the two selected versions. @@ -291,11 +637,10 @@ The returned `VersionDiff` object provides a summary of the differences between Serializes a snapshot into a portable format that can be stored externally or transferred between systems. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js +var versionHistory = ej.blockeditor.getVersionHistory(); var exported = await versionHistory.exportSnapshot(snapshotId); -{% endhighlight %} -{% endtabs %} +``` Exported snapshots can be stored externally or transferred between systems. @@ -303,11 +648,10 @@ Exported snapshots can be stored externally or transferred between systems. Imports a previously exported snapshot back into the version history storage. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js +var versionHistory = ej.blockeditor.getVersionHistory(); var imported = await versionHistory.importSnapshot(exported); -{% endhighlight %} -{% endtabs %} +``` ### Events @@ -317,8 +661,7 @@ Use the following event callbacks in `versionHistory` settings to respond to sna Triggered when a new snapshot is created. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js var blockEditor = new ej.blockeditor.BlockEditor({ collaborationSettings: { versionHistory: { @@ -329,15 +672,13 @@ var blockEditor = new ej.blockeditor.BlockEditor({ } } }); -{% endhighlight %} -{% endtabs %} +``` #### snapshotRestored Triggered when a snapshot is restored. -{% tabs %} -{% highlight js tabtitle="index.js" %} +```js var blockEditor = new ej.blockeditor.BlockEditor({ collaborationSettings: { versionHistory: { @@ -348,46 +689,4 @@ var blockEditor = new ej.blockeditor.BlockEditor({ } } }); -{% endhighlight %} -{% endtabs %} - -## Best Practices - -* **Use WebRTC or PartyKit for development** - These providers require no server setup and are ideal for local testing and prototyping before moving to a production provider. -* **Use WebSocket-based providers in production** - `y-websocket`, Hocuspocus, or a managed service like Liveblocks provides reliable, low-latency, persistent synchronization at scale. -* **Use stable room identifiers** - Use a unique document ID as the collaboration room name to prevent unintended document sharing between different documents. -* **Persist snapshots externally** - Store snapshots in a database or cloud storage to preserve version history across sessions. -* **Enable awareness selectively** - Disable `enableAwareness` when user presence information is not required to reduce network and processing overhead. - -## Troubleshooting - -### Changes Are Not Synchronizing - -Verify the following: - -* All users are connected to the same collaboration room. -* The provider connection is active. -* The shared Yjs document is correctly configured. - -### Remote Cursors Are Not Visible - -Verify the following: - -* `enableAwareness` is set to `true`. -* The configured provider supports the Yjs awareness protocol. -* User information is set via the `users` and `currentUserId` properties. -* Each user has a unique `id` value. - -### Remote User Names Are Not Appearing on Cursors - -Verify the following: - -* The `user` field is populated for all entries in the `users` array. - -### Version History Is Not Available - -Verify the following: - -* The `VersionHistory` module is injected into the Block Editor. -* A valid `IVersionStorage` implementation is provided. -* `whenReady()` has been awaited before accessing snapshots. \ No newline at end of file +``` diff --git a/ej2-javascript/block-editor/ts/real-time-collaboration.md b/ej2-javascript/block-editor/ts/real-time-collaboration.md index a319ace92..621f29c3f 100644 --- a/ej2-javascript/block-editor/ts/real-time-collaboration.md +++ b/ej2-javascript/block-editor/ts/real-time-collaboration.md @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Real-time Collaboration in ##Platform_Name## Block Editor control +# Real-time Collaboration in ##Platform_Name## Block Editor Component -The Block Editor supports real-time collaborative editing, enabling multiple users to work on the same document simultaneously.Collaboration is powered by **Yjs**, a Conflict-free Replicated Data Type (CRDT) framework that synchronizes document changes across all connected users and automatically resolves conflicts. +The Block Editor supports real-time collaborative editing, enabling multiple users to work on the same document simultaneously. Collaboration is powered by [**Yjs**](https://yjs.dev/), an open-source Conflict-free Replicated Data Type (CRDT) framework that synchronizes document changes across all connected users and automatically resolves conflicts. With collaboration enabled, users can: @@ -21,145 +21,199 @@ With collaboration enabled, users can: * Perform collaboration-aware undo and redo operations. * Create, restore, compare, export, and import document versions. -*Try the live demo [here](https://ej2.syncfusion.com/showcase/typescript/blockeditor-collaborative-editing/)* +{% doccards %} +{% doccard text="Live Demo" link="https://ej2.syncfusion.com/showcase/typescript/blockeditor-collaborative-editing/" %} +{% enddoccards %} -## Prerequisites +## Quick Start -Before enabling collaboration, install the `yjs` library and a Yjs provider. See [Yjs Providers](https://docs.yjs.dev/ecosystem/connection-provider) to choose the right provider for your use case. +Get real-time collaboration working in just a few minutes using `y-websocket` and a simple WebSocket server in our Block Editor component. -Inject the `Collaboration` module into the Block Editor before use. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -import { BlockEditor, Collaboration } from "@syncfusion/ej2-blockeditor"; -BlockEditor.Inject(Collaboration); -{% endhighlight %} -{% endtabs %} +### Step 1: Set up a basic Vite Typescript Block Editor component +Follow the [Getting Started guide](https://ej2.syncfusion.com/documentation/block-editor/getting-started) to create a Vite-based Typescript project with the Block Editor component. This ensures you have all required dependencies and the correct project structure before adding collaboration. -## Yjs Providers +### Step 2: Install Yjs and the WebSocket provider A Yjs provider handles the transport of document updates between connected users. Choose a provider based on your deployment requirements. +See [Yjs Providers](https://docs.yjs.dev/ecosystem/connection-provider) to choose the right provider for your use case. + | Provider | Type | Use Case | | -------- | ---- | -------- | -| `y-websocket` | Self-hosted | Production deployments with your own WebSocket server. | +| [y-websocket](https://docs.yjs.dev/ecosystem/connection-provider/y-websocket) | Self-hosted | Production deployments with your own WebSocket server. | | `y-webrtc` | Peer-to-peer | Quick local testing and development; no server required. | | `y-indexeddb` | Local storage | Offline persistence within a single browser. | | [Hocuspocus](https://tiptap.dev/docs/hocuspocus/getting-started/overview) | Open-source server | Scalable Node.js server with pluggable storage and Redis support. | | [Liveblocks](https://liveblocks.io/) | Fully managed | Hosted WebSocket infrastructure with REST API and DevTools. | | [PartyKit](https://www.partykit.io/) | Serverless | Serverless provider on Cloudflare; ideal for prototyping. | -> **Note:** For development and testing, `y-webrtc` or PartyKit allow you to get started without a server. For production, use `y-websocket` or a managed provider such as Liveblocks or Hocuspocus for reliable, persistent synchronization. +Install the required libraries using npm: -## Configure collaboration settings +```powershell +npm install yjs y-websocket +``` -Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor. It provides properties such as `provider`, `enableAwareness`, `adapter` and `versionHistory` which allows to customize the collaboration behavior. +### Step 3: Create a simple WebSocket server -## Getting Started +Install the WebSocket server package: -The following steps will help you set up real-time collaboration in the Block Editor using `Yjs`. +```powershell +npm install @y/websocket-server +``` -### Step 1: Create a Yjs document - -Create a shared Yjs document and XML fragment. +#### Running the server: {% tabs %} -{% highlight ts tabtitle="index.ts" %} -import * as Y from 'yjs'; +{% highlight bash tabtitle="CMD" %} + +set HOST=localhost&& set PORT=1234&& npx y-websocket + +{% endhighlight %} +{% highlight bash tabtitle="Powershell" %} + +$env:HOST="localhost"; $env:PORT="1234"; npx y-websocket -const yDoc = new Y.Doc(); -const yFragment = yDoc.getXmlFragment('blockeditor'); {% endhighlight %} {% endtabs %} +You should see the message: -### Step 2: Create a Yjs adapter +``` +running at 'localhost' on port 1234 +``` -Create an adapter that provides the Yjs runtime and the shared fragment to the Block Editor. +**Keep this terminal open** while you develop. Your Block Editor will connect to this server. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +### Step 4: Create a collaboration configuration file + +- Create a shared Yjs document and XML fragment. +- Create an adapter that provides the Yjs runtime and the shared fragment to the Block Editor. +- Create a provider that connects users to the same shared document. +- Allocate a collaboration room dynamically based on the URL hash, so each hash gets its own isolated document room. + +Create a new file named `collaboration.ts` in your `src` folder. This file will contain all the Yjs and provider setup: + +```typescript import * as Y from 'yjs'; -import { YjsAdapter } from '@syncfusion/ej2-blockeditor'; +import type { YjsAdapter } from '@syncfusion/ej2-blockeditor'; +import { WebsocketProvider } from 'y-websocket'; + +// Create a shared Yjs document for collaborative editing +// Each URL hash gets its own room name (e.g., #wb3lu, #x2p4k) +const roomName = getRoomName(); +const yDoc = new Y.Doc(); +const yFragment = yDoc.getXmlFragment('blockeditor'); +// Create adapter that provides Yjs runtime and shared fragment const adapter: YjsAdapter = { yRuntime: Y, yXmlFragment: yFragment }; -{% endhighlight %} -{% endtabs %} - - -### Step 3: Configure a provider - -Create a provider that connects users to the same shared document. The following example uses `y-websocket` for production use. For local development, replace it with `y-webrtc` or a PartyKit provider — no server setup is required. - -**Production (y-websocket):** - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -import { WebsocketProvider } from 'y-websocket'; +// Create WebSocket provider for real-time synchronization +// Connects to local WebSocket server on port 1234 and joins the room based on URL hash +// Example: https://yourapp.com/#wb3lu joins room "wb3lu" const provider = new WebsocketProvider( - 'wss://your-server-url', - 'document-room-id', + 'ws://localhost:1234', + roomName, yDoc ); -{% endhighlight %} -{% endtabs %} +/** + * Get or create room ID and store in URL hash + */ +function getRoomName(): string { + if (typeof window === 'undefined') { + return 'default'; + } + // Check if room ID exists in URL hash + let roomId = getRoomIdFromHash(); + // If no room ID in hash, generate a new one + if (!roomId) { + roomId = generateRoomId(); + setRoomIdInHash(roomId); + } + return roomId; +} + +/** + * Get room ID from URL hash + */ +function getRoomIdFromHash(): string | null { + const hash = window.location.hash.substring(1); + return hash || null; +} + +/** + * Generate a unique 5-character room ID + */ +function generateRoomId(): string { + const chars = 'abcdefghijklmnopqrstuvwxyz0123456789'; + let roomId = ''; + for (let i = 0; i < 5; i++) { + roomId += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return roomId; +} -**Development (y-webrtc):** +/** + * Set room ID in URL hash + */ +function setRoomIdInHash(roomId: string): void { + window.location.hash = roomId; +} -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -import { WebrtcProvider } from 'y-webrtc'; +export { yDoc, yFragment, adapter, provider, roomName }; +``` -const provider = new WebrtcProvider('document-room-id', yDoc); -{% endhighlight %} -{% endtabs %} +### Step 5: Set up the Block Editor with collaboration +- Enable collaboration by importing the `Collaboration` module from `@syncfusion/ej2-blockeditor` and injecting it into the Block Editor. +- Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor. +- It provides properties such as `provider`, `enableAwareness`, `adapter`, and `versionHistory` which allow you to customize the collaboration behavior. +- Set `enableAwareness` to `true` in `collaborationSettings` property to display remote cursors, text selection overlays, and user details on hover. -### Step 4: Enable Collaboration +In your `main.ts` file, replace the existing Block Editor code with the following: -Pass the adapter and provider to the Block Editor through the `collaborationSettings` property. +```typescript +import './style.css'; +import { BlockEditor, Collaboration } from '@syncfusion/ej2-blockeditor'; +import { adapter, provider } from './collaboration'; -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +BlockEditor.Inject(Collaboration); const blockEditor = new BlockEditor({ collaborationSettings: { adapter: adapter, - provider: provider + provider: provider, + enableAwareness: true } }); -{% endhighlight %} -{% endtabs %} +blockEditor.appendTo('#blockeditor_default'); +``` +### Step 6: Test the collaboration -## User presence and remote cursors +1. **Start your Vite development server** — In your project terminal, run: -The Block Editor can display remote cursors, text selection overlays, and user details on hover. To enable these user presence features, set `enableAwareness` to `true` in `collaborationSettings` property. +```bash +npm run dev +``` -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -const blockEditor = new BlockEditor({ - collaborationSettings: { - adapter: adapter, - provider: provider, - enableAwareness: true - } -}); -{% endhighlight %} -{% endtabs %} +> **Important:** Make sure your WebSocket server is still running in another terminal window. You need both servers running for collaboration to work. + +2. **Open a tab and duplicate it** with your Typescript application +3. **Type in one window** — you should see the text appear in the other window instantly +If the text appears in both tabs, **real-time collaboration is achieved.** + +> **Note:** The BroadcastChannel mechanism only handles synchronization locally across tabs of the same browser. To synchronize data across entirely different browsers (e.g., Chrome to Firefox), you must utilize the WebSocket provider layer and connect both environments to a properly configured, centralized backend WebSocket server. ## Configure the current user Set the current user's display name and cursor highlight color using the `users` and `currentUserId` properties. The `avatarBgColor` value is used for that user's remote cursor and text selection overlay. The users property includes `id`, `user` and `avatarBgColor`. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript const blockEditor = new BlockEditor({ users: [{ id: 'user-1', @@ -168,20 +222,15 @@ const blockEditor = new BlockEditor({ }], currentUserId: 'user-1' }); -{% endhighlight %} -{% endtabs %} - +``` ### Get active users Retrieve all currently connected users using the `users` property in the block editor. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript const users = blockEditor.users; -{% endhighlight %} -{% endtabs %} - +``` ## Version history @@ -189,53 +238,230 @@ const users = blockEditor.users; ### Enable version history -Inject the `VersionHistory` module and configure the `versionHistory` property under `collaborationSettings` property. +- Inject the `VersionHistory` module and configure the `versionHistory` property under `collaborationSettings` property. +- Version snapshots need to be persisted to enable version history across browser sessions. +- Implement the `IVersionStorage` interface to provide a custom storage backend for managing snapshots. You can use IndexedDB, a backend database, or any other storage solution suitable for your deployment. +- The `IVersionStorage` interface defines the following methods: + +| Method | Signature | Description | +| -------- | -------- | ----------- | +| `saveSnapshot` | `(snapshot: VersionSnapshot): Promise` | Persist a snapshot. | +| `loadAllSnapshots` | `(): Promise` | Load all persisted snapshots, ordered by timestamp ascending. | +| `loadSnapshot` | `(id: string): Promise` | Load a single snapshot by id. | +| `deleteSnapshot` | `(id: string): Promise` | Permanently remove a snapshot by id. | +| `clearAll` | `(): Promise` | Remove all snapshots from storage. | + +- After the Block Editor initializes, retrieve the version history instance and wait for snapshot data to load before calling any version history methods. + +Before that need to create a storage service for snapshots. +- Create versionHistoryService.ts with IndexedDBVersionStorage class +- This class implements IVersionStorage interface (required by Syncfusion) + +Make Storage Room-Specific by importing `roomName` from `collaboration.ts` to make each room get its own isolated snapshot database. + +Create a `versionHistoryService.ts` file in the `src` folder, replace the `main.ts` file to configure the Block Editor, add an `index.html` panel container, and replace the `App.css` file with the styles required for the version history panel. {% tabs %} -{% highlight ts tabtitle="index.ts" %} -import { BlockEditor, Collaboration, VersionHistory } from "@syncfusion/ej2-blockeditor"; -BlockEditor.Inject(VersionHistory); +{% highlight ts tabtitle="main.ts" %} + +import './App.css'; +import { + BlockEditor, + Collaboration, + VersionHistory, + type VersionSnapshot +} from '@syncfusion/ej2-blockeditor'; +import { adapter, provider, roomName } from './collaboration'; +import { IndexedDBVersionStorage } from './versionHistoryService'; -const myStorage = new CustomVersionStorage(`blockeditor-${uniqueId}`); +BlockEditor.Inject(Collaboration, VersionHistory); + +const myStorage = new IndexedDBVersionStorage(`blockeditor-versions-${roomName}`); const blockEditor = new BlockEditor({ collaborationSettings: { adapter: adapter, provider: provider, + enableAwareness: true, versionHistory: { storage: myStorage, snapshotInterval: 3000 } } }); +blockEditor.appendTo('#blockeditor_default'); + +// --- Version history panel --- +const panel = document.getElementById('version-history-panel') as HTMLElement; + +async function renderSnapshots(): Promise { + const versionHistory = blockEditor.getVersionHistory(); + await versionHistory.whenReady(); + const snapshots: VersionSnapshot[] = versionHistory.getSnapshots(); + + panel.innerHTML = `

        Snapshots (${snapshots.length})

        `; + + if (snapshots.length === 0) { + panel.innerHTML += '

        No snapshots yet...

        '; + return; + } + + const container = document.createElement('div'); + container.className = 'snapshots-container'; + + snapshots.forEach((s) => { + const item = document.createElement('div'); + item.className = 'snapshot-item'; + item.innerHTML = ` +
        ${new Date(s.lastModifiedAt).toLocaleString()}
        +
        + + +
        + `; + container.appendChild(item); + }); + + panel.appendChild(container); + + panel.querySelectorAll('.restore-btn').forEach((btn) => { + btn.addEventListener('click', async () => { + await blockEditor.getVersionHistory().restoreSnapshot(btn.dataset.id!); + }); + }); + panel.querySelectorAll('.delete-btn').forEach((btn) => { + btn.addEventListener('click', async () => { + await blockEditor.getVersionHistory().deleteSnapshot(btn.dataset.id!); + renderSnapshots(); + }); + }); +} + +renderSnapshots(); +setInterval(renderSnapshots, 2000); + {% endhighlight %} -{% endtabs %} +{% highlight html tabtitle="index.html" %} -### Configure snapshot storage +
        +
        +
        +
        -Version snapshots need to be persisted to enable version history across browser sessions. Implement the `IVersionStorage` interface to provide a custom storage backend for managing snapshots. You can use IndexedDB, a backend database, or any other storage solution suitable for your deployment. +{% endhighlight %} +{% highlight ts tabtitle="versionHistoryService.ts" %} + +import type { IVersionStorage, VersionSnapshot } from '@syncfusion/ej2-blockeditor'; + +export class IndexedDBVersionStorage implements IVersionStorage { + private db: IDBDatabase | null = null; + private initPromise: Promise; + + constructor(dbName: string) { + this.initPromise = new Promise((resolve) => { + const req = indexedDB.open(dbName, 1); + req.onsuccess = () => { this.db = req.result; resolve(); }; + req.onupgradeneeded = (e) => { + const db = (e.target as IDBOpenDBRequest).result; + if (!db.objectStoreNames.contains('snapshots')) { + db.createObjectStore('snapshots', { keyPath: 'id' }); + } + }; + }); + } -The `IVersionStorage` interface defines the following methods: + private exec(mode: 'readonly' | 'readwrite', fn: (store: IDBObjectStore) => IDBRequest): Promise { + return this.initPromise.then(() => new Promise((resolve, reject) => { + const tx = this.db!.transaction('snapshots', mode); + const req = fn(tx.objectStore('snapshots')); + req.onsuccess = () => resolve(req.result); + req.onerror = () => reject(req.error); + })); + } -| Method | Signature | Description | -| -------- | -------- | ----------- | -| `saveSnapshot` | `(snapshot: VersionSnapshot): Promise` | Persist a snapshot. | -| `loadAllSnapshots` | `(): Promise` | Load all persisted snapshots, ordered by timestamp ascending. | -| `loadSnapshot` | `(id: string): Promise` | Load a single snapshot by id. | -| `deleteSnapshot` | `(id: string): Promise` | Permanently remove a snapshot by id. | -| `clearAll` | `(): Promise` | Remove all snapshots from storage. | + async saveSnapshot(snapshot: VersionSnapshot): Promise { + await this.exec('readwrite', (store) => store.put(snapshot)); + } + + async loadAllSnapshots(): Promise { + return await this.exec('readonly', (store) => store.getAll()); + } -### Access the version history instance + async loadSnapshot(id: string): Promise { + return await this.exec('readonly', (store) => store.get(id)); + } -After the Block Editor initializes, retrieve the version history instance and wait for snapshot data to load before calling any version history methods. + async deleteSnapshot(id: string): Promise { + await this.exec('readwrite', (store) => store.delete(id)); + } + + async clearAll(): Promise { + await this.exec('readwrite', (store) => store.clear()); + } +} + +{% endhighlight %} +{% highlight css tabtitle="App.css" %} +@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css"; + +.app-container { + display: flex; + gap: 20px; + padding: 20px; +} + +.editor-section { + flex: 1; +} + +.version-history-panel { + width: 350px; + padding: 15px; + border: 1px solid #ddd; +} + +.snapshots-container { + max-height: 600px; + overflow-y: auto; +} + +.snapshot-item { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #eee; +} + +.snapshot-timestamp { + font-size: 12px; + color: #666; + margin-bottom: 8px; +} + +.snapshot-actions { + display: flex; + gap: 5px; +} + +.snapshot-actions button { + padding: 5px 10px; + border: none; + cursor: pointer; + color: white; +} + +.restore-btn { + background-color: #007bff; +} + +.delete-btn { + background-color: #dc3545; +} -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -const versionHistory = blockEditor.getVersionHistory(); -await versionHistory.whenReady(); {% endhighlight %} {% endtabs %} +Once done, run the app to see the version history panel for individual rooms. + ### Methods The following are the methods available in the `IVersionHistory`: @@ -244,66 +470,56 @@ The following are the methods available in the `IVersionHistory`: Creates a new snapshot of the current document state with an optional label and metadata. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript +const versionHistory = blockEditor.getVersionHistory(); const snapshot = await versionHistory.createSnapshot({ label: 'Before major update', modifiedBy: currentUserId }); -{% endhighlight %} -{% endtabs %} - +``` #### List snapshots Retrieves all saved snapshots or a paginated subset. Snapshots are returned in chronological order. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript +const versionHistory = blockEditor.getVersionHistory(); // Retrieve all snapshots const snapshots = versionHistory.getSnapshots(); // Retrieve a paginated subset — getSnapshots(skip, take) const snapshots = versionHistory.getSnapshots(20, 40); -{% endhighlight %} -{% endtabs %} - +``` #### Rename a snapshot Updates the label or metadata of an existing snapshot without modifying its content. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript +const versionHistory = blockEditor.getVersionHistory(); await versionHistory.renameSnapshot(snapshotId, 'Release Candidate'); -{% endhighlight %} -{% endtabs %} - +``` #### Restore a snapshot Reverts the document to a previously saved snapshot state. The current document state is automatically backed up before restoration. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript +const versionHistory = blockEditor.getVersionHistory(); await versionHistory.restoreSnapshot(snapshotId); -{% endhighlight %} -{% endtabs %} +``` - -> **Note:** When a snapshot is restored, the current document state is automatically +> **Note:** When a snapshot is restored, the current document state is automatically > backed up before the restore operation is applied. #### Compare versions Compares two snapshots to identify differences such as added, removed, or modified content. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript +const versionHistory = blockEditor.getVersionHistory(); const diff = versionHistory.compareVersions(snapshotIdA, snapshotIdB); -{% endhighlight %} -{% endtabs %} - +``` The returned `VersionDiff` object provides a summary of the differences between the two selected versions. @@ -311,12 +527,10 @@ The returned `VersionDiff` object provides a summary of the differences between Serializes a snapshot into a portable format that can be stored externally or transferred between systems. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript +const versionHistory = blockEditor.getVersionHistory(); const exported = await versionHistory.exportSnapshot(snapshotId); -{% endhighlight %} -{% endtabs %} - +``` Exported snapshots can be stored externally or transferred between systems. @@ -324,12 +538,10 @@ Exported snapshots can be stored externally or transferred between systems. Imports a previously exported snapshot back into the version history storage. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript +const versionHistory = blockEditor.getVersionHistory(); const imported = await versionHistory.importSnapshot(exported); -{% endhighlight %} -{% endtabs %} - +``` ### Events @@ -339,8 +551,7 @@ Use the following event callbacks in `versionHistory` settings to respond to sna Triggered when a new snapshot is created. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript const blockEditor = new BlockEditor({ collaborationSettings: { versionHistory: { @@ -351,16 +562,13 @@ const blockEditor = new BlockEditor({ } } }); -{% endhighlight %} -{% endtabs %} - +``` #### snapshotRestored Triggered when a snapshot is restored. -{% tabs %} -{% highlight ts tabtitle="index.ts" %} +```typescript const blockEditor = new BlockEditor({ collaborationSettings: { versionHistory: { @@ -371,47 +579,5 @@ const blockEditor = new BlockEditor({ } } }); -{% endhighlight %} -{% endtabs %} - - -## Best Practices - -* **Use WebRTC or PartyKit for development** - These providers require no server setup and are ideal for local testing and prototyping before moving to a production provider. -* **Use WebSocket-based providers in production** - `y-websocket`, Hocuspocus, or a managed service like Liveblocks provides reliable, low-latency, persistent synchronization at scale. -* **Use stable room identifiers** - Use a unique document ID as the collaboration room name to prevent unintended document sharing between different documents. -* **Persist snapshots externally** - Store snapshots in a database or cloud storage to preserve version history across sessions. -* **Enable awareness selectively** - Disable `enableAwareness` when user presence information is not required to reduce network and processing overhead. - -## Troubleshooting - -### Changes Are Not Synchronizing - -Verify the following: - -* All users are connected to the same collaboration room. -* The provider connection is active. -* The shared Yjs document is correctly configured. - -### Remote Cursors Are Not Visible - -Verify the following: - -* `enableAwareness` is set to `true`. -* The configured provider supports the Yjs awareness protocol. -* User information is set via the `users` and `currentUserId` properties. -* Each user has a unique `id` value. - -### Remote User Names Are Not Appearing on Cursors - -Verify the following: - -* The `user` field is populated for all entries in the `users` array. - -### Version History Is Not Available - -Verify the following: +``` -* The `VersionHistory` module is injected into the Block Editor. -* A valid `IVersionStorage` implementation is provided. -* `whenReady()` has been awaited before accessing snapshots. \ No newline at end of file diff --git a/ej2-javascript/breadcrumb/ts/getting-started.md b/ej2-javascript/breadcrumb/ts/getting-started.md index 3a1e9c695..79779143d 100644 --- a/ej2-javascript/breadcrumb/ts/getting-started.md +++ b/ej2-javascript/breadcrumb/ts/getting-started.md @@ -15,57 +15,47 @@ This section explains how to create a simple Breadcrumb, and configure its avail > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies - -The following list of dependencies are required to use the Breadcrumb component in your application. - -```js -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment +## Prerequisites -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Ensure the following tools are installed on your machine: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Breadcrumb package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-navigations` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-navigations --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Breadcrumb CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -84,110 +74,78 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/breadcrumb/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Breadcrumb component to the application +## Add Syncfusion® Breadcrumb control to the application -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -Add the HTML div tag with its `id` attribute as `breadcrumb` in your `index.html` file to initialize the Breadcrumb. +In this article, the Breadcrumb control is used as an example. Add the following element to the `~/src/index.html` file. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +```html - Essential JS 2 - Breadcrumb + Essential JS 2 - - - - -
        +
        -{% endhighlight %} -{% endtabs %} - -Import the Breadcrumb component in your `app.ts` file and initialize it with the `#breadcrumb`. + ``` -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Breadcrumb control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { BreadcrumbItemModel, Breadcrumb } from '@syncfusion/ej2-navigations'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); - new Breadcrumb({ - enableNavigation: false +//Breadcrumb items definition + +let items: BreadcrumbItemModel[] = [ + { + iconCss: 'e-icons e-home', + url: "https://ej2.syncfusion.com/demos", + }, + { + text: "Components", + url: "https://ej2.syncfusion.com/demos/#/material/grid/grid-overview", + }, + { + text: "Navigations", + url: "https://ej2.syncfusion.com/demos/#/material/breadcrumb/default", + }, + { + text: "Breadcrumb", + url: "./breadcrumb/default", + } +]; + +new Breadcrumb({ + items: items, }, '#breadcrumb'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic Breadcrumb component. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/breadcrumb/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/breadcrumb/getting-started-cs1" %} - -## Adding Breadcrumb items to the project - -Use `items` property to bind items for Breadcrumb component. The below example demonstrates the basic rendering of Breadcrumb with items support. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/breadcrumb/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/breadcrumb/getting-started-cs2" %} - -## Enable or Disable Navigation - -This feature enables or disables the item navigation. By default, the navigation will be enabled when setting `Url` property. To prevent breadcrumb item navigation, set `enableNavigation` property as false in Breadcrumb. The below example shows enabling and disabling the navigation of Breadcrumb items. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/breadcrumb/enable-disable-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/breadcrumb/enable-disable-cs1/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/breadcrumb/enable-disable-cs1" %} \ No newline at end of file diff --git a/ej2-javascript/button-group/getting-started.md b/ej2-javascript/button-group/getting-started.md index c0acd80f7..c021e9252 100644 --- a/ej2-javascript/button-group/getting-started.md +++ b/ej2-javascript/button-group/getting-started.md @@ -11,55 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Button group control -This section explains how to create a simple Button Group and configure its available functionalities using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Button Group and configure its available functionalities using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following dependencies are required to use the Button Group component in your application: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-splitbuttons -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Button Group package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-buttons` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Button Group CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -78,23 +74,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/button-group/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add ButtonGroup to the project +## Add Syncfusion® Button Group control to the application -Add the HTML div tag with class name as `e-btn-group` and the button elements that should group inside the div element with class name as -`e-btn` to your `index.html` file. +The Button group can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Button in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. +In this article, the Button group control is used as an example. Add the following Button group element to the `~/src/index.html` file. + +```html @@ -121,21 +118,15 @@ Add the HTML div tag with class name as `e-btn-group` and the button elements th - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. -npm start - -{% endhighlight %} -{% endtabs %} +``` +npm run start +``` The following example shows a basic ButtonGroup component. @@ -145,9 +136,6 @@ The following example shows a basic ButtonGroup component. {% highlight html tabtitle="index.html" %} {% include code-snippet/button-group/getting-started-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/button-group/getting-started-cs1/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/button-group/getting-started-cs1" %} @@ -158,9 +146,6 @@ The following example shows a basic ButtonGroup component. {% highlight html tabtitle="index.html" %} {% include code-snippet/button-group/getting-started-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/button-group/getting-started-cs1/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/button-group/getting-started-cs1" %} @@ -182,9 +167,6 @@ The following example illustrates how to achieve vertical orientation in ButtonG {% highlight html tabtitle="index.html" %} {% include code-snippet/button-group/vertical-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/button-group/vertical-cs1/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/button-group/vertical-cs1" %} @@ -195,9 +177,6 @@ The following example illustrates how to achieve vertical orientation in ButtonG {% highlight html tabtitle="index.html" %} {% include code-snippet/button-group/vertical-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/button-group/vertical-cs1/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/button-group/vertical-cs1" %} diff --git a/ej2-javascript/button/ts/getting-started.md b/ej2-javascript/button/ts/getting-started.md index d49cad85f..e6b792aaf 100644 --- a/ej2-javascript/button/ts/getting-started.md +++ b/ej2-javascript/button/ts/getting-started.md @@ -11,58 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Button control -This section explains the steps required to create the Button control using TypeScript and configure its properties using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps required to create the Button control using TypeScript and configure its properties using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The list of dependencies required to use the Button component in your application is given below: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-base -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Button package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-buttons` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} - -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Button CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -81,22 +74,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/button/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Button component +## Add Syncfusion® Button control to the application -Add the HTML Button tag with id attribute as the `element` to your `index.html` file. +The Button can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Button in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. + +In this article, the Button control is used as an example. Add the following Button element to the `~/src/index.html` file. +```html @@ -115,20 +110,14 @@ Add the HTML Button tag with id attribute as the `element` to your `index.html`
        - +``` -{% endhighlight %} -{% endtabs %} - -Then, import the Button component in your `app.ts` file and initialize it with the `#element` selector. - -`[src/app/app.ts]` +Now, to render the Button control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { Button } from '@syncfusion/ej2-buttons'; @@ -138,20 +127,15 @@ let button: Button = new Button({ content: 'Button' }); // Render initialized Button. button.appendTo('#element'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. -npm start - -{% endhighlight %} -{% endtabs %} +``` +npm run start +``` The following example shows a basic Button component: @@ -162,9 +146,6 @@ The following example shows a basic Button component: {% highlight html tabtitle="index.html" %} {% include code-snippet/button/getting-started-cs2/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/button/getting-started-cs2/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/button/getting-started-cs2" %} @@ -180,9 +161,6 @@ To change the default Button to flat Button, set the [`cssClass`](https://ej2.sy {% highlight html tabtitle="index.html" %} {% include code-snippet/button/getting-started-cs3/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/button/getting-started-cs3/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/button/getting-started-cs3" %} diff --git a/ej2-javascript/calendar/ts/getting-started.md b/ej2-javascript/calendar/ts/getting-started.md index bdf8cab24..334e61d61 100644 --- a/ej2-javascript/calendar/ts/getting-started.md +++ b/ej2-javascript/calendar/ts/getting-started.md @@ -11,87 +11,87 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Calendar control -This section explains how to create a simple Calendar, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Calendar, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The list of dependencies required to use the Calendar component in your application is given below: +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) + +## Set up the development environment + +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -```javascript -|-- @syncfusion/ej2-calendars - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart ``` -## Set up development environment +Navigate to the project folder in the command prompt: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +``` +cd ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Install Syncfusion® Calendar package -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -{% endhighlight %} -{% endtabs %} +Use the following command to install the `@syncfusion/ej2-calendars` package: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +npm install @syncfusion/ej2-calendars --save +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Then, install the remaining dependent npm packages using the following command: -cd ej2-quickstart +``` +npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Add Syncfusion® JavaScript packages +## Import Syncfusion® Calendar CSS styles -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight bash tabtitle="NPM" %} +{% highlight bash tabtitle="npm" %} -npm install +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles - -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. - -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-calendars/styles/material.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/calendar/index.css"; {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add Calendar to the application +## Add Syncfusion® Calendar control to the application -Add the HTML div tag with an ID attribute as the `element` to your `index.html` file. +The Calendar can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Calendar in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. +In this article, the Calendar control is used as an example. Add the following Calendar element to the `~/src/index.html` file. + +```html @@ -114,15 +114,11 @@ Add the HTML div tag with an ID attribute as the `element` to your `index.html` +``` -{% endhighlight %} -{% endtabs %} - -Then, import the Calendar component to your `app.ts` file, and initialize it with the `#element` -`[src/app/app.ts]`. +Now, to render the Calendar control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { Calendar } from '@syncfusion/ej2-calendars'; //Initialize calendar component. @@ -130,20 +126,15 @@ let calendarObject: Calendar = new Calendar(); //Render initialized calendar. calendarObject.appendTo('#element'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Now, run the application by using the command below. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm run start - -{% endhighlight %} -{% endtabs %} +``` The following example shows a basic Calendar component. diff --git a/ej2-javascript/carousel/ts/getting-started.md b/ej2-javascript/carousel/ts/getting-started.md index 369e73b48..d67a592f1 100644 --- a/ej2-javascript/carousel/ts/getting-started.md +++ b/ej2-javascript/carousel/ts/getting-started.md @@ -15,53 +15,47 @@ This section explains how to create a simple [JavaScript Carousel](https://www.s > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the Carousel component in your application. +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Carousel package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-navigations` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-navigations --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Carousel CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -80,56 +74,27 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/carousel/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Carousel component to the application - -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +## Add Syncfusion® Carousel control to the application -Add the HTML div tag with the `id` attribute as `carousel` to your `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Carousel control is used as an example. Add the following element to the `~/src/index.html` file. +```html - Essential JS 2 - Carousel + Essential JS 2 - - - - - @@ -139,13 +104,9 @@ Add the HTML div tag with the `id` attribute as `carousel` to your `index.html` + ``` -{% endhighlight %} -{% endtabs %} - -Import the Carousel component in your `app.ts` file and initialize it with the `#carousel`. - -`[src/app/app.ts]` +To render the Carousel control, add the following JavaScript code to the `~/src/app/app.ts` file {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -163,31 +124,39 @@ const carouselObj = new Carousel({ }); carouselObj.appendTo("#carousel"); +{% endhighlight %} +{% highlight css tabtitle="styles.css" %} + +.control-container { + height: 360px; + margin: 0 auto; + width: 600px; +} + +.img-container { + height: 100%; + margin: 0; +} + +.img-caption { + color: #fff; + font-size: 1rem; + position: absolute; + bottom: 3rem; + width: 100%; + text-align: center; +} + {% endhighlight %} {% endtabs %} ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic Carousel component. - -{% tabs %} -{% highlight html tabtitle="index.ts" %} -{% include code-snippet/carousel/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/carousel/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/carousel/getting-started-cs1" %} diff --git a/ej2-javascript/chips/ts/getting-started.md b/ej2-javascript/chips/ts/getting-started.md index cdf10df96..bf69992da 100644 --- a/ej2-javascript/chips/ts/getting-started.md +++ b/ej2-javascript/chips/ts/getting-started.md @@ -11,56 +11,51 @@ domainurl: ##DomainURL## # Getting Started with ##Platform_Name## Chips control -This section explains how to create a simple Chips control and configure its available functionalities in TypeScript, using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Chips control and configure its available functionalities in TypeScript, using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The list of dependencies required to use the Chips control in your application is given below: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-base -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Chips package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-buttons` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Chips CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -79,22 +74,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/chips/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add Chip to the project +## Add Syncfusion® Chips control to the application -Add the HTML `
        ` element for Chip control to your `index.html` file. +The Chips can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Chips in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. + +In this article, the Chips control is used as an example. Add the following Chips element to the `~/src/index.html` file. +```html @@ -117,16 +114,11 @@ Add the HTML `
        ` element for Chip control to your `index.html` file. +``` -{% endhighlight %} -{% endtabs %} - -Then, import the Chip control in your `app.ts` file, and initialize it with the `#chip`. - -`[src/app/app.ts]` +Now, to render the Chips control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { ChipList } from '@syncfusion/ej2-buttons'; @@ -134,20 +126,15 @@ import { ChipList } from '@syncfusion/ej2-buttons'; new ChipList({ chips: ["Janet Leverling"]}, '#chip'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. -npm start - -{% endhighlight %} -{% endtabs %} +``` +npm run start +``` The following example shows a basic Chip control. @@ -158,10 +145,6 @@ The following example shows a basic Chip control. {% highlight html tabtitle="index.html" %} {% include code-snippet/chips/getting-started-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/chips/getting-started-cs1/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/chips/getting-started-cs1" %} - diff --git a/ej2-javascript/combo-box/ts/getting-started.md b/ej2-javascript/combo-box/ts/getting-started.md index 4c5679bde..1e86980a0 100644 --- a/ej2-javascript/combo-box/ts/getting-started.md +++ b/ej2-javascript/combo-box/ts/getting-started.md @@ -1,73 +1,61 @@ --- layout: post -title: Getting started with Combo box control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Combo box control of Syncfusion Essential JS 2 and more details. +title: Getting started with ComboBox control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## ComboBox control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Getting started +control: ComboBox publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Combo box control +# Getting started in ##Platform_Name## ComboBox control -This section explains how to create a simple **ComboBox** component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. +This section explains the steps to create a simple ComboBox and demonstrates the basic usage of the ComboBox component using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node.js v14.0 or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the `ComboBox` component in your application. +Ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Setup development environment +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® ComboBox package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-dropdowns` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-dropdowns --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® ComboBox CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -86,24 +74,22 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/combo-box/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the ComboBox +## Add Syncfusion® ComboBox control to the application The ComboBox can be initialized through three different tags which described in [Initialize Tags](./tags). -Add the HTML input element that needs to be initialized as ComboBox in `index.html`. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the ComboBox control is used as an example. Add the following ComboBox element to the `~/src/index.html` file. +```html @@ -125,34 +111,11 @@ Add the HTML input element that needs to be initialized as ComboBox in `index.ht +``` -{% endhighlight %} -{% endtabs %} - -Now, import the ComboBox component to your `app.ts` and initialize it to the element `#combo` as shown below. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { ComboBox } from '@syncfusion/ej2-dropdowns'; - -// initialize ComboBox component -let comboBoxObject: ComboBox = new ComboBox(); - -// render initialized ComboBox -comboBoxObject.appendTo('#combo'); - -{% endhighlight %} -{% endtabs %} - -## Binding data source - -After initialization, populate the ComboBox with data using the [dataSource](https://ej2.syncfusion.com/documentation/api/combo-box/index-default#datasource) property. Here, an array of string values is passed to the ComboBox component. +Now, to render the ComboBox control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { ComboBox } from '@syncfusion/ej2-dropdowns'; @@ -168,21 +131,16 @@ let comboBoxObject: ComboBox = new ComboBox({ // render initialized ComboBox comboBoxObject.appendTo('#comboelement'); -{% endhighlight %} -{% endtabs %} +```` ## Run the application -After completing the configuration required to render a basic ComboBox, run the following command to display the output in your default browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm run start - -{% endhighlight %} -{% endtabs %} - +``` + The following example illustrates the output in your browser. {% tabs %} diff --git a/ej2-javascript/datepicker/ts/getting-started.md b/ej2-javascript/datepicker/ts/getting-started.md index e919e1e8c..ebd82ca70 100644 --- a/ej2-javascript/datepicker/ts/getting-started.md +++ b/ej2-javascript/datepicker/ts/getting-started.md @@ -11,90 +11,87 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Datepicker control -This section briefly explains how to create a simple [JavaScript DatePicker](https://www.syncfusion.com/javascript-ui-controls/js-datepicker) component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. +This section briefly explains how to create a simple [JavaScript DatePicker](https://www.syncfusion.com/javascript-ui-controls/js-datepicker) component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies is required to use DatePicker component in your application. +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) + +## Set up the development environment + +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -```javascript -|-- @syncfusion/ej2-calendars - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart ``` -## Set up development environment +Navigate to the project folder in the command prompt: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). +``` +cd ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Install Syncfusion® Datepicker package -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -{% endhighlight %} -{% endtabs %} +Use the following command to install the `@syncfusion/ej2-calendars` package: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +npm install @syncfusion/ej2-calendars --save +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Then, install the remaining dependent npm packages using the following command: -cd ej2-quickstart +``` +npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Add Syncfusion® JavaScript packages +## Import Syncfusion® Datepicker CSS styles -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight bash tabtitle="NPM" %} +{% highlight bash tabtitle="npm" %} -npm install +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles - -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. - -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-calendars/styles/material.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/datepicker/index.css"; {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add DatePicker to the application +## Add Syncfusion® Datepicker control to the application -Add the HTML input element for DatePicker into your `index.html` file. +The Datepicker can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Datepicker in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. +In this article, the Datepicker control is used as an example. Add the following Datepicker element to the `~/src/index.html` file. + +```html @@ -117,15 +114,11 @@ Add the HTML input element for DatePicker into your `index.html` file. +``` -{% endhighlight %} -{% endtabs %} - -Now import the DatePicker component into your `app.ts` and append it to `#element` -`[src/app/app.ts]` +Now, to render the Datepicker control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { DatePicker } from '@syncfusion/ej2-calendars'; @@ -134,20 +127,15 @@ let datepickerObject: DatePicker = new DatePicker(); // render initialized datepicker datepickerObject.appendTo('#element'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Now use the `npm run start` command to run the application in the browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm run start - -{% endhighlight %} -{% endtabs %} +``` The below example shows a basic DatePicker. diff --git a/ej2-javascript/daterangepicker/js/es5-getting-started.md b/ej2-javascript/daterangepicker/js/es5-getting-started.md index 7d4e5da4f..13a72bcb0 100644 --- a/ej2-javascript/daterangepicker/js/es5-getting-started.md +++ b/ej2-javascript/daterangepicker/js/es5-getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with JavaScript DateRangePicker | Syncfusion description: Checkout and learn about Es5 getting started with ##Platform_Name## Daterangepicker control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Es5 getting started diff --git a/ej2-javascript/daterangepicker/ts/getting-started.md b/ej2-javascript/daterangepicker/ts/getting-started.md index e05548a4b..b8bc4b0b1 100644 --- a/ej2-javascript/daterangepicker/ts/getting-started.md +++ b/ej2-javascript/daterangepicker/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with TypeScript DateRangePicker | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Daterangepicker control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -11,91 +11,87 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Daterangepicker control -This section briefly explains how to create a simple DateRangePicker component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create a simple DateRangePicker component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use DateRangePicker component in your application. +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) + +## Set up the development environment + +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -```javascript -|-- @syncfusion/ej2-calendars - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart ``` -## Set up development environment +Navigate to the project folder in the command prompt: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +``` +cd ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Install Syncfusion® Daterangepicker package -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -{% endhighlight %} -{% endtabs %} +Use the following command to install the `@syncfusion/ej2-calendars` package: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +npm install @syncfusion/ej2-calendars --save +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Then, install the remaining dependent npm packages using the following command: -cd ej2-quickstart +``` +npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Add Syncfusion® JavaScript packages +## Import Syncfusion® Daterangepicker CSS styles -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight bash tabtitle="NPM" %} +{% highlight bash tabtitle="npm" %} -npm install +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles - -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. - -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-calendars/styles/material.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/daterangepicker/index.css"; {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add DateRangePicker to the application +## Add Syncfusion® Daterangepicker control to the application -Add the HTML input element with an ID attribute as element for DateRangePicker to your `index.html` file. +The Daterangepicker can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Daterangepicker in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. +In this article, the Daterangepicker control is used as an example. Add the following Daterangepicker element to the `~/src/index.html` file. + +```html @@ -118,15 +114,11 @@ Add the HTML input element with an ID attribute as element for DateRangePicker t +``` -{% endhighlight %} -{% endtabs %} - -Import the DateRangePicker component to your `app.ts` and append it to the `#element` -`[src/app/app.ts]`. +Now, to render the Calendar control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { DateRangePicker } from '@syncfusion/ej2-calendars'; @@ -134,20 +126,15 @@ import { DateRangePicker } from '@syncfusion/ej2-calendars'; let daterangepicker: DateRangePicker = new DateRangePicker(); daterangepicker.appendTo('#element'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Use the `npm run start` command to run the application in the browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm run start - -{% endhighlight %} -{% endtabs %} +``` The following example shows a basic DateRangePicker. diff --git a/ej2-javascript/datetimepicker/js/es5-getting-started.md b/ej2-javascript/datetimepicker/js/es5-getting-started.md index 6a92f5d9d..31d96ae97 100644 --- a/ej2-javascript/datetimepicker/js/es5-getting-started.md +++ b/ej2-javascript/datetimepicker/js/es5-getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with JavaScript DateTimePicker | Syncfusion description: Checkout and learn about Es5 getting started with ##Platform_Name## Datetimepicker control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Es5 getting started diff --git a/ej2-javascript/datetimepicker/ts/getting-started.md b/ej2-javascript/datetimepicker/ts/getting-started.md index d84809b1e..28a947132 100644 --- a/ej2-javascript/datetimepicker/ts/getting-started.md +++ b/ej2-javascript/datetimepicker/ts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started | Syncfusion +title: Getting started with TypeScript DateTimePicker | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Datetimepicker control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started @@ -11,91 +11,87 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Datetimepicker control -This section briefly explains how to create a simple DateTimePicker component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create a simple DateTimePicker component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use DateTimePicker component in your application. +Ensure the following tools are installed on your machine: + +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) + +## Set up the development environment + +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -```javascript -|-- @syncfusion/ej2-calendars - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart ``` -## Set up development environment +Navigate to the project folder in the command prompt: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +``` +cd ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Install Syncfusion® Datetimepicker package -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -{% endhighlight %} -{% endtabs %} +Use the following command to install the `@syncfusion/ej2-calendars` package: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +npm install @syncfusion/ej2-calendars --save +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Then, install the remaining dependent npm packages using the following command: -cd ej2-quickstart +``` +npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Add Syncfusion® JavaScript packages +## Import Syncfusion® Datetimepicker CSS styles -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: {% tabs %} -{% highlight bash tabtitle="NPM" %} +{% highlight bash tabtitle="npm" %} -npm install +npm install @syncfusion/ej2-fluent2-theme --save {% endhighlight %} {% endtabs %} -## Import the Syncfusion® CSS styles - -Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. - -The quickstart application is preconfigured to use the **Material** theme in the **~/src/styles/styles.css** file, as shown below: +The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight css tabtitle="style.css" %} +{% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css"; -@import "../../node_modules/@syncfusion/ej2-calendars/styles/material.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/datetimepicker/index.css"; {% endhighlight %} {% endtabs %} -> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. +> Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add DateTimePicker to the application +## Add Syncfusion® Datetimepicker control to the application -Add the HTML input element with an ID attribute as element for DateTimePicker to your `index.html` file. +The Datetimepicker can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Datetimepicker in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. +In this article, the Datetimepicker control is used as an example. Add the following Datetimepicker element to the `~/src/index.html` file. + +```html @@ -118,36 +114,26 @@ Add the HTML input element with an ID attribute as element for DateTimePicker to +``` -{% endhighlight %} -{% endtabs %} - -Import the DateTimePicker component to your `app.ts` and append it to the `#element` -`[src/app/app.ts]`. +Now, to render the Datetimepicker control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { DateTimePicker } from '@syncfusion/ej2-calendars'; // initialize datetimepicker component let datetimepicker: DateTimePicker = new DateTimePicker(); datetimepicker.appendTo('#element'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Use the `npm run start` command to run the application in the browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm run start - -{% endhighlight %} -{% endtabs %} +``` The following example shows a basic DateTimePicker. diff --git a/ej2-javascript/diagram/js/getting-started.md b/ej2-javascript/diagram/js/getting-started.md index c32a9f9e4..3561495c9 100644 --- a/ej2-javascript/diagram/js/getting-started.md +++ b/ej2-javascript/diagram/js/getting-started.md @@ -19,7 +19,7 @@ This section explains how to create and render a simple Essential® JS 2 Diagram Follow these steps to set up your local environment. -> **Prerequisite:** If you plan to use the local-script setup with a local HTTP server (e.g., `npx http-server`), ensure [Node.js](https://nodejs.org/) is installed on your machine. +> **Prerequisite:** If you plan to use the local-script setup with a local HTTP server (e.g., `npx http-server`), ensure `Node.js` is installed on your machine. **Step 1:** Create a root folder named **my-diagram-app** for your application. diff --git a/ej2-javascript/diagram/ts/getting-started.md b/ej2-javascript/diagram/ts/getting-started.md index a8cbbf50a..85e049e28 100644 --- a/ej2-javascript/diagram/ts/getting-started.md +++ b/ej2-javascript/diagram/ts/getting-started.md @@ -47,14 +47,6 @@ Use the following command to install the dependent npm packages from the command npm install ``` -To render the Diagram control, install the `@syncfusion/ej2-diagrams` package using the following command: - -``` -npm install @syncfusion/ej2-diagrams -``` - -> Install the latest version of `@syncfusion/ej2-diagrams` to ensure compatibility with the sample code in this guide. - ## Import Syncfusion® CSS styles The Diagram control needs Syncfusion® theme styles to display correctly. Syncfusion® theme packages include ready-to-use styles for supported controls. diff --git a/ej2-javascript/floating-action-button/ts/getting-started.md b/ej2-javascript/floating-action-button/ts/getting-started.md index e4c00870c..4c752ef5e 100644 --- a/ej2-javascript/floating-action-button/ts/getting-started.md +++ b/ej2-javascript/floating-action-button/ts/getting-started.md @@ -11,56 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Floating Action Button control -This section explains how to create a simple Floating Action Button control and configure its available functionalities in TypeScript, using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Floating Action Button control and configure its available functionalities in TypeScript, using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The list of dependencies required to use the Floating Action Button control in your application is given as follows: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-base -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Floating Action Button package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-buttons` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Floating Action Button CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -79,22 +74,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/floating-action-button/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Floating Action Button to the Application +## Add Syncfusion® Floating Action Button control to the application -Add the HTML Button tag with ID attribute as the `button` to your `index.html` file. +The Floating Action Button can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Floating Action Button in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. + +In this article, the Floating Action Button control is used as an example. Add the following Floating Action Button element to the `~/src/index.html` file. +```html @@ -117,16 +114,11 @@ Add the HTML Button tag with ID attribute as the `button` to your `index.html` f +``` -{% endhighlight %} -{% endtabs %} - -Then, import the Floating Action Button control in your `app.ts` file and initialize it with the `#button` selector. - -`[src/app/app.ts]` +Now, to render the Floating Action Button control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { Fab } from '@syncfusion/ej2-buttons'; import { enableRipple } from '@syncfusion/ej2-base'; @@ -139,20 +131,15 @@ let fab: Fab = new Fab({ content: 'Add' }); // Render initialized Floating Action Button. fab.appendTo('#fab'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. -npm start - -{% endhighlight %} -{% endtabs %} +``` +npm run start +``` The following example shows a basic Floating Action Button control: @@ -163,9 +150,6 @@ The following example shows a basic Floating Action Button control: {% highlight html tabtitle="index.html" %} {% include code-snippet/floating-action-button/getting-started-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/floating-action-button/getting-started-cs1/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/floating-action-button/getting-started-cs1" %} @@ -181,9 +165,6 @@ The Floating Action Button control triggers the `onclick` event when clicked. Yo {% highlight html tabtitle="index.html" %} {% include code-snippet/floating-action-button/events-cs4/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/floating-action-button/events-cs4/styles.css %} -{% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/floating-action-button/events-cs4" %} +{% previewsample "page.domainurl/code-snippet/floating-action-button/events-cs4" %} \ No newline at end of file diff --git a/ej2-javascript/in-place-editor/ts/getting-started.md b/ej2-javascript/in-place-editor/ts/getting-started.md index 53a886d06..fea5b2162 100644 --- a/ej2-javascript/in-place-editor/ts/getting-started.md +++ b/ej2-javascript/in-place-editor/ts/getting-started.md @@ -15,63 +15,47 @@ This section explains how to create a simple in-place editor using TypeScript an > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies - -The following is the list of dependencies required to use the In-place Editor control in your application. - -```js -|-- @syncfusion/ej2-inplace-editor - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-calendars - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-richtexteditor -``` - -## Set up development environment +## Prerequisites -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Ensure the following tools are installed on your machine: -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® In-place Editor package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-inplace-editor` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-inplace-editor --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® In-place Editor CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -90,50 +74,40 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/inplace-editor/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add the In-place Editor with Textbox - -By default, the Essential® JS 2 TextBox control is rendered in the in-place editor when the [`type`](https://ej2.syncfusion.com/documentation/api/inplace-editor/inputtype) property is set to `Text`. +## Add Syncfusion® In-place Editor control to the application -* Add the HTML div tag with its ID attribute as `element` in your `index.html` file to initialize the In-place Editor. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the In-place Editor control is used as an example. Add the following element to the `~/src/index.html` file. +```html - Essential JS 2 In-place Editor + Essential JS 2 - - - - + -
        +
        - - -{% endhighlight %} -{% endtabs %} -* Import the In-place Editor control to your `app.ts` file and initialize it to the `#element` as shown as follows. + + ``` -`[src/app/app.ts]` +To render the In-place Editor control with Textbox, add the following JavaScript code to the `~/src/app/app.ts` file {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -153,104 +127,14 @@ editObj.appendTo('#element'); > In the above sample code, `#element` is the `id` of the HTML element in a page to which the In-place Editor is initialized. -## Configuring DropDownList - -You can render the Essential® JS 2 DropDownList by changing the [`type`](https://ej2.syncfusion.com/documentation/api/inplace-editor/inputtype) property as [`DropDownList`](https://ej2.syncfusion.com/documentation/api/drop-down-list/index-default) and configure its properties and methods using the `model` property. - -In the following sample, [`type`](https://ej2.syncfusion.com/documentation/api/inplace-editor/inputtype) and model values are configured to render the [`DropDownList`](https://ej2.syncfusion.com/documentation/api/drop-down-list/index-default) control. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor'; -let genderData = ['Male', 'Female'] -let editObj: InPlaceEditor = new InPlaceEditor({ - type: 'DropDownList', - mode: 'Inline', - model: { - dataSource: genderData, - placeholder: 'Select gender' - } -}); -editObj.appendTo('#element'); - -{% endhighlight %} -{% endtabs %} - -## Integrate DatePicker - -You can render the Essential® JS2 [DatePicker](https://ej2.syncfusion.com/documentation/api/datepicker/index-default) by changing the [`type`](https://ej2.syncfusion.com/documentation/api/inplace-editor/inputtype) property as [`Date`](https://ej2.syncfusion.com/documentation/api/inplace-editor/inputtype)  and also configure its properties and methods using the [`model`](https://ej2.syncfusion.com/documentation/api/inplace-editor/index-default#model) property. - -In the following sample, [`type`](https://ej2.syncfusion.com/documentation/api/inplace-editor/inputtype) and [`model`](https://ej2.syncfusion.com/documentation/api/inplace-editor/index-default#model) values are configured to render the [DatePicker](https://ej2.syncfusion.com/documentation/api/datepicker/index-default) control. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor'; -let editObj: InPlaceEditor = new InPlaceEditor({ - type: 'Date', - value: new Date('04/12/2018'), - model: { - showTodayButton: true - } -}); -editObj.appendTo('#element'); - -{% endhighlight %} -{% endtabs %} - ## Run the application -* Run the application in the browser using the following command. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/in-place-editor/getting-started-form-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/in-place-editor/getting-started-form-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/in-place-editor/getting-started-form-cs2" %} - -## Submitting data to the server (save) - -You can submit editor value to the server by configuring the [`url`](https://ej2.syncfusion.com/documentation/api/inplace-editor/index-default#url), [`adaptor`](https://ej2.syncfusion.com/documentation/api/inplace-editor/adaptortype) and [`primaryKey`](https://ej2.syncfusion.com/documentation/api/inplace-editor/index-default#primarykey) property. - -| Property | Usage | -|------------|---------------------------------------------------------| -| **`url`** | Gets the URL for server submit action. | -| **`adaptor`** | Specifies the adaptor type that is used by DataManager to communicate with DataSource. | -| **`primaryKey`** | Defines the unique primary key of the editable field which can be used for saving data in the data-base.| - -> The [`primaryKey`](https://ej2.syncfusion.com/documentation/api/inplace-editor/index-default#primarykey) property is mandatory. If it's not set, edited data are not sent to the server. - -## Refresh with modified value - -The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/in-place-editor/getting-started-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/in-place-editor/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - +``` + {% previewsample "page.domainurl/code-snippet/in-place-editor/getting-started-cs2" %} ## See Also diff --git a/ej2-javascript/list-box/ts/getting-started.md b/ej2-javascript/list-box/ts/getting-started.md index e9498be32..b37a03323 100644 --- a/ej2-javascript/list-box/ts/getting-started.md +++ b/ej2-javascript/list-box/ts/getting-started.md @@ -1,59 +1,61 @@ --- layout: post -title: Getting started with List box control | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## List box control of Syncfusion Essential JS 2 and more details. +title: Getting started with ListBox control | Syncfusion +description: Checkout and learn about Getting started with ##Platform_Name## ListBox control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Getting started +control: ListBox publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## List box control +# Getting started in ##Platform_Name## ListBox control -This section explains how to create a simple **ListBox** component and configure its available functionalities in TypeScript using the Essential® JS 2 [`quickstart`](https://github.com/syncfusion/ej2-quickstart.git) seed repository. +This section explains the steps to create a simple ListBox and demonstrates the basic usage of the ListBox component using the Essential® JS 2 [`quickstart`](https://github.com/syncfusion/ej2-quickstart.git) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node.js v14.0 or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the ListBox component in your application. +Ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) + +## Set up the development environment + +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: + +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart ``` -## Set up development environment +Navigate to the project folder in the command prompt: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). +``` +cd ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Install Syncfusion® ListBox package -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -{% endhighlight %} -{% endtabs %} +Use the following command to install the `@syncfusion/ej2-dropdowns` package: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +npm install @syncfusion/ej2-dropdowns --save +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Then, install the remaining dependent npm packages using the following command: -cd ej2-quickstart +``` +npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® ListBox CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -72,18 +74,18 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/list-box/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the ListBox +## Add Syncfusion® ListBox control to the application -Add the HTML input element that needs to be initialized as a ListBox in `index.html`. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` +In this article, the ListBox control is used as an example. Add the following ListBox element to the `~/src/index.html` file. ```html @@ -116,25 +118,7 @@ Add the HTML input element that needs to be initialized as a ListBox in `index.h ``` -Now, import the ListBox component to your `app.ts` and initialize it to the element `#listbox` as shown below. - -`[src/app/app.ts]` - -```ts - -import { ListBox } from '@syncfusion/ej2-dropdowns'; - -// initialize ListBox component -let listObj: ListBox = new ListBox(); - -// render initialized ListBox -listObj.appendTo('#listbox'); - -``` - -## Binding data source - -After initialization, populate the ListBox with data using the [`dataSource`](https://ej2.syncfusion.com/documentation/api/list-box/index-default#datasource) property. Here, an array of object is passed to the ListBox component. +Now, to render the ListBox control, add the following TypeScript code to the `~/src/app/app.ts` file. ```ts @@ -161,29 +145,16 @@ let listObj: ListBox = new ListBox({ }); listObj.appendTo('#listbox'); -``` - -## Adding Style sheet to the Application - -To render Listbox component, need to import dropdowns and its dependent components styles as given below in `styles.css`. - -``` -@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; -@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css"; -@import "../node_modules/@syncfusion/ej2-lists/styles/material.css"; -@import "../node_modules/@syncfusion/ej2-popups/styles/material.css"; -@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css"; -``` +```` ## Run the application -After completing the configuration required to render a basic ListBox, run the following command to -display the output in your default browser. +Now, run the application in the browser using the following command. ``` npm start ``` - + The following example illustrates the output in your browser. {% tabs %} diff --git a/ej2-javascript/listview/ts/getting-started.md b/ej2-javascript/listview/ts/getting-started.md index 7472b6e41..46cf82fde 100644 --- a/ej2-javascript/listview/ts/getting-started.md +++ b/ej2-javascript/listview/ts/getting-started.md @@ -1,69 +1,64 @@ --- layout: post -title: Getting started with ##Platform_Name## ListView control | Syncfusion +title: Getting started with ListView control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## ListView control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: ListView +control: Getting started publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## ListView control -This section briefly explains how to create **ListView** control and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +# Getting started in ##Platform_Name## ListView control -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +This section explains the steps to create a simple ListView and demonstrates the basic usage of the ListView component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -## Dependencies +> This application is integrated with the **webpack.config.js** configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started). -Install the below required dependent packages to render the ListView control. +## Prerequisites -```javascript -|-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data -``` +Ensure the following tools are installed on your machine: -## Set up development environment +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® TypeScript ListView package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the @syncfusion/ej2-lists package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-lists --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Install the required npm packages: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual packages and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). ## Import Syncfusion® CSS styles -Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). +Syncfusion® TypeScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). The quickstart application is preconfigured to use the `Fluent2` theme. To install the [Fluent2](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) theme package, use the following command: @@ -78,76 +73,43 @@ npm install @syncfusion/ej2-fluent2-theme --save The required styles are imported in the `~/src/styles/styles.css` file, as shown below: {% tabs %} -{% highlight bash tabtitle="styles.css" %} +{% highlight css tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/list-view/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add ListView to the project - -Add the HTML `
        ` element for ListView control to your `index.html`. +## Add Syncfusion® ListView control to the application -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the ListView control is used as an example. Add the following ListView element to the `~/src/index.html` file. +```html - Essential JS 2 ListView + Essential JS 2 - - - - -
        - +
        +``` -{% endhighlight %} -{% endtabs %} - -Import the ListView control into your `app.ts` and append it to the `#element`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { ListView } from '@syncfusion/ej2-lists'; - -//Initialize ListView control -let listviewInstance: ListView = new ListView(); - -//Render initialized ListView -listviewInstance.appendTo("#element"); - -{% endhighlight %} -{% endtabs %} - -## Bind data source - -Populate the data in ListView by using the dataSource property. Here, an array of JSON values are passed to the ListView control. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the ListView control, add the following TypeScript code to the `~/src/app/app.ts` file +```ts import { ListView } from '@syncfusion/ej2-lists'; //define the array of JSON @@ -168,41 +130,18 @@ let listviewInstance: ListView = new ListView({ //Render initialized ListView listviewInstance.appendTo("#element"); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Use the `npm run start` command to run the application in the browser. +Now, run the application in the browser using the following command. -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm run start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic ListView. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/listview/getting-started-cs1/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/listview/getting-started-cs1/index.html %} -{% endhighlight %} -{% highlight css tabtitle="index.css" %} -{% include code-snippet/listview/getting-started-cs1/index.css %} -{% endhighlight %} -{% endtabs %} - +``` +npm start +``` + {% previewsample "page.domainurl/code-snippet/listview/getting-started-cs1" %} ## See Also -[Data Binding Types](./data-binding) - -[ListView customization](./customizing-templates) - -[Virtualization](./virtualization) \ No newline at end of file +* [How to register Syncfusion® license key in TypeScript application](https://ej2.syncfusion.com/documentation/licensing/license-key-registration) \ No newline at end of file diff --git a/ej2-javascript/markdown-editor/images/getting-started.png b/ej2-javascript/markdown-editor/images/getting-started.png new file mode 100644 index 0000000000000000000000000000000000000000..44f6e9e276c27b6d3a966b123f975812a8ca14b6 GIT binary patch literal 11810 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 Ensure that all Syncfusion Markdown Editor script files are loaded in the correct order and included before initializing the control. The order is important because the scripts have dependencies, and loading them incorrectly may prevent the Markdown Editor from working properly or cause runtime errors. -Make sure the required base and dependent scripts are included along with the Markdown Editor script. +I> Ensure that all Syncfusion Markdown Editor script files are loaded in the correct order and included before initializing the control. The order is important because the scripts have dependencies, and loading them incorrectly may prevent the Markdown Editor from working properly or cause runtime errors. Make sure the required base and dependent scripts are included along with the Markdown Editor script. ## Adding Markdown Editor control -To get started, add the Markdown Editor control in index.js and index.html files. Markdown Editor can be initialized through div element or textarea element. +Now, you can start adding the Markdown Editor control to the application. For getting started, add the Markdown Editor initialization code in the **index.js** file and add the target element in the **index.html** file using the following sample. -Markdown Editor can be initialized on div element as shown below: +Markdown Editor can be initialized on a div element as shown below: {% tabs %} {% highlight js tabtitle="index.js" %} @@ -100,32 +98,29 @@ Markdown Editor can be initialized on div element as shown below: {% endhighlight %} {% endtabs %} -## Run the application +## Run the Application -Now, run the index.html in web browser, it will render the Essential JS 2 Markdown Editor control. +Now, run the `index.html` file in a web browser. -Output will be displayed as follows. +The Syncfusion® JavaScript Markdown Editor is displayed as shown below. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/markdown-editor/getting-started-cs2/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/markdown-editor/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/markdown-editor/getting-started-cs2" %} +![Syncfusion JavaScript Markdown Editor output](images/getting-started.png) -> You can refer to our [JavaScript Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Markdown Editor example](https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/mark-down-editor/overview.html) that shows how to render the markdown editor. ## See Also -* [How to change the editor type](./editor-modes) -* [How to render the iframe](./iframe) -* [How to render the toolbar in inline mode](./inline-mode) +**Documentation:** + +* [How to change the editor type](rich-text-editor/editor-types/editor-modes.md) +* [How to render the iframe](rich-text-editor/editor-types/iframe.md) +* [How to render the toolbar in inline mode](rich-text-editor/editor-types/inline-editing.md) +* [Accessibility in Markdown Editor](accessibility) +* [Keyboard support in Markdown Editor](keyboard-support) +* [Globalization in Markdown Editor](rich-text-editor/globalization) + +**Live examples:** + * [How to insert Emoticons](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/insert-emoticons) * [Blog posting using Rich Text Editor](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/blog-posting) -* [Accessibility in Rich text editor](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/accessibility) -* [Keyboard support in Rich text editor](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/keyboard-support) -* [Globalization in Rich text editor](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/globalization) + +> You can refer to our [JavaScript Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-wysiwyg-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Markdown Editor example](https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/mark-down-editor/overview.html) that shows how to render the Markdown Editor. \ No newline at end of file diff --git a/ej2-javascript/markdown-editor/ts/getting-started.md b/ej2-javascript/markdown-editor/ts/getting-started.md index 6583609f0..93d02dbab 100644 --- a/ej2-javascript/markdown-editor/ts/getting-started.md +++ b/ej2-javascript/markdown-editor/ts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with ##Platform_Name## Markdown Editor | Syncfusion -description: Checkout and learn about Getting started with ##Platform_Name## Markdown Editor control of Syncfusion Essential JS 2 and more details. +description: Check out and learn about Getting started with ##Platform_Name## Markdown Editor control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started publishingplatform: ##Platform_Name## @@ -11,15 +11,15 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Markdown Editor control -The Syncfusion Typescript Markdown Editor is a web-based editor that enables users to create, edit, and format Markdown content with features such as table support and structured content formatting. This section explains the steps to create a simple Markdown Editor and demonstrates the basic usage of the Markdown Editor control using a Vite-based TypeScript project scaffolded with Vite latest vite version. +The Syncfusion TypeScript Markdown Editor is a web-based editor that enables users to create, edit, and format Markdown content with features such as table support and structured content formatting. This section explains the steps to create a simple Markdown Editor and demonstrates the basic usage of the Markdown Editor control using a Vite-based TypeScript project scaffolded with Vite latest Vite version. ## Prerequisites -This guide uses Vite as the bundler and development environment. Install Node.js `24.13.0` or higher before proceeding. For detailed information about Vite’s capabilities and configuration options, refer to the [Vite documentation](https://vitejs.dev/). +This guide uses Vite as the bundler and development environment. Install Node.js `24.13.0` or `higher` before proceeding. For detailed information about Vite’s capabilities and configuration options, refer to the [Vite documentation](https://vitejs.dev/). -## Create a TypeScript application. +## Create a TypeScript application -To set-up a Typescript application in TypeScript environment, run the following command. +To set up a TypeScript application, run the following command. ```bash npm create vite@latest my-app -- --template vanilla-ts @@ -38,9 +38,9 @@ npm install ## Add Syncfusion JavaScript packages All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. -To install Markdown Editor control, use the following command +To install the Markdown Editor control, use the following command -``` +```bash npm install @syncfusion/ej2-richtexteditor ``` @@ -66,20 +66,33 @@ I> To apply the application-specific styles correctly, import style.css into **s The following modules provide the basic features of the Markdown Editor. -* `Toolbar` - Inject this module to use Toolbar feature. -* `Link` - Inject this module to use link feature in Markdown Editor. -* `Image`- Inject this module to use image feature in Markdown Editor. -* `MarkdownEditor` - Inject this module to use Rich Text Editor as Markdown editor. +* `Toolbar` - Inject this module to use the Toolbar feature. +* `Link` - Inject this module to use the link feature in Markdown Editor. +* `Image`- Inject this module to use the image feature in Markdown Editor. +* `MarkdownEditor` - Inject this module to use the Rich Text Editor as Markdown editor. + +These modules should be injected into the Rich Text Editor using the `RichTextEditor.Inject` method as demonstrated in the following example: -These modules should be injected into the Markdown Editor using the `RichTextEditor.Inject` method. +{% tabs %} +{% highlight ts hl_lines="3" tabtitle="app.ts" %} + +import './style.css'; +import { RichTextEditor, Toolbar, Link, Image, MarkdownEditor } from '@syncfusion/ej2-richtexteditor'; +RichTextEditor.Inject(Toolbar, Link, Image, MarkdownEditor); + +let editor: RichTextEditor = new RichTextEditor({ + editorMode: 'Markdown' +}); +editor.appendTo('#editor'); + +{% endhighlight %} +{% endtabs %} T> Additional feature modules are available [here](https://ej2.syncfusion.com/documentation/rich-text-editor/module) ## Adding Markdown Editor control -To get started, add the Markdown Editor control in `main.ts` and `index.html` files. Markdown Editor can be initialized through div element or textarea element. - -Output will be displayed as follows +Now, you can start adding the Markdown Editor control to the application. For getting started, add the Markdown Editor initialization code in the **src/main.ts** file and add the target element in the **index.html** file using the following sample. {% tabs %} {% highlight ts tabtitle="app.ts" %} @@ -95,7 +108,7 @@ editor.appendTo('#editor'); {% endhighlight %} -{% highlight css tabtitle="styles.css" %} +{% highlight css tabtitle="style.css" %} @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'; @@ -123,22 +136,30 @@ editor.appendTo('#editor'); {% endtabs %} -## Run the application +## Run the Application Use the following command to run the application. ```bash npm run dev ``` +The Syncfusion® TypeScript Markdown Editor is displayed in the browser as shown below. + +![Syncfusion TypeScript Markdown Editor output](images/getting-started.png) ## See Also -* [How to change the editor type](./editor-modes) -* [How to render the iframe](./iframe) -* [How to render the toolbar in inline mode](./inline-mode) +**Documentation:** + +* [How to change the editor type](editor-modes) +* [How to render the iframe](iframe) +* [How to render the toolbar in inline mode](inline-mode) +* [Accessibility in Markdown Editor](accessibility) +* [Keyboard support in Markdown Editor](keyboard-support) +* [Globalization in Rich Text Editor](rich-text-editor/globalization) + +**Live examples:** + * [How to insert Emoticons](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/insert-emoticons) * [Blog posting using Rich Text Editor](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/blog-posting) -* [Reactive Form with Rich Text Editor](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/reactive-form) -* [Accessibility in Rich text editor](https://ej2.syncfusion.com/documentation/rich-text-editor/accessibility) -* [Keyboard support in Rich text editor](https://ej2.syncfusion.com/documentation/rich-text-editor/keyboard-support) -* [Globalization in Rich text editor](https://ej2.syncfusion.com/documentation/rich-text-editor/globalization) \ No newline at end of file +* [Reactive Form with Rich Text Editor](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/reactive-form) \ No newline at end of file diff --git a/ej2-javascript/mention/ts/getting-started.md b/ej2-javascript/mention/ts/getting-started.md index eafb15991..f46a275d2 100644 --- a/ej2-javascript/mention/ts/getting-started.md +++ b/ej2-javascript/mention/ts/getting-started.md @@ -3,7 +3,7 @@ layout: post title: Getting started with ##Platform_Name## Mention control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## Mention control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Getting started +control: Mention publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,64 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Mention control -This section explains how to create a `Mention`, and configure its available functionalities in TypeScript using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps to create a simple Mention and demonstrates the basic usage of the Mention component using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node.js v14.0 or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the Mention control in your application. +Ensure the following tools are installed on your machine: -```js - -|-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Mention package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-dropdowns` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-dropdowns --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Mention CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -87,23 +74,20 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/mention/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding the Mention control to the application - -Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. +## Add Syncfusion® Mention control to the application -Add the HTML div tag with the `id` attribute as `mentionElement` to your `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -`[src/index.html]` +In this article, the Mention control is used as an example. Add the following Mention element to the `~/src/index.html` file. -{% tabs %} -{% highlight html tabtitle="index.html" %} +```html @@ -128,33 +112,11 @@ Add the HTML div tag with the `id` attribute as `mentionElement` to your `index. -{% endhighlight %} -{% endtabs %} - -Import the Mention control in your `app.ts` file and initialize it with the `#mentionElement`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { Mention } from '@syncfusion/ej2-dropdowns'; - -// initialize Mention control -let mentionObject: Mention = new Mention({}); - -// render initialized Mention -mentionObject.appendTo('#mentionElement'); - -{% endhighlight %} -{% endtabs %} - -## Binding the data source +``` -After initialization, populate the Mention with data using the [dataSource](https://ej2.syncfusion.com/documentation/api/mention/index-default#datasource) property. Here, an array of string values is passed to the Mention control. +Now, to render the Mention control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { Mention } from '@syncfusion/ej2-dropdowns'; @@ -170,21 +132,16 @@ let mentionObject: Mention = new Mention({ // render initialized Mention mentionObject.appendTo('#mentionElement'); -{% endhighlight %} -{% endtabs %} +```` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm run start - -{% endhighlight %} -{% endtabs %} - +``` + The following example, shows a basic Mention control. {% tabs %} diff --git a/ej2-javascript/menu/ts/getting-started.md b/ej2-javascript/menu/ts/getting-started.md index 866cb3e0f..d644bcbe2 100644 --- a/ej2-javascript/menu/ts/getting-started.md +++ b/ej2-javascript/menu/ts/getting-started.md @@ -15,57 +15,47 @@ This section explains how to create a simple Menu, and configure its available f > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies - -The following list of dependencies are required to use the Menu component in your application. - -```js -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` +## Prerequisites -## Set up development environment +Ensure the following tools are installed on your machine: -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Menu package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-navigations` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-navigations --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Menu CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -84,53 +74,41 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/menu/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add Menu to the project +## Add Syncfusion® Menu control to the application Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -Add the HTML UL tag with the `id` attribute as `menu` to your `index.html` file. - -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Menu control is used as an example. Add the following element to the `~/src/index.html` file. +```html - Essential JS 2 - Menu + Essential JS 2 - - + -
        LOADING....
        -
        +
        + ``` -{% endhighlight %} -{% endtabs %} - -Import the Menu component in your `app.ts` file and initialize it with the `#menu`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Menu control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { Menu, MenuItemModel } from '@syncfusion/ej2-navigations'; import { enableRipple } from '@syncfusion/ej2-base'; @@ -175,54 +153,18 @@ let menuItems: MenuItemModel[] = [ // Initialize Menu component. let menuObj: Menu = new Menu({ items: menuItems }, '#menu'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic Menu component. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/menu/getting-started-cs11/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/menu/getting-started-cs11/index.html %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/menu/getting-started-cs11" %} -> This example demonstrates the basic rendering of Menu with items support. For more information about data source support, refer to the [`Data Source Binding`](./data-source-binding-and-custom-menu-items#data-binding) section. - -## Group menu items with separator - -The separators are both horizontal and vertical lines used to separate the menu items. You cannot select the separators, but you can enable separators to group the menu items using the [`separator`](../api/menu/menuItemModel#separator) property. The `Open` and `Save` sub menu items are grouped using the `separator` property in the following sample. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/menu/getting-started-cs12/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/menu/getting-started-cs12/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/menu/getting-started-cs12" %} - -> The [`separator`](../api/menu/menuItemModel#separator) property should not be given along with the other fields in the [`MenuItem`](../api/menu/menuItemModel). You can also enable the separator to group **horizontal** menu items. - ## See Also * [Create menu using data source](./data-source-binding-and-custom-menu-items#data-binding) diff --git a/ej2-javascript/message/ts/getting-started.md b/ej2-javascript/message/ts/getting-started.md index 9d71a8139..af77bba69 100644 --- a/ej2-javascript/message/ts/getting-started.md +++ b/ej2-javascript/message/ts/getting-started.md @@ -15,54 +15,47 @@ This section explains the steps required to create a simple [JavaScript Message] > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the Message control in the application. +Ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-popups -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Message package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-notifications` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-notifications --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Message CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -81,77 +74,54 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/message/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add Message control +## Add Syncfusion® Message control to the application -Now, start adding the Essential® JS 2 Message control to the application. To get started, add an HTML `
        ` element to the `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Message control is used as an example. Add the following element to the `~/src/index.html` file. +```html - Essential JS 2 Message control + Essential JS 2 - - - - + - +
        + ``` -{% endhighlight %} -{% endtabs %} - - Add the following code in the `app.ts` file to convert the `div` element to message control. - - `[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Message control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { Message } from '@syncfusion/ej2-notifications' let msgObj: Message = new Message({ content: 'Please read the comments carefully' }); msgObj.appendTo('#msg'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example shows a basic Message control. - -{% tabs %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/message/getting-started-cs1/index.html %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/message/getting-started-cs1" %} diff --git a/ej2-javascript/multicolumn-combobox/ts/getting-started.md b/ej2-javascript/multicolumn-combobox/ts/getting-started.md index 8b67561e1..8f0c1a13e 100644 --- a/ej2-javascript/multicolumn-combobox/ts/getting-started.md +++ b/ej2-javascript/multicolumn-combobox/ts/getting-started.md @@ -3,7 +3,7 @@ layout: post title: Getting started with MultiColumn ComboBox control | Syncfusion description: Checkout and learn about Getting started with ##Platform_Name## MultiColumn ComboBox control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript -control: Getting started +control: MultiColumn ComboBox publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,63 +11,49 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## MultiColumn ComboBox control -This section explains how to create a simple **MultiColumn ComboBox** control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. +This section explains the steps to create a simple MultiColumn ComboBox and demonstrates the basic usage of the MultiColumn ComboBox component, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. -> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires Node.js v14.0 or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). +> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the `MultiColumn ComboBox` control in your application. +Ensure the following tools are installed on your machine: -```javascript -|-- @syncfusion/ej2-multicolumn-combobox - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-data - |-- @syncfusion/ej2-grids - |-- @syncfusion/ej2-lists - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-inputs - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Set up development environment +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart - -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® MultiColumn ComboBox package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-multicolumn-combobox` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-multicolumn-combobox --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} - -## Import Syncfusion® CSS styles +## Import Syncfusion® MultiColumn ComboBox CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -86,24 +72,22 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/multicolumn-combobox/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Initialize the MultiColumn ComboBox +## Add Syncfusion® MultiColumn ComboBox control to the application The MultiColumn ComboBox can be initialized through three different tags select, UL and input element. -Add the HTML input element that needs to be initialized as MultiColumn ComboBox in `index.html`. - -`[src/index.html]` +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the MultiColumn ComboBox control is used as an example. Add the following MultiColumn ComboBox element to the `~/src/index.html` file. +```html @@ -126,35 +110,11 @@ Add the HTML input element that needs to be initialized as MultiColumn ComboBox -{% endhighlight %} -{% endtabs %} - -Now, import the MultiColumn ComboBox component to your `app.ts` and initialize it to the element `#multicolumn` as shown below. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} - -import { MultiColumnComboBox } from '@syncfusion/ej2-multicolumn-combobox'; - -// initialize MultiColumn ComboBox component -let multiComboBoxObject: MultiColumnComboBox = new MultiColumnComboBox(); - -// render initialized MultiColumn ComboBox -multiComboBoxObject.appendTo('#multicolumn'); - -{% endhighlight %} -{% endtabs %} - -## Binding data source with fields and columns - -After initializing, populate the MultiColumn ComboBox with data by using the [dataSource](../api/multicolumn-combobox#datasource) property, to map the data for each specified columns use the [columns](../api/multicolumn-combobox#columns) property and the [fields](../api/multicolumn-combobox#fields) property to map the data fields from the dataSource. +``` -Here an array of object values is passed to the MultiColumn ComboBox control. +Now, to render the MultiColumn ComboBox control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox'; @@ -192,20 +152,15 @@ let multiComboBoxObject: MultiColumnComboBox = new MultiColumnComboBox({ // render initialized MultiColumn ComboBox multiComboBoxObject.appendTo('#multicolumn'); -{% endhighlight %} -{% endtabs %} +```` ## Run the application -After completing the configuration required to render a basic MultiColumn ComboBox, run the following command to display the output in your default browser. - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm run start - -{% endhighlight %} -{% endtabs %} +``` The following example illustrates the output in your browser. diff --git a/ej2-javascript/progress-button/ts/getting-started.md b/ej2-javascript/progress-button/ts/getting-started.md index ac58256af..997e2250f 100644 --- a/ej2-javascript/progress-button/ts/getting-started.md +++ b/ej2-javascript/progress-button/ts/getting-started.md @@ -11,58 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Progress button control -This section explains how to create a simple ProgressButton control and configure its available functionalities in TypeScript, using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple ProgressButton control and configure its available functionalities in TypeScript, using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The list of dependencies required to use the ProgressButton component in your application is given as follows: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Progress Button package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-buttons` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Progress Button CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -81,22 +74,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/progress-button/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add ProgressButton to the project +## Add Syncfusion® Progress Button control to the application -Add the HTML button tag with id attribute as the `element` to your `index.html` file. +The Progress Button can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Progress Button in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. + +In this article, the ProgressButton control is used as an example. Add the following ProgressButton element to the `~/src/index.html` file. +```html @@ -119,16 +114,11 @@ Add the HTML button tag with id attribute as the `element` to your `index.html` +``` -{% endhighlight %} -{% endtabs %} - -Import the ProgressButton component in your `app.ts` file and initialize it with the `#element` selector as shown below. +Now, to render the Button control, add the following TypeScript code to the `~/src/app/app.ts` file. -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { ProgressButton } from '@syncfusion/ej2-splitbuttons'; @@ -138,20 +128,15 @@ let progressBtn: ProgressButton = new ProgressButton({content: 'Spin Left' }); // Render initialized ProgressButton. progressBtn.appendTo('#element'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm start +Now, run the application in the browser using the following command. -{% endhighlight %} -{% endtabs %} +``` +npm run start +``` The following example shows a basic ProgressButton component: @@ -162,9 +147,6 @@ The following example shows a basic ProgressButton component: {% highlight html tabtitle="index.html" %} {% include code-snippet/progress-button/getting-started-cs8/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/progress-button/getting-started-cs8/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/progress-button/getting-started-cs8" %} @@ -188,4 +170,4 @@ You can enable the background filler UI by setting the [`enableProgress`](../api ## See Also -* [Spinner and Progress options](spinner-and-progress#spinner) +* [Spinner and Progress options](spinner-and-progress#spinner) \ No newline at end of file diff --git a/ej2-javascript/radio-button/ts/getting-started.md b/ej2-javascript/radio-button/ts/getting-started.md index d009ba18f..34f8b1dec 100644 --- a/ej2-javascript/radio-button/ts/getting-started.md +++ b/ej2-javascript/radio-button/ts/getting-started.md @@ -11,56 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Radio button control -This section explains how to create a simple Radio button, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Radio button, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies are required to use the RadioButton component in your application. +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-base -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} +## Set up the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -{% endhighlight %} -{% endtabs %} +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Radio button package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-buttons` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Radio button CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -79,22 +74,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/radio-button/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add RadioButton to the project +## Add Syncfusion® Radio button control to the application -Add the HTML input tag with an id attribute as the `element` to your `index.html` file. +The Radio button can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Radio button in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. + +In this article, the Radio button control is used as an example. Add the following Radio button element to the `~/src/index.html` file. +```html @@ -117,16 +114,11 @@ Add the HTML input tag with an id attribute as the `element` to your `index.html +``` -{% endhighlight %} -{% endtabs %} - -Import the RadioButton component in your `app.ts` file and initialize it with the `#element` selector as shown below. - -`[src/app/app.ts]` +Now, to render the Radio button control, add the following TypeScript code to the `~/src/app/app.ts` file. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { RadioButton } from '@syncfusion/ej2-buttons'; @@ -136,20 +128,15 @@ let radiobutton: RadioButton = new RadioButton({ label: 'Default'}); // Render initialized RadioButton component. radiobutton.appendTo('#element'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. -npm start - -{% endhighlight %} -{% endtabs %} +``` +npm run start +``` The following example shows a basic RadioButton component: @@ -160,9 +147,6 @@ The following example shows a basic RadioButton component: {% highlight html tabtitle="index.html" %} {% include code-snippet/radio-button/getting-started-cs2/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/radio-button/getting-started-cs2/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/radio-button/getting-started-cs2" %} @@ -182,9 +166,6 @@ The RadioButton [`checked`](../api/radio-button#checked) property is used to han {% highlight html tabtitle="index.html" %} {% include code-snippet/radio-button/state-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/radio-button/state-cs1/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/radio-button/state-cs1" %} diff --git a/ej2-javascript/rich-text-editor/images/getting-started.png b/ej2-javascript/rich-text-editor/images/getting-started.png new file mode 100644 index 0000000000000000000000000000000000000000..44f6e9e276c27b6d3a966b123f975812a8ca14b6 GIT binary patch literal 11810 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 Ensure that all Rich Text Editor script files are loaded in the correct order and included before initializing the control. The order is important because the scripts have dependencies, and loading them incorrectly may prevent the Rich Text Editor from working properly or cause runtime errors. -Make sure the required base and dependent scripts are included along with the Rich Text Editor script. +I> Ensure that all Rich Text Editor script files are loaded in the correct order and included before initializing the control. The order is important because the scripts have dependencies, and loading them incorrectly may prevent the Rich Text Editor from working properly or cause runtime errors. Make sure the required base and dependent scripts are included along with the Rich Text Editor script. ## Adding Rich Text Editor control -To get started, add the Rich Text Editor control in index.js and index.html files. Rich Text Editor can be initialized through div element or textarea element. +Now, you can start adding the Rich Text Editor control to the application. For getting started, add the Rich Text Editor initialization code in the **index.js** file and add the target element in the **index.html** file using the following sample. -Rich Text Editor can be initialized on div element as shown below +Rich Text Editor can be initialized on a div element as shown below {% tabs %} {% highlight js tabtitle="index.js" %} @@ -101,33 +99,29 @@ Rich Text Editor can be initialized on div element as shown below {% endhighlight %} {% endtabs %} -## Run the application +## Run the Application -Now, run the index.html in web browser, it will render the Essential JS 2 Rich Text Editor control. +Now, run the `index.html` file in a web browser. -Output will be displayed as follows. +The Syncfusion® JavaScript Rich Text Editor is displayed as shown below. -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/rich-text-editor/text-area-sample-cs3/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/rich-text-editor/text-area-sample-cs3/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/rich-text-editor/text-area-sample-cs3" %} +![Syncfusion JavaScript Rich Text Editor output](images/getting-started.png) + +## See Also -> You can refer to our [JavaScript Rich Text Editor](https://www.syncfusion.com/rich-text-editor-sdk/javascript-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Rich Text Editor example](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/rich-text-editor.html) that shows how to render the rich text editor tools. +**Documentation:** -## See also +* [Accessibility in Rich Text Editor](accessibility.md) +* [Keyboard support in Rich Text Editor](keyboard-support.md) +* [Globalization in Rich Text Editor](globalization.md) +* [How to change the editor type](editor-types/editor-modes.md) +* [How to render the iframe](editor-types/iframe.md) +* [How to render the toolbar in inline mode](editor-types/inline-editing.md) + +**Live examples:** -* [How to change the editor type](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/editor-types/editor-modes) -* [How to render the iframe](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/editor-types/iframe) -* [How to render the toolbar in inline mode](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/editor-types/inline-editing) * [How to insert Emoticons](https://ej2.syncfusion.com/demos/#/tailwind3/rich-text-editor/insert-emoticons.html) * [Blog posting using Rich Text Editor](https://ej2.syncfusion.com/demos/#/tailwind3/rich-text-editor/blog-posting.html) * [Reactive Form with Rich Text Editor](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/reactive-form) -* [Accessibility in Rich text editor](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/accessibility) -* [Keyboard support in Rich text editor](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/keyboard-support) -* [Globalization in Rich text editor](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/globalization) \ No newline at end of file + +N> You can refer to our [JavaScript Rich Text Editor](https://www.syncfusion.com/javascript-ui-controls/js-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Rich Text Editor example](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/rich-text-editor.html) that shows how to render the Rich Text Editor tools. \ No newline at end of file diff --git a/ej2-javascript/rich-text-editor/ts/getting-started.md b/ej2-javascript/rich-text-editor/ts/getting-started.md index b2d0c7023..3cd920e05 100644 --- a/ej2-javascript/rich-text-editor/ts/getting-started.md +++ b/ej2-javascript/rich-text-editor/ts/getting-started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with ##Platform_Name## Rich Text Editor | Syncfusion -description: Checkout and learn how to create and run a Rich Text Editor using a Vite-based TypeScript project and Syncfusion Essential JS 2. +description: Check out and learn how to create and run a Rich Text Editor using a Vite-based TypeScript project and Syncfusion Essential JS 2. canonical_url: "https://www.syncfusion.com/javascript-ui-controls/js-rich-text-editor" platform: ej2-javascript control: Getting started @@ -12,19 +12,20 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Rich Text Editor control -The Typescript Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This section explains the steps to create a simple Rich Text Editor and demonstrates the basic usage of the Rich Text Editor control using a Vite-based TypeScript project scaffolded with latest vite version. +The TypeScript Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that enables users to create, edit, and format rich text content with features like multimedia insertion, lists, and links. This section explains the steps to create a simple Rich Text Editor and demonstrate the basic usage of the Rich Text Editor control using a Vite-based TypeScript project scaffolded with the latest Vite version. ## Prerequisites -This guide uses Vite as the bundler and development environment. Install Node.js 24.13.0 or higher before proceeding. For detailed information about Vite’s capabilities and configuration options, refer to the [Vite documentation](https://vite.dev/). +This guide uses Vite as the bundler and development environment. Install Node.js `24.13.0` or `higher` before proceeding. For detailed information about Vite’s capabilities and configuration options, refer to the [Vite documentation](https://vitejs.dev/). -## Create a TypeScript application. +## Create a TypeScript application -To set-up a Typescript application in TypeScript environment, run the following command. +To set up a TypeScript application, run the following command. ```bash npm create vite@latest my-app -- --template vanilla-ts ``` + This command will prompt you to install the required packages and start the application. Select the options as shown below. ![Rich Text Editor Initial setup](images/svelte-ts/npm_setup.png) @@ -39,7 +40,7 @@ npm install ## Adding Rich Text Editor packages All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. -To install Rich Text Editor control, use the following command +To install the Rich Text Editor control, use the following command ```bash npm install @syncfusion/ej2-richtexteditor @@ -61,27 +62,38 @@ The installed theme package includes an `index.css` file that automatically impo @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'; ``` -I> To apply the application-specific styles correctly, import style.css into **src/main.ts** and remove all the default styles from **src/style.css** and use the Rich Text editor styles provided above. +I> To apply the application-specific styles correctly, import style.css into **src/main.ts** and remove all the default styles from **src/style.css** and use the Rich Text Editor styles provided above. ## Module Injection The following modules provide the basic features of the Rich Text Editor. -* `Toolbar` - Inject this module to use Toolbar feature. -* `Link` - Inject this module to use link feature in Rich Text Editor. -* `Image`- Inject this module to use image feature in Rich Text Editor. -* `HtmlEditor` - Inject this module to use Rich Text Editor as html editor. -* `QuickToolbar` - Inject this module to use quick toolbar feature for the target element. +* `Toolbar` - Inject this module to use the Toolbar feature. +* `Link` - Inject this module to use the link feature in Rich Text Editor. +* `Image`- Inject this module to use the image feature in Rich Text Editor. +* `HtmlEditor` - Inject this module to use the Rich Text Editor as HTML editor. +* `QuickToolbar` - Inject this module to use the quick toolbar feature for the target element. + +These modules should be injected into the Rich Text Editor using the `RichTextEditor.Inject` method as demonstrated in the following example: + +{% tabs %} +{% highlight ts hl_lines="4" tabtitle="main.ts" %} + +import './style.css'; +import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor'; + +RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar); +const editor: RichTextEditor = new RichTextEditor({}); +editor.appendTo('#editor'); -These modules should be injected into the Rich Text Editor using the `RichTextEditor.Inject` method. +{% endhighlight %} +{% endtabs %} T> Additional feature modules are available [here](https://ej2.syncfusion.com/documentation/rich-text-editor/module) ## Adding Rich Text Editor control -To get started, add the Rich Text Editor control in main.ts and index.html files. Rich Text Editor can be initialized through div element or textarea element. - -Output will be displayed as follows +Now, you can start adding the Rich Text Editor control to the application. For getting started, add the Rich Text Editor initialization code in the **src/main.ts** file and add the target element in the **index.html** file using the following sample. {% tabs %} {% highlight ts tabtitle="main.ts" %} @@ -95,7 +107,7 @@ editor.appendTo('#editor'); {% endhighlight %} -{% highlight css tabtitle="styles.css" %} +{% highlight css tabtitle="style.css" %} @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'; @@ -109,7 +121,7 @@ editor.appendTo('#editor'); - Syncfusion Typescript Rich Text Editor + Syncfusion TypeScript Rich Text Editor @@ -122,7 +134,7 @@ editor.appendTo('#editor'); {% endhighlight %} {% endtabs %} -## Run the application +## Run the Application Use the following command to run the application in the browser. @@ -130,16 +142,25 @@ Use the following command to run the application in the browser. npm run dev ``` -## See also - -* [How to change the editor type](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/editor-types/editor-modes) -* [How to render the iframe](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/editor-types/iframe) -* [How to render the toolbar in inline mode](https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/editor-types/inline-editing) -* [How to insert Emoticons](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/insert-emoticons) -* [Blog posting using Rich Text Editor](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/blog-posting) -* [Reactive Form with Rich Text Editor](https://ej2.syncfusion.com/angular/demos/#/tailwind3/rich-text-editor/reactive-form) -* [Accessibility in Rich text editor](https://ej2.syncfusion.com/documentation/rich-text-editor/accessibility) -* [Keyboard support in Rich text editor](https://ej2.syncfusion.com/documentation/rich-text-editor/keyboard-support) -* [Globalization in Rich text editor](https://ej2.syncfusion.com/documentation/rich-text-editor/globalization) +The Syncfusion® TypeScript Rich Text Editor is displayed in the browser as shown below. + +![Syncfusion TypeScript Rich Text Editor output](images/getting-started.png) + +## See Also + +**Documentation:** + +* [How to change the editor type](editor-types/editor-modes.md) +* [How to render the iframe](editor-types/iframe.md) +* [How to render the toolbar in inline mode](editor-types/inline-editing.md) +* [Accessibility in Rich Text Editor](accessibility.md) +* [Keyboard support in Rich Text Editor](keyboard-support.md) +* [Globalization in Rich Text Editor](globalization.md) + +**Live examples:** + +* [Insert Emoticons](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/insert-emoticons) +* [Blog posting using Rich Text Editor](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/blog-posting) +* [Reactive Form with Rich Text Editor](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/rich-text-editor/reactive-form) N> Looking for the full JavaScript Rich Text Editor control overview, features, pricing, and documentation? Visit the [JavaScript Rich Text Editor](https://www.syncfusion.com/rich-text-editor-sdk/javascript-rich-text-editor) page. \ No newline at end of file diff --git a/ej2-javascript/skeleton/ts/getting-started.md b/ej2-javascript/skeleton/ts/getting-started.md index 3c04c8a9a..1478752cd 100644 --- a/ej2-javascript/skeleton/ts/getting-started.md +++ b/ej2-javascript/skeleton/ts/getting-started.md @@ -15,52 +15,47 @@ This section explains the steps required to create the Skeleton control using Ty > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The list of dependencies required to use the Skeleton component in your application is given as follows: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-notifications - |-- @syncfusion/ej2-base -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -{% tabs %} -{% highlight bash tabtitle="CMD" %} - -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Skeleton package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-notifications` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-notifications --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Skeleton CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -79,54 +74,42 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/skeleton/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Skeleton to the Application +## Add Syncfusion® Skeleton control to the application -Add the HTML div tag with `ID` attribute as the `skeleton` to your `index.html` file. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -`[src/index.html]` - -{% tabs %} -{% highlight html tabtitle="index.html" %} +In this article, the Skeleton control is used as an example. Add the following element to the `~/src/index.html` file. +```html - Essential JS 2 Skeleton + Essential JS 2 - - - - -
        +
        + ``` -{% endhighlight %} -{% endtabs %} - -Then, import the Skeleton component in your `app.ts` file, and initialize it with the `#skeleton`. - -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +To render the Skeleton control, add the following JavaScript code to the `~/src/app/app.ts` file +```ts import { Skeleton } from '@syncfusion/ej2-notifications'; // Initialize the Skeleton component. @@ -134,31 +117,14 @@ let skeleton: Skeleton = new Skeleton({height:'15px'}); // Render initialized Skeleton. skeleton.appendTo('#skeleton'); - -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Now, run the application in the browser using the following command. +``` npm start - -{% endhighlight %} -{% endtabs %} - -The following example demonstrates a basic Skeleton component. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/skeleton/getting-started-cs2/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/skeleton/getting-started-cs2/index.html %} -{% endhighlight %} -{% endtabs %} +``` {% previewsample "page.domainurl/code-snippet/skeleton/getting-started-cs2" %} diff --git a/ej2-javascript/speed-dial/ts/getting-started.md b/ej2-javascript/speed-dial/ts/getting-started.md index 7743d020b..763275928 100644 --- a/ej2-javascript/speed-dial/ts/getting-started.md +++ b/ej2-javascript/speed-dial/ts/getting-started.md @@ -11,56 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Speed dial control -This section explains how to create a simple Speed dial, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Speed dial, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The list of dependencies required to use the SpeedDial control in your application is given as follows: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-buttons - |-- @syncfusion/ej2-base -``` - -## Setup development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Speed dial package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-buttons` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Speed dial CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -79,22 +74,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/speed-dial/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding SpeedDial to the Application +## Add Syncfusion® Speed dial control to the application -Add the HTML Button tag with ID attribute as the `speedDial` to your `index.html` file. +The Speed dial can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Speed dial in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. + +In this article, the Speed dial control is used as an example. Add the following Speed dial element to the `~/src/index.html` file. +```html @@ -117,16 +114,11 @@ Add the HTML Button tag with ID attribute as the `speedDial` to your `index.html +``` -{% endhighlight %} -{% endtabs %} - -Then, import the SpeedDial control in your `app.ts` file, define the action items using [`items`](../api/speed-dial#items) property and initialize it with the `#speedDial`. +Now, to render the Button control, add the following TypeScript code to the `~/src/app/app.ts` file. -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { SpeedDial, SpeedDialItemModel } from '@syncfusion/ej2-buttons'; import { enableRipple } from '@syncfusion/ej2-base'; @@ -146,20 +138,15 @@ let speeddial: SpeedDial = new SpeedDial({ items: items, content: 'Edit' }); // Render initialized SpeedDial speeddial.appendTo('#speeddial'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm start +Now, run the application in the browser using the following command. -{% endhighlight %} -{% endtabs %} +``` +npm run start +``` The following example shows a basic SpeedDial control. @@ -170,9 +157,6 @@ The following example shows a basic SpeedDial control. {% highlight html tabtitle="index.html" %} {% include code-snippet/speed-dial/getting-started-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/speed-dial/getting-started-cs1/styles.css %} -{% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/speed-dial/getting-started-cs1" %} +{% previewsample "page.domainurl/code-snippet/speed-dial/getting-started-cs1" %} \ No newline at end of file diff --git a/ej2-javascript/split-button/ts/getting-started.md b/ej2-javascript/split-button/ts/getting-started.md index 174c3a5ef..f6c4def29 100644 --- a/ej2-javascript/split-button/ts/getting-started.md +++ b/ej2-javascript/split-button/ts/getting-started.md @@ -11,58 +11,51 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Split button control -This section explains how to create a simple Split button, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. +This section explains how to create a simple Split button, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The list of dependencies required to use the SplitButton component in your application is given as follows: +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-splitbuttons - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-popups - |-- @syncfusion/ej2-buttons -``` - -## Setup development environment +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). +## Set up the development environment -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: +``` git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} - -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Split button package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-buttons` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-buttons --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Split button CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -81,22 +74,24 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/split-button/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Add SplitButton to the project +## Add Syncfusion® Split button control to the application -Add the HTML Button tag with ID attribute as the `element` to your `index.html` file. +The Split button can be initialized through input tags. -`[src/index.html]` +Add the HTML input element which needs to be initialized as Split button in `index.html`. -{% tabs %} -{% highlight html tabtitle="index.html" %} +Open the application in Visual Studio Code and add the Syncfusion® TypeScript UI controls. + +In this article, the Split button control is used as an example. Add the following Split button element to the `~/src/index.html` file. +```html @@ -119,16 +114,11 @@ Add the HTML Button tag with ID attribute as the `element` to your `index.html` +``` -{% endhighlight %} -{% endtabs %} - -Then, import the SplitButton component in your `app.ts` file, and initialize it with the `#element`. +Now, to render the Button control, add the following TypeScript code to the `~/src/app/app.ts` file. -`[src/app/app.ts]` - -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { SplitButton, ItemModel } from '@syncfusion/ej2-splitbuttons'; import { enableRipple } from '@syncfusion/ej2-base'; @@ -148,20 +138,15 @@ let splitBtn: SplitButton = new SplitButton({ items: items }); // Render initialized SplitButton. splitBtn.appendTo('#element'); -{% endhighlight %} -{% endtabs %} +``` ## Run the application -Run the application in the browser using the following command: - -{% tabs %} -{% highlight bash tabtitle="NPM" %} - -npm start +Now, run the application in the browser using the following command. -{% endhighlight %} -{% endtabs %} +``` +npm run start +``` The following example shows a basic SplitButton component. @@ -172,9 +157,6 @@ The following example shows a basic SplitButton component. {% highlight html tabtitle="index.html" %} {% include code-snippet/split-button/getting-started-cs1/index.html %} {% endhighlight %} -{% highlight css tabtitle="styles.css" %} -{% include code-snippet/split-button/getting-started-cs1/styles.css %} -{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/split-button/getting-started-cs1" %} diff --git a/ej2-javascript/stepper/ts/getting-started.md b/ej2-javascript/stepper/ts/getting-started.md index c06892ca5..307c32285 100644 --- a/ej2-javascript/stepper/ts/getting-started.md +++ b/ej2-javascript/stepper/ts/getting-started.md @@ -15,53 +15,47 @@ This section explains how to create a simple Stepper and configure its available > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). -## Dependencies +## Prerequisites -The following list of dependencies is required to use the Stepper control in your application. +Ensure the following tools are installed on your machine: -```js -|-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-popups -``` - -## Set up development environment - -Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). - -{% tabs %} -{% highlight bash tabtitle="CMD" %} +* [Git](https://git-scm.com/downloads) +* [Node.js](https://nodejs.org/en/) +* [Visual Studio Code](https://code.visualstudio.com/) -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart +## Set up the development environment -{% endhighlight %} -{% endtabs %} +Clone the Syncfusion® TypeScript (Essential® JS 2) quickstart project from GitHub in the command prompt: -After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder. +``` +git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart +``` -{% tabs %} -{% highlight bash tabtitle="CMD" %} +Navigate to the project folder in the command prompt: +``` cd ej2-quickstart +``` -{% endhighlight %} -{% endtabs %} +## Install Syncfusion® Stepper package -## Add Syncfusion® JavaScript packages +Syncfusion® TypeScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. -Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Use the following command to install the `@syncfusion/ej2-navigations` package: -The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. +``` +npm install @syncfusion/ej2-navigations --save +``` -{% tabs %} -{% highlight bash tabtitle="NPM" %} +Then, install the remaining dependent npm packages using the following command: +``` npm install +``` -{% endhighlight %} -{% endtabs %} +> For more information about individual package and alternative installation methods, see the [installation guide](https://ej2.syncfusion.com/documentation/installation-and-upgrade/installation). -## Import Syncfusion® CSS styles +## Import Syncfusion® Stepper CSS styles Syncfusion® JavaScript controls provide built-in themes, which are available from the [npm theme packages](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages). Additionally, themes can be loaded via CDN or customized using the [Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio). For more information, refer to the [themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme). @@ -80,103 +74,55 @@ The required styles are imported in the `~/src/styles/styles.css` file, as shown {% tabs %} {% highlight bash tabtitle="styles.css" %} -@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/fluent2.css"; +@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/stepper/index.css"; {% endhighlight %} {% endtabs %} > Learn more about [built-in themes and individual control CSS references](https://ej2.syncfusion.com/documentation/appearance/theme). -## Adding Stepper control to the application +## Add Syncfusion® Stepper control to the application Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. -Add the HTML `