Skip to content

Commit 791429f

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #317 from Syncfusion-Content/hotfix/hotfix-v26.1.35
DOCINFRA-2341_merged_using_automation
2 parents 981e811 + 073f24b commit 791429f

File tree

40 files changed

+833
-27
lines changed

40 files changed

+833
-27
lines changed

‎ej2-javascript-toc.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2940,7 +2940,7 @@
29402940
</ul>
29412941
</li> <li>Release Notes
29422942
<ul>
2943-
<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-javascript/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-javascript/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-javascript/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-javascript/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-javascript/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-javascript/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-javascript/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-javascript/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-javascript/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-javascript/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-javascript/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-javascript/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
2943+
<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-javascript/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-javascript/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-javascript/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-javascript/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-javascript/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-javascript/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-javascript/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-javascript/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-javascript/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-javascript/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-javascript/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-javascript/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-javascript/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
29442944
<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-javascript/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-javascript/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-javascript/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-javascript/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-javascript/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-javascript/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-javascript/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-javascript/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-javascript/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-javascript/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-javascript/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
29452945
<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-javascript/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-javascript/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-javascript/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-javascript/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-javascript/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-javascript/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-javascript/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-javascript/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-javascript/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-javascript/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
29462946
<li>2023 Volume 2 - 22.*

‎ej2-javascript/Release-notes/26.1.41.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
3+
description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
4+
platform: ej2-javascript
5+
documentation: ug
6+
---
7+
8+
# Essential Studio for ##Platform_Name## Release Notes
9+
10+
{% include release-info.html date="July 09, 2024" version="v26.1.41" %}
11+
12+
{% directory path: _includes/release-notes/v26.1.41 %}
13+
14+
{% include {{file.url}} %}
15+
16+
{% enddirectory %}

‎ej2-javascript/appearance/css-variables.md‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -78,27 +78,33 @@ Here you can find the example for `Material 3` customization using CSS class.
7878

7979
{% tabs %}
8080
{% highlight ts tabtitle="index.ts" %}
81-
{% include code-snippet/common/material3-cs1/index.ts %}
81+
{% include code-snippet/common/material3-cs2/index.ts %}
8282
{% endhighlight %}
8383
{% highlight html tabtitle="index.html" %}
84-
{% include code-snippet/common/material3-cs1/index.html %}
84+
{% include code-snippet/common/material3-cs2/index.html %}
85+
{% endhighlight %}
86+
{% highlight css tabtitle="index.css" %}
87+
{% include code-snippet/common/material3-cs2/index.css %}
8588
{% endhighlight %}
8689
{% endtabs %}
8790

