v23.1.36 is released

syncfusion · Sep 19, 2023 · 5b757e3 · 5b757e3
1 parent a206a6e
commit 5b757e3
Show file tree

Hide file tree

Showing 706 changed files with 26,099 additions and 6,807 deletions.
diff --git a/config.json b/config.json
@@ -72,7 +72,7 @@
 		"ajax",
 		"popup",
 		"treeview",
-		null,
+		"null",
 		"api",
 		"maskedtextbox",
 		"numerictextbox",
@@ -176,6 +176,7 @@
 		"workflow",
 		"form-validator",
 		"signature",
-		"multiline-textbox"
+		"multiline-textbox",
+		null
 	]
 }
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-WLQL39J');</script>
+    })(window,document,'script','dataLayer','GTM-W8WD8WN');</script>
     <!-- End Google Tag Manager -->
     <meta charset="utf-8" />
     <title>Essential JS 2</title>
@@ -53,7 +53,7 @@
 
 <body class='e-view' aria-busy="true">
     <!-- Google Tag Manager (noscript) -->
-    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQL39J"height="0"width="0"style="display:none;visibility:hidden"></iframe></noscript>
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div hidden id="sync-analytics" data-queue="EJ2 - JavaScript - Demos"></div>
     <aside id='left-sidebar'>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-samples",
-  "version": "22.1.34",
+  "version": "23.1.36",
   "description": "Samples for Syncfusion Essential JS 2",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",

diff --git a/sampleOrder.json b/sampleOrder.json
@@ -908,7 +908,8 @@
         "Samples": {
             "default":"Default Functionalities",
             "simplified": "Simplified Mode",
-            "resize": "Ribbon Resizing"            
+            "resize": "Ribbon Resizing",
+	    "backstage": "Ribbon Backstage"
         }
     },
     "rich-text-editor": {
@@ -1273,4 +1274,4 @@
             "custom-drop-area": "Custom Drop Area"
         }
     }
-}
+}
diff --git a/src/accordion/ajax-content.html → src/accordion/fetch-content.html b/src/accordion/ajax-content.html → src/accordion/fetch-content.html
diff --git a/src/accordion/ajax.html → src/accordion/fetch.html b/src/accordion/ajax.html → src/accordion/fetch.html
@@ -95,12 +95,12 @@
 </div>
 <div id="action-description">
     <p>
-        This sample demonstrates rendering <code>Accordion</code> content from external source using <code>Ajax</code> library. The content of panel “Network & Connectivity" is loaded from external element.
+        This sample demonstrates rendering <code>Accordion</code> content from external source using <code>Fetch</code> library. The content of panel “Network & Connectivity" is loaded from external element.
     </p>
 </div>
 <div id="description">
     <p>
-        This sample illustrates the external webpage content loaded inside the Accordion panel by using AJAX library.
+        This sample illustrates the external webpage content loaded inside the Accordion panel by using FETCH library.
     </p>
     <p>
         More information about Accordion can be found in this <a target="_blank" href="https://ej2.syncfusion.com/documentation/accordion/getting-started/">

diff --git a/src/accordion/ajax.ts → src/accordion/fetch.ts b/src/accordion/ajax.ts → src/accordion/fetch.ts
@@ -1,18 +1,18 @@
 import { loadCultureFiles } from '../common/culture-loader';
 /**
- * Accordion Ajax Sample
+ * Accordion Fetch Sample
  */
 import { Accordion, ExpandEventArgs } from '@syncfusion/ej2-navigations';
