config(EJ2-000): V18.4.39 Released

Author: Saranya13

src/common/sample-list.tsx

@@ -67,7 +67,7 @@ export let samplesList: any = [
         'name': 'Data Grid', 'category': 'Grids', 'order': '03', 'path': 'grid', 'samples': GridSampleOrder, 'type': 'update'
     },
     {
-        'name': 'Pivot Table', 'category': 'Grids', 'order': '03', 'path': 'pivot-table', 'samples': PivotViewSampleOrder
+        'name': 'Pivot Table', 'category': 'Grids', 'order': '03', 'path': 'pivot-table', 'samples': PivotViewSampleOrder, 'type': 'update'
     },
     {
         'name': 'Tree Grid', 'category': 'Grids', 'order': '03', 'path': 'treegrid', 'samples': TreeGridSampleOrder, 'ftName' :'treegrid'

src/pivot-table/aggregation.tsx

@@ -44,7 +44,7 @@ export class Aggregation extends SampleBase<{}, {}> {
     private qData: { [key: string]: Object }[] = [
         { 'value': 'Max', 'text': 'Max' }, { 'value': 'Min', 'text': 'Min' },
         { 'value': 'Count', 'text': 'Count' }, { 'value': 'Sum', 'text': 'Sum' },
-        { 'value': 'Avg', 'text': 'Average' }, { 'value': 'DistinctCount', 'text': 'Distinct Count' },
+        { 'value': 'Avg', 'text': 'Average' }, { 'value': 'Median', 'text': 'Median' }, { 'value': 'DistinctCount', 'text': 'Distinct Count' },
         { 'value': 'Product', 'text': 'Product' }, { 'value': 'Index', 'text': 'Index' },
         { 'value': 'PopulationStDev', 'text': 'Population StDev' }, { 'value': 'SampleStDev', 'text': 'Sample StDev' },
         { 'value': 'RunningTotals', 'text': 'Running Totals' }, { 'value': 'DifferenceFrom', 'text': 'Difference From' },
@@ -56,7 +56,7 @@ export class Aggregation extends SampleBase<{}, {}> {
 
     private cData: { [key: string]: Object }[] = [
         { 'value': 'Max', 'text': 'Max' }, { 'value': 'Min', 'text': 'Min' },
-        { 'value': 'Sum', 'text': 'Sum' }, { 'value': 'Avg', 'text': 'Average' },
+        { 'value': 'Sum', 'text': 'Sum' }, { 'value': 'Avg', 'text': 'Average' }, { 'value': 'Median', 'text': 'Median' },
         { 'value': 'Product', 'text': 'Product' }, { 'value': 'Index', 'text': 'Index' },
         { 'value': 'PopulationStDev', 'text': 'Population StDev' }, { 'value': 'SampleStDev', 'text': 'Sample StDev' },
         { 'value': 'RunningTotals', 'text': 'Running Totals' }, { 'value': 'DifferenceFrom', 'text': 'Difference From' },
@@ -145,14 +145,14 @@ export class Aggregation extends SampleBase<{}, {}> {
 
                 </div>
                 <div id="action-description">
-                    <p>This sample demonstrates the aggregate types like sum, average, min, max, count, distinct count, and more in the pivot table for quick business analysis. End users can also change the aggregation type of each field bound to the value axis in the field list at runtime.</p>
+                    <p>This sample demonstrates the aggregate types like sum, average, median, min, max, count, distinct count, and more in the pivot table for quick business analysis. End users can also change the aggregation type of each field bound to the value axis in the field list at runtime.</p>
                 </div>
                 <div id="description">
                     <p>
                         In this sample, you can change the aggregate types for value fields using the dropdown list separately. The aggregate type can be set using the <code>type</code> property of the value field. The built-in aggregates are:
                     </p>
                     <p>
-                        <code>Sum</code>, <code>Average</code>, <code>Min</code>, <code>Max</code>, <code>Count</code>, <code>Distinct Count</code>, <code>Product</code>,
+                        <code>Sum</code>, <code>Average</code>, <code>Median</code>, <code>Min</code>, <code>Max</code>, <code>Count</code>, <code>Distinct Count</code>, <code>Product</code>,
                         <code>Index</code>, <code>Population StDev</code>, <code>Sample StDev</code>, <code>Population Var</code>, <code>Sample Var</code>, <code>Running Totals</code>,
                         <code>Difference From</code>, <code>% of Difference From</code>, <code>% of Grand Total</code>, <code>% of Column Total</code>, <code>% of Row Total</code>,
                         <code>% of Parent Total</code>, <code>% of Parent Column Total</code>, <code>% of Parent Row Total.</code>

src/pivot-table/config.tsx

@@ -21,7 +21,7 @@ export const PivotViewSampleOrder: Object = [
     { 'path': 'pivot-table/grouping', 'component': 'Grouping', 'description': 'This demo for Essential JS2 Pivot Table control demonstrate the grouping feature for date and number fields', 'name': 'Grouping', 'order': '04', 'category': 'User Interaction', 'api': '{"PivotViewComponent":["DataSource"] }' },
     { 'path': 'pivot-table/tool-bar', 'component': 'PivotToolbar', 'description': 'This demo for Essential JS2 Pivot Table control demonstrate the toolbar feature with pivot table and pivot chart', 'name': 'Toolbar', 'order': '04', 'category': 'User Interaction', 'api': '{"PivotViewComponent":["DataSource"] }' },
     { 'path': 'pivot-table/calculated-field', 'component': 'CalculatedFieldClass', 'description': 'This demo for Essential JS2 Pivot Table control shows calculated field, and it allows users to add calculated items', 'name': 'Calculated Field', 'order': '05', 'category': 'Formula', 'api': '{"PivotViewComponent":["DataSource"] }' },
-    { 'path': 'pivot-table/aggregation', 'component': 'Aggregation', 'description': 'This demo for Essential JS2 Pivot Table control shows different types of aggregation for value fields', 'name': 'Aggregation', 'order': '05', 'category': 'Formula', 'api': '{"PivotViewComponent":["DataSource"] }' },
+    { 'path': 'pivot-table/aggregation', 'component': 'Aggregation', 'description': 'This demo for Essential JS2 Pivot Table control shows different types of aggregation for value fields', 'name': 'Aggregation', 'order': '05', 'category': 'Formula', 'type': 'update', 'api': '{"PivotViewComponent":["DataSource"] }' },
     { 'path': 'pivot-table/sorting', 'component': 'Sorting', 'description': 'This demo for Essential JS2 Pivot Table control shows ordering(sorting) of fields either in ascending or descending order', 'name': 'Default Sorting', 'order': '06', 'category': 'Sorting', 'api': '{"PivotViewComponent":["DataSource"]}' },
     { 'path': 'pivot-table/value-sorting', 'component': 'ValueSorting', 'description': 'This demo for Essential JS2 Pivot Table control shows sorting values on column or row wise in ascending or descending order', 'name': 'Value Sorting', 'order': '06', 'category': 'Sorting', 'api': '{"PivotViewComponent":["DataSource"] }' },
     { 'path': 'pivot-table/filtering', 'component': 'Filtering', 'description': 'This demo for Essential JS2 Pivot Table control demonstrate member filtering of field headers either by including or excluding them', 'name': 'Default Filtering', 'order': '07', 'category': 'Filtering', 'api': '{"PivotViewComponent":["DataSource"]}' },

src/spreadsheet/cell-template.tsx

@@ -1,12 +1,12 @@
 import * as ReactDOM from 'react-dom';
 import * as React from 'react';
-import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, BeforeSelectEventArgs, CellStyleModel, RowsDirective, RowDirective, CellsDirective, RangesDirective, RangeDirective, CellDirective, getFormatFromType, ColumnDirective, CellRenderEventArgs, ScrollSettingsModel } from '@syncfusion/ej2-react-spreadsheet';
+import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, CellStyleModel, RowsDirective, RowDirective, CellsDirective, RangesDirective, RangeDirective, CellDirective, ColumnDirective, ScrollSettingsModel } from '@syncfusion/ej2-react-spreadsheet';
+import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
+import { RadioButtonComponent, ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { DropDownListComponent, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
+import { SelectionSettingsModel } from '@syncfusion/ej2-spreadsheet';
 import { SampleBase } from '../common/sample-base';
 import './spreadsheet.css';
-import { TextBox } from '@syncfusion/ej2-inputs';
-import { DatePicker } from '@syncfusion/ej2-calendars';
-import { RadioButton } from '@syncfusion/ej2-buttons';
-import { DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
 
 /**
  * CellTemplate sample
@@ -15,60 +15,74 @@ import { DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
 export class CellTemplate extends SampleBase<{}, {}> {
     public spreadsheet: SpreadsheetComponent;
     public scrollSettings: ScrollSettingsModel = { isFinite: true };
+    public selectionSettings: SelectionSettingsModel = { mode: 'None' };
     public boldCenter: CellStyleModel = { fontWeight: 'bold', textAlign: 'center' , fontSize: '12pt', verticalAlign: 'middle',
     textDecoration: 'underline'
 };
 
-    public onCreated(): void {
-        this.spreadsheet.cellFormat({ fontWeight: 'bold' }, 'B2:B9');
+    public nameTextbox(): JSX.Element {
+        return (
+            <TextBoxComponent placeholder="Name"></TextBoxComponent>
+        );
+    }
+
+    public dobTextbox(): JSX.Element {
+        return (
+            <TextBoxComponent placeholder="DOB"></TextBoxComponent>
+        );
     }
-    public beforeSelect(args: BeforeSelectEventArgs): void {
-        args.cancel = true;
+
+    public genderRadioButton(): JSX.Element {
+        return (
+            <div>
+                <RadioButtonComponent name="gender" value="male" label="Male"></RadioButtonComponent>
+                <RadioButtonComponent  name="gender" value="female" label="Female"></RadioButtonComponent>
+            </div>
+        );
+    }
+
+    public dropDownList(): JSX.Element {
+        let experience: string[] =  ['0 - 1 year', '1 - 3 years', '3 - 5 years', '5 - 10 years'];
+        return (
+            <DropDownListComponent placeholder="Experience" dataSource={experience}></DropDownListComponent>
+        );
+    }
+
+    public multiSelect(): JSX.Element {
+        let languages: string[] = ['JAVA', 'C#', 'SQL'];
+        return (
+            <MultiSelectComponent placeholder="Areas of Interest" showClearButton={false} dataSource={languages}></MultiSelectComponent>
+        );
     }
-    public beforeCellRender(args: CellRenderEventArgs): void {
-        if (this.spreadsheet.activeSheetIndex === 0) {
-            let target: HTMLInputElement = args.element.firstElementChild as HTMLInputElement;
-            switch (args.address) {
-                case 'B1':
-                    (args.element as HTMLTableCellElement).colSpan = 2;
-                    break;
-                case 'C2':
-                    new TextBox({ placeholder: 'Name' }, target);
-                    break;
-                case 'C3':
-                    new DatePicker({ placeholder: 'DOB',  }, target);
-                    break;
-                case 'C4':
-                    new RadioButton({ label: 'Male' }, args.element.firstElementChild.firstElementChild as HTMLInputElement);
-                    new RadioButton({ label: 'Female' }, args.element.firstElementChild.lastElementChild as HTMLInputElement);
-                    break;
-                case 'C5':
-                    let experience: string[] =  ['0 - 1 year', '1 - 3 years', '3 - 5 years', '5 - 10 years'];
-                    new DropDownList({
-                        placeholder: 'Experience',
-                        dataSource: experience
-                    }, target);
-                    break;
-                case 'C6':
-                    let languages: string[] = ['JAVA', 'C#', 'SQL'];
-                    new MultiSelect({
-                        showClearButton: false,
-                        placeholder: 'Areas of Interest',
-                        dataSource: languages
-                    }, target);
-                    break;
-                case 'C7':
-                    new TextBox({ placeholder: 'Mobile Number' }, target);
-                    break;
-                case 'C8':
-                    new TextBox({ placeholder: 'Email'}, target);
-                    break;
-                case 'C9':
-                    new TextBox(null, target);
-                    break;
-            }
-        }
 
+    public mobileNoTextbox(): JSX.Element {
+        return (
+            <TextBoxComponent placeholder="Mobile Number"></TextBoxComponent>
+        );
+    }
+
+    public emailTextbox(): JSX.Element {
+        return (
+            <TextBoxComponent placeholder="Email"></TextBoxComponent>
+        );
+    }
+
+    public textArea(): JSX.Element {
+        return (
+            <TextBoxComponent multiline={true}></TextBoxComponent>
+        );
+    }
+
+    public button(): JSX.Element {
+        return (
+            <ButtonComponent content="Add" style={{float:"right"}} cssClass="e-flat"></ButtonComponent>
+        );
+    }
+
+    public onCreated(): void {
+        this.spreadsheet.cellFormat({ fontWeight: 'bold' }, 'B2:B9');
+        // Merges B1 and C1 cells
+        this.spreadsheet.merge('B1:C1');
     }
 
     render() {
@@ -77,7 +91,7 @@ export class CellTemplate extends SampleBase<{}, {}> {
                 <div className='control-section spreadsheet-control'>
                     <SpreadsheetComponent showRibbon={false} showFormulaBar= {false} allowOpen= {false} allowSave= {false}
                         ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.onCreated.bind(this)} name= {'Candidates List'}
-                        beforeCellRender={this.beforeCellRender.bind(this)} beforeSelect={this.beforeSelect.bind(this)} scrollSettings={this.scrollSettings} >
+                        scrollSettings={this.scrollSettings} allowEditing={false} selectionSettings = {this.selectionSettings}>
                         <SheetsDirective>
                             <SheetDirective name='Registration Form' rowCount= {40} colCount= {30} showGridLines= {false}>
                                 <RowsDirective>
@@ -132,11 +146,15 @@ export class CellTemplate extends SampleBase<{}, {}> {
                                     <ColumnDirective width={350}></ColumnDirective>
                                 </ColumnsDirective>
                                 <RangesDirective>
-                                    <RangeDirective template='<input />' address='C2:C3'></RangeDirective>
-                                    <RangeDirective template= '<div><input type="radio" name="gender" value="male" /><input type="radio" name="gender" value="female"/></div>' address={'C4'}></RangeDirective>
-                                    <RangeDirective template='<input />' address='C5:C8'></RangeDirective>
-                                    <RangeDirective template='<textarea rows="3"/>' address={'C9'}></RangeDirective>
-                                    <RangeDirective template='<button class="e-btn e-flat" style="float:right">Add</button>' address={'C11'}></RangeDirective>
+                                    <RangeDirective template={this.nameTextbox} address='C2'></RangeDirective>
+                                    <RangeDirective template={this.dobTextbox} address='C3'></RangeDirective>
+                                    <RangeDirective template={this.genderRadioButton} address='C4'></RangeDirective>
+                                    <RangeDirective template={this.dropDownList} address='C5'></RangeDirective>
+                                    <RangeDirective template={this.multiSelect} address='C6'></RangeDirective>
+                                    <RangeDirective template={this.mobileNoTextbox} address='C7'></RangeDirective>
+                                    <RangeDirective template={this.emailTextbox} address='C8'></RangeDirective>
+                                    <RangeDirective template={this.textArea} address='C9'></RangeDirective>
+                                    <RangeDirective template={this.button} address='C11'></RangeDirective>
                                 </RangesDirective>
                             </SheetDirective>
                         </SheetsDirective>

src/spreadsheet/config.tsx

@@ -8,7 +8,7 @@ export const SpreadsheetSampleOrder: Object = [
     { 'path': 'spreadsheet/number-formatting', 'component': 'NumberFormatting', 'name': 'Number Formatting', 'order': '03', 'category': 'Formatting', 'api': '{"sheets": ["columns", "rows", "name", "selectedRange"], "rows": ["cells"],"cells": ["value", "formatCode"],"range":["dataSource","startCell"]}', 'description': 'This demo for Essential JS 2 Spreadsheet control shows the way of number formatting with minimum configuration.' },
     { 'path': 'spreadsheet/conditional-formatting', 'component': 'ConditionalFormatting', 'name': 'Conditional Formatting', 'order': '03', 'category': 'Formatting', 'api': '{"SpreadsheetComponent":["sheets","created" ] }', 'description': 'This example demonstrates about the conditional formatting features like highlight cell rules, data bars,color scales, and icon sets.' },
     { 'path': 'spreadsheet/sorting-and-filtering', 'component': 'SortingAndFiltering', 'name': 'Sorting and Filtering', 'order': '04', 'category': 'Data Analysis', 'api': '{"SpreadsheetComponent":["sheets","showFieldAsHeader","created" ] }', 'description': 'This demo for Essential JS 2 Spreadsheet control shows sorting and filtering feature in ascending and descending order.' },
-    { 'path': 'spreadsheet/chart', 'component': 'Chart', 'name': 'Chart', 'order': '05', 'type': 'new', 'category': 'Spreadsheet', 'api': '{"SpreadsheetComponent":["sheets","openUrl","saveUrl","created" ] }', 'description': 'This sample visualizes the data using chart feature by comparing the GDP of different countries with various years' },
-    { 'path': 'spreadsheet/image', 'component': 'Image', 'name': 'Image', 'order': '06', 'category': 'Spreadsheet', 'api': '{"SpreadsheetComponent":["sheets","showRibbon","showFormulaBar","created" ] }', 'description': 'This demo for Essential JS 2 Spreadsheet control shows image feature by using weekly Diet planner details.' },
+    { 'path': 'spreadsheet/chart', 'component': 'Chart', 'name': 'Chart', 'order': '05', 'type': 'new', 'category': 'Data Visualization', 'api': '{"SpreadsheetComponent":["sheets","openUrl","saveUrl","created" ] }', 'description': 'This sample visualizes the data using chart feature by comparing the GDP of different countries with various years' },
+    { 'path': 'spreadsheet/image', 'component': 'Image', 'name': 'Image', 'order': '06', 'category': 'Illustrations', 'api': '{"SpreadsheetComponent":["sheets","showRibbon","showFormulaBar","created" ] }', 'description': 'This demo for Essential JS 2 Spreadsheet control shows image feature by using weekly Diet planner details.' },
     { 'path': 'spreadsheet/cell-template', 'component': 'CellTemplate', 'name': 'Cell Template', 'order': '07', 'category': 'Templates', 'api': '{"SpreadsheetComponent":["sheets","showFieldAsHeader","created" ] }', 'description': 'This demo for Essential JS 2 Spreadsheet control shows cell template featurewith input components like TextBox, DropDownList,RadioButton, MultiSelect etc.' }
 ];

styles/index.css

@@ -2451,6 +2451,7 @@ RTE toolbar not visible in fullscreen
 }
 
 .sb-npm-btn {
+    display: none;
     background: #fff;
     border: 1px solid #3c78ef;
     border-radius: 3px;