DOCINFRA-2341_merged_using_automation

ej2-react-toc.html

@@ -908,6 +908,7 @@
 <li><a href="/ej2-react/document-editor/view">View</a></li>
 <li>How To
 <ul>
+<li><a href="/ej2-react/document-editor/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 <li><a href="/ej2-react/document-editor/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 <li><a href="/ej2-react/document-editor/how-to/customize-context-menu">Customize context menu</a></li>
 <li><a href="/ej2-react/document-editor/how-to/customize-tool-bar">Customize toolbar</a></li>
@@ -923,6 +924,7 @@
 <li><a href="/ej2-react/document-editor/how-to/resize-document-editor">Resize document editor</a></li>
 <li><a href="/ej2-react/document-editor/how-to/export-document-as-pdf">Export the document as Pdf</a></li>
 <li><a href="/ej2-react/document-editor/how-to/customize-font-family-drop-down">Customize the font family drop down</a></li>
+<li><a href="/ej2-react/document-editor/how-to/auto-save-document">Auto save the document in Server</a></li>
 <li><a href="/ej2-react/document-editor/how-to/auto-save-document-in-document-editor">Auto save the document in AWS S3</a></li>
 <li><a href="/ej2-react/document-editor/how-to/retrieve-the-bookmark-content-as-text">Retrieve the Bookmark and Whole document content</a></li>
 <li><a href="/ej2-react/document-editor/how-to/get-current-word">Select and Get the Current Word and Paragraph</a></li>
@@ -2946,7 +2948,7 @@
 </ul>
 </li> <li>Release Notes
                 <ul>
-				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-react/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-react/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-react/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-react/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-react/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-react/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-react/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-react/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-react/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-react/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-react/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-react/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-react/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-react/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
+				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-react/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-react/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-react/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-react/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-react/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-react/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-react/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-react/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-react/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-react/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-react/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-react/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-react/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-react/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-react/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
 				<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-react/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-react/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-react/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-react/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-react/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-react/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-react/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-react/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-react/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-react/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-react/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
 				<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-react/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-react/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-react/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-react/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-react/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-react/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-react/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-react/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-react/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-react/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-react/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
 				<li>2023 Volume 2 - 22.*

ej2-react/Release-notes/26.1.41.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for React Weekly Release Release Notes  
+description: Essential Studio for React Weekly Release Release Notes  
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React  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 %}

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

@@ -57,6 +57,23 @@ The following sample displays the OrderId from the `Orders` Data Service.
 
  {% previewsample "page.domainurl/code-snippet/autocomplete/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.
+
+`[Class-component]`
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/autocomplete/virtual-scroll-items/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
 
 ## Grouping
 

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

@@ -0,0 +1,31 @@
+import { AutoCompleteComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+export default class App extends React.Component {
+    // define the array of string
+    constructor(props) {
+        super(props);
+        this.records = Array.from({ length: 150 }, (_, i) => ({
+            id: 'id' + (i + 1),
+            text: `Item ${i + 1}`,
+        }));
+    }
+    fields = { value: 'text' };
+    // bind the Query instance to query property
+    query = new Query().take(40);
+
+    Begin(args) {
+        args.Query = new Query().take(45);
+      }
+
+    render() {
+        return (
+            // specifies the tag for render the DropDownList component
+            <AutoCompleteComponent id="datas" dataSource={this.records} placeholder="e.g. Item 1" enableVirtualization={true} query={this.query} actionBegin={this.Begin} fields={this.fields} popupHeight="200px" >
+                <Inject services={[VirtualScroll]} />
+            </AutoCompleteComponent>);
+    }
+}
+ReactDOM.render(<App />, document.getElementById('sample'));

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

@@ -0,0 +1,39 @@
+
+import { AutoCompleteComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+export default class App extends React.Component<{}, {}> {
+  // maps the appropriate column to fields property
+  private fields: object = { value: 'text' };
+
+   // define the array of string
+   private records: { [key: string]: Object }[] = [];
+   private query: Query = new Query().take(40);
+
+    public Begin(e: any): void {
+      e.query = new Query().take(45);
+    }
+   // define the array of string
+   constructor(props) {
+    super(props);
+    this.records = Array.from({ length: 150 }, (_, i) => ({
+        id: 'id' + (i + 1),
+        text: `Item ${i + 1}`,
+    }));
+  }
+
+  public render() {
+    return (
+      // specifies the tag for render the DropDownList component
+      <AutoCompleteComponent id="datas" dataSource={this.records} placeholder="e.g. Item 1" query={this.query} actionBegin={this.Begin} enableVirtualization={true} fields={this.fields} popupHeight="200px" >
+      <Inject services={[VirtualScroll]}/>
+  </AutoCompleteComponent>
+    );
+  }
+}
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+

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

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React DropDownList</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-notifications/styles/material.css" rel="stylesheet" />
+    <link href="./styles.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='sample' style="width:250px; margin: 20px auto 0;">
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>

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

@@ -0,0 +1,4 @@
+.city {
+    right: 15px;
+    position: absolute;
+}

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

@@ -0,0 +1,45 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.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-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
+        "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js",
+        "react":"https://unpkg.com/react@16.3.1/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');

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

@@ -0,0 +1,31 @@
+import { ComboBoxComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+export default class App extends React.Component {
+    // define the array of string
+    constructor(props) {
+        super(props);
+        this.records = Array.from({ length: 150 }, (_, i) => ({
+            id: 'id' + (i + 1),
+            text: `Item ${i + 1}`,
+        }));
+    }
+    fields = { text: 'text', value: 'id' };
+    // bind the Query instance to query property
+    query = new Query().take(40);
+
+    Begin(args) {
+        args.Query = new Query().take(45);
+      }
+
+    render() {
+        return (
+            // specifies the tag for render the DropDownList component
+            <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" >
+                <Inject services={[VirtualScroll]} />
+            </ComboBoxComponent>);
+    }
+}
+ReactDOM.render(<App />, document.getElementById('sample'));

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

@@ -0,0 +1,39 @@
+
+import { ComboBoxComponent, Inject, VirtualScroll } from '@syncfusion/ej2-react-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+export default class App extends React.Component<{}, {}> {
+  // maps the appropriate column to fields property
+  private fields: object = { text: 'text', value: 'id' };
+
+   // define the array of string
+   private records: { [key: string]: Object }[] = [];
+   private query: Query = new Query().take(40);
+
+    public Begin(e: any): void {
+      e.query = new Query().take(45);
+    }
+   // define the array of string
+   constructor(props) {
+    super(props);
+    this.records = Array.from({ length: 150 }, (_, i) => ({
+        id: 'id' + (i + 1),
+        text: `Item ${i + 1}`,
+    }));
+  }
+
+  public render() {
+    return (
+      // specifies the tag for render the DropDownList component
+      <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" >
+      <Inject services={[VirtualScroll]}/>
+  </ComboBoxComponent>
+    );
+  }
+}
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+

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

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React DropDownList</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-notifications/styles/material.css" rel="stylesheet" />
+    <link href="./styles.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='sample' style="width:250px; margin: 20px auto 0;">
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>

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

@@ -0,0 +1,4 @@
+.city {
+    right: 15px;
+    position: absolute;
+}

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

@@ -0,0 +1,45 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.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-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
+        "react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js",
+        "react":"https://unpkg.com/react@16.3.1/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');