DOCINFRA-2341_merged_using_automation

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

@@ -37,7 +37,7 @@ In the following example, `text` column from complex data have been mapped to th
 
 ## 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 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.
 
 The following sample displays the OrderId from the `Orders` Data Service.
 
@@ -52,9 +52,26 @@ The following sample displays the OrderId from the `Orders` Data Service.
 
 {% previewsample "page.domainurl/code-snippet/auto-complete/virtual-scroll-remote" %}
 
+## 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.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/auto-complete/virtual-scroll-remote/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/auto-complete/virtual-scroll-remote/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/auto-complete/virtual-scroll-remote" %}
+
 ## Grouping
 
-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 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.
 
 The following sample shows the example for Grouping with Virtualization.
 

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

@@ -0,0 +1,55 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-autocomplete id='autocomplete' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-autocomplete>
+        </div>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { AutoCompleteComponent as EjsAutocomplete, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+const itemData = records;
+const fields = { value: 'text' };
+const allowFiltering = true;
+const query = new Query().take(40);
+
+provide('autocomplete', [VirtualScroll]);
+
+const actionBegin = function (e) {
+    e.query = new Query().take(45);
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-autocomplete id='autocomplete' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-autocomplete>
+        </div>
+    </div>
+</template>
+<script>
+import { AutoCompleteComponent, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+//Component registeration
+export default {
+    name: "App",
+    components: {
+        "ejs-autocomplete": AutoCompleteComponent
+    },
+    data() {
+        return {
+            itemData: records,
+            fields: { value: 'text' },
+            allowFiltering: true,
+            query: new Query().take(40),
+        }
+    },
+    provide: {
+        autocomplete: [VirtualScroll]
+    },
+    methods: {
+        actionBegin: function (e) {
+            e.query = new Query().take(45);
+        }
+    }
+}
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>

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

@@ -0,0 +1,14 @@
+
+
+
+
+#wrapper1{
+  min-width: 250px;
+    float: left;
+    margin-left: 100px;
+}
+#wrapper2{
+  min-width: 250px;
+    float: right;
+     margin-right: 100px;
+}

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

@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
+    <title>EJ2 Vue Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+    <meta name="author" content="Syncfusion" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
+    <link href="index.css" rel="stylesheet" />
+    <script src="systemjs.config.js"></script>
+</head>
+
+<body>
+    <div id='app'>Loading....</div>
+</body>
+
+</html>
+

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

@@ -0,0 +1,37 @@
+
+import Vue from 'vue';
+import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';
+import { DropDownList, VirtulScroll } from '@syncfusion/ej2-dropdowns';
+DropDownList.Inject(VirtulScroll);
+Vue.use(DropDownListPlugin);
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+new Vue({
+	el: '#app',
+	template: `
+<div id="app">
+    <div id="wrapper1">
+      <ejs-dropdownlist id='dropdownlist' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields' :enableVirtualization='true' :allowFiltering='false' popupHeight="200px"></ejs-dropdownlist>
+    </div>
+</div>
+`,
+
+  name: 'app',
+   data () {
+    return {
+      itemData: records,
+      fields: { value: 'id', text: 'text' }
+    }
+  }
+
+});

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

@@ -0,0 +1,39 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js",
+        "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js",
+        "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js",
+        "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js",
+        "@syncfusion/ej2-vue-notifications": "syncfusion:ej2-vue-notifications/dist/ej2-vue-notifications.umd.min.js",
+        "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js",
+        "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js",
+    }
+});
+
+System.import('index.js');

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

@@ -0,0 +1,55 @@
+<template>
+    <div id="app">
+        <div id="wrapper1">
+            <ejs-combobox id='combobox' :dataSource='itemData' placeholder='e.g Item 1' :fields='fields'
+                :enableVirtualization='true' :query='query' :allowFiltering='false' :actionBegin='actionBegin'
+                popupHeight="200px"></ejs-combobox>
+        </div>
+    </div>
+</template>
+<script setup>
+import { provide } from "vue";
+import { ComboBoxComponent as EjsCombobox, VirtualScroll } from "@syncfusion/ej2-vue-dropdowns";
+
+let records = [];
+function dataSource() {
+    for (let i = 1; i <= 150; i++) {
+        let item = {
+            id: 'id' + i,
+            text: "Item " + i,
+        };
+        records.push(item);
+    }
+}
+dataSource();
+
+const itemData = records;
+const fields = { value: 'id', text: 'text' };
+const allowFiltering = true;
+const query = new Query().take(40);
+
+provide('combobox', [VirtualScroll]);
+
+const actionBegin = function (e) {
+    e.query = new Query().take(45);
+}
+
+</script>
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
+
+#wrapper1 {
+    min-width: 250px;
+    float: left;
+    margin-left: 350px;
+}
+
+#wrapper2 {
+    min-width: 250px;
+    float: right;
+    margin-right: 100px;
+}
+</style>