Integrated latest changes at 06-10-2024 7:30:32 PM

Author: SyncfusionBuild

ej2-react-toc.html

@@ -896,6 +896,7 @@
 <li><a href="/ej2-react/document-editor/dialog">Dialog</a></li>
 <li><a href="/ej2-react/document-editor/right-to-left">RTL</a></li>
 <li><a href="/ej2-react/document-editor/chart">Chart</a></li>
+<li><a href="/ej2-react/document-editor/content-control">Content Control</a></li>
 <li><a href="/ej2-react/document-editor/restrict-editing">Restrict Editing</a></li>
 <li><a href="/ej2-react/document-editor/spell-check">SpellCheck</a></li>
 <li><a href="/ej2-react/document-editor/global-local">Globalization</a></li>

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

@@ -4,14 +4,14 @@ import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
 import { pivotData } from './datasource';
 function App() {
     const dataSourceSettings = {
-        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+        columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
         dataSource: pivotData,
         expandAll: false,
         filters: [],
         drilledMembers: [{ name: 'Country', items: ['France'] }],
         formatSettings: [{ name: 'Amount', format: 'C0' }],
-        rows: [{ name: 'Country' }, { name: 'Products' }],
-        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+        rows: [{ name: 'Country' }, { name: 'State' }],
+        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
     };
     let pivotObj;
     return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}>

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

