Integrated latest changes at 06-07-2024 7:30:21 PM

Author: SyncfusionBuild

ej2-react-toc.html

@@ -2623,7 +2623,7 @@
     <li><a href="https://ej2.syncfusion.com/react/documentation/api/tooltip/">API Reference</a></li>
     </ul>
  </li><li>
-TreeGrid
+    <a href="/ej2-react/treegrid/overview">TreeGrid</a>
 <ul>
 <li>Getting Started
 <ul>

ej2-react/3d-chart/getting-started.md

@@ -17,7 +17,6 @@ To get started quickly with React 3D Charts, you can check on this video:
 
 {% youtube "https://www.youtube.com/watch?v=S3SPJYF4Fw8" %}
 
-
 ## Dependencies
 
 Below is the list of minimum dependencies required to use the 3D Chart component.
@@ -66,8 +65,7 @@ To install `create-react-app` run the following command.
 
 ## Add 3D Chart to the project
 
-Now, you can start adding 3D Chart component in the application.
-For getting started, add the 3D Chart component in `src/App` file using following code.
+Now, you can start adding 3D Chart component in the application. For getting started, add the 3D Chart component in `src/App` file using following code.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}

ej2-react/code-snippet/pivot-table/default-cs299/app/index.jsx

@@ -1,4 +1,3 @@
-{% raw %}
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
@@ -30,33 +29,33 @@ function App() {
         values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
     };
     let pivotObj;
