Skip to content

Commit 4b071b9

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-08-2024 4:30:12 PM
1 parent b29ce9a commit 4b071b9

File tree

28 files changed

+744
-19
lines changed

28 files changed

+744
-19
lines changed

‎ej2-react-toc.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -908,6 +908,7 @@
908908
<li><a href="/ej2-react/document-editor/view">View</a></li>
909909
<li>How To
910910
<ul>
911+
<li><a href="/ej2-react/document-editor/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
911912
<li><a href="/ej2-react/document-editor/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
912913
<li><a href="/ej2-react/document-editor/how-to/customize-context-menu">Customize context menu</a></li>
913914
<li><a href="/ej2-react/document-editor/how-to/customize-tool-bar">Customize toolbar</a></li>
@@ -923,6 +924,7 @@
923924
<li><a href="/ej2-react/document-editor/how-to/resize-document-editor">Resize document editor</a></li>
924925
<li><a href="/ej2-react/document-editor/how-to/export-document-as-pdf">Export the document as Pdf</a></li>
925926
<li><a href="/ej2-react/document-editor/how-to/customize-font-family-drop-down">Customize the font family drop down</a></li>
927+
<li><a href="/ej2-react/document-editor/how-to/auto-save-document">Auto save the document in Server</a></li>
926928
<li><a href="/ej2-react/document-editor/how-to/auto-save-document-in-document-editor">Auto save the document in AWS S3</a></li>
927929
<li><a href="/ej2-react/document-editor/how-to/retrieve-the-bookmark-content-as-text">Retrieve the Bookmark and Whole document content</a></li>
928930
<li><a href="/ej2-react/document-editor/how-to/get-current-word">Select and Get the Current Word and Paragraph</a></li>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,23 @@ The following sample displays the OrderId from the `Orders` Data Service.
5757

5858
{% previewsample "page.domainurl/code-snippet/autocomplete/virtual-scroll-remote" %}
5959

60+
## Customizing items count in virtualization
61+
62+
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.
63+
64+
The following sample shows the example for Customizing items count in virtualization.
65+
66+
`[Class-component]`
67+
68+
{% tabs %}
69+
{% highlight js tabtitle="index.jsx" %}
70+
{% include code-snippet/autocomplete/virtual-scroll-items/app/index.jsx %}
71+
{% endhighlight %}
72+
{% highlight ts tabtitle="index.tsx" %}
73+
{% include code-snippet/autocomplete/virtual-scroll-items/app/index.tsx %}
74+
{% endhighlight %}
75+
{% endtabs %}
76+
6077

6178
## Grouping
6279

