Skip to content

Commit 33ed8ce

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 12-15-2025 1:30:05 PM
1 parent 2e128ee commit 33ed8ce

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+6580
-6
lines changed

‎ej2-javascript-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2858,6 +2858,7 @@
28582858
<li><a href="/ej2-javascript/treeview/drag-and-drop">Drag and Drop</a></li>
28592859
<li><a href="/ej2-javascript/treeview/template">Template</a></li>
28602860
<li><a href="/ej2-javascript/treeview/accessibility">Accessibility</a></li>
2861+
<li><a href="/ej2-javascript/treeview/style">Styles and Appearance</a></li>
28612862
<li>How To
28622863
<ul>
28632864
<li><a href="/ej2-javascript/treeview/how-to/customize-the-expand-and-collapse-icons">Customize the expand and collapse icons</a></li>

‎ej2-javascript/ai-assistview/toolbar-items.md‎

Lines changed: 136 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,137 @@ domainurl: ##DomainURL##
1111

1212
# Toolbar items in ##Platform_Name## AI AssistView control
1313

14-
You can render the AI AssistView toolbar items by using the `items` property in the [toolbarSettings](../api/ai-assistview#toolbarsettings), [responseToolbarSettings](../api/ai-assistview#responsetoolbarsettings) & [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettings) properties.
14+
You can render the AI AssistView toolbar items by using the `items` property in the [toolbarSettings](../api/ai-assistview#toolbarsettings), [responseToolbarSettings](../api/ai-assistview#responsetoolbarsettings), [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettings) & [footerToolbarSettings](../api/ai-assistview#footertoolbarsettings) properties.
15+
16+
## Configure footer toolbar
17+
18+
By default, the footer toolbar renders the `send`, if attachment is enabled the `attachment` item will also be rendered which allows users to send the prompt text or attach files as needed.
19+
20+
In the following example, AI AssistView component rendered with footer toolbar items such as `send` and `attachment` icons.
21+
22+
{% if page.publishingplatform == "typescript" %}
23+
24+
{% tabs %}
25+
{% highlight ts tabtitle="index.ts" %}
26+
{% include code-snippet/ai-assistview/file-attachments/enable-attachment/index.ts %}
27+
{% endhighlight %}
28+
{% highlight html tabtitle="index.html" %}
29+
{% include code-snippet/ai-assistview/file-attachments/enable-attachment/index.html %}
30+
{% endhighlight %}
31+
{% endtabs %}
32+
33+
{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/enable-attachment" %}
34+
35+
{% elsif page.publishingplatform == "javascript" %}
36+
37+
{% tabs %}
38+
{% highlight js tabtitle="index.js" %}
39+
{% include code-snippet/ai-assistview/file-attachments/enable-attachment/index.js %}
40+
{% endhighlight %}
41+
{% highlight html tabtitle="index.html" %}
42+
{% include code-snippet/ai-assistview/file-attachments/enable-attachment/index.html %}
43+
{% endhighlight %}
44+
{% endtabs %}
45+
46+
{% previewsample "page.domainurl/code-snippet/ai-assistview/file-attachments/enable-attachment" %}
47+
{% endif %}
48+
49+
### Toolbar positioning
50+
51+
You can use the [toolbarPosition](../api/ai-assistview/footerToolbarSettingsModel#toolbarPosition) property to customize footer toolbar position. It has two modes such as `Inline`, and `Bottom`. By default, the toolbarPosition is `Inline`.
52+
53+
By settings toolbarPosition as `Bottom`, footer items will be rendered at the bottom with a dedicated footer area.
54+
55+
{% if page.publishingplatform == "typescript" %}
56+
57+
{% tabs %}
58+
{% highlight ts tabtitle="index.ts" %}
59+
{% include code-snippet/ai-assistview/toolbar-items/footer-position/index.ts %}
60+
{% endhighlight %}
61+
{% highlight html tabtitle="index.html" %}
62+
{% include code-snippet/ai-assistview/toolbar-items/footer-position/index.html %}
63+
{% endhighlight %}
64+
{% endtabs %}
65+
66+
{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-position" %}
67+
68+
{% elsif page.publishingplatform == "javascript" %}
69+
70+
{% tabs %}
71+
{% highlight js tabtitle="index.js" %}
72+
{% include code-snippet/ai-assistview/toolbar-items/footer-position/index.js %}
73+
{% endhighlight %}
74+
{% highlight html tabtitle="index.html" %}
75+
{% include code-snippet/ai-assistview/toolbar-items/footer-position/index.html %}
76+
{% endhighlight %}
77+
{% endtabs %}
78+
79+
{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-position" %}
80+
{% endif %}
81+
82+
### Adding custom items
83+
84+
You can use the [footerToolbarSettings](../api/ai-assistview#footertoolbarsettings) property to add custom items for the footer toolbar in the AI AssistView. The custom items will be added with the existing built-in items in the footer toolbar.
85+
86+
> To know more about the items, please refer to the [items](#items) section.
87+
88+
{% if page.publishingplatform == "typescript" %}
89+
90+
{% tabs %}
91+
{% highlight ts tabtitle="index.ts" %}
92+
{% include code-snippet/ai-assistview/toolbar-items/footer-settings/index.ts %}
93+
{% endhighlight %}
94+
{% highlight html tabtitle="index.html" %}
95+
{% include code-snippet/ai-assistview/toolbar-items/footer-settings/index.html %}
96+
{% endhighlight %}
97+
{% endtabs %}
98+
99+
{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-settings" %}
100+
101+
{% elsif page.publishingplatform == "javascript" %}
102+
103+
{% tabs %}
104+
{% highlight js tabtitle="index.js" %}
105+
{% include code-snippet/ai-assistview/toolbar-items/footer-settings/index.js %}
106+
{% endhighlight %}
107+
{% highlight html tabtitle="index.html" %}
108+
{% include code-snippet/ai-assistview/toolbar-items/footer-settings/index.html %}
109+
{% endhighlight %}
110+
{% endtabs %}
111+
112+
{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-settings" %}
113+
{% endif %}
114+
115+
### Item click
116+
117+
The [itemClick](../api/ai-assistview/footerToolbarSettingsModel#itemclick) event is triggered when the footer toolbar item is clicked.
118+
119+
{% if page.publishingplatform == "typescript" %}
120+
121+
{% tabs %}
122+
{% highlight ts tabtitle="index.ts" %}
123+
{% include code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.ts %}
124+
{% endhighlight %}
125+
{% highlight html tabtitle="index.html" %}
126+
{% include code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.html %}
127+
{% endhighlight %}
128+
{% endtabs %}
129+
130+
{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-itemclick" %}
131+
132+
{% elsif page.publishingplatform == "javascript" %}
133+
134+
{% tabs %}
135+
{% highlight js tabtitle="index.js" %}
136+
{% include code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.js %}
137+
{% endhighlight %}
138+
{% highlight html tabtitle="index.html" %}
139+
{% include code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.html %}
140+
{% endhighlight %}
141+
{% endtabs %}
142+
143+
{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/footer-itemclick" %}
144+
{% endif %}
15145

16146
## Adding header toolbar items
17147

@@ -410,11 +540,11 @@ In the following example, AI AssistView control rendered with built-in toolbar i
410540

411541
#### Setting width
412542

413-
You can use the [width](../api/ai-assistview/promptToolbarSettingsModel/#width) property to set the width of the prompt toolbar in the AI AssistView.
543+
You can use the [width](../api/ai-assistview/promptToolbarSettingsModel#width) property to set the width of the prompt toolbar in the AI AssistView.
414544

415545
#### Item clicked
416546

417-
The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel/#itemclicked) event is triggered when the prompt toolbar item is clicked.
547+
The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel#itemclicked) event is triggered when the prompt toolbar item is clicked.
418548

419549
{% if page.publishingplatform == "typescript" %}
420550

@@ -478,11 +608,11 @@ In the following example, AI AssistView renders with built-in toolbar items.
478608

479609
#### Setting width
480610

481-
You can use the [width](../api/ai-assistview/responseToolbarSettingsModel/#width) property to set the width of the response toolbar in the AI AssistView.
611+
You can use the [width](../api/ai-assistview/responseToolbarSettingsModel#width) property to set the width of the response toolbar in the AI AssistView.
482612

483613
#### Item clicked
484614

485-
The [itemClicked](../api/ai-assistview/responseToolbarSettingsModel/#itemclicked) event is triggered when the response toolbar item is clicked.
615+
The [itemClicked](../api/ai-assistview/responseToolbarSettingsModel#itemclicked) event is triggered when the response toolbar item is clicked.
486616

487617
{% if page.publishingplatform == "typescript" %}
488618

@@ -583,4 +713,4 @@ You can use the [responseToolbarSettings](../api/ai-assistview#responsetoolbarse
583713

584714
#### Item clicked
585715

586-
The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel/#itemclicked) event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items.
716+
The [itemClicked](../api/ai-assistview/promptToolbarSettingsModel#itemclicked) event is triggered when a custom toolbar item is clicked. This event applies to both prompt and response toolbar items.

‎ej2-javascript/chart/axis-labels.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,37 @@ Line break feature used to customize the long axis label text into multiple line
485485
{% previewsample "page.domainurl/code-snippet/chart/axis-cs15" %}
486486
{% endif %}
487487

488+
## Axis label template
489+
490+
The axis label template allows you to customize axis labels by formatting them with HTML content, applying conditional styling, and including dynamic elements such as icons, images or additional data. This customization is enabled by setting the template content in the [labelTemplate](https://ej2.syncfusion.com/documentation/api/chart/axismodel#labelTemplate) property of the `AxisModel`.
491+
492+
{% if page.publishingplatform == "typescript" %}
493+
494+
{% tabs %}
495+
{% highlight ts tabtitle="index.ts" %}
496+
{% include code-snippet/chart/axis-cs99/index.ts %}
497+
{% endhighlight %}
498+
{% highlight html tabtitle="index.html" %}
499+
{% include code-snippet/chart/axis-cs99/index.html %}
500+
{% endhighlight %}
501+
{% endtabs %}
502+
503+
{% previewsample "page.domainurl/code-snippet/chart/axis-cs99" %}
504+
505+
{% elsif page.publishingplatform == "javascript" %}
506+
507+
{% tabs %}
508+
{% highlight js tabtitle="index.js" %}
509+
{% include code-snippet/chart/axis-cs99/index.js %}
510+
{% endhighlight %}
511+
{% highlight html tabtitle="index.html" %}
512+
{% include code-snippet/chart/axis-cs99/index.html %}
513+
{% endhighlight %}
514+
{% endtabs %}
515+
516+
{% previewsample "page.domainurl/code-snippet/chart/axis-cs99" %}
517+
{% endif %}
518+
488519
## See Also
489520

490521
* [Remove Duplicate X-Axis Labels in Stacked Charts](https://support.syncfusion.com/kb/article/21504/how-to-remove-duplicate-x-axis-labels-in-stacked-charts-using-javascript)

‎ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#container {
2+
visibility: hidden;
3+
margin: 20px auto;
4+
width: 350px;
5+
}
6+
7+
#loader {
8+
color: #008cff;
9+
height: 40px;
10+
left: 45%;
11+
position: absolute;
12+
top: 45%;
13+
width: 30%;
14+
}

‎ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
ej.base.enableRipple(true);
2+
3+
let promptsData = [
4+
{
5+
prompt: "What is AI?",
6+
response: `<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>`
7+
}
8+
];
9+
10+
// Initializes the AI Assist control
11+
var aiAssistView = new ej.interactivechat.AIAssistView({
12+
prompts: promptsData,
13+
promptRequest: function (args) {
14+
setTimeout(function () {
15+
var foundPrompt = promptsData.find((promptObj) => promptObj.prompt === args.prompt);
16+
var defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
17+
aiAssistView.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
18+
}, 1000);
19+
},
20+
footerToolbarSettings: {
21+
itemClick: (args) => {
22+
// Your required action here
23+
}
24+
}
25+
});
26+
27+
// Render initialized AI Assist.
28+
aiAssistView.appendTo('#prompts');

‎ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/index.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { AIAssistView, PromptRequestEventArgs, ToolbarItemClickedEventArgs } from '@syncfusion/ej2-interactive-chat';
2+
import { enableRipple } from '@syncfusion/ej2-base';
3+
4+
enableRipple(true);
5+
6+
let promptsData = [
7+
{
8+
prompt: "What is AI?",
9+
response: `<div>AI stands for Artificial Intelligence, enabling machines to mimic human intelligence for tasks such as learning, problem-solving, and decision-making.</div>`
10+
}
11+
];
12+
13+
// Initializes the AI Assist control
14+
let aiAssistView: AIAssistView = new AIAssistView({
15+
prompts: promptsData,
16+
promptRequest: (args: PromptRequestEventArgs) => {
17+
setTimeout(() => {
18+
let foundPrompt = promptsData.find((promptObj: any) => promptObj.prompt === args.prompt);
19+
let defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
20+
aiAssistView.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
21+
}, 1000);
22+
},
23+
footerToolbarSettings: {
24+
itemClick: function (args: ToolbarItemClickedEventArgs) {
25+
// Your required action here
26+
}
27+
}
28+
});
29+
30+
// Render initialized AI Assist.
31+
aiAssistView.appendTo('#prompts');

‎ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/js/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 AI AssistView</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="TypeScript AI AssistView Control" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="index.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
14+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
15+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
16+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
18+
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
19+
<script src="systemjs.config.js"></script>
20+
</head>
21+
<body>
22+
<div id='loader'>Loading....</div>
23+
<div id='container' style="height: 350px; width: 650px;">
24+
<div id="prompts"></div>
25+
</div>
26+
</body>
27+
</html>

‎ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/systemjs.config.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
14+
},
15+
map: {
16+
main: "index.ts",
17+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-interactive-chat": "syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js",
20+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
21+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
22+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
23+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
24+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
25+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
26+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
27+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
28+
"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js"
29+
}
30+
});
31+
32+
System.import('index.ts').catch(console.error.bind(console)).then(function () {
33+
document.getElementById('loader').style.display = "none";
34+
document.getElementById('container').style.visibility = "visible";
35+
});

‎ej2-javascript/code-snippet/ai-assistview/toolbar-items/footer-itemclick/ts/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>EJ2 AI AssistView</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="TypeScript AI AssistView Control" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="index.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-interactive-chat/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
14+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
15+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
16+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet" />
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
18+
<script src="systemjs.config.js"></script>
19+
</head>
20+
<body>
21+
<div id='loader'>Loading....</div>
22+
<div id='container' style="height: 350px; width: 650px;">
23+
<div id="prompts"></div>
24+
</div>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)