From d8652bc378661bfd5d944f73a4c21b593d8cb9e4 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 4 Jul 2024 16:44:11 +0530 Subject: [PATCH] Integrated latest changes at 07-04-2024 4:30:08 PM --- .../columns/column-attribute/app/index.jsx | 2 +- .../columns/column-attribute/index.css | 1 + .../columns/column-attribute/index.html | 5 ++ .../columns/column-checkbox/app/index.jsx | 2 +- .../columns/column-checkbox/app/index.tsx | 2 +- .../columns/column-template/index.css | 25 ++++++ .../items/cssClass/app/index.jsx | 6 +- .../items/cssClass/index.css | 2 +- .../items/cssClass/index.html | 6 ++ .../items/enableAltRow/app/index.jsx | 6 +- .../items/gridLines/app/index.jsx | 6 +- .../items/rowHeight/app/index.jsx | 6 +- .../items/text/app/index.jsx | 6 +- .../sorting/sortOrder/app/index.jsx | 2 +- .../sorting/sortType/app/index.jsx | 6 +- .../templates/itemTemplate/index.css | 5 ++ .../templates/itemTemplate/index.html | 6 ++ .../virtualization/remotedata/app/index.jsx | 1 + .../pivot-table/react-preview/app/App.css | 12 +++ .../pivot-table/react-preview/app/App.jsx | 22 +++++ .../pivot-table/react-preview/app/App.tsx | 23 ++++++ .../react-preview/app/datasource.jsx | 17 ++++ .../react-preview/app/datasource.tsx | 17 ++++ .../pivot-table/react-preview/app/index.tsx | 13 +++ .../pivot-table/react-preview/index.css | 81 +++++++++++++++++++ .../pivot-table/react-preview/index.html | 49 +++++++++++ .../react-preview/systemjs.config.js | 60 ++++++++++++++ ej2-react/pivotview/aggregation.md | 4 - ej2-react/pivotview/data-binding.md | 2 - 29 files changed, 364 insertions(+), 31 deletions(-) create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/app/App.css create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/app/App.jsx create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/app/App.tsx create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/app/datasource.jsx create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/app/datasource.tsx create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/app/index.tsx create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/index.css create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/index.html create mode 100644 ej2-react/code-snippet/pivot-table/react-preview/systemjs.config.js diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/app/index.jsx index b772eea9c..f6356023d 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/app/index.jsx @@ -24,7 +24,7 @@ function App() { { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" }, { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" }, { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" }, - { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" }, + { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" } ]; // maps the appropriate column to fields property const fields = { text: 'Name', value: 'EmpID' }; diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.css b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.css index 64e7fb848..27d6dedcf 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.css +++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.css @@ -1,3 +1,4 @@ + /* Represents the styles for loader */ #loader { color: #008cff; diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.html b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.html index 8a8855929..942b8616e 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.html +++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-attribute/index.html @@ -15,6 +15,11 @@ + diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.jsx index ea746e58a..d2c570ff2 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.jsx @@ -33,7 +33,7 @@ function App() { return ( // specifies the tag for render the MultiColumn ComboBox component - + diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.tsx b/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.tsx index ea746e58a..d2c570ff2 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.tsx +++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-checkbox/app/index.tsx @@ -33,7 +33,7 @@ function App() { return ( // specifies the tag for render the MultiColumn ComboBox component - + diff --git a/ej2-react/code-snippet/multicolumn-combobox/columns/column-template/index.css b/ej2-react/code-snippet/multicolumn-combobox/columns/column-template/index.css index a0d4bfcdf..496983c00 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/columns/column-template/index.css +++ b/ej2-react/code-snippet/multicolumn-combobox/columns/column-template/index.css @@ -7,3 +7,28 @@ top: 45%; width: 30%; } + +.multicolumn-customize .ename { + opacity: .87; + font-size: 16px; + margin-top: 8px; +} + +.multicolumn-customize .country { + opacity: .87; + font-size: 16px; +} + +.multicolumn-customize .job { + opacity: .54; + font-size: 14px; + margin-top: 15px; + margin-bottom: 7px; +} + +.multicolumn-customize .empImage { + margin: 6px 16px; + float: left; + width: 50px; + height: 50px; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/app/index.jsx index eda13eb4e..d06f619e2 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/app/index.jsx @@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom'; function App() { // defined the array of object data - const empData: { [key: string]: Object }[] = [ + const empData = [ { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" }, { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" }, { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" }, @@ -27,9 +27,9 @@ function App() { { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" }, ]; // maps the appropriate column to fields property - const fields: Object = { text: 'Name', value: 'EmpID' }; + const fields = { text: 'Name', value: 'EmpID' }; // set text to multicolumn ComboBox input element - const text: string = 'Michael'; + const text = 'Michael'; return ( // specifies the tag for render the MultiColumn ComboBox component diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.css b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.css index 8c3fa1a37..47e85c66a 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.css +++ b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.css @@ -8,7 +8,7 @@ width: 30%; } -.e-input-group.e-custom-multi-column { +span.e-control-wrapper.e-custom-multi-column { color: #ab3243; background: #32a5ab; } \ No newline at end of file diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.html b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.html index 8a8855929..8d3bb2c05 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.html +++ b/ej2-react/code-snippet/multicolumn-combobox/items/cssClass/index.html @@ -15,6 +15,12 @@ + diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/enableAltRow/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/enableAltRow/app/index.jsx index ed2679479..25d4c2f85 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/items/enableAltRow/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/items/enableAltRow/app/index.jsx @@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom'; function App() { // defined the array of object data - const empData: { [key: string]: Object }[] = [ + const empData = [ { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" }, { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" }, { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" }, @@ -27,9 +27,9 @@ function App() { { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" }, ]; // maps the appropriate column to fields property - const fields: Object = { text: 'Name', value: 'EmpID' }; + const fields = { text: 'Name', value: 'EmpID' }; // set text to multicolumn ComboBox input element - const text: string = 'Michael'; + const text = 'Michael'; return ( // specifies the tag for render the MultiColumn ComboBox component diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/gridLines/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/gridLines/app/index.jsx index f96d17af5..91a7207c3 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/items/gridLines/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/items/gridLines/app/index.jsx @@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom'; function App() { // defined the array of object data - const empData: { [key: string]: Object }[] = [ + const empData = [ { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" }, { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" }, { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" }, @@ -27,9 +27,9 @@ function App() { { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" }, ]; // maps the appropriate column to fields property - const fields: Object = { text: 'Name', value: 'EmpID' }; + const fields = { text: 'Name', value: 'EmpID' }; // set text to multicolumn ComboBox input element - const text: string = 'Michael'; + const text = 'Michael'; return ( // specifies the tag for render the MultiColumn ComboBox component diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/rowHeight/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/rowHeight/app/index.jsx index d7b57e61a..e9cc9e09a 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/items/rowHeight/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/items/rowHeight/app/index.jsx @@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom'; function App() { // defined the array of object data - const empData: { [key: string]: Object }[] = [ + const empData = [ { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" }, { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" }, { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" }, @@ -27,9 +27,9 @@ function App() { { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" }, ]; // maps the appropriate column to fields property - const fields: Object = { text: 'Name', value: 'EmpID' }; + const fields = { text: 'Name', value: 'EmpID' }; // set text to multicolumn ComboBox input element - const text: string = 'Michael'; + const text = 'Michael'; return ( // specifies the tag for render the MultiColumn ComboBox component diff --git a/ej2-react/code-snippet/multicolumn-combobox/items/text/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/items/text/app/index.jsx index 29c61ff8b..497babc06 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/items/text/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/items/text/app/index.jsx @@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom'; function App() { // defined the array of object data - const empData: { [key: string]: Object }[] = [ + const empData = [ { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" }, { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" }, { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" }, @@ -27,9 +27,9 @@ function App() { { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" }, ]; // maps the appropriate column to fields property - const fields: Object = { text: 'Name', value: 'EmpID' }; + const fields = { text: 'Name', value: 'EmpID' }; // set text to multicolumn ComboBox input element - const text: string = 'Michael'; + const text = 'Michael'; return ( // specifies the tag for render the MultiColumn ComboBox component diff --git a/ej2-react/code-snippet/multicolumn-combobox/sorting/sortOrder/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/sorting/sortOrder/app/index.jsx index c036e8577..a7d1e97de 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/sorting/sortOrder/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/sorting/sortOrder/app/index.jsx @@ -1,4 +1,4 @@ -import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox'; +import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective, SortOrder } from '@syncfusion/ej2-react-multicolumn-combobox'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; diff --git a/ej2-react/code-snippet/multicolumn-combobox/sorting/sortType/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/sorting/sortType/app/index.jsx index 1e1a3b9a4..699321c0d 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/sorting/sortType/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/sorting/sortType/app/index.jsx @@ -1,6 +1,4 @@ - - -import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox'; +import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective, SortOrder} from '@syncfusion/ej2-react-multicolumn-combobox'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; @@ -48,5 +46,3 @@ function App() { ); } ReactDOM.render(, document.getElementById('multicolumn')); - - diff --git a/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.css b/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.css index 009af4861..a14f8bd62 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.css +++ b/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.css @@ -6,4 +6,9 @@ position: absolute; top: 45%; width: 30%; +} + +.name, .emp-id, .city { + border-bottom: 1px solid #e0e0e0; + padding: 6px 6px 4px 20px; } \ No newline at end of file diff --git a/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.html b/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.html index 8a8855929..67193b14c 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.html +++ b/ej2-react/code-snippet/multicolumn-combobox/templates/itemTemplate/index.html @@ -15,6 +15,12 @@ + diff --git a/ej2-react/code-snippet/multicolumn-combobox/virtualization/remotedata/app/index.jsx b/ej2-react/code-snippet/multicolumn-combobox/virtualization/remotedata/app/index.jsx index 780ad6f2b..785acf203 100644 --- a/ej2-react/code-snippet/multicolumn-combobox/virtualization/remotedata/app/index.jsx +++ b/ej2-react/code-snippet/multicolumn-combobox/virtualization/remotedata/app/index.jsx @@ -1,4 +1,5 @@ import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox'; +import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/App.css b/ej2-react/code-snippet/pivot-table/react-preview/app/App.css new file mode 100644 index 000000000..98c5fa9ca --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/app/App.css @@ -0,0 +1,12 @@ +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-base/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-buttons/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-calendars/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-dropdowns/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-grids/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-charts/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-inputs/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-lists/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-navigations/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-popups/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-splitbuttons/styles/material.css'); +@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-pivotview/styles/material.css'); \ No newline at end of file diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/App.jsx b/ej2-react/code-snippet/pivot-table/react-preview/app/App.jsx new file mode 100644 index 000000000..da7b138c1 --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/app/App.jsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview'; +import { pivotData } from './datasource'; +import './App.css'; + +function App() { + const dataSourceSettings = { + 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: 'State' }], + values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }] + }; + let pivotObj; + return ( pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}> + ); +}; + +export default App; diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/App.tsx b/ej2-react/code-snippet/pivot-table/react-preview/app/App.tsx new file mode 100644 index 000000000..f8f58dc9f --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/app/App.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview'; +import { pivotData } from './datasource'; +import './App.css'; + +function App() { + const dataSourceSettings: IDataOptions = { + 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: 'State' }], + values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Quantity', caption: 'Quantity' }] + }; + let pivotObj: PivotViewComponent; + return ( + pivotObj = d } height={350} dataSourceSettings={dataSourceSettings}> + ); +}; + +export default App; diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.jsx b/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.jsx new file mode 100644 index 000000000..45396c60d --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.jsx @@ -0,0 +1,17 @@ +export let pivotData = [ + { Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" }, + { Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" }, + { Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" }, + { Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" }, + { Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" }, + { Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" }, + { Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" }, + { Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" }, + { Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" }, + { Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" }, + { Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" }, + { Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" }, + { Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" }, + { Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" }, + { Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" }, +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.tsx b/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.tsx new file mode 100644 index 000000000..35f2ed7fe --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/app/datasource.tsx @@ -0,0 +1,17 @@ +export let pivotData: { [key: string]: Object }[] = [ + { Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" }, + { Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" }, + { Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" }, + { Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" }, + { Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" }, + { Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" }, + { Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" }, + { Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" }, + { Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" }, + { Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" }, + { Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" }, + { Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" }, + { Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" }, + { Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" }, + { Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" }, +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/pivot-table/react-preview/app/index.tsx b/ej2-react/code-snippet/pivot-table/react-preview/app/index.tsx new file mode 100644 index 000000000..0fe17b0dc --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/app/index.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); + +root.render( + + + +); \ No newline at end of file diff --git a/ej2-react/code-snippet/pivot-table/react-preview/index.css b/ej2-react/code-snippet/pivot-table/react-preview/index.css new file mode 100644 index 000000000..536bcca4d --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/index.css @@ -0,0 +1,81 @@ +#PivotViewFieldList { + width: 58%; + height: 100%; + float: left; +} + +.e-pivotfieldlist { + width: 42%; + height: 100%; + float: right; +} + +/* csslint ignore:start */ + +.e-pivotfieldlist .e-static { + width: 100% !important; +} + +/* csslint ignore:end */ + +.e-custom-class { + color: #008cff; + text-decoration: underline; +} + +.e-custom-class:hover { + color: red; + text-decoration: none; +} + +.e-pivotview .e-columnsheader .tempwrap { + display: none; +} +.e-pivotview .e-rowsheader .tempwrap { + display: none; +} + +/* csslint ignore:start */ +@font-face { + font-family: 'e-pivot'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjhUSmAAAAEoAAAAVmNtYXCs3q0zAAABkAAAAEpnbHlmdaItOwAAAegAAAE0aGVhZBRYEz0AAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQDAAHIAAAHcAAAACm1heHABDwBBAAABCAAAACBuYW1lc0cOBgAAAxwAAAIlcG9zdK9TctUAAAVEAAAARwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAT8kba18PPPUACwPoAAAAANin5zgAAAAA2KfnOAAAAAAD6gPoAAAACAACAAAAAAAAAAEAAAAEADUAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4jToTQNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQANgAAAAgACAACAADiNOI56E3//wAA4jTiOehN//8AAAAAAAAAAQAIAAgACAAAAAEAAwACAAAAAAAAACYAcgCaAAAAAQAAAAADTAPoABUAAAkBBhY7AREUFjsBMjY1ETMyNicBJiIB3f7KCw4SxxAMqgwQxhIPC/7FCBgD3/6tDyH9wAwQEAwCQCEPAVMJAAEAAAAAA+oDTAA0AAABMx8BAR8DDwMBDwMjLwwhLwE1NzUnPwEhPwQ1PwQCXgIFCQFxBAIEAgEDBAf+ogYKBQUEAwQDAwICAQIBAQYJCf3mAgEDAgEBAh4KCAQCAQICAgIDA0wBBf7VAwQJCQkJCQf+4QQGAgEBAQIDBAQFC50DBAQDAQICCuANAgECBQIDAqcMBQQDAQAAAQAAAAADTAPoABYAAAEGFREjIgYXARYyNwE2JisBETQmKwEiAYsIxhIPDAE5CRgJATUMDhPGEAyqDAPgCAz9wCEP/q0JCQFTDyECQAwQAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAcAAQABAAAAAAACAAcACAABAAAAAAADAAcADwABAAAAAAAEAAcAFgABAAAAAAAFAAsAHQABAAAAAAAGAAcAKAABAAAAAAAKACwALwABAAAAAAALABIAWwADAAEECQAAAAIAbQADAAEECQABAA4AbwADAAEECQACAA4AfQADAAEECQADAA4AiwADAAEECQAEAA4AmQADAAEECQAFABYApwADAAEECQAGAA4AvQADAAEECQAKAFgAywADAAEECQALACQBIyBlLWljb25zUmVndWxhcmUtaWNvbnNlLWljb25zVmVyc2lvbiAxLjBlLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAGkAYwBvAG4AcwBlAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQBAgEDAQQBBQADVXAxC2Fycm93LXJpZ2h0CURvd25fU29ydAAAAA==) format('truetype'); + font-weight: normal; + font-style: normal; +} + +.pv-icons { + font-family: 'e-pivot'; + font-style: normal; + font-variant: normal; + font-weight: normal; + text-transform: none; + line-height: 1; +} + +.sb-icon-profit::before { + content: '\e234'; + padding-left: 30px; + margin: auto !important; + color: #219122; + size: 20px; +} + +.sb-icon-neutral::before { + content: '\e84d'; + padding-left: 30px; + margin: auto !important; + color: #82b5e9; +} + +.sb-icon-loss::before { + content: '\e239'; + padding-left: 30px; + margin: auto !important; + color: #ff2222; +} + +/* csslint ignore:end */ +.e-tool-expand::before { + content: '\e702'; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/pivot-table/react-preview/index.html b/ej2-react/code-snippet/pivot-table/react-preview/index.html new file mode 100644 index 000000000..9b02f6ebe --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/index.html @@ -0,0 +1,49 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/pivot-table/react-preview/systemjs.config.js b/ej2-react/code-snippet/pivot-table/react-preview/systemjs.config.js new file mode 100644 index 000000000..964413a6d --- /dev/null +++ b/ej2-react/code-snippet/pivot-table/react-preview/systemjs.config.js @@ -0,0 +1,60 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + }, + 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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-pivotview": "syncfusion:ej2-pivotview/dist/ej2-pivotview.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-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-pivotview": "syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + "css": "https://cdn.jsdelivr.net/npm/systemjs-plugin-css@0.1.37/css.js" + }, + meta: { + '*.json': { loader: 'plugin-json' }, + 'typescript': { + "exports": "ts" + }, + '*.css': { loader: 'css' } + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/pivotview/aggregation.md b/ej2-react/pivotview/aggregation.md index c355b5a7b..0af9a7b5b 100644 --- a/ej2-react/pivotview/aggregation.md +++ b/ej2-react/pivotview/aggregation.md @@ -263,7 +263,3 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% endtabs %} {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs8" %} - -## See Also - -* [Excel-like Computation Types in PivotGrid](https://www.syncfusion.com/blogs/post/excel-like-computation-types-in-pivotgrid1) \ No newline at end of file diff --git a/ej2-react/pivotview/data-binding.md b/ej2-react/pivotview/data-binding.md index 8fd27b360..8dda52743 100644 --- a/ej2-react/pivotview/data-binding.md +++ b/ej2-react/pivotview/data-binding.md @@ -494,5 +494,3 @@ The event [`enginePopulating`](https://ej2.syncfusion.com/react/documentation/ap * [Customize number, date, and time values](./how-to/customize-number-date-and-time-values) * [Server Side Engine (Optional)](./server-side-pivot-engine) * [How to customize null values in Pivot Table?](https://support.syncfusion.com/kb/article/14432/how-to-customize-null-values-in-pivot-table) -* [Serializing & Deserializing Pivot Grid for WinForms](https://www.syncfusion.com/blogs/post/serializing-and-deserializing-the-pivot-grid-for-windows-forms) -* [PivotGrid Supports OLAP & Relational Data Sources](https://www.syncfusion.com/blogs/post/pivotgrid-now-supports-both-olap-and-relational-data-sources-within-the-same-grid) \ No newline at end of file