‎ej2-react/code-snippet/autocomplete/virtual-scroll-items/app/index.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { AutoCompleteComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
2+
import { Query } from '@syncfusion/ej2-data';
3+
4+
import * as React from 'react';
5+
import * as ReactDOM from 'react-dom';
6+
export default class App extends React.Component {
7+
// define the array of string
8+
constructor(props) {
9+
super(props);
10+
this.records = Array.from({ length: 150 }, (_, i) => ({
11+
id: 'id' + (i + 1),
12+
text: `Item ${i + 1}`,
13+
}));
14+
}
15+
fields = { value: 'text' };
16+
// bind the Query instance to query property
17+
query = new Query().take(40);
18+
19+
Begin(args) {
20+
args.Query = new Query().take(45);
21+
}
22+
23+
render() {
24+
return (
25+
// specifies the tag for render the DropDownList component
26+
<AutoCompleteComponent id="datas" dataSource={this.records} placeholder="e.g. Item 1" enableVirtualization={true} query={this.query} actionBegin={this.Begin} fields={this.fields} popupHeight="200px" >
27+
<Inject services={[VirtualScroll]} />
28+
</AutoCompleteComponent>);
29+
}
30+
}
31+
ReactDOM.render(<App />, document.getElementById('sample'));

‎ej2-react/code-snippet/autocomplete/virtual-scroll-items/app/index.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
2+
import { AutoCompleteComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
3+
import { Query } from '@syncfusion/ej2-data';
4+
5+
import * as React from 'react';
6+
import * as ReactDOM from 'react-dom';
7+
8+
export default class App extends React.Component<{}, {}> {
9+
// maps the appropriate column to fields property
10+
private fields: object = { value: 'text' };
11+
12+
// define the array of string
13+
private records: { [key: string]: Object }[] = [];
14+
private query: Query = new Query().take(40);
15+
16+
public Begin(e: any): void {
17+
e.query = new Query().take(45);
18+
}
19+
// define the array of string
20+
constructor(props) {
21+
super(props);
22+
this.records = Array.from({ length: 150 }, (_, i) => ({
23+
id: 'id' + (i + 1),
24+
text: `Item ${i + 1}`,
25+
}));
26+
}
27+
28+
public render() {
29+
return (
30+
// specifies the tag for render the DropDownList component
31+
<AutoCompleteComponent id="datas" dataSource={this.records} placeholder="e.g. Item 1" query={this.query} actionBegin={this.Begin} enableVirtualization={true} fields={this.fields} popupHeight="200px" >
32+
<Inject services={[VirtualScroll]}/>
33+
</AutoCompleteComponent>
34+
);
35+
}
36+
}
37+
ReactDOM.render(<App />, document.getElementById('sample'));
38+
39+

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React DropDownList</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Essential JS 2 for React Components" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-notifications/styles/material.css" rel="stylesheet" />
14+
<link href="./styles.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+
<style>
18+
#loader {
19+
color: #008cff;
20+
height: 40px;
21+
left: 45%;
22+
position: absolute;
23+
top: 45%;
24+
width: 30%;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<div id='sample' style="width:250px; margin: 20px auto 0;">
31+
<div id='loader'>Loading....</div>
32+
</div>
33+
</body>
34+
35+
</html>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.city {
2+
right: 15px;
3+
position: absolute;
4+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
System.config({
2+
transpiler: "ts",
3+
typescriptOptions: {
4+
target: "es5",
5+
module: "commonjs",
6+
moduleResolution: "node",
7+
emitDecoratorMetadata: true,
8+
experimentalDecorators: true,
9+
"jsx": "react"
10+
},
11+
meta: {
12+
'typescript': {
13+
"exports": "ts"
14+
}
15+
},
16+
paths: {
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
18+
},
19+
map: {
20+
app: 'app',
21+
ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
22+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
23+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
24+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
26+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
27+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
30+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
31+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
32+
"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
33+
34+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
35+
"@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
36+
"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js",
37+
"react":"https://unpkg.com/react@16.3.1/umd/react.production.min.js",
38+
},
39+
packages: {
40+
'app': { main: 'index', defaultExtension: 'tsx' },
41+
}
42+
43+
});
44+
45+
System.import('app');

‎ej2-react/code-snippet/combobox/virtual-scroll-items/app/index.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { ComboBoxComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
2+
import { Query } from '@syncfusion/ej2-data';
3+
4+
import * as React from 'react';
5+
import * as ReactDOM from 'react-dom';
6+
export default class App extends React.Component {
7+
// define the array of string
8+
constructor(props) {
9+
super(props);
10+
this.records = Array.from({ length: 150 }, (_, i) => ({
11+
id: 'id' + (i + 1),
12+
text: `Item ${i + 1}`,
13+
}));
14+
}
15+
fields = { text: 'text', value: 'id' };
16+
// bind the Query instance to query property
17+
query = new Query().take(40);
18+
19+
Begin(args) {
20+
args.Query = new Query().take(45);
21+
}
22+
23+
render() {
24+
return (
25+
// specifies the tag for render the DropDownList component
26+
<ComboBoxComponent id="datas" dataSource={this.records} placeholder="e.g. Item 1" enableVirtualization={true} query={this.query} allowFiltering={false} actionBegin={this.Begin} fields={this.fields} popupHeight="200px" >
27+
<Inject services={[VirtualScroll]} />
28+
</ComboBoxComponent>);
29+
}
30+
}
31+
ReactDOM.render(<App />, document.getElementById('sample'));

‎ej2-react/code-snippet/combobox/virtual-scroll-items/app/index.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
2+
import { ComboBoxComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
3+
import { Query } from '@syncfusion/ej2-data';
4+
5+
import * as React from 'react';
6+
import * as ReactDOM from 'react-dom';
7+
8+
export default class App extends React.Component<{}, {}> {
9+
// maps the appropriate column to fields property
10+
private fields: object = { text: 'text', value: 'id' };
11+
12+
// define the array of string
13+
private records: { [key: string]: Object }[] = [];
14+
private query: Query = new Query().take(40);
15+
16+
public Begin(e: any): void {
17+
e.query = new Query().take(45);
18+
}
19+
// define the array of string
20+
constructor(props) {
21+
super(props);
22+
this.records = Array.from({ length: 150 }, (_, i) => ({
23+
id: 'id' + (i + 1),
24+
text: `Item ${i + 1}`,
25+
}));
26+
}
27+
28+
public render() {
29+
return (
30+
// specifies the tag for render the DropDownList component
31+
<ComboBoxComponent id="datas" dataSource={this.records} placeholder="e.g. Item 1" query={this.query} actionBegin={this.Begin} enableVirtualization={true} allowFiltering={false} fields={this.fields} popupHeight="200px" >
32+
<Inject services={[VirtualScroll]}/>
33+
</ComboBoxComponent>
34+
);
35+
}
36+
}
37+
ReactDOM.render(<App />, document.getElementById('sample'));
38+
39+

‎ej2-react/code-snippet/combobox/virtual-scroll-items/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React DropDownList</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Essential JS 2 for React Components" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-notifications/styles/material.css" rel="stylesheet" />
14+
<link href="./styles.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+
<style>
18+
#loader {
19+
color: #008cff;
20+
height: 40px;
21+
left: 45%;
22+
position: absolute;
23+
top: 45%;
24+
width: 30%;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<div id='sample' style="width:250px; margin: 20px auto 0;">
31+
<div id='loader'>Loading....</div>
32+
</div>
33+
</body>
34+
35+
</html>

‎ej2-react/code-snippet/combobox/virtual-scroll-items/styles.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.city {
2+
right: 15px;
3+
position: absolute;
4+
}

‎ej2-react/code-snippet/combobox/virtual-scroll-items/systemjs.config.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
System.config({
2+
transpiler: "ts",
3+
typescriptOptions: {
4+
target: "es5",
5+
module: "commonjs",
6+
moduleResolution: "node",
7+
emitDecoratorMetadata: true,
8+
experimentalDecorators: true,
9+
"jsx": "react"
10+
},
11+
meta: {
12+
'typescript': {
13+
"exports": "ts"
14+
}
15+
},
16+
paths: {
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
18+
},
19+
map: {
20+
app: 'app',
21+
ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
22+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
23+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
24+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
26+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
27+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
30+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
31+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
32+
"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
33+
34+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
35+
"@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
36+
"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js",
37+
"react":"https://unpkg.com/react@16.3.1/umd/react.production.min.js",
38+
},
39+
packages: {
40+
'app': { main: 'index', defaultExtension: 'tsx' },
41+
}
42+
43+
});
44+
45+
System.import('app');

‎ej2-react/code-snippet/dropdownlist/virtual-scroll-items/app/index.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { DropDownListComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
2+
import { Query } from '@syncfusion/ej2-data';
3+
4+
import * as React from 'react';
5+
import * as ReactDOM from 'react-dom';
6+
export default class App extends React.Component {
7+
// define the array of string
8+
constructor(props) {
9+
super(props);
10+
this.records = Array.from({ length: 150 }, (_, i) => ({
11+
id: 'id' + (i + 1),
12+
text: `Item ${i + 1}`,
13+
}));
14+
}
15+
fields = { text: 'text', value: 'id' };
16+
// bind the Query instance to query property
17+
query = new Query().take(40);
18+
19+
Begin(args) {
20+
args.Query = new Query().take(45);
21+
}
22+
23+
render() {
24+
return (
25+
// specifies the tag for render the DropDownList component
26+
<DropDownListComponent id="datas" dataSource={this.records} placeholder="e.g. Item 1" enableVirtualization={true} query={this.query} allowFiltering={false} actionBegin={this.Begin} fields={this.fields} popupHeight="200px" >
27+
<Inject services={[VirtualScroll]} />
28+
</DropDownListComponent>);
29+
}
30+
}
31+
ReactDOM.render(<App />, document.getElementById('sample'));

0 commit comments

Comments
 (0)