@@ -6,14 +6,14 @@ import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-reac
 import { pivotData } from './datasource';
 function App() {
   const dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+    columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
     dataSource: pivotData as IDataSet[],
     expandAll: false,
     filters: [],
     drilledMembers: [{ name: 'Country', items: ['France'] }],
     formatSettings: [{ name: 'Amount', format: 'C0' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+    rows: [{ name: 'Country' }, { name: 'State' }],
+    values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
   };
   let pivotObj: PivotViewComponent;
   return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}>

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

@@ -4,14 +4,14 @@ import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
 import { pivotData } from './datasource';
 function App() {
     const dataSourceSettings = {
-        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+        columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
         dataSource: pivotData,
         expandAll: false,
         filters: [],
         drilledMembers: [{ name: 'Country', items: ['France'] }],
         formatSettings: [{ name: 'Amount', format: 'C0' }],
-        rows: [{ name: 'Country' }, { name: 'Products' }],
-        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+        rows: [{ name: 'Country' }, { name: 'State' }],
+        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
     };
     let pivotObj;
     return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}>

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

@@ -6,14 +6,14 @@ import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-reac
 import { pivotData } from './datasource';
 function App() {
   const dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+    columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
     dataSource: pivotData as IDataSet[],
     expandAll: false,
     filters: [],
     drilledMembers: [{ name: 'Country', items: ['France'] }],
     formatSettings: [{ name: 'Amount', format: 'C0' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+    rows: [{ name: 'Country' }, { name: 'State' }],
+    values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
   };
   let pivotObj: PivotViewComponent;
   return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}>

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

@@ -4,14 +4,14 @@ import { FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-piv
 import { pivotData } from './datasource';
 function App() {
     const dataSourceSettings = {
-        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+        columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
         dataSource: pivotData,
         expandAll: false,
         filters: [],
         drilledMembers: [{ name: 'Country', items: ['France'] }],
         formatSettings: [{ name: 'Amount', format: 'C0' }],
-        rows: [{ name: 'Country' }, { name: 'Products' }],
-        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+        rows: [{ name: 'Country' }, { name: 'State' }],
+        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
     };
     let pivotObj;
     return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} showFieldList={true}><Inject services={[FieldList]}/>

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

@@ -6,14 +6,14 @@ import { FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@
 import { pivotData } from './datasource';
 function App() {
   const dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+    columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
     dataSource: pivotData as IDataSet[],
     expandAll: false,
     filters: [],
     drilledMembers: [{ name: 'Country', items: ['France'] }],
     formatSettings: [{ name: 'Amount', format: 'C0' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+    rows: [{ name: 'Country' }, { name: 'State' }],
+    values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
   };
   let pivotObj: PivotViewComponent;
   return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} showFieldList={true}><Inject services={[FieldList]} />

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

@@ -4,13 +4,13 @@ import { Inject, PivotViewComponent, GroupingBar } from '@syncfusion/ej2-react-p
 import { pivotData } from './datasource';
 function App() {
     const dataSourceSettings = {
-        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+        columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
         dataSource: pivotData,
         expandAll: false,
         filters: [],
         formatSettings: [{ name: 'Amount', format: 'C0' }],
-        rows: [{ name: 'Country' }, { name: 'Products' }],
-        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+        rows: [{ name: 'Country' }, { name: 'State' }],
+        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
     };
     let pivotObj;
     return (<PivotViewComponent id='PivotView' height={350} dataSourceSettings={dataSourceSettings} showGroupingBar={true}><Inject services={[GroupingBar]}/>

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

@@ -6,13 +6,13 @@ import { IDataOptions, IDataSet, Inject, PivotViewComponent, GroupingBar } from
 import { pivotData } from './datasource';
 function App() {
   const dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+    columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
     dataSource: pivotData as IDataSet[],
     expandAll: false,
     filters: [],
     formatSettings: [{ name: 'Amount', format: 'C0' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+    rows: [{ name: 'Country' }, { name: 'State' }],
+    values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
   };
   let pivotObj: PivotViewComponent;
     return (<PivotViewComponent id='PivotView' height={350} dataSourceSettings={dataSourceSettings} showGroupingBar={true}><Inject services={[GroupingBar]} />

ej2-react/code-snippet/pivot-table/getting-started-cs3/app/App.jsx

@@ -4,14 +4,14 @@ import { CalculatedField, FieldList, Inject, PivotViewComponent } from '@syncfus
 import { pivotData } from './datasource';
 function App() {
     const dataSourceSettings = {
-        columns: [{ name: 'Year', caption: 'Production Year' }],
+        columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
         dataSource: pivotData,
         expandAll: false,
         filters: [{ name: 'Quarter' }],
         drilledMembers: [{ name: 'Country', items: ['France'] }],
         formatSettings: [{ name: 'Amount', format: 'C0' }],
-        rows: [{ name: 'Country' }, { name: 'Products' }],
-        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+        rows: [{ name: 'Country' }, { name: 'State' }],
+        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
     };
     let pivotObj;
     return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/>

ej2-react/code-snippet/pivot-table/getting-started-cs3/app/App.tsx

@@ -6,14 +6,14 @@ import { CalculatedField, FieldList, IDataOptions, IDataSet, Inject, PivotViewCo
 import { pivotData } from './datasource';
 function App() {
   const dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }],
+    columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
     dataSource: pivotData as IDataSet[],
     expandAll: false,
     filters: [{ name: 'Quarter' }],
     drilledMembers: [{ name: 'Country', items: ['France'] }],
     formatSettings: [{ name: 'Amount', format: 'C0' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+    rows: [{ name: 'Country' }, { name: 'State' }],
+    values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
   };
   let pivotObj: PivotViewComponent;
   return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/>

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

@@ -4,15 +4,15 @@ import { CalculatedField, FieldList, Inject, PivotViewComponent } from '@syncfus
 import { pivotData } from './datasource';
 function App() {
     const dataSourceSettings = {
-        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+        columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
         dataSource: pivotData,
         expandAll: false,
         filters: [],
         drilledMembers: [{ name: 'Country', items: ['France'] }],
         formatSettings: [{ name: 'Amount', format: 'C0' }],
-        rows: [{ name: 'Country' }, { name: 'Products' }],
-        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
-        calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
+        rows: [{ name: 'Country' }, { name: 'State' }],
+        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
+        calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Quantity)"' }]
     };
     let pivotObj;
     return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/>

ej2-react/code-snippet/pivot-table/getting-started-cs3/app/datasource.tsx

@@ -6,14 +6,14 @@ import { CalculatedField, FieldList, IDataOptions, IDataSet, Inject, PivotViewCo
 import { pivotData } from './datasource';
 function App() {
   const dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+    columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
     dataSource: pivotData as IDataSet[],
     expandAll: false,
     filters: [],
     drilledMembers: [{ name: 'Country', items: ['France'] }],
     formatSettings: [{ name: 'Amount', format: 'C0' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
+    rows: [{ name: 'Country' }, { name: 'State' }],
+    values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }, { name: 'Total', caption: 'Total Units', type: 'CalculatedField' }],
     calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
   };
   let pivotObj: PivotViewComponent;

ej2-react/code-snippet/pivot-table/getting-started-cs4/app/App.jsx

@@ -4,14 +4,14 @@ import { CalculatedField, FieldList, Inject, PivotViewComponent } from '@syncfus
 import { pivotData } from './datasource';
 function App() {
     const dataSourceSettings = {
-        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+        columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
         dataSource: pivotData,
         expandAll: false,
         filters: [],
         drilledMembers: [{ name: 'Country', items: ['France'] }],
         formatSettings: [{ name: 'Amount', format: 'C0' }],
-        rows: [{ name: 'Country' }, { name: 'Products' }],
-        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+        rows: [{ name: 'Country' }, { name: 'State' }],
+        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
     };
     let pivotObj;
     return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/>

ej2-react/code-snippet/pivot-table/getting-started-cs4/app/App.tsx

@@ -6,14 +6,14 @@ import { CalculatedField, FieldList, IDataOptions, IDataSet, Inject, PivotViewCo
 import { pivotData } from './datasource';
 function App() {
   const dataSourceSettings: IDataOptions = {
-    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
+    columns: [{ name: 'Date', caption: 'Date' }, { name: 'Product' }],
     dataSource: pivotData as IDataSet[],
     expandAll: false,
     filters: [],
     drilledMembers: [{ name: 'Country', items: ['France'] }],
     formatSettings: [{ name: 'Amount', format: 'C0' }],
-    rows: [{ name: 'Country' }, { name: 'Products' }],
-    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
+    rows: [{ name: 'Country' }, { name: 'State' }],
+    values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }]
   };
   let pivotObj: PivotViewComponent;
   return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true}><Inject services={[CalculatedField, FieldList]}/>

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

@@ -0,0 +1,48 @@
+import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
+import * as React from 'react';
+function App() {
+    let toolbarSettings = {
+        items: ['CreateTable']
+    };
+    let quickToolbarSettings = {
+        table: ['TableHeader', 'TableRows', 'TableColumns', 'TableCell', '-', 'BackgroundColor', 'TableRemove', 'TableCellVerticalAlign', 'Styles']
+    };
+    return (<RichTextEditorComponent height={450} toolbarSettings={toolbarSettings} quickToolbarSettings={quickToolbarSettings}>
+      <h2>Discover the Table's Powerful Features</h2><p>A table can be created in the editor using either a keyboard shortcut or the toolbar. With the quick
+        toolbar, you can
+        perform table cell insert, delete, split, and merge operations. You can style the table cells using
+        background
+        colours and borders.</p><table class="e-rte-table" style="width: 100%; min-width: 0px; height: 151px">
+        <thead>
+            <tr>
+                <th><span>Name</span><br/></th>
+                <th><span>Age</span><br/></th>
+                <th><span>Gender</span><br/></th>
+                <th><span>Occupation</span><br/></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Selma Rose</td>
+                <td>30</td>
+                <td>Female</td>
+                <td><span>Engineer</span><br/></td>
+            </tr>
+            <tr>
+                <td><span>Robert</span><br/></td>
+                <td>28</td>
+                <td>Male</td>
+                <td><span>Graphic Designer</span></td>
+            </tr>
+            <tr>
+                <td><span>William</span><br/></td>
+                <td>35</td>
+                <td>Male</td>
+                <td>Teacher</td>
+            </tr>
+        </tbody>
+      </table>
+      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table]}/>
+    </RichTextEditorComponent>);
+}
+export default App;

ej2-react/code-snippet/pivot-table/getting-started-cs4/app/datasource.tsx

@@ -0,0 +1,59 @@
+
+
+
+import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
+import * as React from 'react';
+
+function App() {
+  let toolbarSettings: object = {
+    items: ['CreateTable']
+  }
+  let quickToolbarSettings: object = {
+    table: ['TableHeader', 'TableRows', 'TableColumns', 'TableCell', '-', 'BackgroundColor', 'TableRemove', 'TableCellVerticalAlign', 'Styles']
+  }
+
+  return (
+    <RichTextEditorComponent height={450} toolbarSettings={toolbarSettings} quickToolbarSettings={quickToolbarSettings}>
+      <h2>Discover the Table's Powerful Features</h2><p>A table can be created in the editor using either a keyboard shortcut or the toolbar. With the quick
+        toolbar, you can
+        perform table cell insert, delete, split, and merge operations. You can style the table cells using
+        background
+        colours and borders.</p><table class="e-rte-table" style="width: 100%; min-width: 0px; height: 151px">
+        <thead>
+            <tr>
+                <th><span>Name</span><br/></th>
+                <th><span>Age</span><br/></th>
+                <th><span>Gender</span><br/></th>
+                <th><span>Occupation</span><br/></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Selma Rose</td>
+                <td>30</td>
+                <td>Female</td>
+                <td><span>Engineer</span><br/></td>
+            </tr>
+            <tr>
+                <td><span>Robert</span><br/></td>
+                <td>28</td>
+                <td>Male</td>
+                <td><span>Graphic Designer</span></td>
+            </tr>
+            <tr>
+                <td><span>William</span><br/></td>
+                <td>35</td>
+                <td>Male</td>
+                <td>Teacher</td>
+            </tr>
+        </tbody>
+      </table>  
+      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table]} />
+    </RichTextEditorComponent>
+  );
+}
+
+export default App;
+
+
+

ej2-react/code-snippet/pivot-table/getting-started-cs5/app/App.jsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App  from './App';
+
+ReactDOM.render(<App />, document.getElementById('sample'));