From e811edfe7447788ee7efff5bdd13e41df725eda1 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Tue, 18 Jun 2024 18:26:43 +0530 Subject: [PATCH 1/2] Integrated latest changes at 06-18-2024 4:31:19 PM --- .../gantt/tooltip-cs8/{app/image => }/1.svg | 0 .../gantt/tooltip-cs8/{app/image => }/2.svg | 0 .../gantt/tooltip-cs8/{app/image => }/3.svg | 0 .../gantt/tooltip-cs8/{app/image => }/4.svg | 0 .../gantt/tooltip-cs8/{app/image => }/5.svg | 0 .../gantt/tooltip-cs8/app/app.css | 17 -- .../gantt/tooltip-cs8/app/datasource.jsx | 105 ++++++++ .../gantt/tooltip-cs8/app/datasource.tsx | 106 +++++++- .../gantt/tooltip-cs8/app/index.jsx | 133 ++-------- .../gantt/tooltip-cs8/app/index.tsx | 128 +--------- .../spreadsheet/field-mapping-cs1/app/app.jsx | 98 ++++++++ .../spreadsheet/field-mapping-cs1/app/app.tsx | 98 ++++++++ .../spreadsheet/field-mapping-cs1/index.html | 36 +++ .../field-mapping-cs1/systemjs.config.js | 58 +++++ .../spreadsheet/readonly-cs1/app/app.jsx | 65 +++++ .../spreadsheet/readonly-cs1/app/app.tsx | 66 +++++ .../readonly-cs1/app/datasource.jsx | 235 ++++++++++++++++++ .../readonly-cs1/app/datasource.tsx | 235 ++++++++++++++++++ .../spreadsheet/readonly-cs1/index.html | 40 +++ .../readonly-cs1/systemjs.config.js | 58 +++++ ej2-react/spreadsheet/data-binding.md | 13 + ej2-react/spreadsheet/keyboard-shortcuts.md | 2 + ej2-react/spreadsheet/protect-sheet.md | 19 ++ 23 files changed, 1259 insertions(+), 253 deletions(-) rename ej2-react/code-snippet/gantt/tooltip-cs8/{app/image => }/1.svg (100%) rename ej2-react/code-snippet/gantt/tooltip-cs8/{app/image => }/2.svg (100%) rename ej2-react/code-snippet/gantt/tooltip-cs8/{app/image => }/3.svg (100%) rename ej2-react/code-snippet/gantt/tooltip-cs8/{app/image => }/4.svg (100%) rename ej2-react/code-snippet/gantt/tooltip-cs8/{app/image => }/5.svg (100%) create mode 100644 ej2-react/code-snippet/spreadsheet/field-mapping-cs1/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/field-mapping-cs1/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/field-mapping-cs1/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/field-mapping-cs1/systemjs.config.js create mode 100644 ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/readonly-cs1/app/datasource.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/readonly-cs1/app/datasource.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/readonly-cs1/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/readonly-cs1/systemjs.config.js diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/image/1.svg b/ej2-react/code-snippet/gantt/tooltip-cs8/1.svg similarity index 100% rename from ej2-react/code-snippet/gantt/tooltip-cs8/app/image/1.svg rename to ej2-react/code-snippet/gantt/tooltip-cs8/1.svg diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/image/2.svg b/ej2-react/code-snippet/gantt/tooltip-cs8/2.svg similarity index 100% rename from ej2-react/code-snippet/gantt/tooltip-cs8/app/image/2.svg rename to ej2-react/code-snippet/gantt/tooltip-cs8/2.svg diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/image/3.svg b/ej2-react/code-snippet/gantt/tooltip-cs8/3.svg similarity index 100% rename from ej2-react/code-snippet/gantt/tooltip-cs8/app/image/3.svg rename to ej2-react/code-snippet/gantt/tooltip-cs8/3.svg diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/image/4.svg b/ej2-react/code-snippet/gantt/tooltip-cs8/4.svg similarity index 100% rename from ej2-react/code-snippet/gantt/tooltip-cs8/app/image/4.svg rename to ej2-react/code-snippet/gantt/tooltip-cs8/4.svg diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/image/5.svg b/ej2-react/code-snippet/gantt/tooltip-cs8/5.svg similarity index 100% rename from ej2-react/code-snippet/gantt/tooltip-cs8/app/image/5.svg rename to ej2-react/code-snippet/gantt/tooltip-cs8/5.svg diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/app.css b/ej2-react/code-snippet/gantt/tooltip-cs8/app/app.css index 8fb020bea..e69de29bb 100644 --- a/ej2-react/code-snippet/gantt/tooltip-cs8/app/app.css +++ b/ej2-react/code-snippet/gantt/tooltip-cs8/app/app.css @@ -1,17 +0,0 @@ -.e-gantt .e-gantt-tree-grid-pane .e-timeline-single-header-outer-div{ - height: 70px !important; - } - .e-gantt .e-gantt-chart .e-timeline-single-header-outer-div { - height: 70px !important; - } - .e-gantt .e-gantt-chart .e-timeline-single-header-cell { - height: 70px !important; - } -.e-header-cell-label.e-gantt-top-cell-text{ - background-color: #fff -} -.fluent2-highcontrast .e-header-cell-label.e-gantt-top-cell-text, -.fluent-dark .e-header-cell-label.e-gantt-top-cell-text, -.fluent2-dark .e-header-cell-label.e-gantt-top-cell-text { - background-color: #000; -} \ No newline at end of file diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/datasource.jsx b/ej2-react/code-snippet/gantt/tooltip-cs8/app/datasource.jsx index e10805c88..c6f69e64b 100644 --- a/ej2-react/code-snippet/gantt/tooltip-cs8/app/datasource.jsx +++ b/ej2-react/code-snippet/gantt/tooltip-cs8/app/datasource.jsx @@ -22,3 +22,108 @@ export let data = [ ] }, ]; +export let timelineTemplateData = [ + { + TaskID: 1, + TaskName: 'Product Concept', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 }, + { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3 }, + { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 3, Predecessor: "2", Progress: 30 }, + ] + }, + { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: "3,4" }, + { + TaskID: 6, + TaskName: 'Market Research', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 7, + TaskName: 'Demand Analysis', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", Progress: 30 }, + { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5" } + ] + }, + { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "7,8", Progress: 30 }, + { TaskID: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "9" }, + { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "10" } + ] + }, + { + TaskID: 13, + TaskName: 'Product Design and Development', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30 }, + { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 5 }, + { TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 }, + { TaskID: 17, TaskName: 'Identifying raw materials ', StartDate: new Date('04/04/2019'), Duration: 4 }, + { + TaskID: 18, + TaskName: 'Define cost plan', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 1, Progress: 30 }, + { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 1 } + ] + }, + { + TaskID: 21, + TaskName: 'Development of the final design', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 }, + { TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 3 }, + { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 5 } + ] + }, + { TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30 }, + { TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 10 } + ] + }, + { TaskID: 27, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 12, Progress: 30 }, + { TaskID: 28, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 5 }, + { TaskID: 29, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 9, Progress: 30 }, + { TaskID: 30, TaskName: 'Assembling materials to finished goods', StartDate: new Date('04/04/2019'), Duration: 12 }, + { + TaskID: 31, + TaskName: 'Feedback and Testing', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 32, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 }, + { TaskID: 33, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30 } + ] + }, + { + TaskID: 34, + TaskName: 'Product Development', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 35, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 }, + { TaskID: 36, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 } + ] + }, + { + TaskID: 37, + TaskName: 'Final Product', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 38, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 5 }, + { TaskID: 39, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30 } + ] + } + ]; + \ No newline at end of file diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/datasource.tsx b/ej2-react/code-snippet/gantt/tooltip-cs8/app/datasource.tsx index fab8c3630..1b49aa9cf 100644 --- a/ej2-react/code-snippet/gantt/tooltip-cs8/app/datasource.tsx +++ b/ej2-react/code-snippet/gantt/tooltip-cs8/app/datasource.tsx @@ -21,4 +21,108 @@ export let data: Object[] = [ { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 } ] }, -]; \ No newline at end of file +]; +export let timelineTemplateData: object[] = [ + { + TaskID: 1, + TaskName: 'Product Concept', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 }, + { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3 }, + { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 3, Predecessor: "2", Progress: 30 }, + ] + }, + { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: "3,4" }, + { + TaskID: 6, + TaskName: 'Market Research', + StartDate: new Date('04/02/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { + TaskID: 7, + TaskName: 'Demand Analysis', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", Progress: 30 }, + { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5" } + ] + }, + { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "7,8", Progress: 30 }, + { TaskID: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "9" }, + { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "10" } + ] + }, + { + TaskID: 13, + TaskName: 'Product Design and Development', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30 }, + { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 5 }, + { TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 }, + { TaskID: 17, TaskName: 'Identifying raw materials ', StartDate: new Date('04/04/2019'), Duration: 4 }, + { + TaskID: 18, + TaskName: 'Define cost plan', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 1, Progress: 30 }, + { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 1 } + ] + }, + { + TaskID: 21, + TaskName: 'Development of the final design', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 }, + { TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 3 }, + { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 5 } + ] + }, + { TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30 }, + { TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 10 } + ] + }, + { TaskID: 27, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 12, Progress: 30 }, + { TaskID: 28, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 5 }, + { TaskID: 29, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 9, Progress: 30 }, + { TaskID: 30, TaskName: 'Assembling materials to finished goods', StartDate: new Date('04/04/2019'), Duration: 12 }, + { + TaskID: 31, + TaskName: 'Feedback and Testing', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 32, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 }, + { TaskID: 33, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30 } + ] + }, + { + TaskID: 34, + TaskName: 'Product Development', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 35, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 }, + { TaskID: 36, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 } + ] + }, + { + TaskID: 37, + TaskName: 'Final Product', + StartDate: new Date('04/04/2019'), + EndDate: new Date('04/21/2019'), + subtasks: [ + { TaskID: 38, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 5 }, + { TaskID: 39, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30 } + ] + } + ]; \ No newline at end of file diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.jsx b/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.jsx index 613de2661..15742df00 100644 --- a/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.jsx +++ b/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.jsx @@ -1,115 +1,10 @@ -export let timelineTemplateData = [ - { - TaskID: 1, - TaskName: 'Product Concept', - StartDate: new Date('04/02/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 }, - { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3 }, - { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 3, Predecessor: "2", Progress: 30 }, - ] - }, - { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: "3,4" }, - { - TaskID: 6, - TaskName: 'Market Research', - StartDate: new Date('04/02/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { - TaskID: 7, - TaskName: 'Demand Analysis', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", Progress: 30 }, - { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5" } - ] - }, - { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "7,8", Progress: 30 }, - { TaskID: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "9" }, - { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "10" } - ] - }, - { - TaskID: 13, - TaskName: 'Product Design and Development', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30 }, - { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 5 }, - { TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 }, - { TaskID: 17, TaskName: 'Identifying raw materials ', StartDate: new Date('04/04/2019'), Duration: 4 }, - { - TaskID: 18, - TaskName: 'Define cost plan', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 1, Progress: 30 }, - { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 1 } - ] - }, - { - TaskID: 21, - TaskName: 'Development of the final design', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 }, - { TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 3 }, - { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 5 } - ] - }, - { TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30 }, - { TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 10 } - ] - }, - { TaskID: 27, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 12, Progress: 30 }, - { TaskID: 28, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 5 }, - { TaskID: 29, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 9, Progress: 30 }, - { TaskID: 30, TaskName: 'Assembling materials to finished goods', StartDate: new Date('04/04/2019'), Duration: 12 }, - { - TaskID: 31, - TaskName: 'Feedback and Testing', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 32, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 }, - { TaskID: 33, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30 } - ] - }, - { - TaskID: 34, - TaskName: 'Product Development', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 35, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 }, - { TaskID: 36, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 } - ] - }, - { - TaskID: 37, - TaskName: 'Final Product', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 38, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 5 }, - { TaskID: 39, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30 } - ] - } -]; import * as React from 'react'; -import { useRef } from 'react'; import * as ReactDOM from 'react-dom'; -import { GanttComponent, Inject, Selection, DayMarkers, ColumnsDirective, ColumnDirective, HolidaysDirective, HolidayDirective } from '@syncfusion/ej2-react-gantt'; -import "./app.css" +import { GanttComponent, Inject, Selection, DayMarkers, ColumnsDirective, ColumnDirective, HolidaysDirective, HolidayDirective } from '@syncfusion/ej2-react-gantt' +import {timelineTemplateData} from './datasource' function App() { - let ganttInstance = null; + let ganttInstance ; const taskFields = { id: 'TaskID', name: 'TaskName', @@ -124,8 +19,8 @@ function App() { return "#7BD3EA" } const parsedDate = new Date(date); - for (let i = 0; i < ganttInstance.current.holidays.length; i++) { - const holiday = ganttInstance.current.holidays[i]; + for (let i = 0; i < ganttInstance.holidays.length; i++) { + const holiday = ganttInstance.holidays[i]; const fromDate = new Date(holiday.from); const toDate = new Date(holiday.to) if (parsedDate >= fromDate && parsedDate <= toDate) { @@ -136,14 +31,14 @@ function App() { }; const imagedate = () => { const getImage = Math.floor(Math.random() * 5) + 1; - return "./image/" + getImage + ".svg"; + return getImage + ".svg"; } const holidayValue = (value, date) => { const parsedDate = new Date(date); - for (let i = 0; i < ganttInstance.current.holidays.length; i++) { - const holiday = ganttInstance.current.holidays[i]; + for (let i = 0; i < ganttInstance.holidays.length; i++) { + const holiday = ganttInstance.holidays[i]; const fromDate = new Date(holiday.from); const toDate = new Date(holiday.to) if (parsedDate >= fromDate && parsedDate <= toDate) { @@ -171,8 +66,8 @@ function App() {
{props.value}
ganttInstance = g} dataSource={timelineTemplateData} timelineTemplate={timelineTemplate} splitterSettings={splitterSettings} taskFields={taskFields} height='550px' projectStartDate={projectStartDate} projectEndDate={projectEndDate} timelineSettings={timelineSettings} - timelineTemplate={timelineTemplate} labelSettings={labelSettings} treeColumnIndex={1}> + labelSettings={labelSettings} treeColumnIndex={1}> diff --git a/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.tsx b/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.tsx index ea2d7ada1..8b0975921 100644 --- a/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.tsx +++ b/ej2-react/code-snippet/gantt/tooltip-cs8/app/index.tsx @@ -1,115 +1,11 @@ -export let timelineTemplateData: object[] = [ - { - TaskID: 1, - TaskName: 'Product Concept', - StartDate: new Date('04/02/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 }, - { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3 }, - { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 3, Predecessor: "2", Progress: 30 }, - ] - }, - { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: "3,4" }, - { - TaskID: 6, - TaskName: 'Market Research', - StartDate: new Date('04/02/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { - TaskID: 7, - TaskName: 'Demand Analysis', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", Progress: 30 }, - { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5" } - ] - }, - { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "7,8", Progress: 30 }, - { TaskID: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "9" }, - { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "10" } - ] - }, - { - TaskID: 13, - TaskName: 'Product Design and Development', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30 }, - { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 5 }, - { TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 }, - { TaskID: 17, TaskName: 'Identifying raw materials ', StartDate: new Date('04/04/2019'), Duration: 4 }, - { - TaskID: 18, - TaskName: 'Define cost plan', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 1, Progress: 30 }, - { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 1 } - ] - }, - { - TaskID: 21, - TaskName: 'Development of the final design', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 }, - { TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 3 }, - { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 5 } - ] - }, - { TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30 }, - { TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 10 } - ] - }, - { TaskID: 27, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 12, Progress: 30 }, - { TaskID: 28, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 5 }, - { TaskID: 29, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 9, Progress: 30 }, - { TaskID: 30, TaskName: 'Assembling materials to finished goods', StartDate: new Date('04/04/2019'), Duration: 12 }, - { - TaskID: 31, - TaskName: 'Feedback and Testing', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 32, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 }, - { TaskID: 33, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30 } - ] - }, - { - TaskID: 34, - TaskName: 'Product Development', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 35, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 }, - { TaskID: 36, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 } - ] - }, - { - TaskID: 37, - TaskName: 'Final Product', - StartDate: new Date('04/04/2019'), - EndDate: new Date('04/21/2019'), - subtasks: [ - { TaskID: 38, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 5 }, - { TaskID: 39, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30 } - ] - } -]; import * as React from 'react'; import { useRef } from 'react'; import * as ReactDOM from 'react-dom'; import { GanttComponent, Inject, Selection, DayMarkers, ColumnsDirective, ColumnDirective, HolidaysDirective, HolidayDirective } from '@syncfusion/ej2-react-gantt'; -import "./app.css" +import {timelineTemplateData} from './datasource' function App() { - let ganttInstance :any = useRef(null); + let ganttInstance :any ; const taskFields: any = { id: 'TaskID', name: 'TaskName', @@ -124,8 +20,8 @@ function App() { return "#7BD3EA" } const parsedDate = new Date(date); - for (let i = 0; i < ganttInstance.current.holidays.length; i++) { - const holiday = ganttInstance.current.holidays[i]; + for (let i = 0; i < ganttInstance.holidays.length; i++) { + const holiday = ganttInstance.holidays[i]; const fromDate = new Date(holiday.from); const toDate = new Date(holiday.to) if (parsedDate >= fromDate && parsedDate <= toDate) { @@ -142,8 +38,8 @@ function App() { const holidayValue = (value: string, date: string): string => { const parsedDate = new Date(date); - for (let i = 0; i < ganttInstance.current.holidays.length; i++) { - const holiday = ganttInstance.current.holidays[i]; + for (let i = 0; i < ganttInstance.holidays.length; i++) { + const holiday = ganttInstance.holidays[i]; const fromDate = new Date(holiday.from); const toDate = new Date(holiday.to) if (parsedDate >= fromDate && parsedDate <= toDate) { @@ -171,8 +67,8 @@ function App() {
{props.value}
ganttInstance = g} dataSource={timelineTemplateData} timelineTemplate={timelineTemplate} splitterSettings={splitterSettings} taskFields={taskFields} height='550px' projectStartDate={projectStartDate} projectEndDate={projectEndDate} timelineSettings={timelineSettings} - timelineTemplate={timelineTemplate} labelSettings={labelSettings} treeColumnIndex={1}> + labelSettings={labelSettings} treeColumnIndex={1}> diff --git a/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/app/app.jsx b/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/app/app.jsx new file mode 100644 index 000000000..1e209dbdc --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/app/app.jsx @@ -0,0 +1,98 @@ +{% raw %} +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet'; + +function App() { + const data = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + } + ]; + const fieldsOrder = ['Customer Name', 'Payment Mode', 'Model', 'Color', 'Amount', 'Delivery Date']; + return ( + + + + + + + + + + + + + + + + + + ); +}; +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/app/app.tsx b/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/app/app.tsx new file mode 100644 index 000000000..1b4775979 --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/app/app.tsx @@ -0,0 +1,98 @@ +{% raw %} +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet'; + +function App() { + const data: object[] = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + } + ]; + const fieldsOrder: string[] = ['Customer Name', 'Payment Mode', 'Model', 'Color', 'Amount', 'Delivery Date']; + return ( + + + + + + + + + + + + + + + + + + ); +}; +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/index.html b/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/index.html new file mode 100644 index 000000000..86f3c0bdd --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/systemjs.config.js b/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/systemjs.config.js new file mode 100644 index 000000000..c9bd65c8d --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/field-mapping-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + 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-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.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-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.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", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.jsx b/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.jsx new file mode 100644 index 000000000..f8ed8a889 --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.jsx @@ -0,0 +1,65 @@ +{% raw %} +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet'; +import { data } from './datasource'; +function App() { + const spreadsheetRef = React.useRef(null); + const readOnlyRow = () => { + let spreadsheet = spreadsheetRef.current; + spreadsheet.setRangeReadOnly(true, '2:2', spreadsheet.activeSheetIndex); + } + const readOnlyCol = () => { + let spreadsheet = spreadsheetRef.current; + spreadsheet.setRangeReadOnly(true, 'A:A', spreadsheet.activeSheetIndex); + } + const readOnlyCell = () => { + let spreadsheet = spreadsheetRef.current; + spreadsheet.setRangeReadOnly(true, 'E5:E5', spreadsheet.activeSheetIndex); + } + const removeReadOnly = () => { + let spreadsheet = spreadsheetRef.current; + spreadsheet.setRangeReadOnly(false, '2:2', spreadsheet.activeSheetIndex); + spreadsheet.setRangeReadOnly(false, 'A:A', spreadsheet.activeSheetIndex); + spreadsheet.setRangeReadOnly(false, 'E5:E5', spreadsheet.activeSheetIndex); + } + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); +{% endraw %} diff --git a/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.tsx b/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.tsx new file mode 100644 index 000000000..bcdcbe362 --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/app.tsx @@ -0,0 +1,66 @@ +{% raw %} +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet'; +import { data } from './datasource'; +function App() { + const spreadsheetRef = React.useRef(null); + const readOnlyRow = (): void => { + let spreadsheet: SpreadsheetComponent = spreadsheetRef.current; + spreadsheet.setRangeReadOnly(true, '2:2', spreadsheet.activeSheetIndex); + } + const readOnlyCol = (): void => { + let spreadsheet: SpreadsheetComponent = spreadsheetRef.current; + spreadsheet.setRangeReadOnly(true, 'A:A', spreadsheet.activeSheetIndex); + } + const readOnlyCell = (): void => { + let spreadsheet: SpreadsheetComponent = spreadsheetRef.current; + spreadsheet.setRangeReadOnly(true, 'E5:E5', spreadsheet.activeSheetIndex); + } + const removeReadOnly = (): void => { + let spreadsheet: SpreadsheetComponent = spreadsheetRef.current; + spreadsheet.setRangeReadOnly(false, '2:2', spreadsheet.activeSheetIndex); + spreadsheet.setRangeReadOnly(false, 'A:A', spreadsheet.activeSheetIndex); + spreadsheet.setRangeReadOnly(false, 'E5:E5', spreadsheet.activeSheetIndex); + + } + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); +{% endraw %} diff --git a/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/datasource.jsx b/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/datasource.jsx new file mode 100644 index 000000000..1e8591643 --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/datasource.jsx @@ -0,0 +1,235 @@ + +export let data = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/datasource.tsx b/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/datasource.tsx new file mode 100644 index 000000000..a01e9e6f1 --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/readonly-cs1/app/datasource.tsx @@ -0,0 +1,235 @@ + +export let data: Object[] = [ + { + "Customer Name": "Romona Heaslip", + "Model": "Taurus", + "Color": "Aquamarine", + "Payment Mode": "Debit Card", + "Delivery Date": "07/11/2015", + "Amount": "8529.22" + }, + { + "Customer Name": "Clare Batterton", + "Model": "Sparrow", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/13/2016", + "Amount": "17866.19" + }, + { + "Customer Name": "Eamon Traise", + "Model": "Grand Cherokee", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "09/04/2015", + "Amount": "13853.09" + }, + { + "Customer Name": "Julius Gorner", + "Model": "GTO", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/15/2017", + "Amount": "2338.74" + }, + { + "Customer Name": "Jenna Schoolfield", + "Model": "LX", + "Color": "Yellow", + "Payment Mode": "Credit Card", + "Delivery Date": "10/08/2014", + "Amount": "9578.45" + }, + { + "Customer Name": "Marylynne Harring", + "Model": "Catera", + "Color": "Green", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "7/01/2017", + "Amount": "19141.62" + }, + { + "Customer Name": "Vilhelmina Leipelt", + "Model": "7 Series", + "Color": "Goldenrod", + "Payment Mode": "Credit Card", + "Delivery Date": "12/20/2015", + "Amount": "6543.30" + }, + { + "Customer Name": "Barby Heisler", + "Model": "Corvette", + "Color": "Red", + "Payment Mode": "Credit Card", + "Delivery Date": "11/24/2014", + "Amount": "13035.06" + }, + { + "Customer Name": "Karyn Boik", + "Model": "Regal", + "Color": "Indigo", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2014", + "Amount": "18488.80" + }, + { + "Customer Name": "Jeanette Pamplin", + "Model": "S4", + "Color": "Fuscia", + "Payment Mode": "Net Banking", + "Delivery Date": "12/30/2014", + "Amount": "12317.04" + }, + { + "Customer Name": "Cristi Espinos", + "Model": "TL", + "Color": "Aquamarine", + "Payment Mode": "Credit Card", + "Delivery Date": "12/18/2013", + "Amount": "6230.13" + }, + { + "Customer Name": "Issy Humm", + "Model": "Club Wagon", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "02/02/2015", + "Amount": "9709.49" + }, + { + "Customer Name": "Tuesday Fautly", + "Model": "V8 Vantage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "11/19/2014", + "Amount": "9766.10" + }, + { + "Customer Name": "Rosemaria Thomann", + "Model": "Caravan", + "Color": "Violet", + "Payment Mode": "Net Banking", + "Delivery Date": "02/08/2014", + "Amount": "7685.49" + }, + { + "Customer Name": "Lyell Fuentez", + "Model": "Bravada", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "08/05/2016", + "Amount": "18012.45" + }, + { + "Customer Name": "Raynell Layne", + "Model": "Colorado", + "Color": "Pink", + "Payment Mode": "Credit Card", + "Delivery Date": "05/30/2016", + "Amount": "2785.49" + }, + { + "Customer Name": "Raye Whines", + "Model": "4Runner", + "Color": "Red", + "Payment Mode": "Debit Card", + "Delivery Date": "12/10/2016", + "Amount": "9967.74" + }, + { + "Customer Name": "Virgina Aharoni", + "Model": "TSX", + "Color": "Pink", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/23/2014", + "Amount": "5584.33" + }, + { + "Customer Name": "Peta Cheshir", + "Model": "Pathfinder", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "12/24/2015", + "Amount": "5286.53" + }, + { + "Customer Name": "Jule Urion", + "Model": "Charger", + "Color": "Violet", + "Payment Mode": "Debit Card", + "Delivery Date": "11/20/2013", + "Amount": "13511.91" + }, + { + "Customer Name": "Lew Gilyatt", + "Model": "Bonneville", + "Color": "Crimson", + "Payment Mode": "Credit Card", + "Delivery Date": "11/19/2013", + "Amount": "6498.19" + }, + { + "Customer Name": "Jobey Fortun", + "Model": "B-Series", + "Color": "Blue", + "Payment Mode": "Net Banking", + "Delivery Date": "10/30/2014", + "Amount": "10359.67" + }, + { + "Customer Name": "Blondie Crump", + "Model": "Voyager", + "Color": "Turquoise", + "Payment Mode": "Credit Card", + "Delivery Date": "04/06/2018", + "Amount": "8118.39" + }, + { + "Customer Name": "Florentia Binns", + "Model": "Grand Prix", + "Color": "Orange", + "Payment Mode": "Cash On Delivery", + "Delivery Date": "10/13/2016", + "Amount": "10204.37" + }, + { + "Customer Name": "Jaquelin Galtone", + "Model": "Sunbird", + "Color": "Red", + "Payment Mode": "Net Banking", + "Delivery Date": "10/22/2013", + "Amount": "6528.06" + }, + { + "Customer Name": "Hakeem Easseby", + "Model": "Mirage", + "Color": "Crimson", + "Payment Mode": "Debit Card", + "Delivery Date": "9/12/2014", + "Amount": "5619.25" + }, + { + "Customer Name": "Nickolaus Gidman", + "Model": "XK", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "05/12/2016", + "Amount": "5091.43" + }, + { + "Customer Name": "Jenine Iglesia", + "Model": "Accord", + "Color": "Orange", + "Payment Mode": "Debit Card", + "Delivery Date": "09/03/2018", + "Amount": "14566.08" + }, + { + "Customer Name": "Fax Witherspoon", + "Model": "Range Rover Sport", + "Color": "Orange", + "Payment Mode": "Credit Card", + "Delivery Date": "2/22/2018", + "Amount": "5284.87" + } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/readonly-cs1/index.html b/ej2-react/code-snippet/spreadsheet/readonly-cs1/index.html new file mode 100644 index 000000000..b278908a1 --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/readonly-cs1/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
+
Loading....
+
+ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/spreadsheet/readonly-cs1/systemjs.config.js b/ej2-react/code-snippet/spreadsheet/readonly-cs1/systemjs.config.js new file mode 100644 index 000000000..c9bd65c8d --- /dev/null +++ b/ej2-react/code-snippet/spreadsheet/readonly-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + 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-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.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-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.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", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/spreadsheet/data-binding.md b/ej2-react/spreadsheet/data-binding.md index 1556331ae..8c0ffaa67 100644 --- a/ej2-react/spreadsheet/data-binding.md +++ b/ej2-react/spreadsheet/data-binding.md @@ -49,6 +49,19 @@ By default, when a data source is bound to a sheet, columns are auto-assigned fr > You can customize the mapping of column data only in the local data binding support. +The following code example demonstrates how to customize the mapping of column data: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/field-mapping-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/field-mapping-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/field-mapping-cs1" %} + ## Remote data To bind remote data to the Spreadsheet control, assign service data as an instance of [`DataManager`](../data) to the `dataSource` property. To interact with remote data source, provide the service endpoint `url`. diff --git a/ej2-react/spreadsheet/keyboard-shortcuts.md b/ej2-react/spreadsheet/keyboard-shortcuts.md index dd0afb085..959887fcd 100644 --- a/ej2-react/spreadsheet/keyboard-shortcuts.md +++ b/ej2-react/spreadsheet/keyboard-shortcuts.md @@ -16,6 +16,7 @@ The keyboard shortcuts supported in the spreadsheet are, |----------|-------------| | Ctrl + O | Displays dialog to open a file. | | Ctrl + S / Alt + F2 | Saves the workbook. | +| Ctrl + P | Print the active worksheet when the spreadsheet is in focus. | | F2 | Enables edit mode. | | ESC | Cancel edit mode and discard the changes. | | Backspace and SPACE | Clears content of the active cell and enables edit mode. | @@ -63,6 +64,7 @@ The keyboard shortcuts supported in the spreadsheet are, | Alt + Up | Close the list data validation menu and filter menu. | | Delete | Remove the contents of the cell. | | Shift + F11 | Add a new sheet. | +| Shift + F2 | Open the dialog box to add or edit notes for the desired cells. Meanwhile, upon pressing the `Esc` key, the dialog box for notes, when in focus, will save and close. | | Ctrl + Shift + 9 | Unhide the selected rows. | | Ctrl + Shift + 0 | Unhide the selected columns. | | Ctrl + D | Fill the cell down. | diff --git a/ej2-react/spreadsheet/protect-sheet.md b/ej2-react/spreadsheet/protect-sheet.md index 3b2820627..cf4668f02 100644 --- a/ej2-react/spreadsheet/protect-sheet.md +++ b/ej2-react/spreadsheet/protect-sheet.md @@ -149,6 +149,25 @@ You can make the cells read-only in the cell data binding by setting the `isRead ``` +The following example demonstrates how to make rows, columns, and cells read-only without protecting the sheet: + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/readonly-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/readonly-cs1/app/app.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/spreadsheet/readonly-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/spreadsheet/readonly-cs1/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/spreadsheet/readonly-cs1" %} + ## Protect Workbook Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. You can use the [`password`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#password) property to protect workbook with password. You can use the [`isProtected`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#isprotected) property to protect or unprotect the workbook without the password. From 4339e23b3e4d19104a2d3127e1e7923873ee6dd7 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 19 Jun 2024 03:11:44 +0530 Subject: [PATCH 2/2] Integrated latest changes at 06-18-2024 11:38:37 PM --- ej2-react-toc.html | 8 +- ej2-react/Release-notes/26.1.38.md | 16 +++ .../spreadsheet/note-cs1/app/app.jsx | 40 +++++++ .../spreadsheet/note-cs1/app/app.tsx | 40 +++++++ .../spreadsheet/note-cs1/app/datasource.jsx | 105 ++++++++++++++++++ .../spreadsheet/note-cs1/app/datasource.tsx | 105 ++++++++++++++++++ .../spreadsheet/note-cs1/index.html | 40 +++++++ .../spreadsheet/note-cs1/systemjs.config.js | 55 +++++++++ .../spreadsheet/note-cs2/app/app.jsx | 40 +++++++ .../spreadsheet/note-cs2/app/app.tsx | 40 +++++++ .../spreadsheet/note-cs2/app/datasource.jsx | 105 ++++++++++++++++++ .../spreadsheet/note-cs2/app/datasource.tsx | 105 ++++++++++++++++++ .../spreadsheet/note-cs2/index.html | 40 +++++++ .../spreadsheet/note-cs2/systemjs.config.js | 55 +++++++++ .../spreadsheet/note-cs3/app/app.jsx | 52 +++++++++ .../spreadsheet/note-cs3/app/app.tsx | 52 +++++++++ .../spreadsheet/note-cs3/app/datasource.jsx | 105 ++++++++++++++++++ .../spreadsheet/note-cs3/app/datasource.tsx | 105 ++++++++++++++++++ .../spreadsheet/note-cs3/index.html | 40 +++++++ .../spreadsheet/note-cs3/systemjs.config.js | 55 +++++++++ .../spreadsheet/open-from-json/app/app.jsx | 96 ++++++++++++++++ .../spreadsheet/open-from-json/app/app.tsx | 95 ++++++++++++++++ .../spreadsheet/open-from-json/index.html | 54 +++++++++ .../open-from-json/systemjs.config.js | 59 ++++++++++ .../spreadsheet/print-cs3/app/app.jsx | 52 +++++++++ .../spreadsheet/print-cs3/app/app.tsx | 52 +++++++++ .../spreadsheet/print-cs3/app/datasource.jsx | 97 ++++++++++++++++ .../spreadsheet/print-cs3/app/datasource.tsx | 98 ++++++++++++++++ .../spreadsheet/print-cs3/index.html | 40 +++++++ .../spreadsheet/print-cs3/systemjs.config.js | 55 +++++++++ .../spreadsheet/save-as-json/app/app.jsx | 97 ++++++++++++++++ .../spreadsheet/save-as-json/app/app.tsx | 96 ++++++++++++++++ .../spreadsheet/save-as-json/index.html | 53 +++++++++ .../save-as-json/systemjs.config.js | 58 ++++++++++ ej2-react/diagram/labels.md | 4 +- .../images/spreadsheet_add_note.gif | Bin 0 -> 155636 bytes .../images/spreadsheet_delete_note.gif | Bin 0 -> 142882 bytes .../images/spreadsheet_edit_note.gif | Bin 0 -> 94074 bytes .../images/spreadsheet_notes_disable.png | Bin 0 -> 46866 bytes .../images/spreadsheet_print_disable.png | Bin 0 -> 23341 bytes .../spreadsheet_print_in_ribbon_menu.png | Bin 0 -> 22892 bytes .../images/spreadsheet_show_note.png | Bin 0 -> 35754 bytes ej2-react/spreadsheet/notes.md | 102 +++++++++++++++++ ej2-react/spreadsheet/open-save.md | 26 +++++ ej2-react/spreadsheet/print.md | 55 +++++++++ 45 files changed, 2387 insertions(+), 5 deletions(-) create mode 100644 ej2-react/Release-notes/26.1.38.md create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs1/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs1/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs1/app/datasource.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs1/app/datasource.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs1/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs1/systemjs.config.js create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs2/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs2/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs2/app/datasource.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs2/app/datasource.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs2/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs2/systemjs.config.js create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs3/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs3/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs3/app/datasource.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs3/app/datasource.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs3/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/note-cs3/systemjs.config.js create mode 100644 ej2-react/code-snippet/spreadsheet/open-from-json/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/open-from-json/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/open-from-json/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/open-from-json/systemjs.config.js create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs3/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs3/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs3/app/datasource.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs3/app/datasource.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs3/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/print-cs3/systemjs.config.js create mode 100644 ej2-react/code-snippet/spreadsheet/save-as-json/app/app.jsx create mode 100644 ej2-react/code-snippet/spreadsheet/save-as-json/app/app.tsx create mode 100644 ej2-react/code-snippet/spreadsheet/save-as-json/index.html create mode 100644 ej2-react/code-snippet/spreadsheet/save-as-json/systemjs.config.js create mode 100644 ej2-react/spreadsheet/images/spreadsheet_add_note.gif create mode 100644 ej2-react/spreadsheet/images/spreadsheet_delete_note.gif create mode 100644 ej2-react/spreadsheet/images/spreadsheet_edit_note.gif create mode 100644 ej2-react/spreadsheet/images/spreadsheet_notes_disable.png create mode 100644 ej2-react/spreadsheet/images/spreadsheet_print_disable.png create mode 100644 ej2-react/spreadsheet/images/spreadsheet_print_in_ribbon_menu.png create mode 100644 ej2-react/spreadsheet/images/spreadsheet_show_note.png create mode 100644 ej2-react/spreadsheet/notes.md create mode 100644 ej2-react/spreadsheet/print.md diff --git a/ej2-react-toc.html b/ej2-react-toc.html index c8c881e91..696043282 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -2391,16 +2391,18 @@
  • Sorting
  • Filtering
  • Hyperlink
    • +
  • Notes
  • Clipboard
  • Selection
  • Scrolling
  • Protection
  • Find and Replace
  • Undo and Redo
    • -
  • Accessibility
    • -
  • Keyboard Shortcuts
  • Ribbon
    • +
  • Print
  • Globalization
    • +
  • Accessibility
    • +
  • Keyboard Shortcuts
  • Freeze Panes
  • Templates
  • How To @@ -2939,7 +2941,7 @@
  • Release Notes