DOCINFRA-2341_merged_using_automation

ej2-javascript-toc.html

@@ -2288,7 +2288,7 @@
 </li><li>
     Sankey
     <ul>
-        <li><a href="/ej2-javascript/sankey/getting-started">Getting Started</a></li>
+        <li><a href="/ej2-javascript/sankey/es5-getting-started">Getting Started</a></li>
         <li><a href="/ej2-javascript/sankey/nodes">Nodes</a></li>
         <li><a href="/ej2-javascript/sankey/links">Links</a></li>
         <li><a href="/ej2-javascript/sankey/labels">Labels</a></li>

ej2-javascript/code-snippet/sankey/print-export/before-export-cs1/index.js

@@ -27,7 +27,7 @@ const links = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('export-btn')?.addEventListener('click', handleExport);
+document.getElementById('export-btn').addEventListener('click', handleExport);
 
 const sankey = new ej.charts.Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/before-export-cs1/index.ts

@@ -31,7 +31,7 @@ const links: SankeyLinkModel[] = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('export-btn')?.addEventListener('click', handleExport);
+(document.getElementById('export-btn') as HTMLElement).addEventListener('click', handleExport);
 
 const sankey: Sankey = new Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/export-completed-cs1/index.js

@@ -28,7 +28,7 @@ const links = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('export-btn')?.addEventListener('click', handleExport);
+document.getElementById('export-btn').addEventListener('click', handleExport);
 
 const sankey = new ej.charts.Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/export-completed-cs1/index.ts

@@ -32,7 +32,7 @@ const links: SankeyLinkModel[] = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('export-btn')?.addEventListener('click', handleExport);
+(document.getElementById('export-btn') as HTMLElement).addEventListener('click', handleExport);
 
 const sankey: Sankey = new Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/export-custom-cs1/index.js

@@ -23,7 +23,7 @@ const links = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('export-btn')?.addEventListener('click', handleCustomExport);
+document.getElementById('export-btn').addEventListener('click', handleCustomExport);
 
 const sankey = new ej.charts.Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/export-custom-cs1/index.ts

@@ -27,7 +27,7 @@ const links: SankeyLinkModel[] = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('export-btn')?.addEventListener('click', handleCustomExport);
+(document.getElementById('export-btn') as HTMLElement).addEventListener('click', handleCustomExport);
 
 const sankey: Sankey = new Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/export-formats-cs1/index.js

@@ -35,9 +35,9 @@ const links = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('export-png')?.addEventListener('click', handleExportPNG);
-document.getElementById('export-pdf')?.addEventListener('click', handleExportPDF);
-document.getElementById('export-svg')?.addEventListener('click', handleExportSVG);
+document.getElementById('export-png').addEventListener('click', handleExportPNG);
+document.getElementById('export-pdf').addEventListener('click', handleExportPDF);
+document.getElementById('export-svg').addEventListener('click', handleExportSVG);
 
 const sankey = new ej.charts.Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/export-formats-cs1/index.ts

@@ -39,9 +39,9 @@ const links: SankeyLinkModel[] = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('export-png')?.addEventListener('click', handleExportPNG);
-document.getElementById('export-pdf')?.addEventListener('click', handleExportPDF);
-document.getElementById('export-svg')?.addEventListener('click', handleExportSVG);
+(document.getElementById('export-png') as HTMLElement).addEventListener('click', handleExportPNG);
+(document.getElementById('export-pdf')  as HTMLElement).addEventListener('click', handleExportPDF);
+(document.getElementById('export-svg')  as HTMLElement).addEventListener('click', handleExportSVG);
 
 const sankey: Sankey = new Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/print-cs1/index.js

