From 89b134f89ad34b7eea7b93383a81c2f0549e3493 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 20 Nov 2025 07:42:04 +0530 Subject: [PATCH 01/11] Integrated latest changes at 11-20-2025 7:30:05 AM --- ej2-vue-toc.html | 1 + .../getting-started-cs37/app-composition.vue | 71 ++++++++++++++++ .../image-editor/getting-started-cs37/app.vue | 80 ++++++++++++++++++ .../getting-started-cs37/index.css | 16 ++++ .../getting-started-cs37/index.html | 23 ++++++ .../getting-started-cs37/index.js | 60 ++++++++++++++ .../getting-started-cs37/systemjs.config.js | 38 +++++++++ .../selection/default-cs7/app-composition.vue | 32 ++++++++ .../treegrid/selection/default-cs7/app.vue | 47 +++++++++++ .../selection/default-cs7/datasource.js | 81 +++++++++++++++++++ .../treegrid/selection/default-cs7/index.html | 23 ++++++ .../treegrid/selection/default-cs7/index.js | 34 ++++++++ .../selection/default-cs7/systemjs.config.js | 42 ++++++++++ ej2-vue/image-editor/how-to/clear-image.md | 4 +- .../how-to/fit-to-width-and-height.md | 27 +++++++ ej2-vue/image-editor/how-to/render-dialog.md | 6 +- ej2-vue/image-editor/how-to/reset-image.md | 4 +- .../treegrid/selection/check-box-selection.md | 15 +++- 18 files changed, 596 insertions(+), 8 deletions(-) create mode 100644 ej2-vue/code-snippet/image-editor/getting-started-cs37/app-composition.vue create mode 100644 ej2-vue/code-snippet/image-editor/getting-started-cs37/app.vue create mode 100644 ej2-vue/code-snippet/image-editor/getting-started-cs37/index.css create mode 100644 ej2-vue/code-snippet/image-editor/getting-started-cs37/index.html create mode 100644 ej2-vue/code-snippet/image-editor/getting-started-cs37/index.js create mode 100644 ej2-vue/code-snippet/image-editor/getting-started-cs37/systemjs.config.js create mode 100644 ej2-vue/code-snippet/treegrid/selection/default-cs7/app-composition.vue create mode 100644 ej2-vue/code-snippet/treegrid/selection/default-cs7/app.vue create mode 100644 ej2-vue/code-snippet/treegrid/selection/default-cs7/datasource.js create mode 100644 ej2-vue/code-snippet/treegrid/selection/default-cs7/index.html create mode 100644 ej2-vue/code-snippet/treegrid/selection/default-cs7/index.js create mode 100644 ej2-vue/code-snippet/treegrid/selection/default-cs7/systemjs.config.js create mode 100644 ej2-vue/image-editor/how-to/fit-to-width-and-height.md diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html index 53427b231..56b2bd1b3 100644 --- a/ej2-vue-toc.html +++ b/ej2-vue-toc.html @@ -1531,6 +1531,7 @@
  • Reset an image
  • Clear an Image
  • Render Image Editor in Dialog
    • +
  • Fit Image to Editor Width and Height
  • API Reference
    • diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/app-composition.vue b/ej2-vue/code-snippet/image-editor/getting-started-cs37/app-composition.vue new file mode 100644 index 000000000..b00dfd2a6 --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/app-composition.vue @@ -0,0 +1,71 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/app.vue b/ej2-vue/code-snippet/image-editor/getting-started-cs37/app.vue new file mode 100644 index 000000000..220beef54 --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/app.vue @@ -0,0 +1,80 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.css b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.css new file mode 100644 index 000000000..c9960639e --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.css @@ -0,0 +1,16 @@ + + + + + + + + + + + + +#image-editor { + width: 550px !important; + height: 350px !important; +} diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.html b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + + diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.js b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.js new file mode 100644 index 000000000..da1c2e4d0 --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/index.js @@ -0,0 +1,60 @@ + +import Vue from 'vue'; +import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor"; +import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons'; +import { Browser } from "@syncfusion/ej2-base"; + +Vue.use(ImageEditorPlugin); +Vue.use(ButtonPlugin); + +new Vue({ + el: '#app', + template: ` +
    + + Fit Width + Fit Height +
    + `, + data: function () { + return { + }; + }, + methods: { + created: function () { + let imageEditor = this.$refs.imageEditorObj.ej2Instances; + if (!imageEditor) return; + let imageUrl = Browser.isDevice + ? "https://ej2.syncfusion.com/vue/documentation/image-editor/images/flower.jpeg" + : "https://ej2.syncfusion.com/vue/documentation/image-editor/images/bridge.jpeg"; + imageEditor.open(imageUrl); + }, + btnClick: function () { + let imageEditorObj = this.$refs.imageEditorObj.ej2Instances; + imageEditorObj.zoom(1); // Reset zoom to original size before applying Fit Width + const containerWidth = imageEditorObj.upperCanvas.width; + const { width: oldWidth } = imageEditorObj.getImageDimension(); + let imageWidth = oldWidth, zoomFactor = 0.1, newZoom = 1; + while (imageWidth < containerWidth) { + newZoom++; + imageWidth = oldWidth * (1 + zoomFactor); + zoomFactor += 0.1; + } + imageEditorObj.zoom(newZoom); + }, + btnClick: function () { + let imageEditorObj = this.$refs.imageEditorObj.ej2Instances; + imageEditorObj.zoom(1); // Reset zoom to original size before applying Fit Height + const containerHeight = imageEditorObj.upperCanvas.height; + const { height: oldHeight } = imageEditorObj.getImageDimension(); + let imageHeight = oldHeight, zoomFactor = 0.1, newZoom = 1; + while (imageHeight < containerHeight) { + newZoom++; + imageHeight = oldHeight * (1 + zoomFactor); + zoomFactor += 0.1; + } + imageEditorObj.zoom(newZoom); + } + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/image-editor/getting-started-cs37/systemjs.config.js b/ej2-vue/code-snippet/image-editor/getting-started-cs37/systemjs.config.js new file mode 100644 index 000000000..93bc62d4f --- /dev/null +++ b/ej2-vue/code-snippet/image-editor/getting-started-cs37/systemjs.config.js @@ -0,0 +1,38 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/28.2.9/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + '@syncfusion/ej2-vue-image-editor': 'syncfusion:ej2-vue-image-editor/dist/ej2-vue-image-editor.umd.min.js', + '@syncfusion/ej2-vue-base': 'syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.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-buttons': 'syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js', + '@syncfusion/ej2-vue-buttons': 'syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js', + '@syncfusion/ej2-popups': 'syncfusion:ej2-popups/dist/ej2-popups.umd.min.js', + '@syncfusion/ej2-vue-popups': 'syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js', + '@syncfusion/ej2-inputs': 'syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js', + '@syncfusion/ej2-vue-inputs': 'syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js', + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + '@syncfusion/ej2-vue-splitbuttons': 'syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js', + '@syncfusion/ej2-lists': "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + '@syncfusion/ej2-vue-lists': "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js", + '@syncfusion/ej2-navigations': 'syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js', + '@syncfusion/ej2-vue-navigations': 'syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js', + '@syncfusion/ej2-image-editor': 'syncfusion:ej2-image-editor/dist/ej2-image-editor.umd.min.js', + } +}); + +System.import('index.js'); diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/app-composition.vue b/ej2-vue/code-snippet/treegrid/selection/default-cs7/app-composition.vue new file mode 100644 index 000000000..36d9f6fc9 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/app-composition.vue @@ -0,0 +1,32 @@ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/app.vue b/ej2-vue/code-snippet/treegrid/selection/default-cs7/app.vue new file mode 100644 index 000000000..676d79fc9 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/app.vue @@ -0,0 +1,47 @@ + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/datasource.js b/ej2-vue/code-snippet/treegrid/selection/default-cs7/datasource.js new file mode 100644 index 000000000..95392c99e --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/datasource.js @@ -0,0 +1,81 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + var NUM_ROOTS = 60; + var CHILDREN_PER_ROOT = 8; + var TOTAL_RECORDS = NUM_ROOTS + NUM_ROOTS * CHILDREN_PER_ROOT; + console.log(`Generating ${TOTAL_RECORDS} records (last 2 years)`); + var employees = [ + 'Nancy Davolio', 'Andrew Fuller', 'Janet Leverling', 'Margaret Peacock', 'Steven Buchanan', + 'Michael Suyama', 'Robert King', 'Anne Dodsworth', 'John Heart', 'Robert Reagan', + 'Wally Hobbs', 'Arnie Schwartz', 'Stu Pizaro', 'Sandra Johnson', 'Karen Goodson', + 'Hannah Brookly', 'Ed Holmes', 'Victor Norris', 'Maggie Boxter', 'Samantha Bright', + 'Robin Cosworth', 'Samantha Piper', 'Clark Morgan', 'Brad Farkus', 'Taylor Riley', + 'Brett Wade', 'Cynthia Stanwick', 'Greta Sims', 'Olivia Peyton' + ]; + var priorities = ['Low', 'Normal', 'High', 'Urgent']; + var progressStates = ['Not Started', 'In Progress', 'Completed']; + var rootTasks = [ + 'Planning Phase', 'Design Sprint', 'Development Cycle', 'Testing & QA', 'Deployment Rollout', + 'Marketing Campaign', 'Sales Pipeline', 'Customer Support', 'Content Strategy', 'Product Launch', + 'Budget Review', 'Team Training', 'Compliance Audit', 'Vendor Negotiation', 'Performance Review', + 'Infrastructure Upgrade', 'Security Assessment', 'User Feedback Analysis', 'Analytics Dashboard', + 'API Integration', 'Mobile App Update', 'Backend Optimization', 'Frontend Redesign', + 'Database Migration', 'Cloud Migration', 'DevOps Pipeline', 'Quality Assurance', 'Documentation Update', + 'Training Materials', 'Onboarding Process', 'Offboarding Process', 'HR Policy Review', + 'Finance Reporting', 'Legal Compliance', 'Risk Management', 'Crisis Response Plan', + 'Innovation Workshop', 'R&D Project', 'Prototype Development', 'Market Research', + 'Competitor Analysis', 'SWOT Analysis', 'Strategic Planning', 'Goal Setting', 'KPI Definition', + 'Quarterly Review', 'Annual Audit', 'Succession Planning', 'Talent Acquisition' + ]; + var childTasks = [ + 'Define Scope', 'Gather Requirements', 'Wireframe Design', 'Code Implementation', 'Unit Testing', + 'Integration Testing', 'Bug Fixes', 'User Acceptance', 'Deploy to Staging', 'Go-Live Prep', + 'Post-Launch Review', 'Metrics Analysis', 'Stakeholder Meeting', 'Resource Allocation', + 'Risk Assessment', 'Budget Approval', 'Timeline Update', 'Progress Report', 'Feedback Collection', + 'Revision Cycle', 'Final Approval', 'Documentation', 'Training Session', 'Handover Meeting' + ]; + var START_DATE = new Date('2023-11-10T00:00:00'); + var END_DATE = new Date('2025-11-10T00:00:00'); + function randomDate(start, end) { + var d = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + return d.toISOString().split('T')[0]; + } + exports.taskData = []; + let id = 1; + for (let i = 0; i < NUM_ROOTS; i++) { + var start = randomDate(START_DATE, END_DATE); + var due = randomDate(new Date(start), END_DATE); + var state = progressStates[Math.floor(Math.random() * progressStates.length)]; + taskData.push({ + TaskID: id, + ParentID: null, + Task: rootTasks[i % rootTasks.length] + (i >= rootTasks.length ? ` ${i + 1}` : ''), + AssignedTo: employees[Math.floor(Math.random() * employees.length)], + StartDate: start, + DueDate: due, + Priority: priorities[Math.floor(Math.random() * priorities.length)], + Progress: state, + Status: state === 'Completed' ? 100 : (state === 'In Progress' ? 50 : 0) + }); + var rootId = id; + id++; + for (let c = 0; c < CHILDREN_PER_ROOT; c++) { + var cStart = randomDate(new Date(start), new Date(due)); + var cDue = randomDate(new Date(cStart), new Date(due)); + var cState = progressStates[Math.floor(Math.random() * progressStates.length)]; + taskData.push({ + TaskID: id, + ParentID: rootId, + Task: childTasks[c % childTasks.length] + (c >= childTasks.length ? ` ${c + 1}` : ''), + AssignedTo: employees[Math.floor(Math.random() * employees.length)], + StartDate: cStart, + DueDate: cDue, + Priority: priorities[Math.floor(Math.random() * priorities.length)], + Progress: cState, + Status: cState === 'Completed' ? 100 : (cState === 'In Progress' ? 50 : 0) + }); + id++; + } + } +}); diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.html b/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + + diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.js b/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.js new file mode 100644 index 000000000..28a9b5de4 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/index.js @@ -0,0 +1,34 @@ + +import Vue from "vue"; +import { TreeGridPlugin, Page } from "@syncfusion/ej2-vue-treegrid"; +import { sampleData } from "./datasource.js"; + +Vue.use(TreeGridPlugin); + + +new Vue({ + el: '#app', + template: ` +
    + + + + + + + + +
    +`, + + data () { + return { + data: sampleData, + selectionOptions: { mode: 'Both' } + }; + }, + provide: { + treegrid: [ Page ] + }, + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/treegrid/selection/default-cs7/systemjs.config.js b/ej2-vue/code-snippet/treegrid/selection/default-cs7/systemjs.config.js new file mode 100644 index 000000000..d261eaad9 --- /dev/null +++ b/ej2-vue/code-snippet/treegrid/selection/default-cs7/systemjs.config.js @@ -0,0 +1,42 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.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-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-vue-treegrid": "syncfusion:ej2-vue-treegrid/dist/ej2-vue-treegrid.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/image-editor/how-to/clear-image.md b/ej2-vue/image-editor/how-to/clear-image.md index 9c41d02f5..234f51111 100644 --- a/ej2-vue/image-editor/how-to/clear-image.md +++ b/ej2-vue/image-editor/how-to/clear-image.md @@ -2,7 +2,7 @@ layout: post title: Clear an Image in ##Platform_Name## Image editor control | Syncfusion description: Learn here all about Clear an Image in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. -platform: ej2-javascript +platform: ej2-vue control: Clear an Image publishingplatform: ##Platform_Name## documentation: ug @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Clear an Image in the Vue Image Editor component -The [`clearImage`](https://ej2.syncfusion.com/vue/documentation/api/image-editor/#clearimage) method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using `clearImage` before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection. +The [`clearImage`](https://ej2.syncfusion.com/vue/documentation/api/image-editor/index-default#clearimage) method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using `clearImage` before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/ej2-vue/image-editor/how-to/fit-to-width-and-height.md b/ej2-vue/image-editor/how-to/fit-to-width-and-height.md new file mode 100644 index 000000000..b10497d81 --- /dev/null +++ b/ej2-vue/image-editor/how-to/fit-to-width-and-height.md @@ -0,0 +1,27 @@ +--- +layout: post +title: Fit to Width and Height in ##Platform_Name## Image Editor | Syncfusion +description: Learn here all about Fit to Width and Height in Syncfusion Vue Image editor component of Syncfusion Essential JS 2 and more. +platform: ej2-vue +control: Fit to Width and Height +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Fit Image to Editor Width and Height + +The Image Editor's [`zoom`](https://ej2.syncfusion.com/vue/documentation/api/image-editor/index-default#zoom) method to fit an image to the editor by width or height. Programmatically increase the zoom level until the image dimension matches the editor container's width or height. + +This example demonstrates scenarios that include buttons for fitting the image to its width (Fit Width) or height (Fit Height). + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/image-editor/getting-started-cs37/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/image-editor/getting-started-cs37/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/image-editor/getting-started-cs37" %} diff --git a/ej2-vue/image-editor/how-to/render-dialog.md b/ej2-vue/image-editor/how-to/render-dialog.md index 05ef5735c..429e54ab5 100644 --- a/ej2-vue/image-editor/how-to/render-dialog.md +++ b/ej2-vue/image-editor/how-to/render-dialog.md @@ -1,15 +1,15 @@ --- layout: post -title: Render Image Editor in Dialog in ##Platform_Name## Image editor control | Syncfusion +title: Render Editor in Dialog in ##Platform_Name## Image editor | Syncfusion description: Learn here all about Render Image Editor in Dialog in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. -platform: ej2-javascript +platform: ej2-vue control: Render Image Editor in Dialog publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## --- -### Render Image Editor in Dialog +# Render Image Editor in Dialog Rendering the Image Editor in a dialog involves displaying the image editor component within a modal dialog window, allowing users to edit images in a pop-up interface. This can be useful for maintaining a clean layout and providing a focused editing experience without navigating away from the current page. diff --git a/ej2-vue/image-editor/how-to/reset-image.md b/ej2-vue/image-editor/how-to/reset-image.md index 32a736294..bdee7b8ee 100644 --- a/ej2-vue/image-editor/how-to/reset-image.md +++ b/ej2-vue/image-editor/how-to/reset-image.md @@ -2,7 +2,7 @@ layout: post title: Reset an image in ##Platform_Name## Image editor control | Syncfusion description: Learn here all about Reset an image in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. -platform: ej2-javascript +platform: ej2-vue control: Reset an image publishingplatform: ##Platform_Name## documentation: ug @@ -11,6 +11,6 @@ domainurl: ##DomainURL## # Reset an image in the Vue Image Editor component -The [`reset`](https://ej2.syncfusion.com/javascript/documentation/api/image-editor/#reset) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image. +The [`reset`](https://ej2.syncfusion.com/vue/documentation/api/image-editor/index-default#reset) method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image. By invoking the `reset` method, any modifications or edits made to the image will be undone, and the image will be restored to its initial state. This allows you to easily discard any changes and begin again with the fresh, unaltered image. \ No newline at end of file diff --git a/ej2-vue/treegrid/selection/check-box-selection.md b/ej2-vue/treegrid/selection/check-box-selection.md index 4caf7ad9e..e12c853c5 100644 --- a/ej2-vue/treegrid/selection/check-box-selection.md +++ b/ej2-vue/treegrid/selection/check-box-selection.md @@ -52,4 +52,17 @@ In checkbox selection, selection can also be done by clicking on rows. This sele {% previewsample "page.domainurl/code-snippet/treegrid/selection/default-cs3" %} -> Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode. \ No newline at end of file +> Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode. + +## Conditional row selection using isRowSelectable + +The TreeGrid supports conditional row selection through the [isRowSelectable](https://ej2.syncfusion.com/vue/documentation/api/treegrid/#isRowSelectable) property. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The `isRowSelectable` property accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/treegrid/selection/default-cs7/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/treegrid/selection/default-cs7/app.vue %} +{% endhighlight %} +{% endtabs %} \ No newline at end of file From 6903e8fc868736603dc21dbf418ae2051c85ab59 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 21 Nov 2025 07:42:00 +0530 Subject: [PATCH 02/11] Integrated latest changes at 11-21-2025 7:30:04 AM --- .../app-composition.vue | 47 + .../select/prevent-checkbox-selection/app.vue | 61 + .../prevent-checkbox-selection/datasource.js | 3999 +++++++++++++++++ .../prevent-checkbox-selection/index.html | 22 + .../prevent-checkbox-selection/index.js | 47 + .../systemjs.config.js | 40 + .../mail-merge-cs1/app-composition.vue | 170 + .../rich-text-editor/mail-merge-cs1/app.vue | 179 + .../rich-text-editor/mail-merge-cs1/index.css | 9 + .../mail-merge-cs1/index.html | 23 + .../rich-text-editor/mail-merge-cs1/index.js | 161 + .../mail-merge-cs1/systemjs.config.js | 50 + .../rich-text-editor/mail-merge/index.js | 4 +- .../rich-text-editor/selection/index.js | 2 +- ej2-vue/grid/selection/check-box-selection.md | 37 +- ej2-vue/rich-text-editor/selection.md | 183 +- .../smart-editing/mail-merge.md | 213 +- 17 files changed, 5232 insertions(+), 15 deletions(-) create mode 100644 ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue create mode 100644 ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app.vue create mode 100644 ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/datasource.js create mode 100644 ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.html create mode 100644 ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.js create mode 100644 ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/systemjs.config.js create mode 100644 ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app-composition.vue create mode 100644 ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app.vue create mode 100644 ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.css create mode 100644 ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.html create mode 100644 ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.js create mode 100644 ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue new file mode 100644 index 000000000..24ed28ff6 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue @@ -0,0 +1,47 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app.vue b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app.vue new file mode 100644 index 000000000..bbf1e80d2 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/app.vue @@ -0,0 +1,61 @@ + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/datasource.js b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/datasource.js new file mode 100644 index 000000000..bb814af6b --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/datasource.js @@ -0,0 +1,3999 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + +exports.ordersTrackData = [ + { + "OrderID": "ORD1001", + "CustomerName": "Eve Green", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-04-25"), + "Amount": "$148.14" + }, + { + "OrderID": "ORD1002", + "CustomerName": "Jack Black", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-17"), + "Amount": "$39.50" + }, + { + "OrderID": "ORD1003", + "CustomerName": "David Brown", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-10-15"), + "Amount": "$206.85" + }, + { + "OrderID": "ORD1004", + "CustomerName": "Olivia Purple", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-29"), + "Amount": "$285.41" + }, + { + "OrderID": "ORD1005", + "CustomerName": "Alice Johnson", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-05-23"), + "Amount": "$163.92" + }, + { + "OrderID": "ORD1006", + "CustomerName": "Grace Lee", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-19"), + "Amount": "$365.39" + }, + { + "OrderID": "ORD1007", + "CustomerName": "Noah Green", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-08-24"), + "Amount": "$540.87" + }, + { + "OrderID": "ORD1008", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-11-18"), + "Amount": "$622.33" + }, + { + "OrderID": "ORD1009", + "CustomerName": "Kelly Gray", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-01-24"), + "Amount": "$664.65" + }, + { + "OrderID": "ORD1010", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-07-14"), + "Amount": "$285.19" + }, + { + "OrderID": "ORD1011", + "CustomerName": "Alice Johnson", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-04-18"), + "Amount": "$673.47" + }, + { + "OrderID": "ORD1012", + "CustomerName": "Noah Green", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-03-25"), + "Amount": "$467.64" + }, + { + "OrderID": "ORD1013", + "CustomerName": "Jack Black", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-01-29"), + "Amount": "$236.76" + }, + { + "OrderID": "ORD1014", + "CustomerName": "Mia Blue", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-03"), + "Amount": "$218.87" + }, + { + "OrderID": "ORD1015", + "CustomerName": "Carol Davis", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-26"), + "Amount": "$464.26" + }, + { + "OrderID": "ORD1016", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-10-27"), + "Amount": "$434.15" + }, + { + "OrderID": "ORD1017", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-09-18"), + "Amount": "$498.58" + }, + { + "OrderID": "ORD1018", + "CustomerName": "Grace Lee", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-12-15"), + "Amount": "$427.94" + }, + { + "OrderID": "ORD1019", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-28"), + "Amount": "$258.90" + }, + { + "OrderID": "ORD1020", + "CustomerName": "Grace Lee", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-11-25"), + "Amount": "$346.77" + }, + { + "OrderID": "ORD1021", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-02"), + "Amount": "$954.28" + }, + { + "OrderID": "ORD1022", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-11-17"), + "Amount": "$305.46" + }, + { + "OrderID": "ORD1023", + "CustomerName": "Noah Green", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-07-11"), + "Amount": "$764.89" + }, + { + "OrderID": "ORD1024", + "CustomerName": "Ivy White", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-09-08"), + "Amount": "$29.28" + }, + { + "OrderID": "ORD1025", + "CustomerName": "Bob Wilson", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-05-04"), + "Amount": "$879.23" + }, + { + "OrderID": "ORD1026", + "CustomerName": "Henry Taylor", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-09-30"), + "Amount": "$768.18" + }, + { + "OrderID": "ORD1027", + "CustomerName": "Paul Orange", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-05-16"), + "Amount": "$532.40" + }, + { + "OrderID": "ORD1028", + "CustomerName": "Carol Davis", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-06-09"), + "Amount": "$405.00" + }, + { + "OrderID": "ORD1029", + "CustomerName": "Leo Red", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-03"), + "Amount": "$255.43" + }, + { + "OrderID": "ORD1030", + "CustomerName": "Mia Blue", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-10-29"), + "Amount": "$228.02" + }, + { + "OrderID": "ORD1031", + "CustomerName": "Jane Smith", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-01-17"), + "Amount": "$861.04" + }, + { + "OrderID": "ORD1032", + "CustomerName": "Ivy White", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-12-09"), + "Amount": "$490.56" + }, + { + "OrderID": "ORD1033", + "CustomerName": "Frank Miller", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-05"), + "Amount": "$786.77" + }, + { + "OrderID": "ORD1034", + "CustomerName": "Carol Davis", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-12-04"), + "Amount": "$436.74" + }, + { + "OrderID": "ORD1035", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-12-11"), + "Amount": "$656.92" + }, + { + "OrderID": "ORD1036", + "CustomerName": "Jane Smith", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-25"), + "Amount": "$256.17" + }, + { + "OrderID": "ORD1037", + "CustomerName": "Jack Black", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-08-05"), + "Amount": "$191.65" + }, + { + "OrderID": "ORD1038", + "CustomerName": "David Brown", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-09"), + "Amount": "$106.93" + }, + { + "OrderID": "ORD1039", + "CustomerName": "Eve Green", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-03-27"), + "Amount": "$412.35" + }, + { + "OrderID": "ORD1040", + "CustomerName": "Carol Davis", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-03-26"), + "Amount": "$385.18" + }, + { + "OrderID": "ORD1041", + "CustomerName": "John Doe", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-08-05"), + "Amount": "$699.63" + }, + { + "OrderID": "ORD1042", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-04-22"), + "Amount": "$969.02" + }, + { + "OrderID": "ORD1043", + "CustomerName": "Jane Smith", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-01-26"), + "Amount": "$588.34" + }, + { + "OrderID": "ORD1044", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-09-18"), + "Amount": "$89.31" + }, + { + "OrderID": "ORD1045", + "CustomerName": "Henry Taylor", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-12-12"), + "Amount": "$863.20" + }, + { + "OrderID": "ORD1046", + "CustomerName": "Grace Lee", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-10-24"), + "Amount": "$598.57" + }, + { + "OrderID": "ORD1047", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-05-14"), + "Amount": "$212.22" + }, + { + "OrderID": "ORD1048", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-09"), + "Amount": "$674.97" + }, + { + "OrderID": "ORD1049", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-01-05"), + "Amount": "$463.70" + }, + { + "OrderID": "ORD1050", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-09-17"), + "Amount": "$272.55" + }, + { + "OrderID": "ORD1051", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-05-26"), + "Amount": "$166.17" + }, + { + "OrderID": "ORD1052", + "CustomerName": "Bob Wilson", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-12-08"), + "Amount": "$818.93" + }, + { + "OrderID": "ORD1053", + "CustomerName": "Grace Lee", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-03-01"), + "Amount": "$890.82" + }, + { + "OrderID": "ORD1054", + "CustomerName": "John Doe", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-06-25"), + "Amount": "$211.56" + }, + { + "OrderID": "ORD1055", + "CustomerName": "Ivy White", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-01-27"), + "Amount": "$101.38" + }, + { + "OrderID": "ORD1056", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-06-20"), + "Amount": "$773.41" + }, + { + "OrderID": "ORD1057", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-15"), + "Amount": "$19.57" + }, + { + "OrderID": "ORD1058", + "CustomerName": "Frank Miller", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-07-09"), + "Amount": "$586.68" + }, + { + "OrderID": "ORD1059", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-06-07"), + "Amount": "$371.01" + }, + { + "OrderID": "ORD1060", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-12-08"), + "Amount": "$111.77" + }, + { + "OrderID": "ORD1061", + "CustomerName": "Noah Green", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-03-25"), + "Amount": "$976.44" + }, + { + "OrderID": "ORD1062", + "CustomerName": "Olivia Purple", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-06-20"), + "Amount": "$784.56" + }, + { + "OrderID": "ORD1063", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-12-26"), + "Amount": "$117.01" + }, + { + "OrderID": "ORD1064", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-08-24"), + "Amount": "$356.16" + }, + { + "OrderID": "ORD1065", + "CustomerName": "David Brown", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-07-24"), + "Amount": "$334.98" + }, + { + "OrderID": "ORD1066", + "CustomerName": "John Doe", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-14"), + "Amount": "$981.34" + }, + { + "OrderID": "ORD1067", + "CustomerName": "Mia Blue", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-05-14"), + "Amount": "$186.78" + }, + { + "OrderID": "ORD1068", + "CustomerName": "Jane Smith", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-26"), + "Amount": "$731.26" + }, + { + "OrderID": "ORD1069", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-07-17"), + "Amount": "$900.51" + }, + { + "OrderID": "ORD1070", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-01"), + "Amount": "$524.72" + }, + { + "OrderID": "ORD1071", + "CustomerName": "Carol Davis", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-05"), + "Amount": "$949.39" + }, + { + "OrderID": "ORD1072", + "CustomerName": "Noah Green", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-06-03"), + "Amount": "$512.05" + }, + { + "OrderID": "ORD1073", + "CustomerName": "Mia Blue", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-10-11"), + "Amount": "$136.01" + }, + { + "OrderID": "ORD1074", + "CustomerName": "Quinn Yellow", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-07-27"), + "Amount": "$552.46" + }, + { + "OrderID": "ORD1075", + "CustomerName": "Bob Wilson", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-08-09"), + "Amount": "$787.90" + }, + { + "OrderID": "ORD1076", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-12"), + "Amount": "$221.56" + }, + { + "OrderID": "ORD1077", + "CustomerName": "Alice Johnson", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-09-21"), + "Amount": "$667.22" + }, + { + "OrderID": "ORD1078", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-04-26"), + "Amount": "$808.50" + }, + { + "OrderID": "ORD1079", + "CustomerName": "Eve Green", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-09-01"), + "Amount": "$615.16" + }, + { + "OrderID": "ORD1080", + "CustomerName": "Leo Red", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-12-23"), + "Amount": "$390.14" + }, + { + "OrderID": "ORD1081", + "CustomerName": "David Brown", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-02-24"), + "Amount": "$780.64" + }, + { + "OrderID": "ORD1082", + "CustomerName": "Alice Johnson", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-26"), + "Amount": "$561.83" + }, + { + "OrderID": "ORD1083", + "CustomerName": "Leo Red", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-08"), + "Amount": "$535.82" + }, + { + "OrderID": "ORD1084", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-08"), + "Amount": "$451.45" + }, + { + "OrderID": "ORD1085", + "CustomerName": "Paul Orange", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-05-07"), + "Amount": "$841.46" + }, + { + "OrderID": "ORD1086", + "CustomerName": "Ivy White", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-05-21"), + "Amount": "$445.47" + }, + { + "OrderID": "ORD1087", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-06-13"), + "Amount": "$894.10" + }, + { + "OrderID": "ORD1088", + "CustomerName": "Frank Miller", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-07-16"), + "Amount": "$697.01" + }, + { + "OrderID": "ORD1089", + "CustomerName": "Henry Taylor", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-19"), + "Amount": "$547.19" + }, + { + "OrderID": "ORD1090", + "CustomerName": "Jane Smith", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-19"), + "Amount": "$905.79" + }, + { + "OrderID": "ORD1091", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-04"), + "Amount": "$943.31" + }, + { + "OrderID": "ORD1092", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-09-07"), + "Amount": "$227.23" + }, + { + "OrderID": "ORD1093", + "CustomerName": "Paul Orange", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-22"), + "Amount": "$672.18" + }, + { + "OrderID": "ORD1094", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-11-15"), + "Amount": "$538.78" + }, + { + "OrderID": "ORD1095", + "CustomerName": "Kelly Gray", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-02-12"), + "Amount": "$646.32" + }, + { + "OrderID": "ORD1096", + "CustomerName": "Leo Red", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-05-14"), + "Amount": "$385.31" + }, + { + "OrderID": "ORD1097", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-07-14"), + "Amount": "$285.47" + }, + { + "OrderID": "ORD1098", + "CustomerName": "John Doe", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-10"), + "Amount": "$751.53" + }, + { + "OrderID": "ORD1099", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-11-30"), + "Amount": "$49.86" + }, + { + "OrderID": "ORD1100", + "CustomerName": "David Brown", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-11-15"), + "Amount": "$160.86" + }, + { + "OrderID": "ORD1101", + "CustomerName": "Paul Orange", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-08-27"), + "Amount": "$702.47" + }, + { + "OrderID": "ORD1102", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-03-25"), + "Amount": "$965.07" + }, + { + "OrderID": "ORD1103", + "CustomerName": "Kelly Gray", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-10-22"), + "Amount": "$680.57" + }, + { + "OrderID": "ORD1104", + "CustomerName": "Quinn Yellow", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-10-31"), + "Amount": "$693.71" + }, + { + "OrderID": "ORD1105", + "CustomerName": "Grace Lee", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-10-17"), + "Amount": "$784.81" + }, + { + "OrderID": "ORD1106", + "CustomerName": "Jack Black", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-05"), + "Amount": "$510.90" + }, + { + "OrderID": "ORD1107", + "CustomerName": "Eve Green", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-24"), + "Amount": "$439.19" + }, + { + "OrderID": "ORD1108", + "CustomerName": "Leo Red", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-01"), + "Amount": "$736.46" + }, + { + "OrderID": "ORD1109", + "CustomerName": "Noah Green", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-27"), + "Amount": "$441.22" + }, + { + "OrderID": "ORD1110", + "CustomerName": "Mia Blue", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-05-23"), + "Amount": "$882.81" + }, + { + "OrderID": "ORD1111", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-22"), + "Amount": "$38.41" + }, + { + "OrderID": "ORD1112", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-01"), + "Amount": "$799.85" + }, + { + "OrderID": "ORD1113", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-10-12"), + "Amount": "$20.05" + }, + { + "OrderID": "ORD1114", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-08"), + "Amount": "$559.62" + }, + { + "OrderID": "ORD1115", + "CustomerName": "Paul Orange", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-09"), + "Amount": "$102.12" + }, + { + "OrderID": "ORD1116", + "CustomerName": "Quinn Yellow", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-12-06"), + "Amount": "$585.74" + }, + { + "OrderID": "ORD1117", + "CustomerName": "Jack Black", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-08-06"), + "Amount": "$996.67" + }, + { + "OrderID": "ORD1118", + "CustomerName": "Rose Pink", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-06-06"), + "Amount": "$258.89" + }, + { + "OrderID": "ORD1119", + "CustomerName": "Carol Davis", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-10-02"), + "Amount": "$951.37" + }, + { + "OrderID": "ORD1120", + "CustomerName": "Carol Davis", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-22"), + "Amount": "$727.34" + }, + { + "OrderID": "ORD1121", + "CustomerName": "Noah Green", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-04-10"), + "Amount": "$303.28" + }, + { + "OrderID": "ORD1122", + "CustomerName": "Alice Johnson", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-12-29"), + "Amount": "$538.79" + }, + { + "OrderID": "ORD1123", + "CustomerName": "Jane Smith", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-12-24"), + "Amount": "$944.65" + }, + { + "OrderID": "ORD1124", + "CustomerName": "Grace Lee", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-08-29"), + "Amount": "$483.93" + }, + { + "OrderID": "ORD1125", + "CustomerName": "Alice Johnson", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-09-02"), + "Amount": "$122.95" + }, + { + "OrderID": "ORD1126", + "CustomerName": "Quinn Yellow", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-10-23"), + "Amount": "$633.15" + }, + { + "OrderID": "ORD1127", + "CustomerName": "Frank Miller", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-02-13"), + "Amount": "$993.98" + }, + { + "OrderID": "ORD1128", + "CustomerName": "Jack Black", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-09-25"), + "Amount": "$386.57" + }, + { + "OrderID": "ORD1129", + "CustomerName": "Bob Wilson", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-06"), + "Amount": "$572.94" + }, + { + "OrderID": "ORD1130", + "CustomerName": "Noah Green", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-11-17"), + "Amount": "$218.91" + }, + { + "OrderID": "ORD1131", + "CustomerName": "Alice Johnson", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-10-10"), + "Amount": "$84.31" + }, + { + "OrderID": "ORD1132", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-30"), + "Amount": "$42.31" + }, + { + "OrderID": "ORD1133", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-12-18"), + "Amount": "$241.09" + }, + { + "OrderID": "ORD1134", + "CustomerName": "Kelly Gray", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-28"), + "Amount": "$549.12" + }, + { + "OrderID": "ORD1135", + "CustomerName": "John Doe", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-01-31"), + "Amount": "$174.26" + }, + { + "OrderID": "ORD1136", + "CustomerName": "Noah Green", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-08-13"), + "Amount": "$133.11" + }, + { + "OrderID": "ORD1137", + "CustomerName": "Quinn Yellow", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-13"), + "Amount": "$89.64" + }, + { + "OrderID": "ORD1138", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-01-14"), + "Amount": "$100.41" + }, + { + "OrderID": "ORD1139", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-03-31"), + "Amount": "$475.80" + }, + { + "OrderID": "ORD1140", + "CustomerName": "John Doe", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-22"), + "Amount": "$816.10" + }, + { + "OrderID": "ORD1141", + "CustomerName": "Paul Orange", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-20"), + "Amount": "$327.85" + }, + { + "OrderID": "ORD1142", + "CustomerName": "Alice Johnson", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-22"), + "Amount": "$500.51" + }, + { + "OrderID": "ORD1143", + "CustomerName": "Jack Black", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-15"), + "Amount": "$321.37" + }, + { + "OrderID": "ORD1144", + "CustomerName": "Grace Lee", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-12-03"), + "Amount": "$870.67" + }, + { + "OrderID": "ORD1145", + "CustomerName": "Olivia Purple", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-09-23"), + "Amount": "$368.16" + }, + { + "OrderID": "ORD1146", + "CustomerName": "Leo Red", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-05-17"), + "Amount": "$553.73" + }, + { + "OrderID": "ORD1147", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-01-15"), + "Amount": "$973.42" + }, + { + "OrderID": "ORD1148", + "CustomerName": "Alice Johnson", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-10-10"), + "Amount": "$413.91" + }, + { + "OrderID": "ORD1149", + "CustomerName": "Grace Lee", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-11-28"), + "Amount": "$833.82" + }, + { + "OrderID": "ORD1150", + "CustomerName": "Bob Wilson", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-08-01"), + "Amount": "$836.38" + }, + { + "OrderID": "ORD1151", + "CustomerName": "David Brown", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-16"), + "Amount": "$198.70" + }, + { + "OrderID": "ORD1152", + "CustomerName": "Frank Miller", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-08-01"), + "Amount": "$346.48" + }, + { + "OrderID": "ORD1153", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-06-02"), + "Amount": "$839.10" + }, + { + "OrderID": "ORD1154", + "CustomerName": "Frank Miller", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-26"), + "Amount": "$339.12" + }, + { + "OrderID": "ORD1155", + "CustomerName": "Quinn Yellow", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-04-07"), + "Amount": "$980.97" + }, + { + "OrderID": "ORD1156", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-07-30"), + "Amount": "$53.21" + }, + { + "OrderID": "ORD1157", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-09-11"), + "Amount": "$965.18" + }, + { + "OrderID": "ORD1158", + "CustomerName": "Ivy White", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-02-21"), + "Amount": "$875.45" + }, + { + "OrderID": "ORD1159", + "CustomerName": "Grace Lee", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-08"), + "Amount": "$725.22" + }, + { + "OrderID": "ORD1160", + "CustomerName": "Frank Miller", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-16"), + "Amount": "$345.18" + }, + { + "OrderID": "ORD1161", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-12"), + "Amount": "$630.53" + }, + { + "OrderID": "ORD1162", + "CustomerName": "Jack Black", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-05-01"), + "Amount": "$634.85" + }, + { + "OrderID": "ORD1163", + "CustomerName": "David Brown", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-20"), + "Amount": "$762.77" + }, + { + "OrderID": "ORD1164", + "CustomerName": "Leo Red", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-01-15"), + "Amount": "$55.53" + }, + { + "OrderID": "ORD1165", + "CustomerName": "Bob Wilson", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-08-09"), + "Amount": "$154.11" + }, + { + "OrderID": "ORD1166", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-03-29"), + "Amount": "$183.32" + }, + { + "OrderID": "ORD1167", + "CustomerName": "Noah Green", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-26"), + "Amount": "$151.69" + }, + { + "OrderID": "ORD1168", + "CustomerName": "John Doe", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-12-08"), + "Amount": "$19.30" + }, + { + "OrderID": "ORD1169", + "CustomerName": "Bob Wilson", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-02-07"), + "Amount": "$447.31" + }, + { + "OrderID": "ORD1170", + "CustomerName": "Kelly Gray", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-20"), + "Amount": "$257.60" + }, + { + "OrderID": "ORD1171", + "CustomerName": "Carol Davis", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-24"), + "Amount": "$244.83" + }, + { + "OrderID": "ORD1172", + "CustomerName": "Kelly Gray", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-01-12"), + "Amount": "$978.17" + }, + { + "OrderID": "ORD1173", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-11-07"), + "Amount": "$747.72" + }, + { + "OrderID": "ORD1174", + "CustomerName": "David Brown", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-04-23"), + "Amount": "$640.25" + }, + { + "OrderID": "ORD1175", + "CustomerName": "Frank Miller", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-06-08"), + "Amount": "$790.72" + }, + { + "OrderID": "ORD1176", + "CustomerName": "Kelly Gray", + "Product": "Phone", + "Status": "Shipped", + "OrderDate": new Date("2025-02-16"), + "Amount": "$910.53" + }, + { + "OrderID": "ORD1177", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-03-09"), + "Amount": "$788.65" + }, + { + "OrderID": "ORD1178", + "CustomerName": "Ivy White", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-03-26"), + "Amount": "$264.40" + }, + { + "OrderID": "ORD1179", + "CustomerName": "Bob Wilson", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-08-28"), + "Amount": "$963.26" + }, + { + "OrderID": "ORD1180", + "CustomerName": "David Brown", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-16"), + "Amount": "$792.78" + }, + { + "OrderID": "ORD1181", + "CustomerName": "John Doe", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-08-21"), + "Amount": "$374.90" + }, + { + "OrderID": "ORD1182", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-02-25"), + "Amount": "$678.09" + }, + { + "OrderID": "ORD1183", + "CustomerName": "Eve Green", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-11-09"), + "Amount": "$229.15" + }, + { + "OrderID": "ORD1184", + "CustomerName": "Leo Red", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-01"), + "Amount": "$148.38" + }, + { + "OrderID": "ORD1185", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-02-19"), + "Amount": "$242.45" + }, + { + "OrderID": "ORD1186", + "CustomerName": "Olivia Purple", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-08-01"), + "Amount": "$658.37" + }, + { + "OrderID": "ORD1187", + "CustomerName": "Noah Green", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-01-17"), + "Amount": "$693.38" + }, + { + "OrderID": "ORD1188", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-05"), + "Amount": "$108.36" + }, + { + "OrderID": "ORD1189", + "CustomerName": "Jack Black", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-07-23"), + "Amount": "$283.12" + }, + { + "OrderID": "ORD1190", + "CustomerName": "Leo Red", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-11-25"), + "Amount": "$643.10" + }, + { + "OrderID": "ORD1191", + "CustomerName": "Jane Smith", + "Product": "Phone", + "Status": "Shipped", + "OrderDate": new Date("2025-03-06"), + "Amount": "$789.11" + }, + { + "OrderID": "ORD1192", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-10-28"), + "Amount": "$223.79" + }, + { + "OrderID": "ORD1193", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-05-22"), + "Amount": "$859.82" + }, + { + "OrderID": "ORD1194", + "CustomerName": "Frank Miller", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-03-31"), + "Amount": "$118.83" + }, + { + "OrderID": "ORD1195", + "CustomerName": "Frank Miller", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-05-02"), + "Amount": "$592.96" + }, + { + "OrderID": "ORD1196", + "CustomerName": "Alice Johnson", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-03-06"), + "Amount": "$744.30" + }, + { + "OrderID": "ORD1197", + "CustomerName": "Grace Lee", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-18"), + "Amount": "$780.24" + }, + { + "OrderID": "ORD1198", + "CustomerName": "Kelly Gray", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-15"), + "Amount": "$229.33" + }, + { + "OrderID": "ORD1199", + "CustomerName": "Ivy White", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-26"), + "Amount": "$964.39" + }, + { + "OrderID": "ORD1200", + "CustomerName": "Paul Orange", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-18"), + "Amount": "$116.88" + }, + { + "OrderID": "ORD1201", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-11-08"), + "Amount": "$156.85" + }, + { + "OrderID": "ORD1202", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-07-15"), + "Amount": "$994.68" + }, + { + "OrderID": "ORD1203", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-20"), + "Amount": "$795.17" + }, + { + "OrderID": "ORD1204", + "CustomerName": "Jack Black", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-20"), + "Amount": "$889.21" + }, + { + "OrderID": "ORD1205", + "CustomerName": "Mia Blue", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-01"), + "Amount": "$732.32" + }, + { + "OrderID": "ORD1206", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-07-11"), + "Amount": "$954.06" + }, + { + "OrderID": "ORD1207", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-02-17"), + "Amount": "$437.56" + }, + { + "OrderID": "ORD1208", + "CustomerName": "Frank Miller", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-10-28"), + "Amount": "$957.06" + }, + { + "OrderID": "ORD1209", + "CustomerName": "Grace Lee", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-12-07"), + "Amount": "$941.72" + }, + { + "OrderID": "ORD1210", + "CustomerName": "Jane Smith", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-06-30"), + "Amount": "$112.56" + }, + { + "OrderID": "ORD1211", + "CustomerName": "Carol Davis", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-25"), + "Amount": "$848.80" + }, + { + "OrderID": "ORD1212", + "CustomerName": "Jack Black", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-05-23"), + "Amount": "$578.36" + }, + { + "OrderID": "ORD1213", + "CustomerName": "Jack Black", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-11-08"), + "Amount": "$929.79" + }, + { + "OrderID": "ORD1214", + "CustomerName": "Eve Green", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-12-26"), + "Amount": "$764.79" + }, + { + "OrderID": "ORD1215", + "CustomerName": "Rose Pink", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-03-15"), + "Amount": "$570.66" + }, + { + "OrderID": "ORD1216", + "CustomerName": "Henry Taylor", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-02-16"), + "Amount": "$748.65" + }, + { + "OrderID": "ORD1217", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-24"), + "Amount": "$165.84" + }, + { + "OrderID": "ORD1218", + "CustomerName": "Mia Blue", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-01-27"), + "Amount": "$164.02" + }, + { + "OrderID": "ORD1219", + "CustomerName": "Henry Taylor", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-05"), + "Amount": "$429.77" + }, + { + "OrderID": "ORD1220", + "CustomerName": "Olivia Purple", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-09-20"), + "Amount": "$122.68" + }, + { + "OrderID": "ORD1221", + "CustomerName": "Grace Lee", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-27"), + "Amount": "$670.46" + }, + { + "OrderID": "ORD1222", + "CustomerName": "David Brown", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-01-04"), + "Amount": "$212.38" + }, + { + "OrderID": "ORD1223", + "CustomerName": "Frank Miller", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-06-17"), + "Amount": "$128.78" + }, + { + "OrderID": "ORD1224", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-07-14"), + "Amount": "$537.26" + }, + { + "OrderID": "ORD1225", + "CustomerName": "Ivy White", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-02-06"), + "Amount": "$403.10" + }, + { + "OrderID": "ORD1226", + "CustomerName": "Olivia Purple", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-09"), + "Amount": "$863.49" + }, + { + "OrderID": "ORD1227", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-29"), + "Amount": "$124.02" + }, + { + "OrderID": "ORD1228", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-20"), + "Amount": "$920.57" + }, + { + "OrderID": "ORD1229", + "CustomerName": "Olivia Purple", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-08-12"), + "Amount": "$592.98" + }, + { + "OrderID": "ORD1230", + "CustomerName": "Henry Taylor", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-06-23"), + "Amount": "$229.36" + }, + { + "OrderID": "ORD1231", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-09-29"), + "Amount": "$514.85" + }, + { + "OrderID": "ORD1232", + "CustomerName": "Rose Pink", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-02-22"), + "Amount": "$154.98" + }, + { + "OrderID": "ORD1233", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-12-02"), + "Amount": "$84.60" + }, + { + "OrderID": "ORD1234", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-15"), + "Amount": "$924.91" + }, + { + "OrderID": "ORD1235", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-04"), + "Amount": "$474.23" + }, + { + "OrderID": "ORD1236", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-06-30"), + "Amount": "$512.26" + }, + { + "OrderID": "ORD1237", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-01-30"), + "Amount": "$375.05" + }, + { + "OrderID": "ORD1238", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-25"), + "Amount": "$584.53" + }, + { + "OrderID": "ORD1239", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-06-14"), + "Amount": "$608.96" + }, + { + "OrderID": "ORD1240", + "CustomerName": "Frank Miller", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-22"), + "Amount": "$812.86" + }, + { + "OrderID": "ORD1241", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-01-21"), + "Amount": "$255.27" + }, + { + "OrderID": "ORD1242", + "CustomerName": "Leo Red", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-07-06"), + "Amount": "$379.12" + }, + { + "OrderID": "ORD1243", + "CustomerName": "Quinn Yellow", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-12-14"), + "Amount": "$601.91" + }, + { + "OrderID": "ORD1244", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-10-13"), + "Amount": "$681.60" + }, + { + "OrderID": "ORD1245", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-06-20"), + "Amount": "$90.69" + }, + { + "OrderID": "ORD1246", + "CustomerName": "Rose Pink", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-08"), + "Amount": "$599.09" + }, + { + "OrderID": "ORD1247", + "CustomerName": "Bob Wilson", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-26"), + "Amount": "$793.75" + }, + { + "OrderID": "ORD1248", + "CustomerName": "Ivy White", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-18"), + "Amount": "$368.21" + }, + { + "OrderID": "ORD1249", + "CustomerName": "Bob Wilson", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-06-24"), + "Amount": "$948.19" + }, + { + "OrderID": "ORD1250", + "CustomerName": "Carol Davis", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-03-21"), + "Amount": "$86.39" + }, + { + "OrderID": "ORD1251", + "CustomerName": "Ivy White", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-12-05"), + "Amount": "$343.40" + }, + { + "OrderID": "ORD1252", + "CustomerName": "Noah Green", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-03-25"), + "Amount": "$189.04" + }, + { + "OrderID": "ORD1253", + "CustomerName": "Leo Red", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-06"), + "Amount": "$679.60" + }, + { + "OrderID": "ORD1254", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-08-18"), + "Amount": "$241.66" + }, + { + "OrderID": "ORD1255", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-08"), + "Amount": "$681.52" + }, + { + "OrderID": "ORD1256", + "CustomerName": "Leo Red", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-15"), + "Amount": "$532.19" + }, + { + "OrderID": "ORD1257", + "CustomerName": "Carol Davis", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-05-09"), + "Amount": "$61.66" + }, + { + "OrderID": "ORD1258", + "CustomerName": "Rose Pink", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-12-31"), + "Amount": "$847.43" + }, + { + "OrderID": "ORD1259", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-05-20"), + "Amount": "$454.83" + }, + { + "OrderID": "ORD1260", + "CustomerName": "Frank Miller", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-04-24"), + "Amount": "$818.54" + }, + { + "OrderID": "ORD1261", + "CustomerName": "Eve Green", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-07-22"), + "Amount": "$506.99" + }, + { + "OrderID": "ORD1262", + "CustomerName": "Quinn Yellow", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-04-25"), + "Amount": "$37.91" + }, + { + "OrderID": "ORD1263", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-01-20"), + "Amount": "$294.01" + }, + { + "OrderID": "ORD1264", + "CustomerName": "Frank Miller", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-12"), + "Amount": "$15.20" + }, + { + "OrderID": "ORD1265", + "CustomerName": "Eve Green", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-03-18"), + "Amount": "$553.32" + }, + { + "OrderID": "ORD1266", + "CustomerName": "Olivia Purple", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-05-02"), + "Amount": "$308.14" + }, + { + "OrderID": "ORD1267", + "CustomerName": "David Brown", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-02"), + "Amount": "$119.75" + }, + { + "OrderID": "ORD1268", + "CustomerName": "Noah Green", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-11-20"), + "Amount": "$520.22" + }, + { + "OrderID": "ORD1269", + "CustomerName": "Frank Miller", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-01"), + "Amount": "$618.66" + }, + { + "OrderID": "ORD1270", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-12-07"), + "Amount": "$671.53" + }, + { + "OrderID": "ORD1271", + "CustomerName": "Rose Pink", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-07-19"), + "Amount": "$874.60" + }, + { + "OrderID": "ORD1272", + "CustomerName": "Quinn Yellow", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-01-09"), + "Amount": "$363.52" + }, + { + "OrderID": "ORD1273", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-10-25"), + "Amount": "$737.84" + }, + { + "OrderID": "ORD1274", + "CustomerName": "Frank Miller", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-10-07"), + "Amount": "$345.16" + }, + { + "OrderID": "ORD1275", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-03-11"), + "Amount": "$72.47" + }, + { + "OrderID": "ORD1276", + "CustomerName": "Jane Smith", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-01-23"), + "Amount": "$793.20" + }, + { + "OrderID": "ORD1277", + "CustomerName": "Mia Blue", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-06"), + "Amount": "$478.67" + }, + { + "OrderID": "ORD1278", + "CustomerName": "Carol Davis", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-01-25"), + "Amount": "$867.14" + }, + { + "OrderID": "ORD1279", + "CustomerName": "John Doe", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-08-12"), + "Amount": "$890.59" + }, + { + "OrderID": "ORD1280", + "CustomerName": "Quinn Yellow", + "Product": "Phone", + "Status": "Shipped", + "OrderDate": new Date("2025-09-12"), + "Amount": "$695.15" + }, + { + "OrderID": "ORD1281", + "CustomerName": "Ivy White", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-08-06"), + "Amount": "$88.14" + }, + { + "OrderID": "ORD1282", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-02-22"), + "Amount": "$89.27" + }, + { + "OrderID": "ORD1283", + "CustomerName": "Bob Wilson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-27"), + "Amount": "$692.87" + }, + { + "OrderID": "ORD1284", + "CustomerName": "Leo Red", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-11-11"), + "Amount": "$998.17" + }, + { + "OrderID": "ORD1285", + "CustomerName": "Jane Smith", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-06"), + "Amount": "$517.96" + }, + { + "OrderID": "ORD1286", + "CustomerName": "Eve Green", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-18"), + "Amount": "$134.97" + }, + { + "OrderID": "ORD1287", + "CustomerName": "Rose Pink", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-18"), + "Amount": "$42.06" + }, + { + "OrderID": "ORD1288", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-08-16"), + "Amount": "$765.45" + }, + { + "OrderID": "ORD1289", + "CustomerName": "Ivy White", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-10"), + "Amount": "$653.07" + }, + { + "OrderID": "ORD1290", + "CustomerName": "Grace Lee", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-09-13"), + "Amount": "$522.57" + }, + { + "OrderID": "ORD1291", + "CustomerName": "John Doe", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-20"), + "Amount": "$996.40" + }, + { + "OrderID": "ORD1292", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-03-11"), + "Amount": "$854.30" + }, + { + "OrderID": "ORD1293", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-12-16"), + "Amount": "$967.89" + }, + { + "OrderID": "ORD1294", + "CustomerName": "Rose Pink", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-06-03"), + "Amount": "$852.85" + }, + { + "OrderID": "ORD1295", + "CustomerName": "Rose Pink", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-03-04"), + "Amount": "$985.28" + }, + { + "OrderID": "ORD1296", + "CustomerName": "David Brown", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-07-04"), + "Amount": "$558.48" + }, + { + "OrderID": "ORD1297", + "CustomerName": "Leo Red", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-11-10"), + "Amount": "$885.40" + }, + { + "OrderID": "ORD1298", + "CustomerName": "Bob Wilson", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-27"), + "Amount": "$416.69" + }, + { + "OrderID": "ORD1299", + "CustomerName": "Kelly Gray", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-06-12"), + "Amount": "$645.92" + }, + { + "OrderID": "ORD1300", + "CustomerName": "Leo Red", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-03-07"), + "Amount": "$879.18" + }, + { + "OrderID": "ORD1301", + "CustomerName": "Frank Miller", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-03-05"), + "Amount": "$522.92" + }, + { + "OrderID": "ORD1302", + "CustomerName": "Alice Johnson", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-12-30"), + "Amount": "$233.22" + }, + { + "OrderID": "ORD1303", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-04-11"), + "Amount": "$638.71" + }, + { + "OrderID": "ORD1304", + "CustomerName": "Frank Miller", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-09-15"), + "Amount": "$644.58" + }, + { + "OrderID": "ORD1305", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-10-16"), + "Amount": "$50.78" + }, + { + "OrderID": "ORD1306", + "CustomerName": "Henry Taylor", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-11-30"), + "Amount": "$218.70" + }, + { + "OrderID": "ORD1307", + "CustomerName": "Noah Green", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-18"), + "Amount": "$550.12" + }, + { + "OrderID": "ORD1308", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-02"), + "Amount": "$459.01" + }, + { + "OrderID": "ORD1309", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-05"), + "Amount": "$469.80" + }, + { + "OrderID": "ORD1310", + "CustomerName": "Noah Green", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-06-13"), + "Amount": "$736.86" + }, + { + "OrderID": "ORD1311", + "CustomerName": "Quinn Yellow", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-09-21"), + "Amount": "$566.03" + }, + { + "OrderID": "ORD1312", + "CustomerName": "David Brown", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-05-17"), + "Amount": "$455.10" + }, + { + "OrderID": "ORD1313", + "CustomerName": "Grace Lee", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-07-16"), + "Amount": "$865.52" + }, + { + "OrderID": "ORD1314", + "CustomerName": "David Brown", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-10-23"), + "Amount": "$723.92" + }, + { + "OrderID": "ORD1315", + "CustomerName": "Alice Johnson", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-13"), + "Amount": "$880.28" + }, + { + "OrderID": "ORD1316", + "CustomerName": "Eve Green", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-16"), + "Amount": "$462.66" + }, + { + "OrderID": "ORD1317", + "CustomerName": "Carol Davis", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-01-25"), + "Amount": "$60.04" + }, + { + "OrderID": "ORD1318", + "CustomerName": "Noah Green", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-10-02"), + "Amount": "$18.10" + }, + { + "OrderID": "ORD1319", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-07-07"), + "Amount": "$766.22" + }, + { + "OrderID": "ORD1320", + "CustomerName": "Jane Smith", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-10-19"), + "Amount": "$566.20" + }, + { + "OrderID": "ORD1321", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-07-17"), + "Amount": "$509.21" + }, + { + "OrderID": "ORD1322", + "CustomerName": "Noah Green", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-03-07"), + "Amount": "$975.33" + }, + { + "OrderID": "ORD1323", + "CustomerName": "Rose Pink", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-03-15"), + "Amount": "$207.07" + }, + { + "OrderID": "ORD1324", + "CustomerName": "Quinn Yellow", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-01-24"), + "Amount": "$48.52" + }, + { + "OrderID": "ORD1325", + "CustomerName": "Paul Orange", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-18"), + "Amount": "$610.20" + }, + { + "OrderID": "ORD1326", + "CustomerName": "Frank Miller", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-03-25"), + "Amount": "$399.03" + }, + { + "OrderID": "ORD1327", + "CustomerName": "Kelly Gray", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-29"), + "Amount": "$567.30" + }, + { + "OrderID": "ORD1328", + "CustomerName": "Eve Green", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-12-11"), + "Amount": "$118.51" + }, + { + "OrderID": "ORD1329", + "CustomerName": "Kelly Gray", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-11-02"), + "Amount": "$479.84" + }, + { + "OrderID": "ORD1330", + "CustomerName": "Jane Smith", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-29"), + "Amount": "$528.99" + }, + { + "OrderID": "ORD1331", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Pending", + "OrderDate": new Date("2025-10-21"), + "Amount": "$948.72" + }, + { + "OrderID": "ORD1332", + "CustomerName": "Carol Davis", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-10"), + "Amount": "$424.59" + }, + { + "OrderID": "ORD1333", + "CustomerName": "Carol Davis", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-01"), + "Amount": "$708.72" + }, + { + "OrderID": "ORD1334", + "CustomerName": "Carol Davis", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-12-06"), + "Amount": "$483.59" + }, + { + "OrderID": "ORD1335", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-30"), + "Amount": "$348.90" + }, + { + "OrderID": "ORD1336", + "CustomerName": "John Doe", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-09"), + "Amount": "$957.76" + }, + { + "OrderID": "ORD1337", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-06-02"), + "Amount": "$773.46" + }, + { + "OrderID": "ORD1338", + "CustomerName": "Paul Orange", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-28"), + "Amount": "$564.88" + }, + { + "OrderID": "ORD1339", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-22"), + "Amount": "$820.19" + }, + { + "OrderID": "ORD1340", + "CustomerName": "Bob Wilson", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-02-10"), + "Amount": "$352.90" + }, + { + "OrderID": "ORD1341", + "CustomerName": "John Doe", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-04-14"), + "Amount": "$829.67" + }, + { + "OrderID": "ORD1342", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-02-25"), + "Amount": "$619.52" + }, + { + "OrderID": "ORD1343", + "CustomerName": "David Brown", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-11-23"), + "Amount": "$240.51" + }, + { + "OrderID": "ORD1344", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-21"), + "Amount": "$684.38" + }, + { + "OrderID": "ORD1345", + "CustomerName": "Eve Green", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-07-28"), + "Amount": "$656.36" + }, + { + "OrderID": "ORD1346", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-06-14"), + "Amount": "$292.56" + }, + { + "OrderID": "ORD1347", + "CustomerName": "Henry Taylor", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-10-01"), + "Amount": "$741.30" + }, + { + "OrderID": "ORD1348", + "CustomerName": "Alice Johnson", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-01-19"), + "Amount": "$997.20" + }, + { + "OrderID": "ORD1349", + "CustomerName": "Paul Orange", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-01-20"), + "Amount": "$19.17" + }, + { + "OrderID": "ORD1350", + "CustomerName": "Mia Blue", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-25"), + "Amount": "$547.87" + }, + { + "OrderID": "ORD1351", + "CustomerName": "Frank Miller", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-20"), + "Amount": "$200.88" + }, + { + "OrderID": "ORD1352", + "CustomerName": "Mia Blue", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-28"), + "Amount": "$264.69" + }, + { + "OrderID": "ORD1353", + "CustomerName": "Eve Green", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-10-18"), + "Amount": "$677.66" + }, + { + "OrderID": "ORD1354", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-07"), + "Amount": "$520.13" + }, + { + "OrderID": "ORD1355", + "CustomerName": "Quinn Yellow", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-03-13"), + "Amount": "$482.68" + }, + { + "OrderID": "ORD1356", + "CustomerName": "Eve Green", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-01"), + "Amount": "$452.27" + }, + { + "OrderID": "ORD1357", + "CustomerName": "Mia Blue", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-05-14"), + "Amount": "$657.15" + }, + { + "OrderID": "ORD1358", + "CustomerName": "Jane Smith", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-07"), + "Amount": "$168.12" + }, + { + "OrderID": "ORD1359", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-07-08"), + "Amount": "$618.48" + }, + { + "OrderID": "ORD1360", + "CustomerName": "Frank Miller", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-08-21"), + "Amount": "$750.26" + }, + { + "OrderID": "ORD1361", + "CustomerName": "Olivia Purple", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-03"), + "Amount": "$803.98" + }, + { + "OrderID": "ORD1362", + "CustomerName": "David Brown", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-09-27"), + "Amount": "$452.28" + }, + { + "OrderID": "ORD1363", + "CustomerName": "Henry Taylor", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-02-01"), + "Amount": "$830.49" + }, + { + "OrderID": "ORD1364", + "CustomerName": "Carol Davis", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-03-26"), + "Amount": "$334.84" + }, + { + "OrderID": "ORD1365", + "CustomerName": "Leo Red", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-10-26"), + "Amount": "$493.94" + }, + { + "OrderID": "ORD1366", + "CustomerName": "Leo Red", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-09"), + "Amount": "$518.12" + }, + { + "OrderID": "ORD1367", + "CustomerName": "Kelly Gray", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-11"), + "Amount": "$808.85" + }, + { + "OrderID": "ORD1368", + "CustomerName": "Quinn Yellow", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-04-22"), + "Amount": "$582.53" + }, + { + "OrderID": "ORD1369", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-10-05"), + "Amount": "$994.18" + }, + { + "OrderID": "ORD1370", + "CustomerName": "Paul Orange", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-07-29"), + "Amount": "$188.18" + }, + { + "OrderID": "ORD1371", + "CustomerName": "Olivia Purple", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-18"), + "Amount": "$870.92" + }, + { + "OrderID": "ORD1372", + "CustomerName": "Quinn Yellow", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-12-01"), + "Amount": "$861.68" + }, + { + "OrderID": "ORD1373", + "CustomerName": "Alice Johnson", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-28"), + "Amount": "$136.07" + }, + { + "OrderID": "ORD1374", + "CustomerName": "Eve Green", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-08-26"), + "Amount": "$676.76" + }, + { + "OrderID": "ORD1375", + "CustomerName": "Olivia Purple", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-04-28"), + "Amount": "$255.04" + }, + { + "OrderID": "ORD1376", + "CustomerName": "Frank Miller", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-02-27"), + "Amount": "$41.90" + }, + { + "OrderID": "ORD1377", + "CustomerName": "Noah Green", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-04-16"), + "Amount": "$76.62" + }, + { + "OrderID": "ORD1378", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-05-06"), + "Amount": "$743.14" + }, + { + "OrderID": "ORD1379", + "CustomerName": "Leo Red", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-01-29"), + "Amount": "$148.73" + }, + { + "OrderID": "ORD1380", + "CustomerName": "David Brown", + "Product": "Book", + "Status": "Delivered", + "OrderDate": new Date("2025-10-23"), + "Amount": "$601.94" + }, + { + "OrderID": "ORD1381", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Shipped", + "OrderDate": new Date("2025-12-05"), + "Amount": "$526.04" + }, + { + "OrderID": "ORD1382", + "CustomerName": "Bob Wilson", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-10-13"), + "Amount": "$949.04" + }, + { + "OrderID": "ORD1383", + "CustomerName": "Olivia Purple", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-25"), + "Amount": "$972.57" + }, + { + "OrderID": "ORD1384", + "CustomerName": "Ivy White", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-29"), + "Amount": "$157.73" + }, + { + "OrderID": "ORD1385", + "CustomerName": "Alice Johnson", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-04"), + "Amount": "$850.85" + }, + { + "OrderID": "ORD1386", + "CustomerName": "Frank Miller", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-10-15"), + "Amount": "$418.55" + }, + { + "OrderID": "ORD1387", + "CustomerName": "Jack Black", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-07-18"), + "Amount": "$250.43" + }, + { + "OrderID": "ORD1388", + "CustomerName": "Mia Blue", + "Product": "Bag", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-09"), + "Amount": "$101.54" + }, + { + "OrderID": "ORD1389", + "CustomerName": "Jane Smith", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-11"), + "Amount": "$608.92" + }, + { + "OrderID": "ORD1390", + "CustomerName": "Henry Taylor", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-09-03"), + "Amount": "$216.80" + }, + { + "OrderID": "ORD1391", + "CustomerName": "Bob Wilson", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-04-08"), + "Amount": "$962.46" + }, + { + "OrderID": "ORD1392", + "CustomerName": "Paul Orange", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-07-23"), + "Amount": "$915.98" + }, + { + "OrderID": "ORD1393", + "CustomerName": "Bob Wilson", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-01"), + "Amount": "$652.23" + }, + { + "OrderID": "ORD1394", + "CustomerName": "John Doe", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-27"), + "Amount": "$107.62" + }, + { + "OrderID": "ORD1395", + "CustomerName": "Mia Blue", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-06-10"), + "Amount": "$419.79" + }, + { + "OrderID": "ORD1396", + "CustomerName": "Frank Miller", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-10-11"), + "Amount": "$935.41" + }, + { + "OrderID": "ORD1397", + "CustomerName": "Bob Wilson", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-06-18"), + "Amount": "$237.72" + }, + { + "OrderID": "ORD1398", + "CustomerName": "Paul Orange", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-05-12"), + "Amount": "$765.73" + }, + { + "OrderID": "ORD1399", + "CustomerName": "Paul Orange", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-06-30"), + "Amount": "$177.57" + }, + { + "OrderID": "ORD1400", + "CustomerName": "Paul Orange", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-09-26"), + "Amount": "$43.49" + }, + { + "OrderID": "ORD1401", + "CustomerName": "Jane Smith", + "Product": "Shirt", + "Status": "Cancelled", + "OrderDate": new Date("2025-03-12"), + "Amount": "$844.12" + }, + { + "OrderID": "ORD1402", + "CustomerName": "Henry Taylor", + "Product": "Watch", + "Status": "Pending", + "OrderDate": new Date("2025-04-22"), + "Amount": "$510.68" + }, + { + "OrderID": "ORD1403", + "CustomerName": "Jane Smith", + "Product": "Book", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-04"), + "Amount": "$492.98" + }, + { + "OrderID": "ORD1404", + "CustomerName": "Jack Black", + "Product": "Shoes", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-07"), + "Amount": "$26.56" + }, + { + "OrderID": "ORD1405", + "CustomerName": "Jack Black", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-09-15"), + "Amount": "$815.03" + }, + { + "OrderID": "ORD1406", + "CustomerName": "Alice Johnson", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-09-26"), + "Amount": "$157.41" + }, + { + "OrderID": "ORD1407", + "CustomerName": "Noah Green", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-07-01"), + "Amount": "$274.65" + }, + { + "OrderID": "ORD1408", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-08-24"), + "Amount": "$569.35" + }, + { + "OrderID": "ORD1409", + "CustomerName": "Bob Wilson", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-02-17"), + "Amount": "$411.23" + }, + { + "OrderID": "ORD1410", + "CustomerName": "Jack Black", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-11-23"), + "Amount": "$19.36" + }, + { + "OrderID": "ORD1411", + "CustomerName": "Henry Taylor", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-27"), + "Amount": "$786.53" + }, + { + "OrderID": "ORD1412", + "CustomerName": "Ivy White", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-04-19"), + "Amount": "$902.26" + }, + { + "OrderID": "ORD1413", + "CustomerName": "John Doe", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-12-17"), + "Amount": "$926.33" + }, + { + "OrderID": "ORD1414", + "CustomerName": "Kelly Gray", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-06-11"), + "Amount": "$25.50" + }, + { + "OrderID": "ORD1415", + "CustomerName": "Kelly Gray", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-09"), + "Amount": "$306.28" + }, + { + "OrderID": "ORD1416", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-07-16"), + "Amount": "$758.05" + }, + { + "OrderID": "ORD1417", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-01-28"), + "Amount": "$106.71" + }, + { + "OrderID": "ORD1418", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-06-17"), + "Amount": "$39.33" + }, + { + "OrderID": "ORD1419", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-07-02"), + "Amount": "$557.51" + }, + { + "OrderID": "ORD1420", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-13"), + "Amount": "$774.45" + }, + { + "OrderID": "ORD1421", + "CustomerName": "David Brown", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-05-18"), + "Amount": "$162.68" + }, + { + "OrderID": "ORD1422", + "CustomerName": "Quinn Yellow", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-02-24"), + "Amount": "$100.61" + }, + { + "OrderID": "ORD1423", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-02-22"), + "Amount": "$141.18" + }, + { + "OrderID": "ORD1424", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-22"), + "Amount": "$36.00" + }, + { + "OrderID": "ORD1425", + "CustomerName": "Jack Black", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-07-17"), + "Amount": "$22.22" + }, + { + "OrderID": "ORD1426", + "CustomerName": "Quinn Yellow", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-10-20"), + "Amount": "$525.89" + }, + { + "OrderID": "ORD1427", + "CustomerName": "Alice Johnson", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-06-04"), + "Amount": "$275.72" + }, + { + "OrderID": "ORD1428", + "CustomerName": "Henry Taylor", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-22"), + "Amount": "$426.89" + }, + { + "OrderID": "ORD1429", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-05-07"), + "Amount": "$723.69" + }, + { + "OrderID": "ORD1430", + "CustomerName": "Noah Green", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-08-23"), + "Amount": "$115.90" + }, + { + "OrderID": "ORD1431", + "CustomerName": "Eve Green", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-11-14"), + "Amount": "$386.09" + }, + { + "OrderID": "ORD1432", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-30"), + "Amount": "$974.48" + }, + { + "OrderID": "ORD1433", + "CustomerName": "Bob Wilson", + "Product": "Phone", + "Status": "Shipped", + "OrderDate": new Date("2025-09-03"), + "Amount": "$321.04" + }, + { + "OrderID": "ORD1434", + "CustomerName": "Mia Blue", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-22"), + "Amount": "$784.15" + }, + { + "OrderID": "ORD1435", + "CustomerName": "Quinn Yellow", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-07-06"), + "Amount": "$122.75" + }, + { + "OrderID": "ORD1436", + "CustomerName": "Kelly Gray", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-12-16"), + "Amount": "$769.94" + }, + { + "OrderID": "ORD1437", + "CustomerName": "Leo Red", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-30"), + "Amount": "$832.97" + }, + { + "OrderID": "ORD1438", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-11-21"), + "Amount": "$309.80" + }, + { + "OrderID": "ORD1439", + "CustomerName": "Frank Miller", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-07"), + "Amount": "$454.58" + }, + { + "OrderID": "ORD1440", + "CustomerName": "Kelly Gray", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-06"), + "Amount": "$46.40" + }, + { + "OrderID": "ORD1441", + "CustomerName": "Jack Black", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-02-25"), + "Amount": "$771.26" + }, + { + "OrderID": "ORD1442", + "CustomerName": "Alice Johnson", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-10-16"), + "Amount": "$983.77" + }, + { + "OrderID": "ORD1443", + "CustomerName": "Mia Blue", + "Product": "Tablet", + "Status": "Pending", + "OrderDate": new Date("2025-01-06"), + "Amount": "$107.62" + }, + { + "OrderID": "ORD1444", + "CustomerName": "Ivy White", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-08-17"), + "Amount": "$380.38" + }, + { + "OrderID": "ORD1445", + "CustomerName": "Kelly Gray", + "Product": "Shoes", + "Status": "Shipped", + "OrderDate": new Date("2025-06-26"), + "Amount": "$997.73" + }, + { + "OrderID": "ORD1446", + "CustomerName": "Grace Lee", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-13"), + "Amount": "$124.91" + }, + { + "OrderID": "ORD1447", + "CustomerName": "Rose Pink", + "Product": "Laptop", + "Status": "Delivered", + "OrderDate": new Date("2025-08-22"), + "Amount": "$786.43" + }, + { + "OrderID": "ORD1448", + "CustomerName": "Paul Orange", + "Product": "Phone", + "Status": "Cancelled", + "OrderDate": new Date("2025-02-19"), + "Amount": "$443.78" + }, + { + "OrderID": "ORD1449", + "CustomerName": "Mia Blue", + "Product": "Bag", + "Status": "Delivered", + "OrderDate": new Date("2025-01-23"), + "Amount": "$812.08" + }, + { + "OrderID": "ORD1450", + "CustomerName": "Eve Green", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-12-13"), + "Amount": "$802.05" + }, + { + "OrderID": "ORD1451", + "CustomerName": "Ivy White", + "Product": "Watch", + "Status": "Shipped", + "OrderDate": new Date("2025-06-19"), + "Amount": "$564.25" + }, + { + "OrderID": "ORD1452", + "CustomerName": "David Brown", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-04-06"), + "Amount": "$644.07" + }, + { + "OrderID": "ORD1453", + "CustomerName": "Quinn Yellow", + "Product": "Shirt", + "Status": "Shipped", + "OrderDate": new Date("2025-08-19"), + "Amount": "$596.28" + }, + { + "OrderID": "ORD1454", + "CustomerName": "Eve Green", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-05-23"), + "Amount": "$754.80" + }, + { + "OrderID": "ORD1455", + "CustomerName": "Kelly Gray", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-07-07"), + "Amount": "$332.73" + }, + { + "OrderID": "ORD1456", + "CustomerName": "Grace Lee", + "Product": "Laptop", + "Status": "Cancelled", + "OrderDate": new Date("2025-09-28"), + "Amount": "$966.26" + }, + { + "OrderID": "ORD1457", + "CustomerName": "Noah Green", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-28"), + "Amount": "$123.09" + }, + { + "OrderID": "ORD1458", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-12-11"), + "Amount": "$708.93" + }, + { + "OrderID": "ORD1459", + "CustomerName": "Noah Green", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-12-11"), + "Amount": "$142.61" + }, + { + "OrderID": "ORD1460", + "CustomerName": "David Brown", + "Product": "Laptop", + "Status": "Pending", + "OrderDate": new Date("2025-04-04"), + "Amount": "$379.57" + }, + { + "OrderID": "ORD1461", + "CustomerName": "Ivy White", + "Product": "Tablet", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-02"), + "Amount": "$146.49" + }, + { + "OrderID": "ORD1462", + "CustomerName": "Olivia Purple", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-11-22"), + "Amount": "$542.01" + }, + { + "OrderID": "ORD1463", + "CustomerName": "Jack Black", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-05-28"), + "Amount": "$148.89" + }, + { + "OrderID": "ORD1464", + "CustomerName": "Leo Red", + "Product": "Book", + "Status": "Pending", + "OrderDate": new Date("2025-07-03"), + "Amount": "$952.32" + }, + { + "OrderID": "ORD1465", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-10-15"), + "Amount": "$510.38" + }, + { + "OrderID": "ORD1466", + "CustomerName": "Olivia Purple", + "Product": "Camera", + "Status": "Cancelled", + "OrderDate": new Date("2025-12-30"), + "Amount": "$841.49" + }, + { + "OrderID": "ORD1467", + "CustomerName": "Alice Johnson", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-04-23"), + "Amount": "$299.17" + }, + { + "OrderID": "ORD1468", + "CustomerName": "David Brown", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-03-28"), + "Amount": "$782.93" + }, + { + "OrderID": "ORD1469", + "CustomerName": "Jack Black", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-10-21"), + "Amount": "$123.06" + }, + { + "OrderID": "ORD1470", + "CustomerName": "Rose Pink", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-08-14"), + "Amount": "$550.89" + }, + { + "OrderID": "ORD1471", + "CustomerName": "Grace Lee", + "Product": "Headphones", + "Status": "Delivered", + "OrderDate": new Date("2025-01-17"), + "Amount": "$455.24" + }, + { + "OrderID": "ORD1472", + "CustomerName": "Henry Taylor", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-05-02"), + "Amount": "$217.78" + }, + { + "OrderID": "ORD1473", + "CustomerName": "Noah Green", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-11-12"), + "Amount": "$147.84" + }, + { + "OrderID": "ORD1474", + "CustomerName": "Carol Davis", + "Product": "Shirt", + "Status": "Delivered", + "OrderDate": new Date("2025-09-30"), + "Amount": "$288.27" + }, + { + "OrderID": "ORD1475", + "CustomerName": "Alice Johnson", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-05-29"), + "Amount": "$577.01" + }, + { + "OrderID": "ORD1476", + "CustomerName": "Grace Lee", + "Product": "Watch", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-31"), + "Amount": "$992.56" + }, + { + "OrderID": "ORD1477", + "CustomerName": "Frank Miller", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-12-31"), + "Amount": "$328.88" + }, + { + "OrderID": "ORD1478", + "CustomerName": "Quinn Yellow", + "Product": "Camera", + "Status": "Shipped", + "OrderDate": new Date("2025-10-23"), + "Amount": "$636.08" + }, + { + "OrderID": "ORD1479", + "CustomerName": "Quinn Yellow", + "Product": "Camera", + "Status": "Pending", + "OrderDate": new Date("2025-11-21"), + "Amount": "$796.65" + }, + { + "OrderID": "ORD1480", + "CustomerName": "Quinn Yellow", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-12-22"), + "Amount": "$936.97" + }, + { + "OrderID": "ORD1481", + "CustomerName": "Leo Red", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-10-25"), + "Amount": "$12.45" + }, + { + "OrderID": "ORD1482", + "CustomerName": "Leo Red", + "Product": "Phone", + "Status": "Pending", + "OrderDate": new Date("2025-10-01"), + "Amount": "$403.74" + }, + { + "OrderID": "ORD1483", + "CustomerName": "Carol Davis", + "Product": "Camera", + "Status": "Delivered", + "OrderDate": new Date("2025-06-15"), + "Amount": "$830.06" + }, + { + "OrderID": "ORD1484", + "CustomerName": "Jack Black", + "Product": "Book", + "Status": "Shipped", + "OrderDate": new Date("2025-10-17"), + "Amount": "$853.90" + }, + { + "OrderID": "ORD1485", + "CustomerName": "Jane Smith", + "Product": "Shirt", + "Status": "Pending", + "OrderDate": new Date("2025-11-17"), + "Amount": "$786.05" + }, + { + "OrderID": "ORD1486", + "CustomerName": "Eve Green", + "Product": "Bag", + "Status": "Shipped", + "OrderDate": new Date("2025-08-14"), + "Amount": "$461.95" + }, + { + "OrderID": "ORD1487", + "CustomerName": "Carol Davis", + "Product": "Watch", + "Status": "Delivered", + "OrderDate": new Date("2025-03-23"), + "Amount": "$875.68" + }, + { + "OrderID": "ORD1488", + "CustomerName": "Henry Taylor", + "Product": "Phone", + "Status": "Delivered", + "OrderDate": new Date("2025-02-12"), + "Amount": "$378.13" + }, + { + "OrderID": "ORD1489", + "CustomerName": "Jane Smith", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-12-25"), + "Amount": "$757.68" + }, + { + "OrderID": "ORD1490", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-04-20"), + "Amount": "$482.04" + }, + { + "OrderID": "ORD1491", + "CustomerName": "Kelly Gray", + "Product": "Headphones", + "Status": "Cancelled", + "OrderDate": new Date("2025-01-05"), + "Amount": "$17.98" + }, + { + "OrderID": "ORD1492", + "CustomerName": "Grace Lee", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-09-02"), + "Amount": "$80.12" + }, + { + "OrderID": "ORD1493", + "CustomerName": "Henry Taylor", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-06-10"), + "Amount": "$373.89" + }, + { + "OrderID": "ORD1494", + "CustomerName": "Frank Miller", + "Product": "Tablet", + "Status": "Shipped", + "OrderDate": new Date("2025-11-25"), + "Amount": "$993.01" + }, + { + "OrderID": "ORD1495", + "CustomerName": "Henry Taylor", + "Product": "Shoes", + "Status": "Pending", + "OrderDate": new Date("2025-11-09"), + "Amount": "$653.52" + }, + { + "OrderID": "ORD1496", + "CustomerName": "Rose Pink", + "Product": "Headphones", + "Status": "Shipped", + "OrderDate": new Date("2025-07-30"), + "Amount": "$619.92" + }, + { + "OrderID": "ORD1497", + "CustomerName": "Carol Davis", + "Product": "Bag", + "Status": "Pending", + "OrderDate": new Date("2025-03-13"), + "Amount": "$754.92" + }, + { + "OrderID": "ORD1498", + "CustomerName": "Rose Pink", + "Product": "Tablet", + "Status": "Delivered", + "OrderDate": new Date("2025-03-13"), + "Amount": "$255.31" + }, + { + "OrderID": "ORD1499", + "CustomerName": "David Brown", + "Product": "Shoes", + "Status": "Delivered", + "OrderDate": new Date("2025-12-20"), + "Amount": "$36.56" + } +] +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.html b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.html new file mode 100644 index 000000000..f27842a53 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.html @@ -0,0 +1,22 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + +
    Loading....
    + + + + diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.js b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.js new file mode 100644 index 000000000..881592f34 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/index.js @@ -0,0 +1,47 @@ +import Vue from "vue"; +import { GridPlugin,Page, Filter, Toolbar, Edit, Sort} from "@syncfusion/ej2-vue-grids"; +import { ordersTrackData } from "./datasource.js"; + +Vue.use(GridPlugin); + +new Vue({ + el: '#app', + template: ` +
    + + + + + + + + + + + +
    +`, + +data() { + return { + data: ordersTrackData, + selectionOptions : { persistSelection: true }, + toolbarSettings: ['Edit', 'Update', 'Cancel'], + filterSettings: { type: 'Excel' }, + editSettings: { allowEditing: true, allowAdding: false, allowDeleting: false }, + orderIDRules: { required: true }, + customerNameRules: { required: true }, + amountRules: { required: true } + }; +}, +methods:{ + isRowSelectable: function (data, columns) { + return data.Status !== 'Cancelled'; + } +}, + provide: { + grid: [Page, Filter, Toolbar, Edit, Sort] +} + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/systemjs.config.js b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/systemjs.config.js new file mode 100644 index 000000000..27de59df3 --- /dev/null +++ b/ej2-vue/code-snippet/grid/select/prevent-checkbox-selection/systemjs.config.js @@ -0,0 +1,40 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.12/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.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-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app-composition.vue b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app-composition.vue new file mode 100644 index 000000000..b3ab28b17 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app-composition.vue @@ -0,0 +1,170 @@ + + + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app.vue b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app.vue new file mode 100644 index 000000000..44b4af13c --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/app.vue @@ -0,0 +1,179 @@ + + + + + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.css b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.css new file mode 100644 index 000000000..e3c0074c9 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.css @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.html b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.html new file mode 100644 index 000000000..303d777bf --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
    Loading....
    + + + + diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.js b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.js new file mode 100644 index 000000000..b2de4e57c --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/index.js @@ -0,0 +1,161 @@ +import Vue from 'vue'; +import { RichTextEditorPlugin, Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, NodeSelection, Audio, PasteCleanup } from '@syncfusion/ej2-vue-richtexteditor'; +import { MentionPlugin } from '@syncfusion/ej2-vue-dropdowns'; +import { DropDownButtonPlugin } from '@syncfusion/ej2-vue-splitbuttons'; +Vue.use(RichTextEditorPlugin); +Vue.use(MentionPlugin); +Vue.use(DropDownButtonPlugin); + +new Vue({ + el: '#app', + template: `
    +
    +
    +
    + + + +
    + + + +
    +
    +
    `, + + data() { + return { + selection: new NodeSelection(), + saveInterval: 1, + ranges: null, + saveSelection: null, + value: `

    Dear {{FirstName}} {{LastName}},

    +

    We are thrilled to have you with us! Your unique promotional code for this month is: {{PromoCode}}.

    +

    Your current subscription plan is: {{SubscriptionPlan}}.

    +

    Your customer ID is: {{CustomerID}}.

    +

    Your promotional code expires on: {{ExpirationDate}}.

    +

    Feel free to browse our latest offerings and updates. If you need any assistance, don't hesitate to contact us at {{SupportEmail}} or call us at {{SupportPhoneNumber}}.

    +

    Best regards,
    The {{CompanyName}} Team

    `, + dropdownContent: `Insert Field`, + itemsName: [ + { text: 'First Name' }, + { text: 'Last Name' }, + { text: 'Support Email' }, + { text: 'Company Name' }, + { text: 'Promo Code' }, + { text: 'Support Phone Number' }, + { text: 'Customer ID' }, + { text: 'Expiration Date' }, + { text: 'Subscription Plan' }, + ], + placeholderData: { + FirstName: 'John', + LastName: 'Doe', + PromoCode: 'ABC123', + SubscriptionPlan: 'Premium', + CustomerID: '123456', + ExpirationDate: '2024-12-31', + SupportEmail: 'support@example.com', + SupportPhoneNumber: '+1-800-555-5555', + CompanyName: 'Example Inc.', + }, + textToValueMap: { + 'First Name': 'FirstName', + 'Last Name': 'LastName', + 'Support Email': 'SupportEmail', + 'Company Name': 'CompanyName', + 'Promo Code': 'PromoCode', + 'Support Phone Number': 'SupportPhoneNumber', + 'Customer ID': 'CustomerID', + 'Expiration Date': 'ExpirationDate', + 'Subscription Plan': 'SubscriptionPlan', + }, + mergeData: [ + { text: 'First Name', value: 'FirstName' }, + { text: 'Last Name', value: 'LastName' }, + { text: 'Support Email', value: 'SupportEmail' }, + { text: 'Company Name', value: 'CompanyName' }, + { text: 'Promo Code', value: 'PromoCode' }, + { text: 'Support Phone Number', value: 'SupportPhoneNumber' }, + { text: 'Customer ID', value: 'CustomerID' }, + { text: 'Expiration Date', value: 'ExpirationDate' }, + { text: 'Subscription Plan', value: 'SubscriptionPlan' }, + ], + fieldsData: { text: 'text', value: 'value' }, + mentionChar: '{{', + toolbarSettings: { + items: [ + 'Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', 'CreateTable', '|', + { tooltipText: 'Merge Data', template: '#merge_data', command: 'Custom' }, + { tooltipText: 'Insert Field', template: '#insertField', command: 'Custom' }, + 'SourceCode', '|', 'Undo', 'Redo', + ], + }, + } + }, + provide: { + richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar] + }, + methods: { + onDropDownClose() { + if (this.$refs.rteObj && this.$refs.rteObj.ej2Instances) { + this.$refs.rteObj.ej2Instances.focusIn(); +} + }, + formatMentionTemplate(value) { + return `{{${value}}}`; + }, + displayTemplate(data) { + return `${data.value}`; + }, + onItemSelect: function(args) { + if (args && args.item && args.item.text) { + const value = this.textToValueMap[args.item.text.trim()]; + if (value && this.$refs.rteObj && this.$refs.rteObj.ej2Instances) { + this.$refs.rteObj.ej2Instances.formatter.editorManager.nodeSelection.restore(); + this.$refs.rteObj.ej2Instances.executeCommand('insertHTML', `{{${value}}} `, { undo: true }); + } else { + console.log('No matching value found in textToValueMap or RichTextEditor is not initialized.'); + } + } + }, + onActionBegin(args) { + if (args.requestType === 'EnterAction' && this.$refs.mentionObj && this.$refs.mentionObj.ej2Instances && this.$refs.mentionObj.ej2Instances.element.classList.contains('e-popup-open')) { + args.cancel = true; + } + }, + OnActionComplete(e) { + if (e.requestType === 'SourceCode') { + this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay'); + this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#insertField').parentElement.classList.add('e-overlay'); + } else if (e.requestType === 'Preview') { + this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay'); + this.$refs.rteObj.ej2Instances.getToolbar().querySelector('#insertField').parentElement.classList.remove('e-overlay'); + } + }, + onClickHandler() { + if (this.$refs.rteObj && this.$refs.rteObj.ej2Instances) { + let editorContent = this.$refs.rteObj.ej2Instances.value || ''; + let mergedContent = this.replacePlaceholders(editorContent, this.placeholderData); + if (this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack() && this.$refs.rteObj.ej2Instances.formatter.getUndoRedoStack().length === 0) { + this.$refs.rteObj.ej2Instances.formatter.saveData(); + } + this.value = mergedContent; + this.$refs.rteObj.ej2Instances.formatter.saveData(); + this.$refs.rteObj.trigger('change'); + } else { + console.log('MailMergeEditor is not initialized.'); + } + }, + replacePlaceholders(template, data) { + return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => { + const value = data[key.trim()]; + return value !== undefined ? value : match; + }); + }, + } +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js new file mode 100644 index 000000000..7f1950c45 --- /dev/null +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js @@ -0,0 +1,50 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.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-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-data": "syncfusion:ej2-vue-data/dist/ej2-vue-data.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-inputs": "syncfusion:ej2-vue-inputs/dist/ej2-vue-inputs.umd.min.js", + "@syncfusion/ej2-vue-lists": "syncfusion:ej2-vue-lists/dist/ej2-vue-lists.umd.min.js", + "@syncfusion/ej2-vue-popups": "syncfusion:ej2-vue-popups/dist/ej2-vue-popups.umd.min.js", + "@syncfusion/ej2-vue-splitbuttons": "syncfusion:ej2-vue-splitbuttons/dist/ej2-vue-splitbuttons.umd.min.js", + "@syncfusion/ej2-vue-dropdowns": "syncfusion:ej2-vue-dropdowns/dist/ej2-vue-dropdowns.umd.min.js", + "@syncfusion/ej2-vue-navigations": "syncfusion:ej2-vue-navigations/dist/ej2-vue-navigations.umd.min.js", + "@syncfusion/ej2-vue-richtexteditor": "syncfusion:ej2-vue-richtexteditor/dist/ej2-vue-richtexteditor.umd.min.js" + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js index b2de4e57c..e62b5b324 100644 --- a/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js +++ b/ej2-vue/code-snippet/rich-text-editor/mail-merge/index.js @@ -1,3 +1,4 @@ +{% raw %} import Vue from 'vue'; import { RichTextEditorPlugin, Toolbar, Link, Image, QuickToolbar, HtmlEditor, Table, Video, NodeSelection, Audio, PasteCleanup } from '@syncfusion/ej2-vue-richtexteditor'; import { MentionPlugin } from '@syncfusion/ej2-vue-dropdowns'; @@ -158,4 +159,5 @@ new Vue({ }); }, } -}); \ No newline at end of file +}); +{% endraw %} \ No newline at end of file diff --git a/ej2-vue/code-snippet/rich-text-editor/selection/index.js b/ej2-vue/code-snippet/rich-text-editor/selection/index.js index c241e3bee..868447a47 100644 --- a/ej2-vue/code-snippet/rich-text-editor/selection/index.js +++ b/ej2-vue/code-snippet/rich-text-editor/selection/index.js @@ -2,7 +2,7 @@ import Vue from "vue"; import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table, CodeBlock } from "@syncfusion/ej2-vue-richtexteditor"; import { SliderPlugin } from "@syncfusion/ej2-vue-inputs"; Vue.use(RichTextEditorPlugin); -Vue.use(RichTextEditorPlugin); +Vue.use(SliderPlugin); new Vue({ el: '#app', diff --git a/ej2-vue/grid/selection/check-box-selection.md b/ej2-vue/grid/selection/check-box-selection.md index 040695c81..24a78caa0 100644 --- a/ej2-vue/grid/selection/check-box-selection.md +++ b/ej2-vue/grid/selection/check-box-selection.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## Checkbox selection in the Grid component allows you to provide an option to select multiple records by using a checkbox in each row. This feature is particularly useful when you need to perform bulk actions or operations on selected records within the Grid. -To render checkbox in each grid row, you need to use checkbox column with type as **checkbox** using column [type](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#type) property. +To render checkbox in each grid row, you need to use checkbox column with type as **checkbox** using column [type](https://ej2.syncfusion.com/vue/documentation/api/grid/column#type) property. Here's an example of how to enable check box selection using `type` property in the Grid component: @@ -27,12 +27,12 @@ Here's an example of how to enable check box selection using `type` property in {% previewsample "page.domainurl/code-snippet/grid/select/selection-checkbox" %} ->* By default selection is allowed by clicking a grid row or checkbox in that row. To allow selection only through checkbox, you can set [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#checkboxonly) property to **true**. -> * Selection can be persisted on all the operations using [selectionSettings.persistSelection](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#persistselection) property. For persisting selection on the Grid, any one of the column should be defined as a primary key using [columns.isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#isprimarykey) property. +>* By default selection is allowed by clicking a grid row or checkbox in that row. To allow selection only through checkbox, you can set [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#checkboxonly) property to **true**. +> * Selection can be persisted on all the operations using [selectionSettings.persistSelection](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#persistselection) property. For persisting selection on the Grid, any one of the column should be defined as a primary key using [columns.isPrimaryKey](https://ej2.syncfusion.com/vue/documentation/api/grid/column#isprimarykey) property. ## Checkbox selection mode -The checkbox selection mode in the Grid allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. This feature provides two types of checkbox selection modes that can be set using the [selectionSettings.checkboxMode](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#checkboxmode) property. The available modes are: +The checkbox selection mode in the Grid allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. This feature provides two types of checkbox selection modes that can be set using the [selectionSettings.checkboxMode](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#checkboxmode) property. The available modes are: * **Default**: This is the default value of the `checkboxMode`. In this mode, you can select multiple rows by clicking rows one by one. When you click on a row, the checkbox associated with that row also switches to the **checked** state. * **ResetOnRowClick**: In `ResetOnRowClick` mode, when clicking on row it will reset previously selected row. Also you can perform multiple-selection in this mode by press and hold CTRL key and click the desired rows. To select range of rows, press and hold the SHIFT key and click the rows. @@ -54,7 +54,7 @@ In the following example, it demonstrates how to dynamically enable and change t You can hide the select all checkbox in the column header of the Syncfusion® Grid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the grid. -By default, when you set the column type as [checkbox](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#type), it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [headerTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#headertemplate) in the grid Column. +By default, when you set the column type as [checkbox](https://ej2.syncfusion.com/vue/documentation/api/grid/column#type), it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [headerTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/column#headertemplate) in the grid Column. Here's an example of how to hide selectall checkbox in column header using empty `headerTemplate` in the Grid component: @@ -73,7 +73,7 @@ Here's an example of how to hide selectall checkbox in column header using empty The checkbox selection mode allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. However, there might be scenarios where you want to prevent specific rows from being selected based on certain conditions or business requirements. -To achieve this, you can use the [rowDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdatabound) event of the Grid. The `rowDataBound` event is triggered for each row after it is bound to the data source. In this event, you can check the row data and determine whether the row should be selectable or not. If you want to prevent the row from being selected, you can set the [isSelectable](https://ej2.syncfusion.com/vue/documentation/api/grid/rowDataBoundEventArgs/#isselectable) argument of the event to **false**. +To achieve this, you can use the [rowDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#rowdatabound) event of the Grid. The `rowDataBound` event is triggered for each row after it is bound to the data source. In this event, you can check the row data and determine whether the row should be selectable or not. If you want to prevent the row from being selected, you can set the [isSelectable](https://ej2.syncfusion.com/vue/documentation/api/grid/rowDataBoundEventArgs#isselectable) argument of the event to **false**. In the following sample, the selection of specific rows has been prevented based on the `isSelectable` argument in the `rowDataBound` event. @@ -88,13 +88,32 @@ In the following sample, the selection of specific rows has been prevented based {% previewsample "page.domainurl/code-snippet/grid/select/selection-checkbox-prevent" %} +## Partial selection using isRowSelectable + +The `isRowSelectable` callback in Syncfusion's EJ2 Grid allows control over which rows users can select. It uses a simple callback that runs before the grid loads the data. This callback checks each row data and returns **true** if the row can be selected, or **false** for non-selectable rows. + +For local data, the callback checks all items just once when the grid first loads. For remote data, it only checks the rows shown on the current page when the grid first appears. It re-checks them every time an action occurs, such as changing pages, filtering, or sorting. + +In the example below, it prevents selection of rows with canceled orders. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/select/prevent-checkbox-selection/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/select/prevent-checkbox-selection/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/select/prevent-checkbox-selection" %} + ## How to select single row in checkbox selection mode The Vue Grid allows you to select only one row at a time within the Grid. This feature is particularly useful when you want to ensure that only a single row is selected, and any previous selections are cleared when a new row is selected. -To achieve single-row selection in checkbox selection mode within the Grid, you can handle the [rowSelecting](https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselecting) event and use the [clearSelection](https://ej2.syncfusion.com/vue/documentation/api/grid/#clearselection) method to clear any previous selections before selecting a new row. This ensures that only one row is selected at a time, and any prior selections are deselected when a new row is chosen. +To achieve single-row selection in checkbox selection mode within the Grid, you can handle the [rowSelecting](https://ej2.syncfusion.com/vue/documentation/api/grid#rowselecting) event and use the [clearSelection](https://ej2.syncfusion.com/vue/documentation/api/grid#clearselection) method to clear any previous selections before selecting a new row. This ensures that only one row is selected at a time, and any prior selections are deselected when a new row is chosen. ->* When you set the [checkboxMode](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#checkboxmode) property to **ResetOnRowClick**, it will reset the previously selected row when you click on a new row. Please note that this behavior applies to rows and not checkboxes, and it is the default behavior of the grid. +>* When you set the [checkboxMode](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#checkboxmode) property to **ResetOnRowClick**, it will reset the previously selected row when you click on a new row. Please note that this behavior applies to rows and not checkboxes, and it is the default behavior of the grid. Here's an example of how to select a single row in checkbox selection mode using the `clearSelection` method along with the `rowSelecting` event: @@ -111,7 +130,7 @@ Here's an example of how to select a single row in checkbox selection mode using ## Allow selection only through checkbox click -By default, the Grid component allows selection by clicking either a grid row or the checkbox within that row. If you want to restrict selection so that it can only be done by clicking the checkboxes, you can set the [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings/#checkboxonly) property to **true**. +By default, the Grid component allows selection by clicking either a grid row or the checkbox within that row. If you want to restrict selection so that it can only be done by clicking the checkboxes, you can set the [selectionSettings.checkboxOnly](https://ej2.syncfusion.com/vue/documentation/api/grid/selectionSettings#checkboxonly) property to **true**. Here's an example of how to enable selection only through checkbox click using `checkboxOnly` property: diff --git a/ej2-vue/rich-text-editor/selection.md b/ej2-vue/rich-text-editor/selection.md index 90958d1fd..db4b9c2d4 100644 --- a/ej2-vue/rich-text-editor/selection.md +++ b/ej2-vue/rich-text-editor/selection.md @@ -14,7 +14,186 @@ domainurl: ##DomainURL## The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** component. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. -This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. +### Adding a Slider for character range selection + +The Rich Text Editor can be integrated with the **Slider** component to enable precise character range-based text selection. The slider is configured in `range` type, allowing users to select a start and end index within the editor content. When the slider values change, the corresponding text range is highlighted automatically. + +This approach is particularly useful for scenarios where exact character-level selection is required for operations such as copying, formatting, or analysis. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### Dynamic range adjustment based on content + +When the editor is created, the actual length of the text content is calculated, and the slider’s maximum value is updated dynamically to match this length. This ensures that the slider range always reflects the current content size. The editor is also focused programmatically to make the selection visible, and an initial selection is applied based on the slider’s default values. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### Precise selection using DOM range + +The selection logic is implemented in the [change](https://ej2.syncfusion.com/vue/documentation/api/slider/index-default#change) event of the slider. It retrieves the start and end positions from the slider and ensures they are within valid bounds. The code then uses a helper function, `getTextNodeAtOffset()`, which employs a `TreeWalker` to traverse text nodes and locate the exact node and offset for the given character positions. + +A Range object is created using these offsets and applied to the current selection using the browser’s `Selection` API. This guarantees accurate highlighting even when the content spans multiple text nodes. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +### Helper function for accurate offset calculation + +The `getTextNodeAtOffset()` function uses a `TreeWalker` to traverse text nodes inside the editor and determine the exact node and offset for a given character index. This ensures that even complex content structures are handled correctly. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + +{% endhighlight %} +{% endtabs %} {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -63,7 +242,7 @@ The following example demonstrates how to select a table cell programmatically u ## Select all content -To select all content within the Rich Text Editor, use the [selectAll](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/index-default#selectall/) method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content. +To select all content within the Rich Text Editor, use the [selectAll](https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/index-default#selectall) method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/ej2-vue/rich-text-editor/smart-editing/mail-merge.md b/ej2-vue/rich-text-editor/smart-editing/mail-merge.md index 25c7288f2..48ba2263e 100644 --- a/ej2-vue/rich-text-editor/smart-editing/mail-merge.md +++ b/ej2-vue/rich-text-editor/smart-editing/mail-merge.md @@ -8,12 +8,219 @@ documentation: ug domainurl: ##DomainURL## --- -# Mail merge in Vue Rich Text Editor Component +# Mail merge in Vue Rich Text Editor component The Rich Text Editor can be customized to implement **Mail Merge** functionality by inserting placeholders into the editor using custom toolbar items. These placeholders are later replaced with actual data to generate personalized content such as letters, invoices, and reports. This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation. +## Adding custom toolbar items for inserting merge fields + +To enable mail merge functionality, the Rich Text Editor toolbar is extended with two custom buttons: `Insert Field` and `Merge Data`. These buttons are added using the `template` property in [toolbarSettings.items](https://helpej2.syncfusion.com/vue/documentation/api/rich-text-editor/toolbarSettingsModel#items), which points to custom HTML elements (#insertField and #merge_data). + +- **Insert Field:** Opens a dropdown list of merge fields for inserting placeholders like `{{FirstName}}` into the editor. +- **Merge Data:** Replaces all placeholders in the editor with actual values from a predefined data source. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## Using DropDownButton for selecting placeholders + +The **DropDownButton** component displays a list of merge fields such as First Name, Last Name, and Company Name. When a user selects an item, the corresponding placeholder (e.g., {{FirstName}}) is inserted at the current cursor position using the `insertHTML` command. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## Populating merge fields using Mention + +The **Mention** component provides an alternative way to insert placeholders by typing the {{ character inside the editor. A popup list of merge fields appears, allowing quick selection without using the toolbar. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + + + +{% endhighlight %} +{% endtabs %} + +## Replacing placeholders with actual data dynamically + +When the **Merge Data** button is clicked, the editor content is processed to replace all placeholders with actual values from the `placeholderData` object. This is done using a regular expression in the `replacePlaceholders()` function. + +{% tabs %} +{% highlight html tabtitle="~/src/App.vue" %} + + + + + +{% endhighlight %} +{% endtabs %} + {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} {% include code-snippet/rich-text-editor/mail-merge/app-composition.vue %} @@ -21,4 +228,6 @@ This feature simplifies the creation of dynamic documents by allowing users to i {% highlight html tabtitle="Options API (~/src/App.vue)" %} {% include code-snippet/rich-text-editor/mail-merge/app.vue %} {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/rich-text-editor/mail-merge-cs1" %} \ No newline at end of file From 6a48547c0dd3a504c11b046f6f4f2ce7839f2844 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Wed, 26 Nov 2025 07:41:41 +0530 Subject: [PATCH 03/11] Integrated latest changes at 11-26-2025 7:30:04 AM --- .../detail-row-events/app-composition.vue | 52 ++++ .../hierarchy-grid/detail-row-events/app.vue | 67 ++++ .../detail-row-events/datasource.js | 285 ++++++++++++++++++ .../detail-row-events/index.html | 22 ++ .../hierarchy-grid/detail-row-events/index.js | 57 ++++ .../detail-row-events/systemjs.config.js | 41 +++ ej2-vue/grid/hierarchy-grid.md | 47 ++- ej2-vue/grid/row/detail-template.md | 14 +- 8 files changed, 568 insertions(+), 17 deletions(-) create mode 100644 ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue create mode 100644 ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app.vue create mode 100644 ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/datasource.js create mode 100644 ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.html create mode 100644 ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.js create mode 100644 ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/systemjs.config.js diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue new file mode 100644 index 000000000..1d5601b4a --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue @@ -0,0 +1,52 @@ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app.vue b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app.vue new file mode 100644 index 000000000..c300e8525 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/app.vue @@ -0,0 +1,67 @@ + + + \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/datasource.js b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/datasource.js new file mode 100644 index 000000000..3e9415f52 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/datasource.js @@ -0,0 +1,285 @@ +define(["require", "exports"], function (require, exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.data = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 2, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; + exports.employeeData = [{ + 'EmployeeID': 1, + 'LastName': 'Davolio', + 'FirstName': 'Nancy', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Ms.', + 'BirthDate': new Date(-664743600000), + 'HireDate': new Date(704692800000), + 'Address': '507 - 20th Ave. E.\r\nApt. 2A', + 'City': 'Seattle', + 'Region': 'WA', + 'PostalCode': '98122', + 'Country': 'USA', + 'HomePhone': '(206) 555-9857', + 'Extension': '5467', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\ + \'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }, + { + 'EmployeeID': 2, + 'LastName': 'Fuller', + 'FirstName': 'Andrew', + 'Title': 'Vice President, Sales', + 'TitleOfCourtesy': 'Dr.', + 'BirthDate': new Date(-563828400000), + 'HireDate': new Date(713764800000), + 'Address': '908 W. Capital Way', + 'City': 'Tacoma', + 'Region': 'WA', + 'PostalCode': '98401', + 'Country': 'USA', + 'HomePhone': '(206) 555-9482', + 'Extension': '3457', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \ + Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \ + was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \ + Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.', + 'ReportsTo': 0, + 'PhotoPath': 'http://accweb/emmployees/fuller.bmp' + }, + { + 'EmployeeID': 3, + 'LastName': 'Leverling', + 'FirstName': 'Janet', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Ms.', + 'BirthDate': new Date(-200088000000), + 'HireDate': new Date(702104400000), + 'Address': '722 Moss Bay Blvd.', + 'City': 'Kirkland', + 'Region': 'WA', + 'PostalCode': '98033', + 'Country': 'USA', + 'HomePhone': '(206) 555-3412', + 'Extension': '3355', + 'Photo': { 'Length': 21722 }, + + 'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \ + She has also completed a certificate program in food retailing management.\ + Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/leverling.bmp' + }, + { + 'EmployeeID': 4, + 'LastName': 'Peacock', + 'FirstName': 'Margaret', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Mrs.', + 'BirthDate': new Date(-1018814400000), + 'HireDate': new Date(736401600000), + 'Address': '4110 Old Redmond Rd.', + 'City': 'Redmond', + 'Region': 'WA', + 'PostalCode': '98052', + 'Country': 'USA', + 'HomePhone': '(206) 555-8122', + 'Extension': '5176', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \ + Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/peacock.bmp' + }, + { + 'EmployeeID': 5, + 'LastName': 'Buchanan', + 'FirstName': 'Steven', + 'Title': 'Sales Manager', + 'TitleOfCourtesy': 'Mr.', + 'BirthDate': new Date(-468010800000), + 'HireDate': new Date(750830400000), + 'Address': '14 Garrett Hill', + 'City': 'London', + 'Region': null, + 'PostalCode': + 'SW1 8JR', + 'Country': 'UK', + 'HomePhone': '(71) 555-4848', + 'Extension': '3453', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \ + a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \ + post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \ + Telemarketing\' and \'International Sales Management.\' He is fluent in French.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/buchanan.bmp' + }, + { + 'EmployeeID': 6, + 'LastName': 'Suyama', + 'FirstName': 'Michael', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Mr.', + 'BirthDate': new Date(-205185600000), + 'HireDate': new Date(750830400000), + 'Address': 'Coventry House\r\nMiner Rd.', + 'City': 'London', + 'Region': null, + 'PostalCode': 'EC2 7JR', + 'Country': 'UK', + 'HomePhone': '(71) 555-7773', + 'Extension': '428', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \ + (MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \ + He is fluent in Japanese and can read and write French, Portuguese, and Spanish.', + 'ReportsTo': 5, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }, + { + 'EmployeeID': 7, + 'LastName': 'King', + 'FirstName': 'Robert', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Mr.', + 'BirthDate': new Date(-302731200000), + 'HireDate': new Date(757486800000), + 'Address': 'Edgeham Hollow\r\nWinchester Way', + 'City': 'London', + 'Region': null, + 'PostalCode': 'RG1 9SP', + 'Country': 'UK', + 'HomePhone': '(71) 555-5598', + 'Extension': '465', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \ + University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \ + he was transferred to the London office in March 1993.', + 'ReportsTo': 5, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }, + { + 'EmployeeID': 8, + 'LastName': 'Callahan', + 'FirstName': 'Laura', + 'Title': 'Inside Sales Coordinator', + 'TitleOfCourtesy': 'Ms.', + 'BirthDate': new Date(-377982000000), + 'HireDate': new Date(762843600000), + 'Address': '4726 - 11th Ave. N.E.', + 'City': 'Seattle', + 'Region': 'WA', + 'PostalCode': '98105', + 'Country': 'USA', + 'HomePhone': '(206) 555-1189', + 'Extension': '2344', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \ + French. She reads and writes French.', + 'ReportsTo': 2, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }, + { + 'EmployeeID': 9, + 'LastName': 'Dodsworth', + 'FirstName': 'Anne', + 'Title': 'Sales Representative', + 'TitleOfCourtesy': 'Ms.', + 'BirthDate': new Date(-123966000000), + 'HireDate': new Date(784875600000), + 'Address': '7 Houndstooth Rd.', + 'City': 'London', + 'Region': null, + 'PostalCode': 'WG2 7LT', + 'Country': 'UK', + 'HomePhone': '(71) 555-4444', + 'Extension': '452', + 'Photo': { 'Length': 21626 }, + + 'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.', + 'ReportsTo': 5, + 'PhotoPath': 'http://accweb/emmployees/davolio.bmp' + }]; +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.html b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.html new file mode 100644 index 000000000..f27842a53 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.html @@ -0,0 +1,22 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + +
    Loading....
    + + + + diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.js b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.js new file mode 100644 index 000000000..0f826da12 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/index.js @@ -0,0 +1,57 @@ + +import Vue from "vue"; +import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids"; +import { data, employeeData } from './datasource.js'; + +Vue.use(GridPlugin); + + +new Vue({ + el: '#app', + template: ` +
    + + + + + + + + +
    +`, + + data() { + return { + parentData: employeeData, + childGrid: { + dataSource: data, + queryString: 'EmployeeID', + columns: [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, + { field: 'CustomerID', headerText: 'Customer ID', width: 150 }, + { field: 'ShipCity', headerText: 'Ship City', width: 150 }, + { field: 'ShipName', headerText: 'Ship Name', width: 150 } + ] + } + } + }, + methods: { + // Prevent expanding detail row. + detailExpand: function(args){ + if (args.data.FirstName === 'Nancy') { + args.cancel = true; + } + }, + // Prevent collapsing detail row. + detailCollapse: function(args){ + if (args.data.FirstName === 'Andrew') { + args.cancel = true; + } + } + }, + provide: { + grid: [DetailRow] + } + +}); \ No newline at end of file diff --git a/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/systemjs.config.js b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/systemjs.config.js new file mode 100644 index 000000000..9fc004334 --- /dev/null +++ b/ej2-vue/code-snippet/grid/hierarchy-grid/detail-row-events/systemjs.config.js @@ -0,0 +1,41 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.12/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", +vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.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-dropdowns":"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.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-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-buttons": "syncfusion:ej2-vue-buttons/dist/ej2-vue-buttons.umd.min.js", + "@syncfusion/ej2-vue-grids": "syncfusion:ej2-vue-grids/dist/ej2-vue-grids.umd.min.js", + } +}); + +System.import('index.js'); \ No newline at end of file diff --git a/ej2-vue/grid/hierarchy-grid.md b/ej2-vue/grid/hierarchy-grid.md index d2cca2c13..213924a2c 100644 --- a/ej2-vue/grid/hierarchy-grid.md +++ b/ej2-vue/grid/hierarchy-grid.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The Hierarchy Grid in an Vue Grid component is typically used when you need to display hierarchical data in a tabular format with expandable and collapsible rows. It allows you to represent parent and child relationships within the grid, making it easier for you to navigate and understand the data. -This feature can be enabled by utilizing the [childGrid](https://ej2.syncfusion.com/vue/documentation/api/grid/#childgrid) and [childGrid.queryString](https://ej2.syncfusion.com/vue/documentation/api/grid/#querystring) properties of the grid component. +This feature can be enabled by utilizing the [childGrid](https://ej2.syncfusion.com/vue/documentation/api/grid#childgrid) and [childGrid.queryString](https://ej2.syncfusion.com/vue/documentation/api/grid#querystring) properties of the grid component. To enable the Hierarchy Grid feature: @@ -36,13 +36,13 @@ The following example demonstrates how to enable the hierarchy feature in the gr {% previewsample "page.domainurl/code-snippet/grid/hierarchy-grid/default-cs2" %} > * Grid supports n level of child grids. -> * Hierarchical binding is not supported when [DetailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/#detailtemplate) is enabled. +> * Hierarchical binding is not supported when [DetailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid#detailtemplate) is enabled. ## Bind hierarchy grid with different field By default, the parent and child grids have the same field name to map and render a hierarchical grid. However, the component supports establishing a parent-child relationship between grids with different field names. This feature is beneficial when you want to create a parent-child relationship between grids but need to use distinct field names for mapping the data. As a result, you can easily establish the desired relationship between the parent and child grids, even with different field names for data mapping. -By default, the parent and child grid relation is maintained using the [queryString](https://ej2.syncfusion.com/vue/documentation/api/grid/#querystring) property, which requires the same field name for both grids. However, to achieve the parent and child relation with different fields, you need to modify the mapping value in the [load](https://ej2.syncfusion.com/vue/documentation/api/grid/#load) event of child grid. +By default, the parent and child grid relation is maintained using the [queryString](https://ej2.syncfusion.com/vue/documentation/api/grid#querystring) property, which requires the same field name for both grids. However, to achieve the parent and child relation with different fields, you need to modify the mapping value in the [load](https://ej2.syncfusion.com/vue/documentation/api/grid#load) event of child grid. In the following example, the `load` event is utilized to customize the mapping value for the child grid. By accessing the `parentDetails` property and its **parentKeyFieldValue**, you can set the desired mapping value. The `parentRowData` property contains the data of the parent row, and by using the **EmployeeID** field name, you can extract the corresponding value from the parent row data. @@ -63,7 +63,7 @@ In the following example, the `load` event is utilized to customize the mapping Expanding the child grid initially in the Syncfusion® Vue Grid component is helpful when you want to display the child rows of the hierarchical grid expanded by default upon grid load. This can be beneficial in scenarios where you want to provide immediate visibility into the hierarchical data without requiring you to manually expand each child row. -To achieve this, you can use the [expand](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow/#expand) method with the desired target index (number) in the [dataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#databound) event of the grid. +To achieve this, you can use the [expand](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow#expand) method with the desired target index (number) in the [dataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#databound) event of the grid. In the provided example, expand the third record of the grid by utilizing the `expand` method within the `dataBound` event. @@ -84,7 +84,7 @@ In the provided example, expand the third record of the grid by utilizing the `e Dynamically load child grid data in Syncfusion® Vue Grid helps improve performance, optimize data transmission, and enhance the your experience by providing on-demand access to relevant information. Additionally, it offers flexibility in data presentation, which helps improve the overall efficiency of your application. -To dynamically load the `dataSource` of a child grid in the Grid, you can utilize the [load](https://ej2.syncfusion.com/vue/documentation/api/grid/#load) event of parent grid. This event allows you to customize the loading behavior of the child grid based on the data of parent grid. +To dynamically load the `dataSource` of a child grid in the Grid, you can utilize the [load](https://ej2.syncfusion.com/vue/documentation/api/grid#load) event of parent grid. This event allows you to customize the loading behavior of the child grid based on the data of parent grid. The following example demonstrates how to dynamically load child grid data using the `load` event. @@ -103,7 +103,7 @@ The following example demonstrates how to dynamically load child grid data using Dynamically binding data to a child grid based on the parent row data in the Syncfusion® Vue Grid component is useful when you want to display child grid data that is specific to each parent row. This feature allows for a dynamic and contextual representation of data within the child grid. -To dynamically bind data to the child grid based on the parent row data instead of using the [queryString](https://ej2.syncfusion.com/vue/documentation/api/grid/#querystring) property, you can utilize the [detailDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#detaildatabound) event of the grid. This event is triggered when expanding the child grid. +To dynamically bind data to the child grid based on the parent row data instead of using the [queryString](https://ej2.syncfusion.com/vue/documentation/api/grid#querystring) property, you can utilize the [detailDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#detaildatabound) event of the grid. This event is triggered when expanding the child grid. In the `detailDataBound` event handler, you can filter the child grid's dataSource based on the **EmployeeID** column value of the parent row data. This can be achieved by using the `DataManager` plugin and applying a filter to the child grid's dataSource. The filtered data can be assigned as the new dataSource for the child grid. This can be demonstrated by the following sample. @@ -122,7 +122,7 @@ In the `detailDataBound` event handler, you can filter the child grid's dataSour Adding a record in a child grid within the Syncfusion® Vue Grid component is useful when you want to provide the ability to add new records to the child grid. This feature allows you to input and save additional data specific to each parent row. -To maintain the parent-child relationship in the Grid when adding a record to the child grid, you need to set the value for the `queryString` in the added data. This can be done using the [actionBegin](https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin) event. +To maintain the parent-child relationship in the Grid when adding a record to the child grid, you need to set the value for the `queryString` in the added data. This can be done using the [actionBegin](https://ej2.syncfusion.com/vue/documentation/api/grid#actionbegin) event. In the following example, the parent and child grids are related by the **EmployeeID** field. To add a new record in the child grid, the **EmployeeID** field needs to be set with the value of the parent record's `queryString` in the `actionBegin` event. @@ -141,7 +141,7 @@ In the following example, the parent and child grids are related by the **Employ A template column in a child grid within the Syncfusion® Vue Grid component is valuable when you want to customize the appearance and functionality of specific columns in the child grid. It is useful for incorporating interactive elements, custom formatting, or complex data representation within specific columns of the child grid. -To achieve this, you can utilize the [template](https://ej2.syncfusion.com/vue/documentation/api/grid/column/#template) property of a column to display a custom element instead of a field value in the Grid. +To achieve this, you can utilize the [template](https://ej2.syncfusion.com/vue/documentation/api/grid/column#template) property of a column to display a custom element instead of a field value in the Grid. The following example demonstrates, how to show a custom image in the **Employee Image** column of the child grid by utilizing the `template` property of the column. @@ -160,7 +160,7 @@ The following example demonstrates, how to show a custom image in the **Employee Getting parent details in a child grid in an Vue Grid component is useful when you want to display and utilize information from the parent row within the child grid. This can be beneficial in scenarios where you need to provide additional context or perform calculations based on the parent row's data -To achieve this, you can utilize the [created](https://ej2.syncfusion.com/vue/documentation/api/grid/#created) event. This event is triggered when the child grid is created and can be used to handle the child grid. +To achieve this, you can utilize the [created](https://ej2.syncfusion.com/vue/documentation/api/grid#created) event. This event is triggered when the child grid is created and can be used to handle the child grid. The following example demonstrates how to obtain parent details in a child grid using the `created` event. Within the `created` event, you can access the parent row data using `this.parentDetails.parentRowData` and display the desired details in the message. @@ -198,7 +198,7 @@ The following example demonstrates how to render aggregates in a child grid to d The Hierarchy Grid in the Syncfusion® Vue Grid component allows you to expand all child grid rows using an external button. This feature provides you with a convenient overview of all the hierarchical data within the grid, eliminating the need to manually expand each row individually. -By default, Grid renders all child grid rows in collapsed state. To expand all child grid rows in the Grid using an external button, you can utilize the [expandAll](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow/#expandall) method provided by the DetailRow module. Similarly, to collapse all grid rows, you can use the [collapseAll](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow/#collapseall) method. +By default, Grid renders all child grid rows in collapsed state. To expand all child grid rows in the Grid using an external button, you can utilize the [expandAll](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow#expandall) method provided by the DetailRow module. Similarly, to collapse all grid rows, you can use the [collapseAll](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow#collapseall) method. The following example demonstrates how to expand and collapse the hierarchy grid using an external button click function. @@ -219,7 +219,7 @@ The following example demonstrates how to expand and collapse the hierarchy grid The Syncfusion® Vue Grid allows you to hide the expand/collapse icon in the parent row when there are no records in the child grid. However, in certain scenarios, you may want to hide the expand/collapse icon for parent rows that do not have any child records, providing a cleaner and more intuitive interface by eliminating unnecessary icons in empty parent rows. -To achieve this, you can utilize the [rowDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#rowdatabound) event to hide the icon when there are no records in the child grid. +To achieve this, you can utilize the [rowDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#rowdatabound) event to hide the icon when there are no records in the child grid. To hide the expand/collapse icon in parent row when no records in child grid, follow the given steps: @@ -293,6 +293,29 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and {% previewsample "page.domainurl/code-snippet/grid/hierarchy-grid/default-icon" %} +## Detail row events + +The Grid component provides the `detailExpand` and `detailCollapse` events, which are triggered when a detail row is about to expand or collapse. These events fire before the detail row actually expands or collapses, allowing you to control whether the action should proceed. + +`detailExpand` – This event is triggered before a detail row begins to expand. You can access the expansion details through the event arguments and optionally prevent the expansion by setting: +`args.cancel = true`; + +`detailCollapse` – This event is triggered before a detail row begins to collapse. You can access the collapse details through the event arguments and optionally prevent the collapse by setting: +`args.cancel = true`; + +In the example below, expansion is prevented for the **Nancy** row, and collapse is prevented for the **Andrew** row. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} +{% include code-snippet/grid/hierarchy-grid/detail-row-events/app-composition.vue %} +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} +{% include code-snippet/grid/hierarchy-grid/detail-row-events/app.vue %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/hierarchy-grid/ddetail-row-events" %} + ## Customize the child grid The Syncfusion® Vue Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid. @@ -303,7 +326,7 @@ You can customize the appearance of the header elements in the child grid using **Customizing the child grid header** -To customize the appearance of the chid grid header root element, you can use the following CSS code: +To customize the appearance of the child grid header root element, you can use the following CSS code: ```css .e-detailcell .e-grid .e-headercontent{ diff --git a/ej2-vue/grid/row/detail-template.md b/ej2-vue/grid/row/detail-template.md index b5ff56e1a..315869932 100644 --- a/ej2-vue/grid/row/detail-template.md +++ b/ej2-vue/grid/row/detail-template.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Detail template in Vue Grid component -The detail template in the Grid component allows you to display additional information about a specific row in the grid by expanding or collapsing detail content. This feature is useful when you need to show additional data or custom content that is specific to each row in the grid. You can use the [detailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/#detailtemplate) property to define an HTML template for the detail row. This template can include any HTML element or Vue component that you want to display as detail content. +The detail template in the Grid component allows you to display additional information about a specific row in the grid by expanding or collapsing detail content. This feature is useful when you need to show additional data or custom content that is specific to each row in the grid. You can use the [detailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid#detailtemplate) property to define an HTML template for the detail row. This template can include any HTML element or Vue component that you want to display as detail content. Here's an example of using the `detailTemplate` property in the grid component: @@ -319,9 +319,9 @@ td { The Grid component provides a powerful feature that allows you to render custom components inside the detail row. This feature is helpful when you need to add additional information or functionality for a specific row in the grid. -To render a custom component inside the detail row, you need to define a template using the [detailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid/#detailtemplate) property and handle the [detailDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid/#detaildatabound) event.This template can include any HTML element or Vue component that you want to display as the detail content. +To render a custom component inside the detail row, you need to define a template using the [detailTemplate](https://ej2.syncfusion.com/vue/documentation/api/grid#detailtemplate) property and handle the [detailDataBound](https://ej2.syncfusion.com/vue/documentation/api/grid#detaildatabound) event.This template can include any HTML element or Vue component that you want to display as the detail content. -The `detailDataBound` event is an event that is triggered after a detail row is bound to data. This event provides an object of type [DetailDataBoundEventArgs](https://ej2.syncfusion.com/vue/documentation/api/grid/detaildataboundeventargs/) as a parameter. +The `detailDataBound` event is an event that is triggered after a detail row is bound to data. This event provides an object of type [DetailDataBoundEventArgs](https://ej2.syncfusion.com/vue/documentation/api/grid/detaildataboundeventargs) as a parameter. For example, to render grid inside the detail row, place an HTML div element as the `detailTemplate` and render the DIV element as grid component in the `detailDataBound` event. @@ -340,7 +340,7 @@ For example, to render grid inside the detail row, place an HTML div element as The Grid provides a feature that allows you to expand the detail row of a grid using an external button. By default, detail rows render in a collapsed state, but this feature enables users to view additional details associated with a particular row. -To achieve expanding the detail row of a grid using an external button, you need to invoke the [expand](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow/#expand) method provided by the **detailRowModule** object of the Syncfusion® Grid library. This method will expand the detail row of a specific grid row. +To achieve expanding the detail row of a grid using an external button, you need to invoke the [expand](https://ej2.syncfusion.com/vue/documentation/api/grid/detailRow#expand) method provided by the **detailRowModule** object of the Syncfusion® Grid library. This method will expand the detail row of a specific grid row. Here is an example of how to use the `expand` method to expand a detail row: @@ -989,4 +989,8 @@ Detail template is not supported with the following features: * Row spanning * Column spanning * Lazy load grouping -* State persistence \ No newline at end of file +* State persistence + +## See also + +* [Detail row events](../hierarchy-grid#detail-row-events) \ No newline at end of file From 8fd84cf75dd4b72aceadcdc1d96e29bd6ae55b96 Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Thu, 27 Nov 2025 07:41:25 +0530 Subject: [PATCH 04/11] Integrated latest changes at 11-27-2025 7:30:04 AM --- ej2-vue-toc.html | 195 +++++++++++++++------------ ej2-vue/chart/chart-appearance.md | 110 ++------------- ej2-vue/chart/data-labels.md | 48 ++++++- ej2-vue/chart/lastvaluelabel.md | 45 ------- ej2-vue/chart/selection.md | 12 +- ej2-vue/chart/title-subtitle.md | 99 ++++++++++++++ ej2-vue/chart/understanding-chart.md | 38 ++++++ ej2-vue/images/chart_elements.png | Bin 0 -> 75236 bytes 8 files changed, 303 insertions(+), 244 deletions(-) delete mode 100644 ej2-vue/chart/lastvaluelabel.md create mode 100644 ej2-vue/chart/title-subtitle.md create mode 100644 ej2-vue/chart/understanding-chart.md create mode 100644 ej2-vue/images/chart_elements.png diff --git a/ej2-vue-toc.html b/ej2-vue-toc.html index 56b2bd1b3..136890faa 100644 --- a/ej2-vue-toc.html +++ b/ej2-vue-toc.html @@ -480,95 +480,112 @@
  • Accessibility
  • -Chart - + Chart +
  • Chat UI
  • Release Notes