2023 Volume 2 - 22.*
diff --git a/ej2-javascript/Release-notes/26.1.41.md b/ej2-javascript/Release-notes/26.1.41.md
new file mode 100644
index 000000000..fc28f46d8
--- /dev/null
+++ b/ej2-javascript/Release-notes/26.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="July 09, 2024" version="v26.1.41" %}
+
+{% directory path: _includes/release-notes/v26.1.41 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-javascript/appearance/css-variables.md b/ej2-javascript/appearance/css-variables.md
index 305612850..0a8a32ce1 100644
--- a/ej2-javascript/appearance/css-variables.md
+++ b/ej2-javascript/appearance/css-variables.md
@@ -78,27 +78,33 @@ Here you can find the example for `Material 3` customization using CSS class.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/common/material3-cs1/index.ts %}
+{% include code-snippet/common/material3-cs2/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/material3-cs1/index.html %}
+{% include code-snippet/common/material3-cs2/index.html %}
+{% endhighlight %}
+{% highlight css tabtitle="index.css" %}
+{% include code-snippet/common/material3-cs2/index.css %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/common/material3-cs1/index.js %}
+{% include code-snippet/common/material3-cs2/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/material3-cs1/index.html %}
+{% include code-snippet/common/material3-cs2/index.html %}
+{% endhighlight %}
+{% highlight css tabtitle="index.css" %}
+{% include code-snippet/common/material3-cs2/index.css %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
{% endif %}
Example for `Fluent 2` customization using Css class.
@@ -107,10 +113,13 @@ Example for `Fluent 2` customization using Css class.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/common/fluent2-cs1/index.ts %}
+{% include code-snippet/common/fluent2-cs2/index.ts %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/fluent2-cs1/index.html %}
+{% include code-snippet/common/fluent2-cs2/index.html %}
+{% endhighlight %}
+{% highlight css tabtitle="index.css" %}
+{% include code-snippet/common/fluent2-cs2/index.css %}
{% endhighlight %}
{% endtabs %}
@@ -120,14 +129,17 @@ Example for `Fluent 2` customization using Css class.
{% tabs %}
{% highlight js tabtitle="index.js" %}
-{% include code-snippet/common/fluent2-cs1/index.js %}
+{% include code-snippet/common/fluent2-cs2/index.js %}
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/fluent2-cs1/index.html %}
+{% include code-snippet/common/fluent2-cs2/index.html %}
+{% endhighlight %}
+{% highlight css tabtitle="index.css" %}
+{% include code-snippet/common/fluent2-cs2/index.css %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs2" %}
{% endif %}
#### Customization using JavaScript
diff --git a/ej2-javascript/auto-complete/virtual-scroll.md b/ej2-javascript/auto-complete/virtual-scroll.md
index 7f5496196..3ecfbb1f9 100644
--- a/ej2-javascript/auto-complete/virtual-scroll.md
+++ b/ej2-javascript/auto-complete/virtual-scroll.md
@@ -86,6 +86,36 @@ The following sample displays the OrderId from the `Orders` Data Service.
{% 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.
diff --git a/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/index.js b/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/index.js
new file mode 100644
index 000000000..26355d312
--- /dev/null
+++ b/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/index.js
@@ -0,0 +1,30 @@
+var records = [];
+for (var i = 1; i <= 150; i++) {
+ var item = {
+ id: 'id' + i,
+ text: "Item " + i,
+ };
+ records.push(item);
+}
+
+//initiates the component
+var autoObject = new ej.dropdowns.AutoComplete({
+ //bind the dataSorce property
+ dataSource: records,
+ //map the appropriate columns to fields property
+ fields: { value: 'text' },
+ query: new ej.data.Query().take(40),
+ actionBegin: (args) => {
+ args.query = new ej.data.Query().take(45);
+ },
+ //set the placeholder to AutoComplete input
+ placeholder:"Select an Item ",
+ //set enableVirtualization property to true
+ enableVirtualization: true,
+ //set the height of the popup element
+ popupHeight: '200px'
+});
+
+//render the component
+autoObject.appendTo('#atcelement');
+
diff --git a/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/index.ts b/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/index.ts
new file mode 100644
index 000000000..9487055e5
--- /dev/null
+++ b/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/index.ts
@@ -0,0 +1,40 @@
+
+
+
+import { AutoComplete, VirtualScroll } from '@syncfusion/ej2-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+
+AutoComplete.Inject(VirtualScroll);
+
+let records: { [key: string]: Object }[] = [];
+for (let i: number = 1; i <= 150; i++) {
+ let item = {
+ id: 'id' + i,
+ text: "Item " + i,
+ };
+ records.push(item);
+}
+
+//initiates the component
+let autoCompleteObject: AutoComplete = new AutoComplete({
+ //bind the dataSorce property
+ dataSource: records,
+ //map the appropriate columns to fields property
+ fields: { value: 'text' },
+ query: new Query().take(40),
+ actionBegin: (args) => {
+ args.query = new Query().take(45);
+ },
+ //set the placeholder to AutoComplete input
+ placeholder:"Select an Item ",
+ //set enableVirtualization property to true
+ enableVirtualization: true,
+ //set the height of the popup element
+ popupHeight: '200px'
+});
+
+//render the component
+autoCompleteObject.appendTo('#atcelement');
+
+
+
diff --git a/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/js/index.html b/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/js/index.html
new file mode 100644
index 000000000..e0e3a8524
--- /dev/null
+++ b/ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/js/index.html
@@ -0,0 +1,31 @@
+
+ Essential JS 2 MultiSelect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/multiselect/virtual-scroll-items/index.js b/ej2-javascript/code-snippet/multiselect/virtual-scroll-items/index.js
index cbe18541c..9b05ec8e5 100644
--- a/ej2-javascript/code-snippet/multiselect/virtual-scroll-items/index.js
+++ b/ej2-javascript/code-snippet/multiselect/virtual-scroll-items/index.js
@@ -13,9 +13,9 @@ var multiObject = new ej.dropdowns.MultiSelect({
dataSource: records,
//map the appropriate columns to fields property
fields: { value: 'id', text: 'text' },
- query: new ej.data.Query().take(20),
+ query: new ej.data.Query().take(40),
actionBegin: (args) => {
- args.query = new ej.data.Query().take(25);
+ args.query = new ej.data.Query().take(45);
},
//set the placeholder to MultiSelect input
placeholder:"Select an Item ",
diff --git a/ej2-javascript/code-snippet/multiselect/virtual-scroll-items/index.ts b/ej2-javascript/code-snippet/multiselect/virtual-scroll-items/index.ts
index 0ab3461d8..9f63646d7 100644
--- a/ej2-javascript/code-snippet/multiselect/virtual-scroll-items/index.ts
+++ b/ej2-javascript/code-snippet/multiselect/virtual-scroll-items/index.ts
@@ -21,9 +21,9 @@ let MultiSelectObject: MultiSelect = new MultiSelect({
dataSource: records,
//map the appropriate columns to fields property
fields: { value: 'id', text: 'text' },
- query: new Query().take(20),
+ query: new Query().take(40),
actionBegin: (args) => {
- args.query = new Query().take(25);
+ args.query = new Query().take(45);
},
//set the placeholder to MultiSelect input
placeholder:"Select an Item ",
diff --git a/ej2-javascript/code-snippet/multiselect/virtual-scroll-remote/index.js b/ej2-javascript/code-snippet/multiselect/virtual-scroll-remote/index.js
index c0123c3aa..44b93f2e7 100644
--- a/ej2-javascript/code-snippet/multiselect/virtual-scroll-remote/index.js
+++ b/ej2-javascript/code-snippet/multiselect/virtual-scroll-remote/index.js
@@ -3,8 +3,8 @@
var multiObject = new ej.dropdowns.MultiSelect({
//bind the dataSorce property
dataSource: new ej.data.DataManager({
- url: 'https://services.syncfusion.com/js/production/api/Orders',
- adaptor: new ej.data.WebApiAdaptor(),
+ url: 'https://services.syncfusion.com/js/production/api/VirtualDropdownData',
+ adaptor: new ej.data.UrlAdaptor(),
crossDomain: true
}),
//map the appropriate columns to fields property
diff --git a/ej2-javascript/code-snippet/multiselect/virtual-scroll-remote/index.ts b/ej2-javascript/code-snippet/multiselect/virtual-scroll-remote/index.ts
index 3101ca2b2..20eee137d 100644
--- a/ej2-javascript/code-snippet/multiselect/virtual-scroll-remote/index.ts
+++ b/ej2-javascript/code-snippet/multiselect/virtual-scroll-remote/index.ts
@@ -2,7 +2,7 @@
import { DropDownList, VirtualScroll } from '@syncfusion/ej2-dropdowns';
-import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
+import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
DropDownList.Inject(VirtualScroll);
@@ -10,8 +10,8 @@ DropDownList.Inject(VirtualScroll);
let MultiSelectObject: DropDownList = new DropDownList({
//bind the dataSorce property
dataSource: new DataManager({
- url: 'https://services.syncfusion.com/js/production/api/Orders',
- adaptor: new WebApiAdaptor ,
+ url: 'https://services.syncfusion.com/js/production/api/VirtualDropdownData',
+ adaptor: new UrlAdaptor ,
crossDomain: true
}),
//map the appropriate columns to fields property
diff --git a/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/systemjs.config.js b/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/systemjs.config.js
index 1b02d6f42..738b31781 100644
--- a/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/systemjs.config.js
+++ b/ej2-javascript/code-snippet/pivot-table/pivot-table-cs375/systemjs.config.js
@@ -10,7 +10,8 @@ System.config({
}
},
paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/",
+ "*": "*.ts"
},
map: {
main: "index.ts",
diff --git a/ej2-javascript/combo-box/virtual-scroll.md b/ej2-javascript/combo-box/virtual-scroll.md
index 87a3afbbc..41447db1c 100644
--- a/ej2-javascript/combo-box/virtual-scroll.md
+++ b/ej2-javascript/combo-box/virtual-scroll.md
@@ -88,6 +88,36 @@ The following sample displays the OrderId from the `Orders` Data Service.
{% previewsample "page.domainurl/code-snippet/combobox/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/combobox/virtual-scroll-items/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/combobox/virtual-scroll-items/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/combobox/virtual-scroll-items/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/combobox/virtual-scroll-items/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
## Grouping with Virtualization
The Combobox 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/combo-box/#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.
diff --git a/ej2-javascript/drop-down-list/virtual-scroll.md b/ej2-javascript/drop-down-list/virtual-scroll.md
index c66b999ae..0b8c50147 100644
--- a/ej2-javascript/drop-down-list/virtual-scroll.md
+++ b/ej2-javascript/drop-down-list/virtual-scroll.md
@@ -88,6 +88,37 @@ The following sample displays the OrderId from the `Orders` Data Service.
{% previewsample "page.domainurl/code-snippet/dropdownlist/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/dropdownlist/virtual-scroll-items/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/dropdownlist/virtual-scroll-items/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/dropdownlist/virtual-scroll-items/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/dropdownlist/virtual-scroll-items/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+
## Grouping with Virtualization
The DropDownList 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/drop-down-list/#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 on virtualization.
diff --git a/ej2-javascript/pivotview/ts/getting-started.md b/ej2-javascript/pivotview/ts/getting-started.md
index 5fd36ae12..9d061638c 100644
--- a/ej2-javascript/pivotview/ts/getting-started.md
+++ b/ej2-javascript/pivotview/ts/getting-started.md
@@ -398,6 +398,7 @@ Output will be displayed as follows.
{% endhighlight %}
{% endtabs %}
-For more information and to access the quick start project, visit: [GitHub Repository](https://github.com/SyncfusionExamples/getting-started-with-the-typescript-pivot-table-component)
-
{% previewsample "page.domainurl/code-snippet/pivot-table/pivot-table-cs375" %}
+
+For more information and to access the quick start project, visit: [GitHub Repository](https://github.com/SyncfusionExamples/getting-started-with-the-typescript-pivot-table-component)
+
\ No newline at end of file
diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html
index 1bab9b210..ecbed4212 100644
--- a/ej2-typescript-toc.html
+++ b/ej2-typescript-toc.html
@@ -2942,7 +2942,7 @@