-    function ondataBound(args) {
-        var dataSource = JSON.parse(pivotObj.getPersistData()).dataSourceSettings.dataSource;
-        var a = document.getElementById('save');
-        var mime_type = 'application/octet-stream'; // text/html, image/png, et c
+    function ondataBound() {
+        const dataSource = JSON.parse(pivotObj.getPersistData()).dataSourceSettings.dataSource;
+        const a = document.getElementById('save');
+        const mime_type = 'application/octet-stream'; // text/html, image/png, et c
         a.setAttribute('download', 'pivot.JSON');
         a.href = 'data:' + mime_type + ';base64,' + btoa(JSON.stringify(dataSource) || '');
         document.getElementById('files').addEventListener('change', readBlob, false);
     }
-    function readBlob(args) {
-        var files = document.getElementById('load').files;
-        var file = files[0];
-        var start = 0;
-        var stop = file.size - 1;
-        var reader = new FileReader();
+    function readBlob() {
+        const files = document.getElementById('files').files;
+        const file = files[0];
+        const start = 0;
+        const stop = file.size - 1;
+        const reader = new FileReader();
         reader.onloadend = function (evt) {
             if (evt.target.readyState == FileReader.DONE) {
-                pivotObj.dataSource = JSON.parse(evt.target.result);
+                pivotObj.dataSourceSettings = JSON.parse(evt.target.result);
             }
         };
-        var blob = file.slice(start, stop + 1);
+        const blob = file.slice(start, stop + 1);
         reader.readAsBinaryString(blob);
+        document.getElementById('files').value = '';
     }
     return (<div className='control-pane'>
                <div><style>{SAMPLE_CSS}</style><PivotViewComponent id='PivotView' ref={d => pivotObj = d} dataSourceSettings={dataSourceSettings} width={'100%'} height={350} gridSettings={{ columnWidth: 140 }} dataBound={ondataBound.bind(this)}></PivotViewComponent></div><a id="save" class="btn btn-primary">Save</a><div class="fileUpload btn btn-primary"><span>Load</span><input id="files" type="file" class="upload"/></div>
             </div>);
 }
 ;
 export default App;
-ReactDOM.render(<App />, document.getElementById('sample'));
-{% endraw %}
+ReactDOM.render(<App />, document.getElementById('sample'));

ej2-react/code-snippet/pivot-table/default-cs299/app/index.tsx

@@ -1,9 +1,6 @@
-{% raw %}
-
-
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
+import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
 import { pivotData } from './datasource';
 
 const SAMPLE_CSS = `
@@ -25,46 +22,46 @@ const SAMPLE_CSS = `
 }`;
 
 function App() {
-  let dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
-    dataSource: pivotData as IDataSet[],
-    filters: [],
-    formatSettings: [{ name: 'Amount', format: 'C0' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
-  };
-  let pivotObj: PivotViewComponent;
+    let dataSourceSettings: IDataOptions = {
+        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+        dataSource: pivotData as IDataSet[],
+        filters: [],
+        formatSettings: [{ name: 'Amount', format: 'C0' }],
+        rows: [{ name: 'Country' }, { name: 'Products' }],
+        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+    };
+    let pivotObj: PivotViewComponent;
 
-    function ondataBound(args: any): void {
-        var dataSource = JSON.parse(pivotObj.getPersistData()).dataSourceSettings.dataSource;
-        var a = document.getElementById('save');
-        var mime_type = 'application/octet-stream'; // text/html, image/png, et c
+    function ondataBound(): void {
+        const dataSource = JSON.parse(pivotObj.getPersistData()).dataSourceSettings;
+        const a: HTMLAnchorElement = document.getElementById('save') as HTMLAnchorElement;
+        const mime_type = 'application/octet-stream'; // text/html, image/png, et c
         a.setAttribute('download', 'pivot.JSON');
-        a.href = 'data:'+ mime_type +';base64,'+ btoa(JSON.stringify(dataSource) || '');
-        document.getElementById('files').addEventListener('change', readBlob, false);
+        a.href = 'data:' + mime_type + ';base64,' + btoa(JSON.stringify(dataSource) || '');
+        (document.getElementById('files') as HTMLInputElement).addEventListener('change', readBlob, false);
     }
-    function readBlob(args: any): void {
-        var files = document.getElementById('load').files;
-        var file = files[0];
-        var start = 0;
-        var stop = file.size - 1;
-        var reader = new FileReader();
-        reader.onloadend = function(evt) {
-            if (evt.target.readyState == FileReader.DONE) {
-                pivotObj.dataSource = JSON.parse(evt.target.result);
+
+    function readBlob(): void {
+        const files: FileList = (document.getElementById('files') as HTMLInputElement).files as FileList;
+        const file: File = files[0];
+        const start: number = 0;
+        const stop: number = file.size - 1;
+        const reader: FileReader = new FileReader();
+        reader.onloadend = function (evt: ProgressEvent<FileReader>) {
+            if ((evt.target as FileReader).readyState == FileReader.DONE) {
+                pivotObj.dataSourceSettings = JSON.parse((evt.target as FileReader).result as string);
             }
         };
-        var blob = file.slice(start, stop + 1);
+        const blob: Blob = file.slice(start, stop + 1);
         reader.readAsBinaryString(blob);
+        (document.getElementById('files') as HTMLInputElement).value = '';
     }
 
-    return (<div className='control-pane'>
-               <div><style>{SAMPLE_CSS}</style><PivotViewComponent id='PivotView' ref={d => pivotObj = d} dataSourceSettings={dataSourceSettings} width={'100%'} height={350} gridSettings={{ columnWidth: 140 }} dataBound={ondataBound.bind(this)}></PivotViewComponent></div><a id="save" class="btn btn-primary">Save</a><div class="fileUpload btn btn-primary"><span>Load</span><input id="files" type="file" class="upload" /></div>
-            </div>);
+    return (<div className='control-pane'><div><style>{SAMPLE_CSS}</style>
+        <PivotViewComponent id='PivotView' ref={d => pivotObj = d} dataSourceSettings={dataSourceSettings} width={'100%'} height={350}
+            gridSettings={{ columnWidth: 140 }} dataBound={ondataBound.bind(this)}></PivotViewComponent></div>
+        <a id="save" className="btn btn-primary">Save</a><div className="fileUpload btn btn-primary"><span>Load</span><input id="files" type="file" className="upload" /></div>
+    </div>);
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById('sample'));
-
-
-
-{% endraw %}
+ReactDOM.render(<App />, document.getElementById('sample'));

ej2-react/code-snippet/pivot-table/default-cs5/app/index.tsx

@@ -1,34 +1,56 @@
-
-
-import { IDataOptions, IDataSet, PivotViewComponent, AggregateEventArgs } from '@syncfusion/ej2-react-pivotview';
+import { PivotViewComponent, FieldList, Inject } from '@syncfusion/ej2-react-pivotview';
+import { Uploader } from '@syncfusion/ej2-inputs';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { pivotData } from './datasource';
 
 function App() {
-
-  let dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
-    dataSource: pivotData as IDataSet[],
-    expandAll: false,
-    filters: [],
-    drilledMembers: [{ name: 'Country', items: ['France'] }],
-    formatSettings: [{ name: 'Amount', format: 'C2'}],
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-  }
   let pivotObj: PivotViewComponent;
+  let input: HTMLInputElement
+  let isInitial = true;
+
+  function ondataBound(): void {
+    if (isInitial) {
+      // Step 1: Initiate the file uploader
+      let uploadObj: Uploader = new Uploader();
+      uploadObj.appendTo('#fileupload');
+      input = document.querySelector('input[type="file"]') as HTMLInputElement;
+      // Step 2: Add the event listener which fires when the *.CSV file is uploaded.
+      input.addEventListener('change', loadCSV, false);
+      isInitial = false;
+    }
+  }
 
-  function aggregateCell(args: AggregateEventArgs): void {
-      args.skipFormatting = true;
+  function loadCSV() {
+    // Step 3: Initiate the file reader
+    const reader: FileReader = new FileReader();
+    reader.onload = function () {
+      const Result: string[][] = [];
+      // Step 4: Getting the string output which is to be converted as string[][].
+      let readerResult: string[] = (reader.result as string).split(/\r?\n|\r/);
+      (Result as string[][]).push(readerResult[0].split(',').map(function (e) { return e.replace(/ /g, '').replace(/^\"(.+)\"$/, "$1"); }));
+      for (let i: number = 1; i < readerResult.length; i++) {
+        if (readerResult[i as number] !== '') {
+          (Result as string[][]).push(readerResult[i as number].split(','));
+        }
+      }
+      pivotObj.dataSourceSettings = {
+        // Step 5: The string[][] result to be bound as data source
+        dataSource: Result,
+        type: 'CSV',
+        // Step 6: The appropriate report needs to be provided here.
+      };
+    }
+    reader.readAsText(((input as HTMLInputElement).files as FileList)[0]);
+    input.value = '';
+    (document.querySelector('.e-upload-files') as HTMLElement).remove();
   }
 
-    return (<PivotViewComponent  ref={d => pivotObj = d} id='PivotView' height={350} aggregateCellInfo={aggregateCell.bind(this)} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
+  return (<div className='control-pane'><input type="file" id="fileupload" />
+    <PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} showFieldList={true} dataBound={ondataBound.bind(this)}>
+      <Inject services={[FieldList]} />
+    </PivotViewComponent></div>
+  );
 };
 
 export default App;
-ReactDOM.render(<App />, document.getElementById('sample'));
-
-
-
+ReactDOM.render(<App />, document.getElementById('sample'));

ej2-react/code-snippet/pivot-table/getting-started-cs1/app/index.jsx renamed to ej2-react/code-snippet/pivot-table/getting-started-cs1/app/App.jsx

@@ -50,7 +50,7 @@ System.config({
         }
     },
     packages: {
-        'app': { main: 'index', defaultExtension: 'tsx' },
+        'app': { main: 'App', defaultExtension: 'tsx' },
     }
 
 });

ej2-react/code-snippet/pivot-table/getting-started-cs1/app/index.tsx renamed to ej2-react/code-snippet/pivot-table/getting-started-cs1/app/App.tsx

@@ -50,7 +50,7 @@ System.config({
         }
     },
     packages: {
-        'app': { main: 'index', defaultExtension: 'tsx' },
+        'app': { main: 'App', defaultExtension: 'tsx' },
     }
 
 });

ej2-react/code-snippet/pivot-table/getting-started-cs1/app/datasource.jsx

@@ -50,7 +50,7 @@ System.config({
         }
     },
     packages: {
-        'app': { main: 'index', defaultExtension: 'tsx' },
+        'app': { main: 'App', defaultExtension: 'tsx' },
     }
 
 });

ej2-react/code-snippet/pivot-table/getting-started-cs1/systemjs.config.js

@@ -50,7 +50,7 @@ System.config({
         }
     },
     packages: {
-        'app': { main: 'index', defaultExtension: 'tsx' },
+        'app': { main: 'App', defaultExtension: 'tsx' },
     }
 
 });

ej2-react/code-snippet/pivot-table/getting-started-cs2/app/index.jsx renamed to ej2-react/code-snippet/pivot-table/getting-started-cs2/app/App.jsx

@@ -50,7 +50,7 @@ System.config({
         }
     },
     packages: {
-        'app': { main: 'index', defaultExtension: 'tsx' },
+        'app': { main: 'App', defaultExtension: 'tsx' },
     }
 
 });

ej2-react/code-snippet/pivot-table/getting-started-cs2/app/index.tsx renamed to ej2-react/code-snippet/pivot-table/getting-started-cs2/app/App.tsx

@@ -50,7 +50,7 @@ System.config({
         }
     },
     packages: {
-        'app': { main: 'index', defaultExtension: 'tsx' },
+        'app': { main: 'App', defaultExtension: 'tsx' },
     }
 
 });

ej2-react/code-snippet/pivot-table/getting-started-cs2/app/datasource.jsx

@@ -50,7 +50,7 @@ System.config({
         }
     },
     packages: {
-        'app': { main: 'index', defaultExtension: 'tsx' },
+        'app': { main: 'App', defaultExtension: 'tsx' },
     }
 
 });