-import { Ajax } from '@syncfusion/ej2-base';
+import { Fetch } from '@syncfusion/ej2-base';
 
 let acrdnObj: Accordion;
 let nestAcrdn: Accordion;
 (window as any).default = (): void => {
     loadCultureFiles();
 
-    let ajax: Ajax = new Ajax('./src/accordion/ajax-content.html', 'GET', true);
-    ajax.send().then();
-    ajax.onSuccess = (data: string): void => {
+    let fetch: Fetch = new Fetch('./src/accordion/fetch-content.html', 'GET', "application/json",);
+    fetch.send().then();
+    fetch.onSuccess = (data: string): void => {
         //Initialize Accordion component
         acrdnObj = new Accordion({
             expandMode: 'Single',

diff --git a/src/arc-gauge/patterns.html b/src/arc-gauge/patterns.html
@@ -1,4 +1,4 @@
-<div class="control-section">
+<div class="control-section" style="overflow: auto;">
     <table>
         <tr>
             <td class="gaugeAlign">

diff --git a/src/auto-complete/sample.json b/src/auto-complete/sample.json
@@ -2,12 +2,14 @@
     "name": "AutoComplete",
     "directory": "auto-complete",
     "category": "Dropdowns",
+    "type": "update",
     "ftName": "autocomplete",
     "samples": [
         { "url": "default", "name": "Default Functionalities", "description": "This example demonstrates the default functionalities of the JavaScript autocomplete control with minimum configuration.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "value", "placeholder"] } },
         { "url": "grouping-icon", "name": "Grouping and Icons", "description": "This example demonstrates how to group based on the different categories with individual header and icon support using the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["fields", "placeholder"] } },
         { "url": "data-binding", "name": "Data Binding", "description": "This example demonstrates how to bind with local data source and fetch data from remote data service in the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "suggestionCount", "query", "sortOrder", "autofill", "filterType", "change"] } },
         { "url": "template", "name": "Template", "description": "This example demonstrates how to customize the appearance of each item in the JavaScript autocomplete control pop-up list using template.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "headerTemplate", "itemTemplate", "placeholder", "popupHeight"] } },
+        { "url": "virtual-scroll", "name": "Virtualization", "type": "new", "description": "This example demonstrates how to use virtualization support of the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "enableVirtualization", "placeholder"] } },
         { "url": "highlight", "name": "Highlight", "description": "This example demonstrates how to highlight the searched characters in the suggested list items of the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "fields", "highlight", "placeholder"] } },
         { "url": "custom-filtering", "name": "Custom Filtering", "description": "This example demonstrates how to achieve the custom filtering functionalities in the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "filtering", "fields", "placeholder"] } },
         { "url": "diacritics-filtering", "name": "Diacritics Filtering", "description": "This example demonstrates how to achieve the diacritics filter functionalities in the JavaScript autocomplete control.", "category": "AutoComplete", "api": { "AutoComplete": ["dataSource", "ignoreAccent", "placeholder"] } }

diff --git a/src/auto-complete/virtual-scroll.html b/src/auto-complete/virtual-scroll.html
@@ -0,0 +1,26 @@
+<div class="col-lg-12 control-section">
+    <div class="control-wrapper">
+        <div style='padding-top:70px;'>
+            <input type="text" id="data" tabindex="1" />
+        </div>
+    </div>
+</div>
+
+<div id="action-description">
+    <p>This example demonstrates the virtualization support of the AutoComplete. The component has 150 items bound to it; however, when you open the suggestion list, only few items are loaded based on the popup height, and the remaining items are loaded while scrolling.</p>
+</div>
+
+<div id="description">
+    <p>The <code>AutoComplete</code> component supports virtualization, which improves UI performance for large amounts of data. To enable virtualization, set the <code>enableVirtualization</code> property to true. When virtualization is enabled, AutoComplete doesn't render the entire suggestion data source on initial component rendering. It loads the N number of items in the popup on initial rendering and the remaining set number of items will load while scrolling.
+        Virtualization works with both local and remote data.</p>
+    <p>To perform the virtualization feature in AutoComplete, the <code>VirtualSCroll</code> module
+        have to be injected in the application end.</p>
+</div>
+<!-- custom code start -->
+<style>
+    .control-wrapper {
+        margin: 0 auto;
+        width: 250px;
+    }
+</style>
+<!-- custom code end-->
diff --git a/src/auto-complete/virtual-scroll.ts b/src/auto-complete/virtual-scroll.ts
@@ -0,0 +1,34 @@
+import { loadCultureFiles } from '../common/culture-loader';
+/**
+ * AutoComplete Default functionality Sample
+ */
+import { AutoComplete, VirtualScroll } from '@syncfusion/ej2-dropdowns';
+import * as data from './dataSource.json';
+
+AutoComplete.Inject(VirtualScroll);
+
+let records: { [key: string]: Object }[] = [];
+
+for (let i = 1; i <= 150; i++) {
+    const item: { [key: string]: Object } = {
+        id: 'id' + i,
+        text: `Item ${i}`,
+    };
+    records.push(item);
+}
+
+(window as any).default = (): void => {
+    loadCultureFiles();
+    // initialize AutoComplete component
+    let atcObj: AutoComplete = new AutoComplete({
+        //set the local data to dataSource property
+        dataSource: records,
+        popupHeight: '200px',
+        //enable the virtualization property
+        enableVirtualization: true,
+        fields: { text: 'text', value: 'text' },
+        // set the placeholder to AutoComplete input element
+        placeholder: 'e.g. Item 1'
+    });
+    atcObj.appendTo('#data');
+};
diff --git a/src/button/button-group.html b/src/button/button-group.html
@@ -106,7 +106,7 @@
 .e-btngrp-underline::before {
     content: '\e703';
 }
-/* custom code start */
+
 .button-group-section {
     width: 320px;
     margin: 0 auto;
@@ -139,5 +139,5 @@
         overflow-y: scroll;
     }
 }
-/* custom code end */
+
 </style>
diff --git a/src/button/checkbox.html b/src/button/checkbox.html
@@ -34,7 +34,7 @@
         documentation section</a>.
     </p>
 </div>
-<!-- custom code start -->
+
 <style>
     /* CheckBox Styles */
     .checkbox-control {
@@ -67,4 +67,3 @@
         margin: 20px 0;
     }
 </style>
-<!-- custom code end -->
diff --git a/src/button/radio-button.html b/src/button/radio-button.html
@@ -33,7 +33,7 @@ <h4 class="row">Select a payment method</h4>
         documentation section</a>.
     </p>
 </div>
-<!-- custom code start -->
+
 <style>
     /* RadioButton Styles */
     .radio-control {
@@ -67,4 +67,3 @@ <h4 class="row">Select a payment method</h4>
         font-size: 20px;
     }
 </style>
-<!-- custom code end -->
diff --git a/src/card/tile.html b/src/card/tile.html
@@ -61,22 +61,12 @@
 </div>
 <div id="action-description">
     <p>
-        This sample demonstrates filter and search of the
-        <code>card</code> based on categories, and text containing the card. You can use search box to search cards, and you can
-        filter choosing categories in multi-select component.
+        The "Tile View" example in the JavaScript <code>card</code> Control showcases the functionality of filtering and searching cards based on categories and text content. In this sample, you can utilize the search box to search for specific cards, and you can apply filters by selecting categories from the multi-select component.
     </p>
 </div>
 <div id="description">
     <p>
-        Card is a small container in which user can show defined content in specific structure and it is flexible and extensible.
-        This sample demonstrates to render the
-        <code>Card</code> Using
-        <a target="_blank" href="https://ej2.syncfusion.com/documentation/common/template-engine/"> Template Engine</a> and it can be filtered based on
-        <a target="_blank" href="https://ej2.syncfusion.com/documentation/data/getting-started/">
-            data Manager</a>.
-        <p> More information about Card can be found in this
-            <a target="_blank" href="https://ej2.syncfusion.com/documentation/card/getting-started/">
-                documentation</a> section. </p>
+        A card is a small container that allows users to display defined content in a specific structure. It provides a flexible and extensible way to present information or data. In this sample, the <code>Card</code> is rendered using the <a target="_blank" href="https://ej2.syncfusion.com/documentation/common/template-engine/"> Template Engine</a>, which enables you to customize the appearance and layout of the cards according to your needs. Additionally, the cards can be filtered based on the <a target="_blank" href="https://ej2.syncfusion.com/documentation/data/getting-started/">data Manager</a>, allowing you to dynamically update the cards based on specific criteria or data changes. This enhances the functionality and interactivity of the card control. <p>For more detailed information about the Card control and its capabilities, you can refer to this <a target="_blank" href="https://ej2.syncfusion.com/documentation/card/getting-started/">documentation</a> section. This documentation provides comprehensive details, examples, and guidance on how to effectively utilize the Card control in your JavaScript applications.</p>
     </p>
 </div>
 <style>

diff --git a/src/carousel/indicator-type.html b/src/carousel/indicator-type.html
@@ -0,0 +1,90 @@
+<div class="control-section indicator-type-section">
+    <div class="col-lg-12 content-wrapper">
+        <div class="row">
+            <div class="col-lg-6 carousel-sample">
+                <h4>Default Indicator</h4>
+                <div id="default-carousel"></div>
+            </div>
+            <div class="col-lg-6 carousel-sample">
+                <h4>Dynamic Indicator</h4>
+                <div id="dynamic-carousel"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 carousel-sample">
+                <h4>Fraction Indicator</h4>
+                <div id="fraction-carousel"></div>
+            </div>
+            <div class="col-lg-6 carousel-sample">
+                <h4>Progress Indicator</h4>
+                <div id="progress-carousel"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<style>
+    .indicator-type-section .carousel-sample {
+        margin: -0.5em 0 5.6em 0;
+        height: 200px;
+    }
+
+    .indicator-type .e-carousel-items .e-carousel-item .img-container {
+        height: 100%;
+    }
+
+    .indicator-type.e-carousel .e-progress {
+        background: none;
+    }
+
+    .indicator-type.e-carousel .e-next-icon::before,
+    .indicator-type.e-carousel .e-previous-icon::before {
+        color: black;
+    }
+
+    .indicator-type {
+        border: 1px solid #d7d7d7;
+    }
+
+    .indicator-type .e-slide {
+        height: 100%;
+        width: 100%;
+        margin-top: 4em;
+        font-size: 21px;
+        text-align: center;
+        color: black;
+    }
+
+    .indicator-type.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar:not(.e-active),
+    .indicator-type.e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar:not(.e-active) div {
+        background-color: gray;
+    }
+
+    .indicator-type.e-carousel .e-carousel-indicators.e-fraction .e-indicator-bars {
+        color: black;
+    }
+
+    .indicator-type.e-carousel .e-carousel-items .e-carousel-item {
+        background-color: #f9f8f8;
+    }
+
+    @media screen and (max-width: 768px) {
+        .indicator-type-section .carousel-sample {
+            margin: 5em 0;
+        }
+
+        .indicator-type-section .row {
+            margin-top: -5em;
+        }
+    }
+</style>
+
+<div id="action-description">
+    <p>This sample demonstrates the types of indicators in the <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel" target="_blank">JavaScript Carousel</a> component.</p>
+</div>
+<div id="description">
+    <p>In this demo, the available types of indicators of JavaScript Carousel are showcased. They are <code>default</code>, <code>dynamic</code>, <code>progress</code> and <code>fraction</code>, and can be set using the <strong>indicatorsType</strong> property. </p>
+    <p><code>Default</code> - The Carousel displays indicators with a bullet design.</p>
+    <p><code>Dynamic</code> - The Carousel applies dynamic animation to the indicators.</p>
+    <p><code>Fraction</code> - The Carousel displays slides numerically as indicators.</p>
+    <p><code>Progress</code> - The Carousel displays indicators like a progress bar.</p>
+</div>