88-
{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
91+
{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
8992

9093
{% elsif page.publishingplatform == "javascript" %}
9194

9295
{% tabs %}
9396
{% highlight js tabtitle="index.js" %}
94-
{% include code-snippet/common/material3-cs1/index.js %}
97+
{% include code-snippet/common/material3-cs2/index.js %}
9598
{% endhighlight %}
9699
{% highlight html tabtitle="index.html" %}
97-
{% include code-snippet/common/material3-cs1/index.html %}
100+
{% include code-snippet/common/material3-cs2/index.html %}
101+
{% endhighlight %}
102+
{% highlight css tabtitle="index.css" %}
103+
{% include code-snippet/common/material3-cs2/index.css %}
98104
{% endhighlight %}
99105
{% endtabs %}
100106

101-
{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
107+
{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
102108
{% endif %}
103109

104110
Example for `Fluent 2` customization using Css class.
@@ -107,10 +113,13 @@ Example for `Fluent 2` customization using Css class.
107113

108114
{% tabs %}
109115
{% highlight ts tabtitle="index.ts" %}
110-
{% include code-snippet/common/fluent2-cs1/index.ts %}
116+
{% include code-snippet/common/fluent2-cs2/index.ts %}
111117
{% endhighlight %}
112118
{% highlight html tabtitle="index.html" %}
113-
{% include code-snippet/common/fluent2-cs1/index.html %}
119+
{% include code-snippet/common/fluent2-cs2/index.html %}
120+
{% endhighlight %}
121+
{% highlight css tabtitle="index.css" %}
122+
{% include code-snippet/common/fluent2-cs2/index.css %}
114123
{% endhighlight %}
115124
{% endtabs %}
116125

@@ -120,14 +129,17 @@ Example for `Fluent 2` customization using Css class.
120129

121130
{% tabs %}
122131
{% highlight js tabtitle="index.js" %}
123-
{% include code-snippet/common/fluent2-cs1/index.js %}
132+
{% include code-snippet/common/fluent2-cs2/index.js %}
124133
{% endhighlight %}
125134
{% highlight html tabtitle="index.html" %}
126-
{% include code-snippet/common/fluent2-cs1/index.html %}
135+
{% include code-snippet/common/fluent2-cs2/index.html %}
136+
{% endhighlight %}
137+
{% highlight css tabtitle="index.css" %}
138+
{% include code-snippet/common/fluent2-cs2/index.css %}
127139
{% endhighlight %}
128140
{% endtabs %}
129141

130-
{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
142+
{% previewsample "page.domainurl/code-snippet/common/fluent2-cs2" %}
131143
{% endif %}
132144

133145
#### Customization using JavaScript

‎ej2-javascript/auto-complete/virtual-scroll.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,36 @@ The following sample displays the OrderId from the `Orders` Data Service.
8686
{% previewsample "page.domainurl/code-snippet/autocomplete/virtual-scroll-remote" %}
8787
{% endif %}
8888

89+
## Customizing items count in virtualization
90+
91+
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.
92+
93+
The following sample shows the example for Customizing items count in virtualization.
94+
95+
{% if page.publishingplatform == "typescript" %}
96+
97+
{% tabs %}
98+
{% highlight ts tabtitle="index.ts" %}
99+
{% include code-snippet/autocomplete/virtual-scroll-items/index.ts %}
100+
{% endhighlight %}
101+
{% highlight html tabtitle="index.html" %}
102+
{% include code-snippet/autocomplete/virtual-scroll-items/index.html %}
103+
{% endhighlight %}
104+
{% endtabs %}
105+
106+
{% elsif page.publishingplatform == "javascript" %}
107+
108+
{% tabs %}
109+
{% highlight js tabtitle="index.js" %}
110+
{% include code-snippet/autocomplete/virtual-scroll-items/index.js %}
111+
{% endhighlight %}
112+
{% highlight html tabtitle="index.html" %}
113+
{% include code-snippet/autocomplete/virtual-scroll-items/index.html %}
114+
{% endhighlight %}
115+
{% endtabs %}
116+
117+
{% endif %}
118+
89119
## Grouping with Virtualization
90120

91121
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.

‎ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
var records = [];
2+
for (var i = 1; i <= 150; i++) {
3+
var item = {
4+
id: 'id' + i,
5+
text: "Item " + i,
6+
};
7+
records.push(item);
8+
}
9+
10+
//initiates the component
11+
var autoObject = new ej.dropdowns.AutoComplete({
12+
//bind the dataSorce property
13+
dataSource: records,
14+
//map the appropriate columns to fields property
15+
fields: { value: 'text' },
16+
query: new ej.data.Query().take(40),
17+
actionBegin: (args) => {
18+
args.query = new ej.data.Query().take(45);
19+
},
20+
//set the placeholder to AutoComplete input
21+
placeholder:"Select an Item ",
22+
//set enableVirtualization property to true
23+
enableVirtualization: true,
24+
//set the height of the popup element
25+
popupHeight: '200px'
26+
});
27+
28+
//render the component
29+
autoObject.appendTo('#atcelement');
30+

‎ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/index.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
3+
4+
import { AutoComplete, VirtualScroll } from '@syncfusion/ej2-dropdowns';
5+
import { Query } from '@syncfusion/ej2-data';
6+
7+
AutoComplete.Inject(VirtualScroll);
8+
9+
let records: { [key: string]: Object }[] = [];
10+
for (let i: number = 1; i <= 150; i++) {
11+
let item = {
12+
id: 'id' + i,
13+
text: "Item " + i,
14+
};
15+
records.push(item);
16+
}
17+
18+
//initiates the component
19+
let autoCompleteObject: AutoComplete = new AutoComplete({
20+
//bind the dataSorce property
21+
dataSource: records,
22+
//map the appropriate columns to fields property
23+
fields: { value: 'text' },
24+
query: new Query().take(40),
25+
actionBegin: (args) => {
26+
args.query = new Query().take(45);
27+
},
28+
//set the placeholder to AutoComplete input
29+
placeholder:"Select an Item ",
30+
//set enableVirtualization property to true
31+
enableVirtualization: true,
32+
//set the height of the popup element
33+
popupHeight: '200px'
34+
});
35+
36+
//render the component
37+
autoCompleteObject.appendTo('#atcelement');
38+
39+
40+

‎ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/js/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>Essential JS 2 MultiSelect</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript UI Controls">
6+
<meta name="author" content="Syncfusion">
7+
<link href="styles.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet">
12+
13+
14+
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
15+
</head>
16+
17+
<body>
18+
19+
<div id="container" style="margin:0 auto; width:250px;">
20+
<input type="text" id="atcelement">
21+
</div>
22+
23+
24+
<script>
25+
var ele = document.getElementById('container');
26+
if(ele) {
27+
ele.style.visibility = "visible";
28+
}
29+
</script>
30+
<script src="index.js" type="text/javascript"></script>
31+
</body></html>

‎ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/styles.css‎

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

‎ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/systemjs.config.js‎

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

‎ej2-javascript/code-snippet/autocomplete/virtual-scroll-items/ts/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Essential JS 2 MultiSelect</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Typescript UI Controls" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="styles.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-dropdowns/styles/material.css" rel="stylesheet" />
14+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-notifications/styles/material.css" rel="stylesheet">
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
16+
<script src="systemjs.config.js"></script>
17+
</head>
18+
19+
<body>
20+
<div id='loader'>LOADING....</div>
21+
<div id='container' style="margin:0 auto; width:250px;">
22+
<input type="text" id='atcelement' />
23+
</div>
24+
</body>
25+
26+
</html>

0 commit comments

Comments
 (0)