@@ -23,7 +23,7 @@ const links = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('print-btn')?.addEventListener('click', handlePrint);
+document.getElementById('print-btn').addEventListener('click', handlePrint);
 
 const sankey = new ej.charts.Sankey(
   {

ej2-javascript/code-snippet/sankey/print-export/print-cs1/index.ts

@@ -27,7 +27,7 @@ const links: SankeyLinkModel[] = [
   { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
 ];
 
-document.getElementById('print-btn')?.addEventListener('click', handlePrint);
+(document.getElementById('print-btn') as HTMLElement).addEventListener('click', handlePrint);
 
 const sankey: Sankey = new Sankey(
   {

ej2-javascript/sankey/labels.md

@@ -171,25 +171,25 @@ Use the `labelRendering` event to customize label text, styling, and appearance
 
 {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/chart/chart-appearance-cs6/index.ts %}
+{% include code-snippet/sankey/labels/rendering-event-cs1/index.ts %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-appearance-cs6/index.html %}
+{% include code-snippet/sankey/labels/rendering-event-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs6" %}
+{% previewsample "page.domainurl/code-snippet/sankey/labels/rendering-event-cs1" %}
 
 {% elsif page.publishingplatform == "javascript" %}
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart/chart-appearance-cs6/index.js %}
+{% include code-snippet/sankey/labels/rendering-event-cs1/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-appearance-cs6/index.html %}
+{% include code-snippet/sankey/labels/rendering-event-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs6" %}
+{% previewsample "page.domainurl/ccode-snippet/sankey/labels/rendering-event-cs1" %}
 {% endif %}

ej2-javascript/sankey/nodes.md

@@ -194,12 +194,12 @@ Use the `nodeRendering` event to customize node appearance dynamically before re
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart/chart-appearance-cs6/index.js %}
+{% include code-snippet/sankey/nodes/rendering-event-cs/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-appearance-cs6/index.html %}
+{% include code-snippet/sankey/nodes/rendering-event-cs/index.html %}
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/chart-appearance-cs6" %}
+{% previewsample "page.domainurl/code-snippet/sankey/nodes/rendering-event-cs" %}
 {% endif %}

ej2-javascript/ts/skills.md

@@ -11,43 +11,67 @@ domainurl: ##DomainURL##
 
 # Syncfusion JavaScript Agent Skills for AI Assistants
 
-This guide introduces **Syncfusion JavaScript Skills**, a knowledge package that enables AI assistants (VS Code, Cursor, CodeStudio, etc.) to understand and generate accurate Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript code using official APIs, patterns, and theming guidelines.
+This guide introduces **Syncfusion JavaScript Skills**, a knowledge package that enables AI assistants (VS Code, Cursor, CodeStudio, etc.) to understand and generate accurate JavaScript code using official APIs, patterns, and theming guidelines.
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Skills eliminate common issues with generic AI suggestions by grounding the assistant in accurate Syncfusion<sup style="font-size:70%">&reg;</sup> control usage patterns, API structures, supported features, and project‑specific configuration.
+These skills eliminate common issues with generic AI suggestions by grounding the assistant in accurate control usage patterns, API structures, supported features, and project‑specific configuration.
+
+## Prerequisites
+
+Before installing Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript Agent Skills, ensure the following:
+
+- Required [Node.js](https://nodejs.org/en/) version >= 16
+- TypeScript application (existing or new); see [Quick Start](https://ej2.syncfusion.com/documentation/getting-started/quick-start)
+- A supported AI agent or IDE that integrates with the Skills CLI (VS Code, Syncfusion<sup style="font-size:70%">&reg;</sup> Code Studio, Cursor, etc.)
 
 ## Key Benefits
 
-1. **Control Usage & API Knowledge** — Curated, Skill‑based guidance that captures how to add, configure, and compose Syncfusion® JavaScript controls, including key props, events, services/modules to inject (where applicable), and common integration patterns.
-2. **Patterns & Best Practices** — Practical recommendations for API structures, state‑handling approaches, and feature‑injection workflows (for example, paging, sorting, and filtering for data controls). All guidance is authored directly within the Skill file rather than being fetched from documentation.
-3. **Design‑System Guidance** — Includes information related to themes, dark/light variants, and icon usage patterns across Syncfusion® JavaScript controls.
+**Control Usage & API Knowledge**
+- Accurate guidance for adding and configuring Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript controls
+- Control‑specific props, events, and required feature modules
+- Guidance for injecting services/modules (where applicable)
+
+**Patterns & Best Practices**
+- Recommended API structures and composition patterns
+- State‑handling approaches for common scenarios
+- Feature‑injection workflows (for example, paging, sorting, filtering)
+- All guidance is authored directly in Skill files and does not rely on external documentation fetches
+
+**Design‑System Guidance**
+- Theme usage, including light and dark variants
+- Styling and icon usage patterns
+- Consistent design alignment across Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript controls
 
 ## Installation
 
-Choose one of the following commands to install [Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript controls skills](https://github.com/syncfusion/javascript-ui-controls-skills.git) based on your preference. Users can also explore Syncfusion skills from the [marketplace](https://skills.sh/syncfusion/).
+Install [Syncfusion<sup style="font-size:70%">&reg;</sup> JavaScript controls skills](https://github.com/syncfusion/javascript-ui-controls-skills.git) using the Skills CLI. Users can also explore available skills from the [marketplace](https://skills.sh/syncfusion/).
+
+### Install all skills
 
-Install all control skills at once (installs to `.agents/skills` directory):
+Use the following command to install all control skills at once in the `.agents/skills` directory:
 
 {% tabs %}
-{% highlight bash tabtitle="npm" %}
+{% highlight bash tabtitle="NPM" %}
 
 npx skills add syncfusion/javascript-ui-controls-skills -y
 
 {% endhighlight %}
 {% endtabs %}
 
-Choose and install skills interactively from the terminal:
+### Install selected skills
+
+Use the following command to install skills interactively:
 
 {% tabs %}
-{% highlight bash tabtitle="npm" %}
+{% highlight bash tabtitle="NPM" %}
 
 npx skills add syncfusion/javascript-ui-controls-skills
 
 {% endhighlight %}
 {% endtabs %}
 
-The terminal will show a list of available skills. Use the arrow keys to navigate, space bar to select the skills you want, and Enter to confirm.
+The terminal will display a list of available skills. Use the arrow keys to navigate, the space bar to select the desired skills, and the Enter key to confirm.
 {% tabs %}
-{% highlight bash tabtitle="npm" %}
+{% highlight bash tabtitle="CMD" %}
 
  Select skills to install (space to toggle)
 │  ◻ syncfusion-javascript-3d-chart (Implement Syncfusion javascript 3D Chart control from the @s...)
@@ -66,7 +90,7 @@ The terminal will show a list of available skills. Use the arrow keys to navigat
 
 Next, select which AI agent you're using and where to store the skills.
 {% tabs %}
-{% highlight bash tabtitle="npm" %}
+{% highlight bash tabtitle="CMD" %}
 
 │  ── Additional agents ─────────────────────────────
 │  Search:  
@@ -88,7 +112,7 @@ Next, select which AI agent you're using and where to store the skills.
 Choose your installation scope (project-level or global), then confirm to complete the installation.
 
 {% tabs %}
-{% highlight bash tabtitle="npm" %}
+{% highlight bash tabtitle="CMD" %}
 
 ◆  Installation scope
 │  ● Project (Install in current directory (committed with your project))
@@ -100,13 +124,13 @@ Choose your installation scope (project-level or global), then confirm to comple
 {% endhighlight %}
 {% endtabs %}
 
-This registers the Syncfusion<sup style="font-size:70%">&reg;</sup> skill pack so your AI assistant can automatically load it in supported IDEs such as [Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/skills), [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), and [Cursor](https://cursor.com/docs/skills).
+This registers the Syncfusion<sup style="font-size:70%">&reg;</sup> skill pack so that AI assistants can automatically load it in supported IDEs such as [Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/skills), [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), and [Cursor](https://cursor.com/docs/skills).
 
-To learn more about the Skills CLI, refer [here](https://skills.sh/docs). 
+To learn more about the Skills CLI, refer [here](https://skills.sh/docs).
 
 ## How Syncfusion<sup style="font-size:70%">&reg;</sup> Agent Skills Work
 
-1. **Reads relevant Skill files based on the user’s query**, retrieving control usage patterns, APIs, and best‑practice guidance from installed Syncfusion<sup style="font-size:70%">&reg;</sup> Skills. The assistant initially loads only skill names and descriptions, then dynamically loads the required skill and reference files as needed to provide accurate Syncfusion guidance.
+1. **Reads relevant Skill files based on queries**, retrieving control usage patterns, APIs, and best‑practice guidance from installed Syncfusion<sup style="font-size:70%">&reg;</sup> Skills. The assistant initially loads only skill names and descriptions, then dynamically loads the required skill and reference files as needed to provide accurate Syncfusion guidance.
 2. **Enforces Syncfusion<sup style="font-size:70%">&reg;</sup> best practices**, including:
 
    - Using the required feature modules for each control.
@@ -122,6 +146,74 @@ Once skills are installed, the assistant can be used to generate and update Sync
 - “Create a Scheduler with week view and drag‑drop.”
 - “Apply Tailwind 3 theme and enable dark mode."
 
+## Skills CLI Commands
+
+After installation, manage Syncfusion<sup style="font-size:70%">&reg;</sup> Agent Skills using the following commands:
+
+### List Skills
+
+View all installed skills in your current project or global environment:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills list
+
+{% endhighlight %}
+{% endtabs %}
+
+### Remove a Skill
+
+Uninstall a specific skill from your environment:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills remove <skill-name>
+
+{% endhighlight %}
+{% endtabs %}
+
+Replace `<skill-name>` with the name of the skill you want to remove (for example, `syncfusion-javascript-scheduler`).
+
+### Check for Updates
+
+Check if updates are available for your installed skills:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills check
+
+{% endhighlight %}
+{% endtabs %}
+
+### Update All Skills
+
+Update all installed skills to their latest versions:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills update
+
+{% endhighlight %}
+{% endtabs %} 
+
+## FAQ
+
+**Which agents and IDEs are supported?**
+
+Any Skills compatible agent or IDE that loads local skill files (Visual Studio Code, Cursor, CodeStudio, etc.).
+
+**Are skills loaded automatically?**
+
+Yes. Once installed, supported agents automatically detect and load relevant skills for Syncfusion‑related queries without requiring additional configuration.
+
+**Skills are not being loaded**
+
+Verify that skills are installed in the correct agent directory, restart the IDE, and confirm that the agent supports external skill files.
+
 ## See also
 
 - [Agent Skills Standards](https://agentskills.io/home)

ej2-typescript-toc.html

@@ -3569,4 +3569,4 @@
 					</li>					
 				</ul>
             </li>
-</ul>
+</ul>