-
-
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.* +
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- 2023 Volume 2 - 22.*
diff --git a/ej2-javascript/Release-notes/28.1.35.md b/ej2-javascript/Release-notes/28.1.35.md
new file mode 100644
index 000000000..984c421ab
--- /dev/null
+++ b/ej2-javascript/Release-notes/28.1.35.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+platform: ej2-javascript
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name## Release Notes
+
+{% include release-info.html date="December 19, 2024" version="v28.1.35" %}
+
+{% directory path: _includes/release-notes/v28.1.35 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-javascript/Release-notes/28.1.36.md b/ej2-javascript/Release-notes/28.1.36.md
new file mode 100644
index 000000000..2bdf210f8
--- /dev/null
+++ b/ej2-javascript/Release-notes/28.1.36.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+platform: ej2-javascript
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name## Release Notes
+
+{% include release-info.html date="December 24, 2024" version="v28.1.36" %}
+
+{% directory path: _includes/release-notes/v28.1.36 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-javascript/Release-notes/28.1.37.md b/ej2-javascript/Release-notes/28.1.37.md
new file mode 100644
index 000000000..a6a2d5e4d
--- /dev/null
+++ b/ej2-javascript/Release-notes/28.1.37.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+platform: ej2-javascript
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name## Release Notes
+
+{% include release-info.html date="December 31, 2024" version="v28.1.37" %}
+
+{% directory path: _includes/release-notes/v28.1.37 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-javascript/Release-notes/28.1.38.md b/ej2-javascript/Release-notes/28.1.38.md
new file mode 100644
index 000000000..cd29b7dd7
--- /dev/null
+++ b/ej2-javascript/Release-notes/28.1.38.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+platform: ej2-javascript
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name## Release Notes
+
+{% include release-info.html date="January 07, 2025" version="v28.1.38" %}
+
+{% directory path: _includes/release-notes/v28.1.38 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-javascript/Release-notes/28.1.39.md b/ej2-javascript/Release-notes/28.1.39.md
new file mode 100644
index 000000000..d294184f7
--- /dev/null
+++ b/ej2-javascript/Release-notes/28.1.39.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+platform: ej2-javascript
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name## Release Notes
+
+{% include release-info.html date="January 14, 2025" version="v28.1.39" %}
+
+{% directory path: _includes/release-notes/v28.1.39 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-javascript/Release-notes/28.1.41.md b/ej2-javascript/Release-notes/28.1.41.md
new file mode 100644
index 000000000..620c999eb
--- /dev/null
+++ b/ej2-javascript/Release-notes/28.1.41.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
+platform: ej2-javascript
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name## Release Notes
+
+{% include release-info.html date="January 21, 2025" version="v28.1.41" %}
+
+{% directory path: _includes/release-notes/v28.1.41 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-javascript/accordion/how-to/add-font-awesome.md b/ej2-javascript/accordion/how-to/add-font-awesome.md
index d1c9438d8..fd91a80d1 100644
--- a/ej2-javascript/accordion/how-to/add-font-awesome.md
+++ b/ej2-javascript/accordion/how-to/add-font-awesome.md
@@ -58,17 +58,17 @@ Use following CSS to customize the accordion items header icons.
.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
display: inline-block;
- padding: 0 10px 0 0 !important;
+ padding: 0 10px 0 0;
}
```
-Use following CSS to customize the selected accordion item content icons.
+Use following CSS to customize the selected accordion item header icons.
```css
-.e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-content-icon {
- color: rgba(0, 0, 0, 0.54) !important;
+.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state>.e-acrdn-header .e-acrdn-header-icon {
+ color: #008000;
}
```
diff --git a/ej2-javascript/accordion/how-to/customize-expand-collapse-actions.md b/ej2-javascript/accordion/how-to/customize-expand-collapse-actions.md
deleted file mode 100644
index b0bdbfb74..000000000
--- a/ej2-javascript/accordion/how-to/customize-expand-collapse-actions.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: post
-title: Customize expand collapse actions in ##Platform_Name## Accordion control | Syncfusion
-description: Learn here all about Customize expand collapse actions in Syncfusion ##Platform_Name## Accordion control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Customize expand collapse actions
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize expand collapse actions in ##Platform_Name## Accordion control
-
-Accordion component supports customizing the expand or collapse animation action behavior. You can manually change the expand animation action performed after the collapse animation operation performed on already expand pane when the expand icons are clicked.
-
-By default, the Accordion component pane is expanded or collapsed, when click the expand or collapse icon. It is not affected on already expand pane.
-
-The following sample demonstrates, how to expand the collapsed Accordion item after collapse animation performed on the expanded Accordion item using [`created`](../../api/accordion/#created), [`expanding`](../../api/accordion/#expanding), and [`expanded`](../../api/accordion/#expanded) event. In the Expanding event, get the previously expanded item index and prevent the expanding behavior using `args.cancel` option. Expand the Accordion item dynamically based on specifying the `index` value using the [`expandItem`](../../api/accordion/#expanditem) public method and [`expanded`](../../api/accordion/#expanded) event.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/accordion/accordion-actions-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/accordion/accordion-actions-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/accordion/accordion-actions-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/accordion/accordion-actions-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/accordion/accordion-actions-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/accordion/accordion-actions-cs1" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/accordion/how-to/expand-collapse-on-icon-click.md b/ej2-javascript/accordion/how-to/expand-collapse-on-icon-click.md
new file mode 100644
index 000000000..05e0fc560
--- /dev/null
+++ b/ej2-javascript/accordion/how-to/expand-collapse-on-icon-click.md
@@ -0,0 +1,43 @@
+---
+layout: post
+title: Expand/Collapse only on icon click ##Platform_Name## Accordion control | Syncfusion
+description: Learn here all about Customize expand collapse actions in Syncfusion ##Platform_Name## Accordion control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Customize expand collapse actions
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Expand/Collapse the accordion only on icon click in ##Platform_Name## Accordion control
+
+You can restrict the expansion and collapse of an Accordion item to occur only when the toggle icon is clicked. This can be achieved by using the Accordion's [`expanding`](https://ej2.syncfusion.com/documentation/api/accordion/#expanding) event and binding a `click` event specifically to the toggle icon.
+
+By intercepting the [`expanding`](https://ej2.syncfusion.com/documentation/api/accordion/#expanding) event, you can control when the Accordion items should expand or collapse based on user interactions. Using `args.cancel = true`, you can prevent the default behavior unless the toggle icon itself is clicked.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/accordion/accordion-actions-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/accordion/accordion-actions-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/accordion/accordion-actions-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/accordion/accordion-actions-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/accordion/accordion-actions-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/accordion/accordion-actions-cs1" %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/accordion/how-to/integrate-treeview-inside-the-accordion.md b/ej2-javascript/accordion/how-to/integrate-treeview-inside-the-accordion.md
index d247a3180..00bb2c1d0 100644
--- a/ej2-javascript/accordion/how-to/integrate-treeview-inside-the-accordion.md
+++ b/ej2-javascript/accordion/how-to/integrate-treeview-inside-the-accordion.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Integrate treeview inside the accordion in ##Platform_Name## Accordion control | Syncfusion
+title: Integrate treeview in ##Platform_Name## Accordion control | Syncfusion
description: Learn here all about Integrate treeview inside the accordion in Syncfusion ##Platform_Name## Accordion control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
control: Integrate treeview inside the accordion
@@ -34,6 +34,9 @@ The following procedure is to render a TreeView within the Accordion,
{% highlight html tabtitle="index.html" %}
{% include code-snippet/accordion/accordion-treeview-cs1/index.html %}
{% endhighlight %}
+{% highlight html tabtitle="datasource.ts" %}
+{% include code-snippet/accordion/accordion-treeview-cs1/datasource.ts %}
+{% endhighlight %}
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/accordion/accordion-treeview-cs1" %}
diff --git a/ej2-javascript/accordion/how-to/load-content-through-post.md b/ej2-javascript/accordion/how-to/load-content-through-post.md
index 61d8d8bee..b15b38156 100644
--- a/ej2-javascript/accordion/how-to/load-content-through-post.md
+++ b/ej2-javascript/accordion/how-to/load-content-through-post.md
@@ -26,6 +26,9 @@ Accordion supports to load external contents through `AJAX` library. Refer the b
{% highlight html tabtitle="index.html" %}
{% include code-snippet/accordion/accordion-ajax-cs1/index.html %}
{% endhighlight %}
+{% highlight html tabtitle="ajax.html" %}
+{% include code-snippet/accordion/accordion-ajax-cs1/ajax.html %}
+{% endhighlight %}
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/accordion/accordion-ajax-cs1" %}
@@ -39,6 +42,9 @@ Accordion supports to load external contents through `AJAX` library. Refer the b
{% highlight html tabtitle="index.html" %}
{% include code-snippet/accordion/accordion-ajax-cs1/index.html %}
{% endhighlight %}
+{% highlight html tabtitle="ajax.html" %}
+{% include code-snippet/accordion/accordion-ajax-cs1/ajax.html %}
+{% endhighlight %}
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/accordion/accordion-ajax-cs1" %}
diff --git a/ej2-javascript/accumulation-chart/accessibility.md b/ej2-javascript/accumulation-chart/accessibility.md
index f1364bcbc..7d5bdd27d 100644
--- a/ej2-javascript/accumulation-chart/accessibility.md
+++ b/ej2-javascript/accumulation-chart/accessibility.md
@@ -51,8 +51,6 @@ The Accumulation chart control followed the [WAI-ARIA](https://www.w3.org/WAI/AR
* aria-hidden (attribute)
* aria-pressed (attribute)
-You can use the `accessibility` property in the Accumulation chart to customize the accessibility description, role, focusability, and tabindex. This allows you to define how the Accumulation chart is described and interpreted, ensuring that users with disabilities can interact with and understand the chart more effectively.
-
## Keyboard interaction
The Accumulation chart control followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Accumulation chart control.
diff --git a/ej2-javascript/accumulation-chart/advanced-accessibility-configuration.md b/ej2-javascript/accumulation-chart/advanced-accessibility-configuration.md
new file mode 100644
index 000000000..36aab2d45
--- /dev/null
+++ b/ej2-javascript/accumulation-chart/advanced-accessibility-configuration.md
@@ -0,0 +1,123 @@
+---
+layout: post
+title: Accessibility customization in Accumulation chart control | Syncfusion
+description: Learn here all about Accessibility customization in Syncfusion ##Platform_Name## Accumulation chart control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Accessibility customization
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility customization
+
+The Syncfusion® ##Platform_Name## Accumulation Chart control is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the ##Platform_Name## Accumulation Chart control's accessibility customization are briefly explained in this section.
+
+The accumulation chart control has a number of characteristics that enable accessibility features to be customized, including:
+
+* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers.
+* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately.
+* [`focusable`](../api/accumulation-chart/accessibilityModel/#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation.
+* [`focusBorderColor`](../api/accumulation-chart/#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused.
+* [`focusBorderMargin`](../api/accumulation-chart/#focusbordermargin) - Defines the margin around the focus border.
+* [`focusBorderWidth`](../api/accumulation-chart/#focusborderwidth) - Specifies the width of the focus border.
+* [`tabIndex`](../api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs477/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs477/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs477" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs477/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs477/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs477" %}
+{% endif %}
+
+## Series
+
+The [`series`](../api/accumulation-chart/#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as:
+
+* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers.
+* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately.
+* [`focusable`](../api/accumulation-chart/accessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation.
+* [`tabIndex`](../api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs478/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs478/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs478" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs478/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs478/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs478" %}
+{% endif %}
+
+## Legend
+
+The [`legendSettings`](../api/accumulation-chart/#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](../api/accumulation-chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](../api/accumulation-chart/#legendsettings) can be used to alter the accessibility of the accumulation chart's legend:
+
+* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers..
+* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context.
+* [`focusable`](../api/accumulation-chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation.
+* [`tabIndex`](../api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs479/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs479/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs479" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs479/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs479/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs479" %}
+{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/accumulation-chart/funnel.md b/ej2-javascript/accumulation-chart/funnel.md
index 122ca0884..759fbdb5e 100644
--- a/ej2-javascript/accumulation-chart/funnel.md
+++ b/ej2-javascript/accumulation-chart/funnel.md
@@ -226,37 +226,6 @@ Individual points can be customized using the `pointRender` event.
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs24" %}
{% endif %}
-## Accessibility
-
-You can use the `accessibility` property in the series to customize the accessibility description, role, focusability, and tabindex. This allows you to define how the series is described and interpreted, ensuring that users with disabilities can interact with and understand the chart more effectively.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/chart/chart-types-cs495/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-types-cs495/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs495" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart/chart-types-cs495/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-types-cs495/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs495" %}
-{% endif %}
-
## See also
* [Data label](./data-label)
diff --git a/ej2-javascript/accumulation-chart/legend.md b/ej2-javascript/accumulation-chart/legend.md
index 03689d1ca..af329fb6f 100644
--- a/ej2-javascript/accumulation-chart/legend.md
+++ b/ej2-javascript/accumulation-chart/legend.md
@@ -354,7 +354,7 @@ The [`itemPadding`](../api/accumulation-chart/legendSettings/#itempadding) prope
## Legend layout
-The `layout` property in `legendSettings` allows you to display the legend either horizontally or vertically. By default, the `layout` is set to **Auto**. The `maximumColumns` property in `legendSettings` defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the `fixedWidth` property in `legendSettings` ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
+The [`layout`](../api/accumulation-chart/legendSettingsModel/#layout) property in [`legendSettings`](../api/accumulation-chart/#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](../api/accumulation-chart/legendSettingsModel/#layout) is set to **Auto**. The [`maximumColumns`](../api/accumulation-chart/legendSettingsModel/#maximumcolumns) property in [`legendSettings`](../api/accumulation-chart/#legendsettings) defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the [`fixedWidth`](../api/accumulation-chart/legendSettingsModel/#fixedwidth) property in [`legendSettings`](../api/accumulation-chart/#legendsettings) ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
{% if page.publishingplatform == "typescript" %}
@@ -382,34 +382,3 @@ The `layout` property in `legendSettings` allows you to display the legend eithe
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs473" %}
{% endif %}
-
-## Accessibility
-
-You can use the `accessibility` property in `legendSettings` to customize the accessibility description, role, focusability, and tabindex. This allows you to define how the legend is described and interpreted, ensuring that users with disabilities can interact with and understand the chart more effectively.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/chart/chart-types-cs477/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-types-cs477/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs477" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart/chart-types-cs477/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-types-cs477/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs477" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/accumulation-chart/pie-dough-nut.md b/ej2-javascript/accumulation-chart/pie-dough-nut.md
index dcc0b9300..79094d8f4 100644
--- a/ej2-javascript/accumulation-chart/pie-dough-nut.md
+++ b/ej2-javascript/accumulation-chart/pie-dough-nut.md
@@ -385,37 +385,6 @@ You can also achieve drill-up (back to the initial state) by using [chartMouseCl
{% previewsample "page.domainurl/code-snippet/chart/grid-visual-cs1" %}
{% endif %}
-## Accessibility
-
-You can use the `accessibility` property in the series to customize the accessibility description, role, focusability, and tabindex. This allows you to define how the series is described and interpreted, ensuring that users with disabilities can interact with and understand the chart more effectively.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/chart/chart-types-cs478/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-types-cs478/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs478" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart/chart-types-cs478/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-types-cs478/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs478" %}
-{% endif %}
-
## See also
* [Data label](./data-label/)
diff --git a/ej2-javascript/accumulation-chart/pyramid.md b/ej2-javascript/accumulation-chart/pyramid.md
index 8e1de7b27..93616256e 100644
--- a/ej2-javascript/accumulation-chart/pyramid.md
+++ b/ej2-javascript/accumulation-chart/pyramid.md
@@ -195,37 +195,6 @@ Individual points can be customized using the `pointRender` event.
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs61" %}
{% endif %}
-## Accessibility
-
-You can use the `accessibility` property in the series to customize the accessibility description, role, focusability, and tabindex. This allows you to define how the series is described and interpreted, ensuring that users with disabilities can interact with and understand the chart more effectively.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/chart/chart-types-cs494/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-types-cs494/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs494" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart/chart-types-cs494/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart/chart-types-cs494/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs494" %}
-{% endif %}
-
## See also
* [Data label](./data-label/)
diff --git a/ej2-javascript/accumulation-chart/tool-tip.md b/ej2-javascript/accumulation-chart/tool-tip.md
index edb2a92f1..7159e83f3 100644
--- a/ej2-javascript/accumulation-chart/tool-tip.md
+++ b/ej2-javascript/accumulation-chart/tool-tip.md
@@ -230,7 +230,7 @@ Using [`tooltipRender`](../api/accumulation-chart/iAccTooltipRenderEventArgs/)
## Enable highlight
-By setting the `enableHighlight` property to **true**, the hovered pie slice is highlighted, while the remaining slices are dimmed, enhancing focus and clarity.
+By setting the [`enableHighlight`](../api/accumulation-chart/tooltipSettingsModel/#enablehighlight) property to **true**, the hovered pie slice is highlighted, while the remaining slices are dimmed, enhancing focus and clarity.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/ai-assistview/appearance.md b/ej2-javascript/ai-assistview/appearance.md
index e9a88fc1c..e1274b6eb 100644
--- a/ej2-javascript/ai-assistview/appearance.md
+++ b/ej2-javascript/ai-assistview/appearance.md
@@ -3,7 +3,7 @@ layout: post
title: Appearance in ##Platform_Name## AI AssistView control | Syncfusion
description: Checkout and learn about templates with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
-control: Appearance
+control: AI AssistView
publishingplatform: ##Platform_Name##
documentation: ug
domainurl: ##DomainURL##
diff --git a/ej2-javascript/ai-assistview/assist-view.md b/ej2-javascript/ai-assistview/assist-view.md
index 7fe69add2..742cdb3ca 100644
--- a/ej2-javascript/ai-assistview/assist-view.md
+++ b/ej2-javascript/ai-assistview/assist-view.md
@@ -3,7 +3,7 @@ layout: post
title: Assist view in ##Platform_Name## AI AssistView control | Syncfusion
description: Checkout and learn about Assist view with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
-control: Assist view
+control: AI AssistView
publishingplatform: ##Platform_Name##
documentation: ug
domainurl: ##DomainURL##
diff --git a/ej2-javascript/ai-assistview/custom-view.md b/ej2-javascript/ai-assistview/custom-view.md
index 3d1f1fdf9..62c848066 100644
--- a/ej2-javascript/ai-assistview/custom-view.md
+++ b/ej2-javascript/ai-assistview/custom-view.md
@@ -3,7 +3,7 @@ layout: post
title: Custom views in ##Platform_Name## AI AssistView control | Syncfusion
description: Checkout and learn about Custom views with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
-control: Custom views
+control: AI AssistView
publishingplatform: ##Platform_Name##
documentation: ug
domainurl: ##DomainURL##
diff --git a/ej2-javascript/ai-assistview/events.md b/ej2-javascript/ai-assistview/events.md
index 219e6f18a..16b395fa1 100644
--- a/ej2-javascript/ai-assistview/events.md
+++ b/ej2-javascript/ai-assistview/events.md
@@ -3,7 +3,7 @@ layout: post
title: Events in ##Platform_Name## AI AssistView control | Syncfusion
description: Checkout and learn about events with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
-control: Events
+control: AI AssistView
publishingplatform: ##Platform_Name##
documentation: ug
domainurl: ##DomainURL##
diff --git a/ej2-javascript/ai-assistview/js/es5-getting-started.md b/ej2-javascript/ai-assistview/js/es5-getting-started.md
index 37fe1529e..f18bab708 100644
--- a/ej2-javascript/ai-assistview/js/es5-getting-started.md
+++ b/ej2-javascript/ai-assistview/js/es5-getting-started.md
@@ -3,7 +3,7 @@ layout: post
title: Es5 getting started with ##Platform_Name## AI AssistView control | Syncfusion
description: Checkout and learn about Es5 getting started with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more details.
platform: ej2-javascript
-control: Es5 getting started
+control: AI AssistView
publishingplatform: ##Platform_Name##
documentation: ug
domainurl: ##DomainURL##
@@ -75,13 +75,23 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
JavaScript (ES5) - + + + + - + + + + + + + + @@ -100,13 +110,25 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlinJavaScript (ES5) - + + + + + - + + + + + + + + + diff --git a/ej2-javascript/ai-assistview/methods.md b/ej2-javascript/ai-assistview/methods.md index 2432af0d1..3c27d3f83 100644 --- a/ej2-javascript/ai-assistview/methods.md +++ b/ej2-javascript/ai-assistview/methods.md @@ -3,7 +3,7 @@ layout: post title: Methods in ##Platform_Name## AI AssistView control | Syncfusion description: Checkout and learn about methods with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Methods +control: AI AssistView publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## diff --git a/ej2-javascript/ai-assistview/templates.md b/ej2-javascript/ai-assistview/templates.md index ae58032d8..41e6765cf 100644 --- a/ej2-javascript/ai-assistview/templates.md +++ b/ej2-javascript/ai-assistview/templates.md @@ -3,7 +3,7 @@ layout: post title: Templates in ##Platform_Name## AI AssistView control | Syncfusion description: Checkout and learn about templates with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Templates +control: AI AssistView publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## diff --git a/ej2-javascript/ai-assistview/toolbar-items.md b/ej2-javascript/ai-assistview/toolbar-items.md index 0340e7405..fc87a1537 100644 --- a/ej2-javascript/ai-assistview/toolbar-items.md +++ b/ej2-javascript/ai-assistview/toolbar-items.md @@ -3,7 +3,7 @@ layout: post title: Toolbar items in ##Platform_Name## AI AssistView control | Syncfusion description: Checkout and learn about Toolbar items with ##Platform_Name## AI AssistView control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Toolbar items +control: AI AssistView publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -21,7 +21,7 @@ The AI AssistView toolbar's can be rendered by defining an array of items. Items #### Adding iconCss -You can customize the toolbar icons by using the [iconCss](../api/ai-assistview/toolbarItemModel/#cssclass) property. +You can customize the toolbar icons by using the `iconCss` property. {% if page.publishingplatform == "typescript" %} @@ -52,7 +52,7 @@ You can customize the toolbar icons by using the [iconCss](../api/ai-assistview/ #### Setting item type -You can change the toolbar item type by using the [`type`](../api/ai-assistview/toolbarItemModel/#type) property. The `type` supports three types of items such as `Button`, `Separator` and `Input`. By default, the type is `Button`. +You can change the toolbar item type by using the `type` property. The `type` supports three types of items such as `Button`, `Separator` and `Input`. By default, the type is `Button`. In the following example, toolbar item type is set as `Button`. @@ -85,7 +85,7 @@ In the following example, toolbar item type is set as `Button`. #### Setting text -You can use the [text](../api/ai-assistview/toolbarItemModel/#text) property to set the text for toolbar item. +You can use the `text` property to set the text for toolbar item. {% if page.publishingplatform == "typescript" %} @@ -116,7 +116,7 @@ You can use the [text](../api/ai-assistview/toolbarItemModel/#text) property to #### Show or hide toolbar item -You can use the [visible](../api/ai-assistview/toolbarItemModel/#visible) property to specify whether to show or hide the toolbar item. By default, its value is `true`. +You can use the `visible` property to specify whether to show or hide the toolbar item. By default, its value is `true`. {% if page.publishingplatform == "typescript" %} @@ -147,7 +147,7 @@ You can use the [visible](../api/ai-assistview/toolbarItemModel/#visible) proper #### Setting disabled -You can use the [disabled](../api/ai-assistview/toolbarItemModel/#disabled) property to disable the toolbar item. By default, its value is `false`. +You can use the `disabled` property to disable the toolbar item. By default, its value is `false`. {% if page.publishingplatform == "typescript" %} @@ -178,7 +178,7 @@ You can use the [disabled](../api/ai-assistview/toolbarItemModel/#disabled) prop #### Setting tooltip text -You can use the [tooltip](../api/ai-assistview/toolbarItemModel/#tooltip) property to specify the tooltip text to be displayed on hovering the toolbar item. +You can use the `tooltip` property to specify the tooltip text to be displayed on hovering the toolbar item. {% if page.publishingplatform == "typescript" %} @@ -209,7 +209,7 @@ You can use the [tooltip](../api/ai-assistview/toolbarItemModel/#tooltip) proper #### Setting cssClass -You can use the [cssClass](../api/ai-assistview/toolbarItemModel/#cssclass) property to customize the toolbar item. +You can use the `cssClass` property to customize the toolbar item. {% if page.publishingplatform == "typescript" %} @@ -240,7 +240,7 @@ You can use the [cssClass](../api/ai-assistview/toolbarItemModel/#cssclass) prop #### Setting alignment -You can change the alignment of toolbar item by using the [`align`](../api/ai-assistview/toolbarItemModel/#align) property. It supports three types of alignments such as `Left`, `Center` and `Right`. By default, the value is `Left`. +You can change the alignment of toolbar item by using the `align` property. It supports three types of alignments such as `Left`, `Center` and `Right`. By default, the value is `Left`. In the following example, toolbar item type is set with `Right`. @@ -273,7 +273,7 @@ In the following example, toolbar item type is set with `Right`. #### Enabling tab key navigation in toolbar -You can use the [`tabIndex`](../api/ai-assistview/toolbarItemModel/#tabindex) property of a Toolbar item to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the `tabIndex` property allows you to switch between items using the `Tab` and `Shift+Tab` keys as well. +You can use the `tabIndex` property of a Toolbar item to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the `tabIndex` property allows you to switch between items using the `Tab` and `Shift+Tab` keys as well. To use the `tabIndex` property, set it for each Toolbar item which you want to enable tab key navigation. The `tabIndex` property should be set to a positive integer value. A value of `0` or a negative value will disable tab key navigation for the item. @@ -313,7 +313,7 @@ In this case, the user can switch between the two Toolbar items using the Tab an #### Setting template -You can use the [template](../api/ai-assistview/toolbarItemModel/#template) property to add custom toolbar item in the AI AssistView. +You can use the `template` property to add custom toolbar item in the AI AssistView. {% if page.publishingplatform == "typescript" %} @@ -344,7 +344,7 @@ You can use the [template](../api/ai-assistview/toolbarItemModel/#template) prop ### Item clicked -The [itemClicked](../api/ai-assistview/toolbarSettings/#itemclicked) event is triggered when the header toolbar item is clicked. +The `itemClicked` event is triggered when the header toolbar item is clicked. {% if page.publishingplatform == "typescript" %} @@ -519,7 +519,7 @@ You can also add custom toolbar items in the AI AssistView by using the [toolbar You can use the [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettings) property to add custom items for the prompt toolbar in the AI AssistView. -> To know more about the items, please refer to the [items](../api/ai-assistview/toolbarItemModel/) section. +> To know more about the items, please refer to the `items` section. {% if page.publishingplatform == "typescript" %} @@ -552,7 +552,7 @@ You can use the [promptToolbarSettings](../api/ai-assistview#prompttoolbarsettin You can use the [responseToolbarSettings](../api/ai-assistview#responsetoolbarsettings) property to add custom response toolbar in the AI AssistView. -> To know more about the items, please refer to the [items](../api/ai-assistview/toolbarItemModel/) section. +> To know more about the items, please refer to the `items` section. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/ai-assistview/ts/getting-started.md b/ej2-javascript/ai-assistview/ts/getting-started.md index b44aa0b0c..34c0ce55b 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: Getting started +control: AI AssistView publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -70,6 +70,10 @@ To render AI AssistView control, need to import interactive-chat and its depende {% highlight css tabtitle="style.css" %} @import "../../node_modules/@syncfusion/ej2-base/styles/material.css"; +@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css"; +@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css"; +@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css"; +@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css"; @import "../../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css"; {% endhighlight %} diff --git a/ej2-javascript/appbar/ts/getting-started.md b/ej2-javascript/appbar/ts/getting-started.md index 106ccb20d..2a6871090 100644 --- a/ej2-javascript/appbar/ts/getting-started.md +++ b/ej2-javascript/appbar/ts/getting-started.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Appbar control +# Getting started in ##Platform_Name## AppBar control This section explains how to create a simple AppBar and configure its available functionalities in TypeScript using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. @@ -77,7 +77,7 @@ To render AppBar component, need to import navigations and its dependent compone 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. +Add the HTML div tag with its `id` attribute as `AppBar` in your `index.html` file to initialize the AppBar. `[src/index.html]` @@ -106,7 +106,7 @@ Add the HTML div tag with its `id` attribute as `appbar` in your `index.html` fi {% endhighlight %} {% endtabs %} -Import the AppBar component in your `app.ts` file and initialize it with the `#appbar`. +Import the AppBar component in your `app.ts` file and initialize it with the `#AppBar`. `[src/app/app.ts]` @@ -138,6 +138,9 @@ npm start 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 %} diff --git a/ej2-javascript/appearance/css-variables.md b/ej2-javascript/appearance/css-variables.md index 708dc083a..712113f92 100644 --- a/ej2-javascript/appearance/css-variables.md +++ b/ej2-javascript/appearance/css-variables.md @@ -18,16 +18,19 @@ Syncfusion currently offers two modern and highly customizable themes using CSS * Material 3 Theme * Fluent 2 Theme * Bootstrap 5.3 Theme +* Tailwind 3.4 Theme ## CSS themes - Syncfusion ##Platform_Name## Controls -[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) and [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs. +[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew), [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [Tailwind 3.4](https://tailwindcss.com/docs/installation) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs. > Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;. ### Utilization of CSS variables in modern themes -Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support for CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors while `Fluent 2` uses `hex` values for color customization. Bootstrap 5.3 allows color customization with both `rgb()` and `hex` values. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of these themes. The examples below shows CSS variables with their values used for the respective themes. +Modern themes make it easy to change the colors of controls using CSS variables. Each theme has its own way of setting these variables, so it's important to follow the specific instructions for each theme. Doing this helps keep the styling consistent and efficient across different parts of your application. + +Below are examples of how CSS variables can be defined for these themes: {% if page.publishingplatform == "typescript" %} @@ -41,6 +44,9 @@ Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support fo {% highlight css tabtitle="bootstrap5.3.css" %} {% include code-snippet/common/css-value-cs1/bootstrap5.3.css %} {% endhighlight %} +{% highlight css tabtitle="tailwind3.4.css" %} +{% include code-snippet/common/css-value-cs1/tailwind3.css %} +{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "javascript" %} @@ -55,6 +61,9 @@ Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support fo {% highlight css tabtitle="bootstrap5.3.css" %} {% include code-snippet/common/css-value-cs1/bootstrap5.3.css %} {% endhighlight %} +{% highlight css tabtitle="tailwind3.4.css" %} +{% include code-snippet/common/css-value-cs1/tailwind3.css %} +{% endhighlight %} {% endtabs %} {% endif %} @@ -71,9 +80,11 @@ To access themes provided by Syncfusion, you have two primary options, |Package | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) | | | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) | | | [Bootstrap 5.3 Light](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-theme) | [Bootstrap 5.3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-dark-theme) | +| | [Tailwind 3.4 Light](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) | [Tailwind 3.4 Dark](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-dark-theme) | | CDN | [Material 3 Light](https://cdn.syncfusion.com/ej2/27.1.48/material3.css) | [Material 3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/material3-dark.css) | | | [Fluent 2 light](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css) | [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/27.1.48/fluent2-dark.css) | | | [Bootstrap5.3 light](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css) | [Bootstrap 5.3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css) | +| | [Tailwind 3.4 Light](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css) | [Tailwind 3.4 Dark](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) | ### Color Customization in themes @@ -186,6 +197,41 @@ Example for `Bootstrap 5.3` customization using Css class. {% previewsample "page.domainurl/code-snippet/common/bootstrap5.3-cs2" %} {% endif %} +Here you can find the example for `Tailwind 3.4` customization using CSS class. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/common/tailwind3-cs2/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/common/tailwind3-cs2/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/common/tailwind3-cs2/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs2" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/common/tailwind3-cs2/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/common/tailwind3-cs2/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/common/tailwind3-cs2/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs2" %} +{% endif %} + #### Customization using JavaScript Here you can find the example for `Material 3` customization using JavaScript. @@ -299,11 +345,48 @@ Example for `Bootstrap 5.3` customization using JavaScript.  +Example for `Tailwind 3.4` customization using JavaScript. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/common/tailwind3-cs3/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/common/tailwind3-cs3/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs3" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/common/tailwind3-cs3/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/common/tailwind3-cs3/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs3" %} +{% endif %} + +**Default Tailwind 3.4 primary value** + + + +**Customized Tailwind 3.4 primary value** + + + With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion JavaScript controls. ### Switching Light and Dark mode with CSS variables -Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application. +Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In all themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application. {% if page.publishingplatform == "typescript" %} @@ -394,9 +477,40 @@ Similar to `Material 3`, we offer both Light and Dark variants with `Bootstrap 5 {% previewsample "page.domainurl/code-snippet/common/bootstrap5.3-cs1" %} {% endif %} +### Mode switching in Tailwind 3.4 theme + +Similar to `Material 3`, we offer both Light and Dark variants with `Tailwind 3.4`. In the Tailwind 3.4 theme, there are distinct class variables for light and dark modes, as shown in the preview below. + +{% if page.publishingplatform == "typescript" %} + +{% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/common/tailwind3-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/common/tailwind3-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/common/tailwind3-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/common/tailwind3-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs1" %} +{% endif %} + ### How to switch dark mode? -To activate dark mode, just append the `e-dark-mode` class to the body section of your application for `Material 3`, `Fluent 2` and `Bootstrap 5.3` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance. +To activate dark mode, just append the `e-dark-mode` class to the body section of your application for `Material 3`, `Fluent 2`, `Bootstrap 5.3` and `Tailwind 3.4` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance. `Material 3` dark mode @@ -410,8 +524,12 @@ To activate dark mode, just append the `e-dark-mode` class to the body section o  +`Tailwind 3.4` dark mode + + + ### ThemeStudio Application -The ThemeStudio application now includes seamless integration with the Material 3, Fluent 2 and Bootstrap 5.3 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes. +The ThemeStudio application now includes seamless integration with the Material 3, Fluent 2, Bootstrap 5.3 and Tailwind 3.4 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes. Access the Syncfusion ThemeStudio application, featuring our themes, via the following link: [Link to Syncfusion ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=material3) diff --git a/ej2-javascript/appearance/icons.md b/ej2-javascript/appearance/icons.md index 849727ffe..15e198b8a 100644 --- a/ej2-javascript/appearance/icons.md +++ b/ej2-javascript/appearance/icons.md @@ -198,6 +198,10 @@ The complete package of Essential JS 2 icons is listed below. The corresponding +### Tailwind 3.4 + + + ### Tailwind CSS diff --git a/ej2-javascript/appearance/images/tailwind3-customize.png b/ej2-javascript/appearance/images/tailwind3-customize.png new file mode 100644 index 000000000..837249c88 Binary files /dev/null and b/ej2-javascript/appearance/images/tailwind3-customize.png differ diff --git a/ej2-javascript/appearance/images/tailwind3-dark.png b/ej2-javascript/appearance/images/tailwind3-dark.png new file mode 100644 index 000000000..14160b09a Binary files /dev/null and b/ej2-javascript/appearance/images/tailwind3-dark.png differ diff --git a/ej2-javascript/appearance/images/tailwind3-default.png b/ej2-javascript/appearance/images/tailwind3-default.png new file mode 100644 index 000000000..9c0ad784a Binary files /dev/null and b/ej2-javascript/appearance/images/tailwind3-default.png differ diff --git a/ej2-javascript/appearance/theme.md b/ej2-javascript/appearance/theme.md index 2eaede59a..7ac8403fc 100644 --- a/ej2-javascript/appearance/theme.md +++ b/ej2-javascript/appearance/theme.md @@ -15,6 +15,8 @@ The Syncfusion JavaScript library has provided the below list of in-built themes |Theme | Style Sheet Name | |--------|--------| +|Tailwind 3.4 | tailwind3.css | +|Tailwind 3.4 Dark | tailwind3-dark.css | |Bootstrap 5.3 | bootstrap5.3.css | |Bootstrap 5.3 Dark | bootstrap5.3-dark.css | |Fluent 2 | fluent2.css | @@ -173,6 +175,8 @@ https://cdn.syncfusion.com/ej2// -lite.css | Theme Name | CDN Reference | |--- | --- | +| Tailwind 3.4 | [https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css) | +| Tailwind 3.4 Dark | [https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) | | Bootstrap 5.3 | [https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css) | | Bootstrap 5.3 Dark | [https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css) | | Fluent 2 | [https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css) | @@ -301,6 +305,215 @@ The following list of common variables are used in the Syncfusion JavaScript lib +### Syncfusion Tailwind 3.4 theme + + + + +
+ ### Syncfusion Bootstrap 5.3 theme+ + + +Name +Value (Default Theme) +Value (Dark Theme) ++ +--color-sf-black ++ rgb(0,0,0) + ++ rgb(0,0,0) + ++ +--color-sf-white ++ rgb(255,255,255) + ++ rgb(255,255,255) + ++ +--color-sf-primary ++ rgba(79, 70, 229) + ++ rgba(99, 102, 241) + ++ +--color-sf-primary-text-color ++ #fff + ++ #fff + ++ +--color-sf-primary-light ++ #3730a3 + ++ #3730a3 + ++ +--color-sf-primary-lighter ++ #e0e7ff + ++ #1e1b4b + ++ +--color-sf-primary-dark ++ #4338ca + ++ #818cf8 + ++ +--color-sf-primary-darker ++ #3730a3 + ++ #4f46e5 + ++ +--color-sf-success ++ #15803d + ++ #22c55e + ++ +--color-sf-info ++ #0e7490 + ++ #38bdf8 + ++ +--color-sf-warning ++ #c2410c + ++ #f97316 + ++ +--color-sf-danger ++ #dc2626 + ++ #f87171 + ++ +--color-sf-success-light ++ #dcfce7 + ++ #164c37 + ++ +--color-sf-info-light ++ #cffafe + ++ #0e485b + ++ +--color-sf-warning-light ++ #ffedd5 + ++ #573422 + ++ +--color-sf-danger-light ++ #fee2e2 + ++ #54252f + ++ +--color-sf-success-dark ++ #166534 + ++ #4ade80 + ++ +--color-sf-info-dark ++ #155e75 + ++ #38bdf8 + ++ +--color-sf-warning-dark ++ #9a3412 + ++ #fb923c + ++ + +--color-sf-danger-dark ++ #b91c1c + ++ #ef4444 + +diff --git a/ej2-javascript/auto-complete/accessibility.md b/ej2-javascript/auto-complete/accessibility.md index 3e2f85d5f..1b65359c6 100644 --- a/ej2-javascript/auto-complete/accessibility.md +++ b/ej2-javascript/auto-complete/accessibility.md @@ -13,36 +13,7 @@ domainurl: ##DomainURL## The AutoComplete component has been designed, keeping in mind the `WAI-ARIA` specifications, and applies the `WAI-ARIA` roles, states, and properties along with `keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation. -The AutoComplete component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. - -The accessibility compliance for the AutoComplete component is outlined below. - -| Accessibility Criteria | Compatibility | -| -- | -- | -| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) |
|
-| [Section 508 Support](../common/accessibility#accessibility-standards) | |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | 
|
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | |
-| [Color Contrast](../common/accessibility#color-contrast) | |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
-| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
-
-
-- - - All features of the component meet the requirement.- - - Some features of the component do not meet the requirement.- - -## WAI-ARIA attributes +## ARIA attributes The AutoComplete component uses the `combobox` role and each list item has an `option` role. The following `ARIA Attributes` denote the AutoComplete state. @@ -103,16 +74,4 @@ You can use the following key shortcuts to access the AutoComplete without inter {% endtabs %} {% previewsample "page.domainurl/code-snippet/autocomplete/getting-started-cs1" %} -{% endif %} - -## Ensuring accessibility - -The AutoComplete component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. - -The accessibility compliance of the AutoComplete component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/auto-complete.html) in a new window to evaluate the accessibility of the AutoComplete component with accessibility tools. - -{% previewsample "https://ej2.syncfusion.com/accessibility/auto-complete.html" %} - -## See also - -* [Accessibility in Syncfusion components](../common/accessibility) \ No newline at end of file +{% endif %} \ No newline at end of file diff --git a/ej2-javascript/auto-complete/disabled-items.md b/ej2-javascript/auto-complete/disabled-items.md deleted file mode 100644 index e0ed80df7..000000000 --- a/ej2-javascript/auto-complete/disabled-items.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -layout: post -title: Disabled Items in ##Platform_Name## AutoComplete control | Syncfusion -description: Learn here all about Disabled Items in Syncfusion ##Platform_Name## AutoComplete control of Syncfusion Essential JS 2 and more. -platform: ej2-javascript -control: Disabled Items -publishingplatform: ##Platform_Name## -documentation: ug -domainurl: ##DomainURL## ---- - -# Disabled Items in ##Platform_Name## AutoComplete control - -The AutoComplete provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [disabled](../api/auto-complete/#fields) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `fields.disabled` property. - -In the following sample, State are grouped according on its category using `disabled` field. - -{% if page.publishingplatform == "typescript" %} - - {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/autocomplete/basic-cs11/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/basic-cs11/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/basic-cs11" %} - -{% elsif page.publishingplatform == "javascript" %} - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/autocomplete/basic-cs11/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/basic-cs11/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/basic-cs11" %} -{% endif %} - -## Disable Item Method - -The [disableItem](../api/auto-complete/#disableItem) method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [dataSource](../api/auto-complete/#datasource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared. - -| Parameter | Type | Description | -|------|------|------| -| itemHTMLLIElement |
- The component does not meet the requirement.HTMLLIElement| It accepts the HTML Li element of the item to be removed. | -| itemValue |string\|number\|boolean\|object| It accepts the string, number, boolean and object type value of the item to be removed. | -| itemIndex |number| It accepts the index of the item to be removed. | - -## Enabled - -If you want to disabled the overall component to set the [enabled](../api/auto-complete/#enabled) property to false. - - \ No newline at end of file diff --git a/ej2-javascript/auto-complete/how-to/achieve-virtual-scrolling.md b/ej2-javascript/auto-complete/how-to/achieve-virtual-scrolling.md new file mode 100644 index 000000000..6c26d142e --- /dev/null +++ b/ej2-javascript/auto-complete/how-to/achieve-virtual-scrolling.md @@ -0,0 +1,43 @@ +--- +layout: post +title: Achieve virtual scrolling in ##Platform_Name## Auto complete control | Syncfusion +description: Learn here all about Achieve virtual scrolling in Syncfusion ##Platform_Name## Auto complete control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: Achieve virtual scrolling +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Achieve virtual scrolling in ##Platform_Name## Auto complete control + +The Virtual Scrolling is used to display a large amount of data without buffering the entire load of a huge database record in the AutoComplete, that is, when scrolling, the request is sent and fetch some amount of data from the server dynamically. Using the `scroll` event, get the data and generate the list add to popup using the `addItem` method. + +Refer to the following code sample for virtual scrolling. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/autocomplete/virtual-cs1/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/autocomplete/virtual-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/autocomplete/virtual-cs1" %} + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/autocomplete/virtual-cs1/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/autocomplete/virtual-cs1/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/autocomplete/virtual-cs1" %} +{% endif %} diff --git a/ej2-javascript/auto-complete/resize.md b/ej2-javascript/auto-complete/resize.md new file mode 100644 index 000000000..1fc26a83a --- /dev/null +++ b/ej2-javascript/auto-complete/resize.md @@ -0,0 +1,42 @@ +--- +layout: post +title: Resizing in ##Platform_Name## AutoComplete control | Syncfusion +description: Learn here all about Popup Resizing in Syncfusion ##Platform_Name## AutoComplete control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: Resizing +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Resizing ##Platform_Name## AutoComplete control + +You can dynamically adjust the size of the popup in the Autocomplete component by using the [AllowResize](https://ej2.syncfusion.com/javascript/documentation/api/auto-complete/#allowresize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience. + +{% if page.publishingplatform == "typescript" %} + + {% tabs %} +{% highlight ts tabtitle="index.ts" %} +{% include code-snippet/autocomplete/basic-cs12/index.ts %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/autocomplete/basic-cs12/index.html %} +{% endhighlight %} +{% endtabs %} + + +{% elsif page.publishingplatform == "javascript" %} + +{% tabs %} +{% highlight js tabtitle="index.js" %} +{% include code-snippet/autocomplete/basic-cs12/index.js %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/autocomplete/basic-cs12/index.html %} +{% endhighlight %} +{% endtabs %} + + +{% endif %} + + \ No newline at end of file diff --git a/ej2-javascript/auto-complete/ts/getting-started.md b/ej2-javascript/auto-complete/ts/getting-started.md index bc2db032f..d55c203f4 100644 --- a/ej2-javascript/auto-complete/ts/getting-started.md +++ b/ej2-javascript/auto-complete/ts/getting-started.md @@ -11,9 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Auto complete control -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 section explains how to create a simple **AutoComplete** component and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. ## Dependencies @@ -30,58 +28,22 @@ The following list of dependencies are required to use the AutoComplete componen |-- @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" %} +## Set up of the development environment -git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart - -{% endhighlight %} -{% endtabs %} +To get started with the AutoComplete component, you have to clone the Essential JS 2 +[`quickstart`](https://github.com/syncfusion/ej2-quickstart.git) project and install the npm packages by using the following commands. -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 %} - -## 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. +git clone https://github.com/syncfusion/ej2-quickstart.git quickstart -{% tabs %} -{% highlight bash tabtitle="NPM" %} +cd quickstart npm install -{% endhighlight %} -{% endtabs %} - -## Import the Syncfusion CSS styles - -To render AutoComplete component, need to import dropdowns and its dependent components styles as given below 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-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'; - -{% endhighlight %} -{% endtabs %} +>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. ## Initialize the AutoComplete @@ -91,21 +53,24 @@ Add the HTML input element which needs to be initialized as AutoComplete in `in `[src/index.html]` -{% tabs %} -{% highlight html tabtitle="index.html" %} - +```html -AutoComplete component +Essential JS 2 AutoComplete component - .... - .... + + + + + + + @@ -117,17 +82,14 @@ Add the HTML input element which needs to be initialized as AutoComplete in `in - -{% endhighlight %} -{% endtabs %} +``` Now import the AutoComplete component to your `app.ts` and initialize it to the element `#atcelement` as shown below. `[src/app/app.ts]` -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { AutoComplete } from '@syncfusion/ej2-dropdowns'; @@ -137,15 +99,13 @@ let atcObject: AutoComplete = new AutoComplete(); // render initialized AutoComplete atcObject.appendTo('#atcelement'); -{% 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. -{% tabs %} -{% highlight ts tabtitle="app.ts" %} +```ts import { AutoComplete } from '@syncfusion/ej2-dropdowns'; @@ -161,20 +121,17 @@ 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" %} +``` -npm run start + npm run start -{% endhighlight %} -{% endtabs %} +``` The following example illustrates the output in your browser. diff --git a/ej2-javascript/auto-complete/value-binding.md b/ej2-javascript/auto-complete/value-binding.md deleted file mode 100644 index 6bf72121e..000000000 --- a/ej2-javascript/auto-complete/value-binding.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -layout: post -title: Value binding in ##Platform_Name## AutoComplete control | Syncfusion -description: Learn here all about Value binding in Syncfusion ##Platform_Name## AutoComplete control of Syncfusion Essential JS 2 and more. -platform: ej2-javascript -control: Value binding -publishingplatform: ##Platform_Name## -documentation: ug -domainurl: ##DomainURL## ---- - -# Value binding in AutoComplete Component - -Value binding in the AutoComplete control allows you to associate data values with each list item. This facilitates managing and retrieving selected values efficiently. The AutoComplete component provides flexibility in binding both primitive data types and complex objects. - -## Primitive Data Types - -The AutoComplete control provides flexible binding capabilities for primitive data types like strings and numbers. You can effortlessly bind local primitive data arrays, fetch and bind data from remote sources, and even custom data binding to suit specific requirements. Bind the value of primitive data to the [value](../api/auto-complete/#value) property of the AutoComplete. - -Primitive data types include: - -* String -* Number -* Boolean -* Null - -The following sample shows the example for preselect values for primitive data type - -{% if page.publishingplatform == "typescript" %} - - {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/autocomplete/primitive/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/primitive/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/primitive" %} - -{% elsif page.publishingplatform == "javascript" %} - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/autocomplete/primitive/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/primitive/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/primitive" %} -{% endif %} - -## Object Data Types - -In the AutoComplete control, object binding allows you to bind to a dataset of objects. When [`allowObjectBinding`](../api/auto-complete/#allowobjectbinding) is enabled, the value of the control will be an object of the same type as the selected item in the [value](../api/auto-complete/#value) property. This feature seamlessly binds arrays of objects, whether sourced locally, retrieved from remote endpoints, or customized to suit specific application needs. - -The following sample shows the example for preselect values for object data type - -{% if page.publishingplatform == "typescript" %} - - {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/autocomplete/objectvalue/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/objectvalue/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/objectvalue" %} - -{% elsif page.publishingplatform == "javascript" %} - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/autocomplete/objectvalue/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/objectvalue/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/objectvalue" %} -{% endif %} - -> Since the `value` property supports object data types, it's necessary to provide the appropriate type wherever the `value` property is utilized. \ No newline at end of file diff --git a/ej2-javascript/auto-complete/virtual-scroll.md b/ej2-javascript/auto-complete/virtual-scroll.md index 3ecfbb1f9..42269d515 100644 --- a/ej2-javascript/auto-complete/virtual-scroll.md +++ b/ej2-javascript/auto-complete/virtual-scroll.md @@ -11,19 +11,7 @@ domainurl: ##DomainURL## # Virtualization in AutoComplete Component -AutoComplete virtualization is a technique used to efficiently render extensive lists of items while minimizing the impact on performance. This method is particularly advantageous when dealing with large datasets because it ensures that only a fixed number of DOM (Document Object Model) elements are created. When scrolling through the list, existing DOM elements are reused to display relevant data instead of generating new elements for each item. This recycling process is managed internally. - -During virtual scrolling, the data retrieved from the data source depends on the popup height and the calculation of the list item height. Enabling the [enableVirtualization](../api/auto-complete/#enableVirtualization) option in a AutoComplete activates this virtualization technique. - -When fetching data from the data source, the [actionBegin](../api/auto-complete/#actionbegin) event is triggered before data retrieval begins. Then, the [actionComplete](../api/auto-complete/#actioncomplete) event is triggered once the data is successfully fetched. - -When the enableVirtualization property is enabled, the `skip` and `take` properties provided by the user within the Query class at the initial state or during the `actionBegin` or `actionComplete` events will not be considered, since it is internally managed and calculated based on certain dimensions with respect to the popup height. - -## Binding local data - -The AutoComplete can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [fields](../api/drop-down-list/#fields) property. When using virtual scrolling, the list updates based on the scroll offset value, triggering a request to fetch more data from the server. As the data is being fetched, the `actionBegin` event occurs before the data retrieval starts. Once the data retrieval is successful, the `actionComplete` event is triggered, indicating that the data fetch process is complete. - -In the following example, `text` column from complex data have been mapped to the `value` field. +AutoComplete virtualization is a technique used to efficiently render long lists of items in a user interface while minimizing the impact on performance. It's particularly useful when dealing with large datasets, as it ensures that only a fixed number of DOM (Document Object Model) elements are created and displayed in the AutoComplete Component. As the user scrolls through the list, the existing DOM elements are reused to display the relevant data, rather than creating new elements for each item. Enabling the [`enableVirtualization`](../api/auto-complete/#enableVirtualization) option in a dropdown list activates this virtualization technique, significantly enhancing the list's performance and user experience, especially when handling large datasets. {% if page.publishingplatform == "typescript" %} @@ -52,100 +40,20 @@ In the following example, `text` column from complex data have been mapped to th {% previewsample "page.domainurl/code-snippet/autocomplete/virtual-scroll" %} {% endif %} +## Keyboard interaction -## Binding Remote data - -The AutoComplete supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well. - -The following sample displays the OrderId from the `Orders` Data Service. - -{% if page.publishingplatform == "typescript" %} - - {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/autocomplete/virtual-scroll-remote/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/virtual-scroll-remote/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/virtual-scroll-remote" %} - -{% elsif page.publishingplatform == "javascript" %} - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/autocomplete/virtual-scroll-remote/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/virtual-scroll-remote/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/virtual-scroll-remote" %} -{% endif %} - -## Customizing items count in virtualization - -When the `enableVirtualization` property is enabled, the `take` property provided by the user within the Query parameter at the initial state or during the `actionBegin` event will be considered. Internally, it calculates the items that fit onto the current page (i.e., probably twice the amount of the popup's height). If the user-provided take value is less than the minimum number of items that fit into the popup, the user-provided take value will not be considered. - -The following sample shows the example for Customizing items count in virtualization. - -{% if page.publishingplatform == "typescript" %} - - {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/autocomplete/virtual-scroll-items/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/virtual-scroll-items/index.html %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "javascript" %} - -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/autocomplete/virtual-scroll-items/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/virtual-scroll-items/index.html %} -{% endhighlight %} -{% endtabs %} - -{% endif %} - -## Grouping with Virtualization - -The AutoComplete component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [groupBy](../api/auto-complete/#fields) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness. - -The following sample shows the example for Grouping with Virtualization. - -{% if page.publishingplatform == "typescript" %} - - {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/autocomplete/virtual-scroll-group/index.ts %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/virtual-scroll-group/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/virtual-scroll-group" %} +Users can navigate through the scrollable content using keyboard actions. This feature loads the next or next set of items based on the key inputs in the popup. -{% elsif page.publishingplatform == "javascript" %} +| Key | Action | +|-----|-----| +| `ArrowDown` | Loads the next virtual list item if the focus is present in last item of the current page. Additionally, when holding the key, further virtual list items are loaded in the popup. | +| `ArrowUp` | Loads the previous virtual list item if the focus is present in first item of the current page. Additionally, when holding the key, further virtual list items are loaded in the popup. | +| `PageDown` | Loads the next page and focus the last item in it. Additionally, when holding the key, further virtual list items are loaded in the popup. | +| `PageUp` | Loads the previous page and focus the first item in it. Additionally, when holding the key, further virtual list items are loaded in the popup.| -{% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/autocomplete/virtual-scroll-group/index.js %} -{% endhighlight %} -{% highlight html tabtitle="index.html" %} -{% include code-snippet/autocomplete/virtual-scroll-group/index.html %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/autocomplete/virtual-scroll-group" %} -{% endif %} +## Limitation of virtualization +* Virtualization is not supported in the grouping feature. +* Selected Value may or may not be present in the current view port. +* Once filtered, close the popup. Then open the popup with the initially loaded items. +* Virtualization does not work when the popup is closed, and a keyboard action is performed. diff --git a/ej2-javascript/avatar/how-to/avatar-customization.md b/ej2-javascript/avatar/how-to/avatar-customization.md index 3ee3406a8..1b1cdf381 100644 --- a/ej2-javascript/avatar/how-to/avatar-customization.md +++ b/ej2-javascript/avatar/how-to/avatar-customization.md @@ -9,21 +9,21 @@ documentation: ug domainurl: ##DomainURL## --- -# Avatar customization in ##Platform_Name## Avatar control +# Customization in ##Platform_Name## Avatar control ## Color customization -The avatar comes with default background color (grey). This can be easily customized to desired color by adding custom class or directly selecting the avatar class from the CSS. +The avatar control comes with a default background color (Grey). This can be easily customized to a desired color by adding a custom class or directly selecting the avatar class from the CSS. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/avatar/color-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/color-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/color-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/color-cs1" %} @@ -31,12 +31,12 @@ The avatar comes with default background color (grey). This can be easily custom {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/avatar/color-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/color-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/color-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/color-cs1" %} @@ -44,17 +44,17 @@ The avatar comes with default background color (grey). This can be easily custom ## Customize avatar sizes -Even though the avatar comes with five predefined sizes, sometimes it's not enough. So, the avatar is designed in such a way that the width and height will be relative to font-size. By changing the `font-size` of the avatar element, you can change the width and height automatically. +Even though the avatar control comes with five predefined sizes, sometimes it's not enough. The avatar is designed such that its width and height are relative to its font-size. By changing the `font-size` of the avatar element, you can automatically change the width and height. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/avatar/custom-size-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/custom-size-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/custom-size-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/custom-size-cs1" %} @@ -62,12 +62,12 @@ Even though the avatar comes with five predefined sizes, sometimes it's not enou {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/avatar/custom-size-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/custom-size-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/custom-size-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/custom-size-cs1" %} @@ -75,17 +75,17 @@ Even though the avatar comes with five predefined sizes, sometimes it's not enou ## Use various media in avatar -Avatars can be used with a wide variety of media formats like SVG, font-icons, images, letters, words, etc. Some of them are given below. +Avatars can be used with a wide variety of media formats like SVG, font icons, images, letters, words, etc. Some examples are given below. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/avatar/media-formats-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/media-formats-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/media-formats-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/media-formats-cs1" %} @@ -93,12 +93,12 @@ Avatars can be used with a wide variety of media formats like SVG, font-icons, i {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/avatar/media-formats-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/media-formats-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/media-formats-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/media-formats-cs1" %} diff --git a/ej2-javascript/avatar/how-to/integrate-avatar-into-badge.md b/ej2-javascript/avatar/how-to/integrate-avatar-into-badge.md index a571a5ce5..2bca688aa 100644 --- a/ej2-javascript/avatar/how-to/integrate-avatar-into-badge.md +++ b/ej2-javascript/avatar/how-to/integrate-avatar-into-badge.md @@ -9,20 +9,20 @@ documentation: ug domainurl: ##DomainURL## --- -# Integrate avatar into badge in ##Platform_Name## Avatar control +# Integrate the Avatar control into the Badge control. -The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar. -The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have been used with notification badges (.`e-badge-notification`) in the following sample. +The badge is a dependent and supportive control, and it can be used with an avatar to create a notification avatar. +The default avatar (`.e-avatar`) and circle avatar (`.e-avatar-circle`) have been used with notification badges (`.e-badge-notification`) in the following example. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/avatar/badge-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/badge-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/badge-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/badge-cs1" %} @@ -30,12 +30,12 @@ The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have bee {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/avatar/badge-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/badge-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/badge-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/badge-cs1" %} diff --git a/ej2-javascript/avatar/how-to/integrate-avatar-into-listview.md b/ej2-javascript/avatar/how-to/integrate-avatar-into-listview.md index 7024e282d..0c25a3448 100644 --- a/ej2-javascript/avatar/how-to/integrate-avatar-into-listview.md +++ b/ej2-javascript/avatar/how-to/integrate-avatar-into-listview.md @@ -9,21 +9,24 @@ documentation: ug domainurl: ##DomainURL## --- -# Integrate avatar into listview in ##Platform_Name## Avatar control +# Integrate the Avatar control into the ListView control -Avatar can be integrated into various components to make a wide variety of applications. Some of the integrations are shown in the following section. +Avatar can be integrated into various controls to enhance a wide variety of applications. Some integrations are demonstrated in the following section. -Avatar is integrated into the listview to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content. +Avatar is integrated into the ListView to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content. {% if page.publishingplatform == "typescript" %} - {% tabs %} +{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/avatar/listview-cs1/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/listview-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/listview-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/listview-cs1" %} @@ -37,6 +40,9 @@ Avatar is integrated into the listview to create contacts applications. The `xsm {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/listview-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/listview-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/listview-cs1" %} diff --git a/ej2-javascript/avatar/ts/getting-started.md b/ej2-javascript/avatar/ts/getting-started.md index 435d93b14..cb036d560 100644 --- a/ej2-javascript/avatar/ts/getting-started.md +++ b/ej2-javascript/avatar/ts/getting-started.md @@ -1,7 +1,7 @@ --- 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. +description: Checkout and learn about Getting started with ##Platform_Name## Avatar control of Syncfusion Essential JS 2 and more details. platform: ej2-javascript control: Getting started publishingplatform: ##Platform_Name## @@ -9,15 +9,15 @@ documentation: ug domainurl: ##DomainURL## --- -# Getting started in ##Platform_Name## Avatar control +# Getting started with ##Platform_Name## Avatar control -This section explains how to create a simple Avatar 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 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. > 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 -Install the following required dependent packages to render the avatar component. +Install the following required dependent packages to render the avatar control. ```javascript |-- @syncfusion/ej2-layouts @@ -108,7 +108,7 @@ The following example shows a basic avatar component. {% include code-snippet/avatar/getting-started-cs1/index.css %} {% endhighlight %} {% endtabs %} - + {% previewsample "page.domainurl/code-snippet/avatar/getting-started-cs1" %} ## See Also diff --git a/ej2-javascript/avatar/types.md b/ej2-javascript/avatar/types.md index a23f49038..73d7df680 100644 --- a/ej2-javascript/avatar/types.md +++ b/ej2-javascript/avatar/types.md @@ -15,63 +15,63 @@ This section explains different types of avatar. ## Avatar size -The Essential JS 2 Avatar has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the avatar. +The Essential JS 2 Avatar control has the following predefined sizes that can be used with the `.e-avatar` class to change the appearance of the avatar: | Class Name | Description | :------------- |:------------- -| e-avatar-xlarge | Displays xlarge size avatar. -| e-avatar-large | Displays apply large size avatar. -| e-avatar | Displays apply default size avatar. -| e-avatar-small | Displays apply small size avatar. -| e-avatar-xsmall | Displays apply xsmall size avatar. +| e-avatar-xlarge | Displays extra-large size avatar. +| e-avatar-large | Displays large size avatar. +| e-avatar | Displays default size avatar. +| e-avatar-small | Displays small size avatar. +| e-avatar-xsmall | Displays extra-small size avatar. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/avatar/size-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/size-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/size-cs1/index.css %} +{% endhighlight %} {% endtabs %} - + {% previewsample "page.domainurl/code-snippet/avatar/size-cs1" %} {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/avatar/size-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/size-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/size-cs1/index.css %} +{% endhighlight %} {% endtabs %} - + {% previewsample "page.domainurl/code-snippet/avatar/size-cs1" %} {% endif %} ## Avatar types -The types of Essential JS 2 avatar are: +The types of Essential JS 2 Avatar controls are: * Default * Circle ### Default -The default style of the avatar is rectangular shape with rounded corners, which can be applied from adding the modifier class `.e-avatar` to the target element. +The default style of the avatar is a rectangular shape with rounded corners. It can be applied by adding the modifier class `.e-avatar` to the target element. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/avatar/default-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/default-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/default-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/default-cs1" %} @@ -79,12 +79,12 @@ The default style of the avatar is rectangular shape with rounded corners, which {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/avatar/default-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/default-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/default-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/default-cs1" %} @@ -92,17 +92,17 @@ The default style of the avatar is rectangular shape with rounded corners, which ### Circle -The circle avatar style can be applied by adding the modifier class `.e-avatar-circle` with default avatar modifier class `.e-avatar` to the target element. +The circle avatar style can be applied by adding the modifier class `.e-avatar-circle` along with the default avatar modifier class `.e-avatar` to the target element. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/avatar/circle-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/circle-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/circle-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/circle-cs1" %} @@ -110,12 +110,12 @@ The circle avatar style can be applied by adding the modifier class `.e-avatar-c {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/avatar/circle-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/avatar/circle-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/avatar/circle-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/avatar/circle-cs1" %} diff --git a/ej2-javascript/badge/how-to/badge-customization.md b/ej2-javascript/badge/how-to/badge-customization.md index d311c8853..8299cf26b 100644 --- a/ej2-javascript/badge/how-to/badge-customization.md +++ b/ej2-javascript/badge/how-to/badge-customization.md @@ -1,7 +1,7 @@ --- layout: post -title: Badge customization in ##Platform_Name## Badge control | Syncfusion -description: Learn here all about Badge customization in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more. +title: Customization in ##Platform_Name## Badge control | Syncfusion +description: Learn here all about Badge control customization in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more. platform: ej2-javascript control: Badge customization publishingplatform: ##Platform_Name## @@ -9,21 +9,21 @@ documentation: ug domainurl: ##DomainURL## --- -# Badge customization in ##Platform_Name## Badge control +# Customization in ##Platform_Name## Badge control -## Colour customization +## Color customization -Even though badges come with `8 predefined colors`, you can also customize the colour of the badge as desired. +Even though badges come with `8 predefined colors`, you can also customize the color of the badge as desired. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/badge/color-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/color-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/color-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/color-cs1" %} @@ -31,12 +31,12 @@ Even though badges come with `8 predefined colors`, you can also customize the c {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/badge/color-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/color-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/color-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/color-cs1" %} @@ -44,17 +44,17 @@ Even though badges come with `8 predefined colors`, you can also customize the c ## Customize badge size -Badges are designed to change its size based on the content. To change the size of a badge, adjust the `font size` of the badge. +Badges are designed to change their size based on the content. To change the size of a badge, adjust the `font size` of the badge. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/badge/size-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/size-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/size-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/size-cs1" %} @@ -62,12 +62,12 @@ Badges are designed to change its size based on the content. To change the size {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/badge/size-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/size-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/size-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/size-cs1" %} @@ -75,18 +75,16 @@ Badges are designed to change its size based on the content. To change the size ## Custom position -Even though the badges support the conventional `top` and `bottom` positions, the position of the badges can be changed as desired. -This can be done by adding a custom class to the badge element to override the default position applied from the source. - +Even though the badges support the conventional `top` and `bottom` positions, the position of the badges can be changed as desired. This can be done by adding a custom class to the badge element to override the default position applied from the source. {% if page.publishingplatform == "typescript" %} {% tabs %} -{% highlight ts tabtitle="index.ts" %} -{% include code-snippet/badge/custom-position-cs1/index.ts %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/custom-position-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/custom-position-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/custom-position-cs1" %} @@ -94,12 +92,12 @@ This can be done by adding a custom class to the badge element to override the d {% elsif page.publishingplatform == "javascript" %} {% tabs %} -{% highlight js tabtitle="index.js" %} -{% include code-snippet/badge/custom-position-cs1/index.js %} -{% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/custom-position-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/custom-position-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/custom-position-cs1" %} diff --git a/ej2-javascript/badge/how-to/dynamic-badge-content.md b/ej2-javascript/badge/how-to/dynamic-badge-content.md index 8a306ec9d..84580e684 100644 --- a/ej2-javascript/badge/how-to/dynamic-badge-content.md +++ b/ej2-javascript/badge/how-to/dynamic-badge-content.md @@ -1,17 +1,17 @@ --- layout: post -title: Dynamic badge content in ##Platform_Name## Badge control | Syncfusion +title: Dynamic content in ##Platform_Name## Badge control | Syncfusion description: Learn here all about Dynamic badge content in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Dynamic badge content +control: Dynamic Badge content publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Dynamic badge content in ##Platform_Name## Badge control +# Dynamic content in ##Platform_Name## Badge control -Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the badges content dynamically. Click the increment button to change the badge value. +Badges often need to be updated dynamically based on real-time requirements. The following sample demonstrates how to update badge content dynamically. Click the increment button to change the badge value. {% if page.publishingplatform == "typescript" %} @@ -22,6 +22,9 @@ Badges in real-time needs to be updated dynamically based on the requirements. T {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/dynamic-badge-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/dynamic-badge-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/dynamic-badge-cs1" %} @@ -35,6 +38,9 @@ Badges in real-time needs to be updated dynamically based on the requirements. T {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/dynamic-badge-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/dynamic-badge-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/dynamic-badge-cs1" %} diff --git a/ej2-javascript/badge/how-to/integrate-badge-into-listview.md b/ej2-javascript/badge/how-to/integrate-badge-into-listview.md index bd7071968..1724e26ec 100644 --- a/ej2-javascript/badge/how-to/integrate-badge-into-listview.md +++ b/ej2-javascript/badge/how-to/integrate-badge-into-listview.md @@ -1,19 +1,19 @@ --- layout: post -title: Integrate badge into listview in ##Platform_Name## Badge control | Syncfusion -description: Learn here all about Integrate badge into listview in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more. +title: Integrate Badge into ListView in ##Platform_Name## Badge Control | Syncfusion +description: Learn here all about Integrate Badge into ListView in Syncfusion ##Platform_Name## Badge control of Syncfusion Essential JS 2 and more. platform: ej2-javascript -control: Integrate badge into listview +control: Integrate badge into ListView publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -# Integrate badge into listview in ##Platform_Name## Badge control +# Integrate ##Platform_Name## Badge control into ListView control -The badges can be integrated with the `listview` component to indicate new notification with colour based on priority. +The badges can be integrated with the `listview` control to indicate new notification with color based on priority. -In the following sample, `default` badges are used and there is no need to customize the badge size. The component will automatically adjust the size based on the container element. +In the following sample, `default` badges are used and there is no need to customize the badge size. The control will automatically adjust the size based on the container element. {% if page.publishingplatform == "typescript" %} @@ -24,6 +24,9 @@ In the following sample, `default` badges are used and there is no need to custo {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/listview-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/listview-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/listview-cs1" %} @@ -37,6 +40,9 @@ In the following sample, `default` badges are used and there is no need to custo {% highlight html tabtitle="index.html" %} {% include code-snippet/badge/listview-cs1/index.html %} {% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/badge/listview-cs1/index.css %} +{% endhighlight %} {% endtabs %} {% previewsample "page.domainurl/code-snippet/badge/listview-cs1" %} diff --git a/ej2-javascript/badge/js/es5-getting-started.md b/ej2-javascript/badge/js/es5-getting-started.md index 343f37e37..b01b5e84f 100644 --- a/ej2-javascript/badge/js/es5-getting-started.md +++ b/ej2-javascript/badge/js/es5-getting-started.md @@ -3,7 +3,7 @@ layout: post title: Es5 getting started with ##Platform_Name## Badge control | Syncfusion description: Checkout and learn about Es5 getting started with ##Platform_Name## Badge control 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## @@ -11,20 +11,20 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## Badge control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework that 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 directly used in the latest web browsers. -## Component initialization +## Control Initialization -The Essential JS 2 JavaScript components can be initialized by using any of the following two ways: +The Essential JS 2 JavaScript controls can be initialized by using any of the following two methods: * Using local script and style references in an HTML page. * Using CDN link for script and style reference. ### Using local script and style references in an HTML page -**Step 1:** Create an app folder `myapp` for Essential JS 2 JavaScript components. +**Step 1:** Create an app folder `myapp` for Essential JS 2 JavaScript controls. -**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/confirm) build installed location. +**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\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js` @@ -60,7 +60,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) ``` -**Step 5:** Now, create a `span` element to apply the `Essential JS 2 Badge` component in the `index.html` by using following code. +**Step 5:** Now, create a `span` element to apply the `Essential JS 2 Badge` control in the `index.html` by using following code. ```html @@ -73,18 +73,18 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) -Badge Component New
+Badge control New