Skip to content

Commit bf3d628

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-03-2024 4:30:07 AM
1 parent d5c57d8 commit bf3d628

Some content is hidden

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

44 files changed

+819
-79
lines changed

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ In the following example, `text` column from complex data have been mapped to th
3737

3838
## Binding remote data
3939

40-
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.
40+
The AutoComplete component 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.
4141

4242
The following sample displays the OrderId from the `Orders` Data Service.
4343

@@ -52,9 +52,26 @@ The following sample displays the OrderId from the `Orders` Data Service.
5252

5353
{% previewsample "page.domainurl/code-snippet/auto-complete/virtual-scroll-remote" %}
5454

55+
## Customizing items count in virtualization
56+
57+
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.
58+
59+
The following sample shows the example for Customizing items count in virtualization.
60+
61+
{% tabs %}
62+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
63+
{% include code-snippet/auto-complete/virtual-scroll-remote/app-composition.vue %}
64+
{% endhighlight %}
65+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
66+
{% include code-snippet/auto-complete/virtual-scroll-remote/app.vue %}
67+
{% endhighlight %}
68+
{% endtabs %}
69+
70+
{% previewsample "page.domainurl/code-snippet/auto-complete/virtual-scroll-remote" %}
71+
5572
## Grouping
5673

57-
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.
74+
The AutoComplete 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.
5875

5976
The following sample shows the example for Grouping with Virtualization.
6077

‎ej2-vue/code-snippet/auto-complete/virtual-scroll-items/app-composition.vue

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div id="app">
3+
<div id="wrapper1">
4+
<ejs-autocomplete id='autocomplete' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
5+
:enableVirtualization='true' :query='query' :actionBegin='actionBegin'
6+
popupHeight="200px"></ejs-autocomplete>
7+
</div>
8+
</div>
9+
</template>
10+
<script setup>
11+
import { provide } from "vue";
12+
import { AutoCompleteComponent as EjsAutocomplete, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
13+
14+
let records = [];
15+
function dataSource() {
16+
for (let i = 1; i <= 150; i++) {
17+
let item = {
18+
id: 'id' + i,
19+
text: "Item " + i,
20+
};
21+
records.push(item);
22+
}
23+
}
24+
dataSource();
25+
26+
const itemData = records;
27+
const fields = { value: 'text' };
28+
const allowFiltering = true;
29+
const query = new Query().take(40);
30+
31+
provide('autocomplete', [VirtualScroll]);
32+
33+
const actionBegin = function (e) {
34+
e.query = new Query().take(45);
35+
}
36+
37+
</script>
38+
<style>
39+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
40+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
41+
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
42+
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
43+
44+
#wrapper1 {
45+
min-width: 250px;
46+
float: left;
47+
margin-left: 350px;
48+
}
49+
50+
#wrapper2 {
51+
min-width: 250px;
52+
float: right;
53+
margin-right: 100px;
54+
}
55+
</style>

‎ej2-vue/code-snippet/auto-complete/virtual-scroll-items/app.vue

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<div id="app">
3+
<div id="wrapper1">
4+
<ejs-autocomplete id='autocomplete' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
5+
:enableVirtualization='true' :query='query' :actionBegin='actionBegin'
6+
popupHeight="200px"></ejs-autocomplete>
7+
</div>
8+
</div>
9+
</template>
10+
<script>
11+
import { AutoCompleteComponent, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
12+
13+
let records = [];
14+
function dataSource() {
15+
for (let i = 1; i <= 150; i++) {
16+
let item = {
17+
id: 'id' + i,
18+
text: "Item " + i,
19+
};
20+
records.push(item);
21+
}
22+
}
23+
dataSource();
24+
25+
//Component registeration
26+
export default {
27+
name: "App",
28+
components: {
29+
"ejs-autocomplete": AutoCompleteComponent
30+
},
31+
data() {
32+
return {
33+
itemData: records,
34+
fields: { value: 'text' },
35+
allowFiltering: true,
36+
query: new Query().take(40),
37+
}
38+
},
39+
provide: {
40+
autocomplete: [VirtualScroll]
41+
},
42+
methods: {
43+
actionBegin: function (e) {
44+
e.query = new Query().take(45);
45+
}
46+
}
47+
}
48+
</script>
49+
<style>
50+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
51+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
52+
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
53+
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
54+
55+
#wrapper1 {
56+
min-width: 250px;
57+
float: left;
58+
margin-left: 350px;
59+
}
60+
61+
#wrapper2 {
62+
min-width: 250px;
63+
float: right;
64+
margin-right: 100px;
65+
}
66+
</style>

‎ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
3+
4+
5+
#wrapper1{
6+
min-width: 250px;
7+
float: left;
8+
margin-left: 100px;
9+
}
10+
#wrapper2{
11+
min-width: 250px;
12+
float: right;
13+
margin-right: 100px;
14+
}

‎ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
7+
<title>EJ2 Vue Sample</title>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<meta name="description" content="Typescript UI Controls" />
11+
<meta name="author" content="Syncfusion" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
14+
<link href="index.css" rel="stylesheet" />
15+
<script src="systemjs.config.js"></script>
16+
</head>
17+
18+
<body>
19+
<div id='app'>Loading....</div>
20+
</body>
21+
22+
</html>
23+

‎ej2-vue/code-snippet/auto-complete/virtual-scroll-items/index.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
import Vue from 'vue';
3+
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
4+
import { DropDownList, VirtulScroll } from '@syncfusion/ej2-dropdowns';
5+
DropDownList.Inject(VirtulScroll);
6+
Vue.use(DropDownListPlugin);
7+
let records = [];
8+
function dataSource() {
9+
for (let i = 1; i <= 150; i++) {
10+
let item = {
11+
id: 'id' + i,
12+
text: "Item " + i,
13+
};
14+
records.push(item);
15+
}
16+
}
17+
dataSource();
18+
19+
new Vue({
20+
el: '#app',
21+
template: `
22+
<div id="app">
23+
<div id="wrapper1">
24+
<ejs-dropdownlist id='dropdownlist' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields' :enableVirtualization='true' :allowFiltering='false' popupHeight="200px"></ejs-dropdownlist>
25+
</div>
26+
</div>
27+
`,
28+
29+
name: 'app',
30+
data () {
31+
return {
32+
itemData: records,
33+
fields: { value: 'id', text: 'text' }
34+
}
35+
}
36+
37+
});

‎ej2-vue/code-snippet/auto-complete/virtual-scroll-items/systemjs.config.js

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
17+
vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
20+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
21+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
22+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
23+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
24+
"@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
25+
"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
26+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
27+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
28+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
29+
"@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
30+
"@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
31+
"@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
32+
"@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
33+
"@syncfusion/ej2-vue-notifications": "syncfusion:ej2-vue-notifications/dist/ej2-vue-notifications.umd.min.js",
34+
"@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
35+
"@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
36+
}
37+
});
38+
39+
System.import('index.js');

‎ej2-vue/code-snippet/combobox/virtual-scroll-items/app-composition.vue

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div id="app">
3+
<div id="wrapper1">
4+
<ejs-combobox id='combobox' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
5+
:enableVirtualization='true' :query='query' :allowFiltering='false' :actionBegin='actionBegin'
6+
popupHeight="200px"></ejs-combobox>
7+
</div>
8+
</div>
9+
</template>
10+
<script setup>
11+
import { provide } from "vue";
12+
import { ComboBoxComponent as EjsCombobox, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
13+
14+
let records = [];
15+
function dataSource() {
16+
for (let i = 1; i <= 150; i++) {
17+
let item = {
18+
id: 'id' + i,
19+
text: "Item " + i,
20+
};
21+
records.push(item);
22+
}
23+
}
24+
dataSource();
25+
26+
const itemData = records;
27+
const fields = { value: 'id', text: 'text' };
28+
const allowFiltering = true;
29+
const query = new Query().take(40);
30+
31+
provide('combobox', [VirtualScroll]);
32+
33+
const actionBegin = function (e) {
34+
e.query = new Query().take(45);
35+
}
36+
37+
</script>
38+
<style>
39+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
40+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
41+
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
42+
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
43+
44+
#wrapper1 {
45+
min-width: 250px;
46+
float: left;
47+
margin-left: 350px;
48+
}
49+
50+
#wrapper2 {
51+
min-width: 250px;
52+
float: right;
53+
margin-right: 100px;
54+
}
55+
</style>

0 commit comments

Comments
 (0)