-
-
- 2025 Volume 3 - 31.* +
- 2025 Volume 4 - 32.*
- 2025 Volume 3 - 31.*
- Weekly Release
- 31.2.10
- 31.2.5
- 31.2.4 diff --git a/ej2-react/Release-notes/32.1.19.md b/ej2-react/Release-notes/32.1.19.md new file mode 100644 index 000000000..e5553b89c --- /dev/null +++ b/ej2-react/Release-notes/32.1.19.md @@ -0,0 +1,98 @@ +--- +title: Essential Studio for React Release Notes +description: Learn here about the controls in the Essential Studio for React 2025 Volume 4 Main Release - Release Notes +platform: ej2-react +documentation: ug +--- + +# Essential Studio for React - v32.1.19 Release Notes + +{% include release-info.html date="December 15, 2025" version="v32.1.19" passed="68209" failed="0" %} + +{% directory path: _includes/release-notes/v32.1.19 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3D Chart | 232 | 232 | 0 | All Passed | +| 3D Circular Chart | 374 | 374 | 0 | All Passed | +| Accordion | 208 | 208 | 0 | All Passed | +| AI Assist View | 432 | 432 | 0 | All Passed | +| App Bar | 67 | 67 | 0 | All Passed | +| AutoComplete | 200 | 200 | 0 | All Passed | +| Breadcrumb | 160 | 160 | 0 | All Passed | +| Bullet Chart | 169 | 169 | 0 | All Passed | +| Button | 145 | 145 | 0 | All Passed | +| ButtonGroup | 120 | 120 | 0 | All Passed | +| calendar | 177 | 177 | 0 | All Passed | +| Carousel | 61 | 61 | 0 | All Passed | +| Chart | 5025 | 5025 | 0 | All Passed | +| Chat UI | 500 | 500 | 0 | All Passed | +| Checkbox | 37 | 37 | 0 | All Passed | +| CircularGauge | 429 | 429 | 0 | All Passed | +| ColorPicker | 130 | 130 | 0 | All Passed | +| Combo Box | 139 | 139 | 0 | All Passed | +| Common | 906 | 906 | 0 | All Passed | +| Context Menu | 105 | 105 | 0 | All Passed | +| Data Grid | 3697 | 3697 | 0 | All Passed | +| Date Picker | 427 | 427 | 0 | All Passed | +| Date Range Picker | 515 | 515 | 0 | All Passed | +| Date Time Picker | 325 | 325 | 0 | All Passed | +| Diagram | 16255 | 16255 | 0 | All Passed | +| Dialog | 63 | 63 | 0 | All Passed | +| DropDown Button | 132 | 132 | 0 | All Passed | +| Dropdown List | 203 | 203 | 0 | All Passed | +| Dropdown Tree | 104 | 104 | 0 | All Passed | +| File Manager | 2188 | 2188 | 0 | All Passed | +| Floating Action Button | 174 | 174 | 0 | All Passed | +| Gantt | 4368 | 4368 | 0 | All Passed | +| HeatMap Chart | 478 | 478 | 0 | All Passed | +| Image Editor | 1653 | 1653 | 0 | All Passed | +| In-place Editor | 643 | 643 | 0 | All Passed | +| Kanban | 268 | 268 | 0 | All Passed | +| LinearGauge | 426 | 426 | 0 | All Passed | +| Listbox | 115 | 115 | 0 | All Passed | +| ListView | 84 | 84 | 0 | All Passed | +| Maps | 1244 | 1244 | 0 | All Passed | +| Mention | 45 | 45 | 0 | All Passed | +| Menu | 187 | 187 | 0 | All Passed | +| Multicolumn Combo Box | 254 | 254 | 0 | All Passed | +| Multiselect Dropdown | 442 | 442 | 0 | All Passed | +| OTP Input | 240 | 240 | 0 | All Passed | +| Pivot Table | 5348 | 5348 | 0 | All Passed | +| Progress Bar | 83 | 83 | 0 | All Passed | +| Progress Button | 132 | 132 | 0 | All Passed | +| Query Builder | 480 | 480 | 0 | All Passed | +| RadioButton | 45 | 45 | 0 | All Passed | +| RangeNavigator | 140 | 140 | 0 | All Passed | +| Rating | 198 | 198 | 0 | All Passed | +| Ribbon | 625 | 625 | 0 | All Passed | +| Rich Text Editor | 5135 | 5135 | 0 | All Passed | +| schedule | 4645 | 4645 | 0 | All Passed | +| sidebar | 88 | 88 | 0 | All Passed | +| Signature | 105 | 105 | 0 | All Passed | +| Skeleton | 144 | 144 | 0 | All Passed | +| Slider | 147 | 147 | 0 | All Passed | +| SmithChart | 49 | 49 | 0 | All Passed | +| Sparkline | 57 | 57 | 0 | All Passed | +| Speech To Text | 200 | 200 | 0 | All Passed | +| Speed Dial | 366 | 366 | 0 | All Passed | +| Split Button | 144 | 144 | 0 | All Passed | +| Stepper | 91 | 91 | 0 | All Passed | +| Stock Chart | 379 | 379 | 0 | All Passed | +| Tab | 69 | 69 | 0 | All Passed | +| Text Area | 107 | 107 | 0 | All Passed | +| TextBox | 58 | 58 | 0 | All Passed | +| Time Picker | 180 | 180 | 0 | All Passed | +| Timeline | 213 | 213 | 0 | All Passed | +| Toast | 139 | 139 | 0 | All Passed | +| Toolbar | 135 | 135 | 0 | All Passed | +| ToolTip | 136 | 136 | 0 | All Passed | +| TreeGrid | 3791 | 3791 | 0 | All Passed | +| Treemap | 264 | 264 | 0 | All Passed | +| Treeview | 370 | 370 | 0 | All Passed | \ No newline at end of file diff --git a/ej2-react/ai-coding-assistant/prompt-library.md b/ej2-react/ai-coding-assistant/prompt-library.md index 8b45f8da6..3728c11ea 100644 --- a/ej2-react/ai-coding-assistant/prompt-library.md +++ b/ej2-react/ai-coding-assistant/prompt-library.md @@ -1,14 +1,14 @@ --- layout: post title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion -description: Explore the Syncfusion AI Coding Assistant Prompt Library to enhance React development productivity with intelligent code generation, configuration examples, and contextual guidance. +description: Explore the AI Coding Assistant Prompt Library to enhance React development productivity with code generation, configuration examples, and contextual guidance. control: Syncfusion AI Coding Assistant Prompt Library platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Prompt Library +# Prompt Library - AI Coding Assistant Speed up your React projects using these ready-made prompts for popular Syncfusion components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. @@ -26,383 +26,258 @@ Before starting, make sure your MCP Server is set up and running. ### Grid -The Syncfusion React Grid delivers flexible, performant data tables for handling extensive records with built-in interactivity. +The Syncfusion React Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. -Paging and Sorting -``` +{% promptcards %} +{% promptcard Paging and Sorting %} #SyncfusionReactAssistant How do I enable paging and sorting in the Syncfusion React Grid? -``` - -Grouping and Filtering -``` +{% endpromptcard %} +{% promptcard Grouping and Filtering %} #SyncfusionReactAssistant Show me an example of grouping and filtering data in the Grid component. -``` - -CRUD Operations -``` +{% endpromptcard %} +{% promptcard CRUD Operations %} #SyncfusionReactAssistant What’s the code to implement full CRUD operations in Syncfusion React Grid? -``` - -Grid Export to PDF and Excel -``` +{% endpromptcard %} +{% promptcard Grid Export to PDF and Excel %} #SyncfusionReactAssistant How can I add PDF and Excel export options to the Grid toolbar? -``` - -Virtual Scrolling -``` +{% endpromptcard %} +{% promptcard Virtual Scrolling %} #SyncfusionReactAssistant How do I configure virtual scrolling for large datasets in the Grid? -``` - -Multicolumn Grid Setup -``` +{% endpromptcard %} +{% promptcard Multicolumn Grid Setup %} #SyncfusionReactAssistant Create a multicolumn Grid to display product details with sorting and filtering. -``` - -Chat Integration -``` +{% endpromptcard %} +{% promptcard Chat Integration %} #SyncfusionReactAssistant How can I integrate a chat widget inside each row of the Syncfusion Grid? -``` - -Advanced Grid Features -``` -#SyncfusionReactAssistant -Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling -``` - -Troubleshooting Grid Export -``` +{% endpromptcard %} +{% promptcard Advanced Grid Features %} +#SyncfusionReactAssistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling +{% endpromptcard %} +{% promptcard Troubleshooting Grid Export %} #SyncfusionReactAssistant Why isn’t my Grid exporting to PDF and Excel correctly? -``` - -Inline Editing -``` +{% endpromptcard %} +{% promptcard Inline Editing %} #SyncfusionReactAssistant How do I enable inline editing for CRUD operations in the Grid? -``` - -Custom Toolbar -``` +{% endpromptcard %} +{% promptcard Custom Toolbar %} #SyncfusionReactAssistant Add custom toolbar buttons for PDF and Excel export in the Grid. -``` - -Dynamic Column Configuration -``` +{% endpromptcard %} +{% promptcard Dynamic Column Configuration %} #SyncfusionReactAssistant How can I dynamically configure multicolumn layout with filtering and sorting? -``` +{% endpromptcard %} +{% endpromptcards %} ### Chart The Syncfusion React Chart suite offers versatile visualization tools across various series types for insightful data representation. -Local and Remote Data -``` +{% promptcards %} +{% promptcard Local and Remote Data %} #SyncfusionReactAssistant How do I bind both local and remote data sources to a Syncfusion Chart? -``` - -Range Selection -``` +{% endpromptcard %} +{% promptcard Range Selection %} #SyncfusionReactAssistant Show me how to enable range selection in a Syncfusion React Chart. -``` - -Chart Types Overview -``` +{% endpromptcard %} +{% promptcard Chart Types Overview %} #SyncfusionReactAssistant What chart types are available in Syncfusion React Chart and how to configure them? -``` - -Markers and Data Labels -``` +{% endpromptcard %} +{% promptcard Markers and Data Labels %} #SyncfusionReactAssistant How can I display markers and data labels on a line chart? -``` - -Annotations -``` +{% endpromptcard %} +{% promptcard Annotations %} #SyncfusionReactAssistant Add custom annotations to highlight specific data points in a chart. -``` - -Chart Export to Image or PDF -``` +{% endpromptcard %} +{% promptcard Chart Export to Image or PDF %} #SyncfusionReactAssistant How do I export a Syncfusion Chart to PDF or image format? -``` - -Print Support -``` +{% endpromptcard %} +{% promptcard Print Support %} #SyncfusionReactAssistant Enable print functionality for a Syncfusion React Chart component. -``` - -Dynamic Chart with Remote Data -``` +{% endpromptcard %} +{% promptcard Dynamic Chart with Remote Data %} #SyncfusionReactAssistant Create a chart that updates dynamically with remote API data. -``` - -Multiple Series Types -``` +{% endpromptcard %} +{% promptcard Multiple Series Types %} #SyncfusionReactAssistant How do I combine bar and line chart types in a single Syncfusion Chart? -``` - -Troubleshooting Chart Data Binding -``` +{% endpromptcard %} +{% promptcard Troubleshooting Chart Data Binding %} #SyncfusionReactAssistant Why isn’t my remote data showing up in the Syncfusion Chart? -``` - -Interactive Range Selector -``` +{% endpromptcard %} +{% promptcard Interactive Range Selector %} #SyncfusionReactAssistant Configure a range selector for zooming and filtering in a time-series chart. -``` - -Custom Markers and Labels -``` +{% endpromptcard %} +{% promptcard Custom Markers and Labels %} #SyncfusionReactAssistant Show me an example of customizing chart markers and data label styles. -``` +{% endpromptcard %} +{% endpromptcards %} ### Schedule The Syncfusion React Schedule component helps manage events, resources, and timelines with powerful views and customization. -Module Injection -``` +{% promptcards %} +{% promptcard Module Injection %} #SyncfusionReactAssistant How do I inject required modules into the Syncfusion React Schedule component? -``` - -Remote Data Binding -``` +{% endpromptcard %} +{% promptcard Remote Data Binding %} #SyncfusionReactAssistant Bind the Schedule component to a remote API for dynamic event loading. -``` - -CRUD Actions -``` +{% endpromptcard %} +{% promptcard CRUD Actions %} #SyncfusionReactAssistant Show me how to implement full CRUD operations in the Schedule component. -``` - -Virtual Scrolling -``` +{% endpromptcard %} +{% promptcard Virtual Scrolling %} #SyncfusionReactAssistant Enable virtual scrolling for large event datasets in the Schedule view. -``` - -Timezone Support -``` +{% endpromptcard %} +{% promptcard Timezone Support %} #SyncfusionReactAssistant How can I configure timezone support in the Syncfusion React Schedule? -``` - -Export Schedule to PDF or Excel -``` +{% endpromptcard %} +{% promptcard Export Schedule to PDF or Excel %} #SyncfusionReactAssistant Add export functionality to download the Schedule view as PDF or Excel. -``` - -Timeline Header Rows -``` +{% endpromptcard %} +{% promptcard Timeline Header Rows %} #SyncfusionReactAssistant How do I customize timeline header rows in the Schedule component? -``` - -Multiple Module Injection -``` +{% endpromptcard %} +{% promptcard Multiple Module Injection %} #SyncfusionReactAssistant Inject multiple modules like Day, Week, and Timeline views into Schedule. -``` - -Troubleshooting Schedule CRUD -``` +{% endpromptcard %} +{% promptcard Troubleshooting Schedule CRUD %} #SyncfusionReactAssistant Why aren’t my CRUD actions working correctly in the Schedule component? -``` - -Local and Remote Data -``` +{% endpromptcard %} +{% promptcard Local and Remote Data %} #SyncfusionReactAssistant Bind both local and remote event data to the Schedule component. -``` - -Export and Timezone -``` +{% endpromptcard %} +{% promptcard Export and Timezone %} #SyncfusionReactAssistant Configure timezone-aware exporting for the Schedule view. -``` - -Advanced Schedule Setup -``` +{% endpromptcard %} +{% promptcard Advanced Schedule Setup %} #SyncfusionReactAssistant Create a Schedule with module injection, CRUD, virtual scrolling, and exporting. -``` +{% endpromptcard %} +{% endpromptcards %} ### Kanban The Syncfusion React Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. -Data Binding -``` +{% promptcards %} +{% promptcard Data Binding %} #SyncfusionReactAssistant How do I bind local or remote data to the Syncfusion React Kanban board? -``` - -Sorting -``` +{% endpromptcard %} +{% promptcard Sorting %} #SyncfusionReactAssistant Enable sorting of cards within columns in the Kanban component. -``` - -Swimlane View -``` +{% endpromptcard %} +{% promptcard Swimlane View %} #SyncfusionReactAssistant Show me how to group Kanban cards using swimlane headers. -``` - -Kanban Card Editing -``` +{% endpromptcard %} +{% promptcard Kanban Card Editing %} #SyncfusionReactAssistant How can I enable inline editing of Kanban cards? -``` - -Virtualization -``` +{% endpromptcard %} +{% promptcard Virtualization %} #SyncfusionReactAssistant Configure virtualization for performance with large Kanban datasets. -``` - -Localization -``` +{% endpromptcard %} +{% promptcard Localization %} #SyncfusionReactAssistant How do I localize labels and messages in the Kanban component? -``` - -Drag and Drop -``` +{% endpromptcard %} +{% promptcard Drag and Drop %} #SyncfusionReactAssistant Enable drag-and-drop functionality for moving cards between columns. -``` - -Sorting and Swimlane -``` +{% endpromptcard %} +{% promptcard Sorting and Swimlane %} #SyncfusionReactAssistant Create a Kanban board with swimlane grouping and sortable cards. -``` - -Editable Cards and Localization -``` +{% endpromptcard %} +{% promptcard Editable Cards and Localization %} #SyncfusionReactAssistant Show me how to edit cards and apply localization in Kanban. -``` - -Troubleshooting Kanban Drag and Drop -``` +{% endpromptcard %} +{% promptcard Troubleshooting Kanban Drag and Drop %} #SyncfusionReactAssistant Why isn’t drag-and-drop working correctly in my Kanban board? -``` - -Remote Data and Virtualization -``` +{% endpromptcard %} +{% promptcard Remote Data and Virtualization %} #SyncfusionReactAssistant Bind remote data to Kanban and enable virtualization for performance. -``` - -Advanced Kanban Setup -``` +{% endpromptcard %} +{% promptcard Advanced Kanban Setup %} #SyncfusionReactAssistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. -``` +{% endpromptcard %} +{% endpromptcards %} ### RichTextEditor The Syncfusion React RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. -Toolbar Configuration -``` +{% promptcards %} +{% promptcard Toolbar Configuration %} #SyncfusionReactAssistant How do I customize the toolbar options in the Syncfusion RichTextEditor? -``` - -Link Manipulation -``` +{% endpromptcard %} +{% promptcard Link Manipulation %} #SyncfusionReactAssistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content. -``` - -Iframe Mode -``` +{% endpromptcard %} +{% promptcard Iframe Mode %} #SyncfusionReactAssistant How can I render the RichTextEditor inside an iframe for isolated styling? -``` - -Module Injection -``` +{% endpromptcard %} +{% promptcard Module Injection %} #SyncfusionReactAssistant Inject feature modules like toolbar, link, and image into RichTextEditor. -``` - -Undo and Redo -``` +{% endpromptcard %} +{% promptcard Undo and Redo %} #SyncfusionReactAssistant Enable undo and redo functionality in the RichTextEditor toolbar. -``` - -Forms Integration -``` +{% endpromptcard %} +{% promptcard Forms Integration %} #SyncfusionReactAssistant How do I integrate a React form and validate input? -``` - -Content Import and Export -``` +{% endpromptcard %} +{% promptcard Content Import and Export %} #SyncfusionReactAssistant Export RichTextEditor content to HTML or import existing HTML content. -``` - -Advanced Toolbar -``` +{% endpromptcard %} +{% promptcard Advanced Toolbar %} #SyncfusionReactAssistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. -``` - -Iframe and Forms Support -``` +{% endpromptcard %} +{% promptcard Iframe and Forms Support %} #SyncfusionReactAssistant Use RichTextEditor in iframe mode and bind it to a form for submission. -``` - -Undo/Redo and Export -``` +{% endpromptcard %} +{% promptcard Undo/Redo and Export %} #SyncfusionReactAssistant Enable undo/redo and export content to HTML in RichTextEditor. -``` - -Module Injection and Link Editing -``` +{% endpromptcard %} +{% promptcard Module Injection and Link Editing %} #SyncfusionReactAssistant Inject toolbar and link modules to enable rich link editing in the editor. -``` +{% endpromptcard %} +{% endpromptcards %} ### Calendar The Syncfusion React Calendar supports flexible date selection, localization, and custom rendering. -Date Range Selection -``` +{% promptcards %} +{% promptcard Date Range Selection %} #SyncfusionReactAssistant How do I enable date range selection in the Syncfusion React Calendar? -``` - -Globalization Support -``` +{% endpromptcard %} +{% promptcard Globalization Support %} #SyncfusionReactAssistant Configure the Calendar to support multiple cultures and languages. -``` - -Multi-Date Selection -``` +{% endpromptcard %} +{% promptcard Multi-Date Selection %} #SyncfusionReactAssistant Show me how to allow users to select multiple dates in the Calendar. -``` - -Islamic Calendar Support -``` +{% endpromptcard %} +{% promptcard Islamic Calendar Support %} #SyncfusionReactAssistant How can I switch the Calendar to use the Islamic calendar system? -``` - -Skip Months Feature -``` +{% endpromptcard %} +{% promptcard Skip Months Feature %} #SyncfusionReactAssistant Enable skipping months in the Calendar navigation for faster browsing. -``` - -Calendar Showing Other Month Days -``` +{% endpromptcard %} +{% promptcard Calendar Showing Other Month Days %} #SyncfusionReactAssistant How do I show days from adjacent months in the current Calendar view? -``` - -Custom Day Cell Format -``` +{% endpromptcard %} +{% promptcard Custom Day Cell Format %} #SyncfusionReactAssistant Customize the day cell format in the Calendar to show short weekday names. -``` - -Calendar Highlighting Weekends -``` +{% endpromptcard %} +{% promptcard Calendar Highlighting Weekends %} #SyncfusionReactAssistant Highlight weekends in the Calendar with a different background color. -``` - -Globalization and Islamic Calendar -``` +{% endpromptcard %} +{% promptcard Globalization and Islamic Calendar %} #SyncfusionReactAssistant Configure the Calendar for Arabic culture using Islamic calendar and localization. -``` - -Multi-Selection and Range -``` +{% endpromptcard %} +{% promptcard Multi-Selection and Range %} #SyncfusionReactAssistant Enable both multi-date selection and range selection in the Calendar. -``` - -Troubleshooting Calendar Date Range -``` +{% endpromptcard %} +{% promptcard Troubleshooting Calendar Date Range %} #SyncfusionReactAssistant Why isn’t my Calendar selecting the correct date range? -``` - -Advanced Calendar Setup -``` +{% endpromptcard %} +{% promptcard Advanced Calendar Setup %} #SyncfusionReactAssistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. -``` +{% endpromptcard %} +{% endpromptcards %} ## See also diff --git a/ej2-react/chart/chart-appearance.md b/ej2-react/chart/chart-appearance.md index 1a2d0255c..2c88d12d7 100644 --- a/ej2-react/chart/chart-appearance.md +++ b/ej2-react/chart/chart-appearance.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Custom color palette -You can customize the default color of series or points by providing a custom color palette of your choice by using the [`palettes`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#palettes) property. +You can customize the default color of series or points by providing a custom color palette of your choice by using the [`palettes`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#palettes) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,7 +37,7 @@ The color of individual data point or data points within a range can be customiz ### Point color mapping -You can bind the color for the points from [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/series/#datasource) for the series using [`pointColorMapping`](https://ej2.syncfusion.com/react/documentation/api/chart/series/#pointcolormapping) property. +You can bind the color for the points from [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/series#datasource) for the series using [`pointColorMapping`](https://ej2.syncfusion.com/react/documentation/api/chart/series#pointcolormapping) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -58,7 +58,7 @@ You can bind the color for the points from [`dataSource`](https://ej2.syncfusion ### Range color mapping -You can differentiate data points based on their y values using [`rangeColorSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/rangeColorSetting/) in the chart. +You can differentiate data points based on their y values using [`rangeColorSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/rangeColorSetting) in the chart. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -79,7 +79,7 @@ You can differentiate data points based on their y values using [`rangeColorSett ## Point level customization -Marker, datalabel and fill color of each data point can be customized with [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#pointrender) and [`textRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#textrender) event. +Marker, datalabel and fill color of each data point can be customized with [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#pointrender) and [`textRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#textrender) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -107,7 +107,7 @@ Marker, datalabel and fill color of each data point can be customized with [`poi **Customize the chart background** -Using [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#background) and [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#border) properties, you can change the background color and border of the chart. +Using [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#background) and [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#border) properties, you can change the background color and border of the chart. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -128,7 +128,7 @@ Using [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/ch **Chart margin** -You can set margin for chart from its container through [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#margin) property. +You can set margin for chart from its container through [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#margin) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -149,7 +149,7 @@ You can set margin for chart from its container through [`margin`](https://ej2.s **Chart area customization** -Using [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel/#background) and [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel/border/) properties, you can change the background color and border of the chart area. Width for the chart area can be customized using [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel/width/) property. +Using [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel#background) and [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/chartareamodel#border) properties, you can change the background color and border of the chart area. Width for the chart area can be customized using [`width`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel#width) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -170,7 +170,7 @@ Using [`background`](https://ej2.syncfusion.com/react/documentation/api/chart/ch **Chart area margin** -You can customize the space between the chart area from its chart container through [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel/#margin) property. +You can customize the space between the chart area from its chart container through [`margin`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAreaModel#margin) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -191,7 +191,7 @@ You can customize the space between the chart area from its chart container thro ## Animation -You can customize animation for a particular series using [`animation`](https://ej2.syncfusion.com/react/documentation/api/chart/animationModel/) property. You can enable or disable animation of the series using `enable` property, `duration` specifies the duration of an animation and `delay` allows us to start the animation at desire time. +You can customize animation for a particular series using [`animation`](https://ej2.syncfusion.com/react/documentation/api/chart/animationModel) property. You can enable or disable animation of the series using `enable` property, `duration` specifies the duration of an animation and `delay` allows us to start the animation at desire time. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -231,129 +231,6 @@ Fluid animation used to animate series with updated dataSource continues animati {% previewsample "page.domainurl/code-snippet/chart/series/column-cs6" %} -## Chart title - -Chart can be given a title using [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#title) property, to show the information about the data plotted. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/chart-title-cs5/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/chart-title-cs5/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/chart-title-cs5/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/chart-title-cs5/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs5" %} - -### Title position - -By using the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel/#position) property in [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#titlestyle), you can position the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#title) at left, right, top or bottom of the chart. The title is positioned at the top of the chart, by default. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/chart-title-cs7/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/chart-title-cs7/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/chart-title-cs7/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/chart-title-cs7/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs7" %} - -The custom option helps you to position the title anywhere in the chart using [`x`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel/#x) and [`y`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel/#y) coordinates. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/chart-title-cs8/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/chart-title-cs8/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/chart-title-cs8/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/chart-title-cs8/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs8" %} - -### Title alignment - -You can align the title to the near, far, or center of the chart using the [`textAlignment`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel/#textalignment) property. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/chart-title-cs9/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/chart-title-cs9/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/chart-title-cs9/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/chart-title-cs9/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs9" %} - -### Title wrap - -The `textStyle` property of chart title provides options to customize the `size`, `color`, `fontFamily`, `fontWeight`, `fontStyle`, `opacity`, `textAlignment` and `textOverflow`. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/series/column-cs7/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/series/column-cs7/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/series/column-cs7/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/series/column-cs7/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/series/column-cs7" %} - -## Chart subtitle - -Chart can be given a subtitle using [`subTitle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#subtitle) property, to show the information about the data plotted. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/chart-title-cs6/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/chart-title-cs6/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/chart-title-cs6/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/chart-title-cs6/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs6" %} ## See also diff --git a/ej2-react/chart/data-labels.md b/ej2-react/chart/data-labels.md index 2ae94c627..43f6049d6 100644 --- a/ej2-react/chart/data-labels.md +++ b/ej2-react/chart/data-labels.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Data labels in React Chart component -Data label can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings/#visible)option in the dataLabel. By default, the labels will arrange smartly without overlapping. +Data label can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#visible)option in the dataLabel. By default, the labels will arrange smartly without overlapping. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -33,7 +33,7 @@ Data label can be added to a chart series by enabling the [`visible`](https://e ## Position -Using [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings/#position) property, you can place the label either on `Top`, `Middle`,`Bottom` or `Outer` (outer is applicable for column and bar type series). +Using [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#position) property, you can place the label either on `Top`, `Middle`,`Bottom` or `Outer` (outer is applicable for column and bar type series). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -56,7 +56,7 @@ Using [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/data ## Data Label Template -Label content can be formatted by using the template option. Inside the template, you can add the placeholder text `${point.x}` and `${point.x}` to display corresponding data points x & y value. Using [`template`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings/#template) property, you can set data label template in chart. +Label content can be formatted by using the template option. Inside the template, you can add the placeholder text `${point.x}` and `${point.x}` to display corresponding data points x & y value. Using [`template`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#template) property, you can set data label template in chart. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -98,7 +98,7 @@ Text from the data source can be mapped using `name` property. ## Format -Data label for the chart can be formatted using [`format`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings/#format) property. You can use the global formatting options, such as 'n', 'p', and 'c'. +Data label for the chart can be formatted using [`format`](https://ej2.syncfusion.com/react/documentation/api/chart/dataLabelSettings#format) property. You can use the global formatting options, such as 'n', 'p', and 'c'. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -240,7 +240,7 @@ Using `angle` property, you can rotate the data label by its given angle. ## Customizing Specific Point -You can also customize the specific marker and label using [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#pointrender) and [`textRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#textrender/) event. `pointRender` event allows you to change the shape, color and border for a point, whereas the `textRender` event allows you to change the text for the point. +You can also customize the specific marker and label using [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#pointrender) and [`textRender`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#textrender) event. `pointRender` event allows you to change the shape, color and border for a point, whereas the `textRender` event allows you to change the text for the point. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -280,8 +280,56 @@ You can calculate the percentage value based on the sum for each series using th {% previewsample "page.domainurl/code-snippet/chart/data-marker/datalabel-cs6" %} +## Last value label + +The `lastValueLabel` in a chart allows you to easily display the value of the last data point in a series. This feature provides an intuitive way to highlight the most recent or last data value in a series on your chart. + +### Enable last value label + +To show the last value label, make sure the `enable` property inside the `lastValueLabel` settings is set to `true` within the series configuration. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/last-value-label/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/last-value-label/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/last-value-label/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/last-value-label/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/last-value-label" %} + +>Note: To use the last value label feature, we need to inject `LastValueLabel` module into the `services`. + +### Customization + +The appearance of the last value label can be customized using style properties such as `font`, `background`, `border`, `dashArray`, `lineWidth`, `lineColor`, `rx`, and `ry` in the lastValueLabel property of the chart series. These settings allow you to tailor the label’s look to align with your desired visual presentation. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/last-value-label-customization/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/last-value-label-customization/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/last-value-label-customization/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/last-value-label-customization/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/last-value-label-customization" %} + ## See Also -* [Show total stacking values in data label](./how-to/#show-the-total-value-for-stacking-series-in-data-label) -* [Prevent the data label when the data value is 0](./how-to/#prevent-the-data-label-when-the-data-value-is-0) +* [Show total stacking values in data label](./how-to#show-the-total-value-for-stacking-series-in-data-label) +* [Prevent the data label when the data value is 0](./how-to#prevent-the-data-label-when-the-data-value-is-0) * [Display Data Labels in Lakh](https://support.syncfusion.com/kb/article/21250/how-to-display-data-labels-in-lakh-in-react-accumulation-chart) \ No newline at end of file diff --git a/ej2-react/chart/lastvaluelabel.md b/ej2-react/chart/lastvaluelabel.md deleted file mode 100644 index a5a065dc5..000000000 --- a/ej2-react/chart/lastvaluelabel.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -layout: post -title: Last value label in React Chart component | Syncfusion -description: Learn here all about Last value label in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. -platform: ej2-react -control: Last value label -documentation: ug -domainurl: ##DomainURL## ---- - -# Last value label in React Chart component - -The `lastValueLabel` in a chart allows you to easily display the value of the last data point in a series. This feature provides an intuitive way to highlight the most recent or last data value in a series on your chart. - -## Enable last value label - -To show the last value label, make sure the `enable` property inside the `lastValueLabel` settings is set to `true` within the series configuration. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/last-value-label/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/last-value-label/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/last-value-label/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/last-value-label/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/last-value-label" %} - ->Note: To use the last value label feature, we need to inject `LastValueLabel` module into the `services`. - -## Customization - -The appearance of the last value label can be customized using style properties such as `font`, `background`, `border`, `dashArray`, `lineWidth`, `lineColor`, `rx`, and `ry` in the lastValueLabel property of the chart series. These settings allow you to tailor the label’s look to align with your desired visual presentation. - -{% tabs %} -{% highlight js tabtitle="index.jsx" %} -{% include code-snippet/chart/last-value-label-customization/app/index.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/chart/last-value-label-customization/app/index.tsx %} -{% endhighlight %} -{% highlight js tabtitle="datasource.jsx" %} -{% include code-snippet/chart/last-value-label-customization/app/datasource.jsx %} -{% endhighlight %} -{% highlight ts tabtitle="datasource.tsx" %} -{% include code-snippet/chart/last-value-label-customization/app/datasource.tsx %} -{% endhighlight %} -{% endtabs %} - -{% previewsample "page.domainurl/code-snippet/chart/last-value-label-customization" %} \ No newline at end of file diff --git a/ej2-react/chart/selection.md b/ej2-react/chart/selection.md index c17ee45a7..d85c94931 100644 --- a/ej2-react/chart/selection.md +++ b/ej2-react/chart/selection.md @@ -98,7 +98,7 @@ To fetch the collection of data under a particular region, you have to set `sele * DragX - Allows us to select data with respect to horizontal axis. * DragY - Allows us to select data with respect to vertical axis. -The selected data’s are returned as an array collection in the [`dragComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#dragcomplete) event. +The selected data’s are returned as an array collection in the [`dragComplete`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#dragcomplete) event. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -161,7 +161,7 @@ To select multiple region on the chart, set the `allowMultiSelection` property t ## Selection Type -You can select multiple points or series, by enabling the [`isMultiSelect`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#ismultiselect) property. +You can select multiple points or series, by enabling the [`isMultiSelect`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#ismultiselect) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -182,7 +182,7 @@ You can select multiple points or series, by enabling the [`isMultiSelect`](http ## Selection on Load -You can able to select a point or series programmatically on a chart using [`selectedDataIndexes`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel/#selecteddataindexes) property. +You can able to select a point or series programmatically on a chart using [`selectedDataIndexes`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#selecteddataindexes) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -203,7 +203,9 @@ You can able to select a point or series programmatically on a chart using [`sel ## Selection through on legend -You can able to select a point or series through on legend using [`toggleVisibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel/#toggleVisibility) property. Also, use [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings/#enableHighlight) property for highlighting the series through legend. +You can able to select a point or series through on legend using [`toggleVisibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel#toggleVisibility) property. Also, use [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enableHighlight) property for highlighting the series through legend. + +>When [`highlightMode`](https://ej2.syncfusion.com/react/documentation/api/chart/highlightmode) is set to 'Series', 'Cluster' or 'Point', legend highlighting will still occur even when [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enableHighlight) is set to false. This is because, the [`highlightMode`](https://ej2.syncfusion.com/react/documentation/api/chart/highlightmode) takes precedence, so hovering over legend items will trigger highlighting of the corresponding series regardless of the legend’s [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettings#enableHighlight) setting. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -224,7 +226,7 @@ You can able to select a point or series through on legend using [`toggleVisibil ## Customization for selection -You can apply custom style to selected points or series with [`selectionStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/series/#selectionstyle) property. +You can apply custom style to selected points or series with [`selectionStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/series#selectionstyle) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -247,4 +249,4 @@ You can apply custom style to selected points or series with [`selectionStyle`]( ## See Also -* [Display selected data for range selection](./how-to/#display-selected-data-for-range-selection) +* [Display selected data for range selection](./how-to#display-selected-data-for-range-selection) diff --git a/ej2-react/chart/title-subtitle.md b/ej2-react/chart/title-subtitle.md new file mode 100644 index 000000000..d7c6e6992 --- /dev/null +++ b/ej2-react/chart/title-subtitle.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Title and subtitle in React Chart component | Syncfusion +description: Learn here all about Title and subtitle in Syncfusion React Chart component of Syncfusion Essential JS 2 and more. +control: Title and subtitle +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Title and Subtitle in React Chart component + +## Chart title + +Chart can be given a title using [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#title) property, to show the information about the data plotted. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/chart-title-cs5/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/chart-title-cs5/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/chart-title-cs5/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/chart-title-cs5/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs5" %} + +### Title position + +By using the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#position) property in [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#titlestyle), you can position the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#title) at left, right, top or bottom of the chart. The title is positioned at the top of the chart, by default. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/chart-title-cs7/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/chart-title-cs7/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/chart-title-cs7/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/chart-title-cs7/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs7" %} + +The custom option helps you to position the title anywhere in the chart using [`x`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#x) and [`y`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#y) coordinates. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/chart-title-cs8/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/chart-title-cs8/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/chart-title-cs8/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/chart-title-cs8/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs8" %} + +### Title alignment + +You can align the title to the near, far, or center of the chart using the [`textAlignment`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#textalignment) property. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/chart-title-cs9/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/chart-title-cs9/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/chart-title-cs9/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/chart-title-cs9/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs9" %} + +### Title wrap + +The `textStyle` property of chart title provides options to customize the `size`, `color`, `fontFamily`, `fontWeight`, `fontStyle`, `opacity`, `textAlignment` and `textOverflow`. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/series/column-cs7/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/series/column-cs7/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/series/column-cs7/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/series/column-cs7/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/series/column-cs7" %} + +## Chart subtitle + +Chart can be given a subtitle using [`subTitle`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#subtitle) property, to show the information about the data plotted. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/chart/chart-title-cs6/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/chart/chart-title-cs6/app/index.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/chart/chart-title-cs6/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/chart/chart-title-cs6/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/chart/chart-title-cs6" %} \ No newline at end of file diff --git a/ej2-react/chart/understanding-chart.md b/ej2-react/chart/understanding-chart.md new file mode 100644 index 000000000..fe7245eb8 --- /dev/null +++ b/ej2-react/chart/understanding-chart.md @@ -0,0 +1,41 @@ +--- + +layout: post +title: Understanding React Chart component | Syncfusion +description: Explore and understand the Syncfusion React Chart component in Essential JS 2 and discover its powerful features. +platform: ej2-react +control: Understanding +documentation: ug +domainurl: ##DomainURL## + +--- + +# Understanding of React Chart + +To understand how Syncfusion React Chart works, it is important to learn about the various parts of a chart. +The image below illustrates the main elements of the chart. + +
- Find iPhone 15 Pro +
- Sort Amount from lowest to highest +
- Payment status not completed +
- Group status column +
- Clear Filtering +
- Clear Sorting +
- Remove Grouping +
Provides a Line Height dropdown in the toolbar for easy access.
Supports applying line-height to paragraphs, headings, lists, and table cells.
Applies line-height as inline styles for consistent and precise text rendering.
Ensures consistent appearance across devices and print layouts.
Improves text readability and overall document aesthetics.
Provides a Line Height dropdown in the toolbar for easy access.
Supports applying line-height to paragraphs, headings, lists, and table cells.
Applies line-height as inline styles for consistent and precise text rendering.
Ensures consistent appearance across devices and print layouts.
Improves text readability and overall document aesthetics.
Provides a Line Height dropdown in the toolbar for easy access.
Supports applying line-height to paragraphs, headings, lists, and table cells.
Applies line-height as inline styles for consistent and precise text rendering.
Ensures consistent appearance across devices and print layouts.
Improves text readability and overall document aesthetics.
Provides a Line Height dropdown in the toolbar for easy access.
Supports applying line-height to paragraphs, headings, lists, and table cells.
Applies line-height as inline styles for consistent and precise text rendering.
Ensures consistent appearance across devices and print layouts.
Improves text readability and overall document aesthetics.
+
+## Title
+
+The title is the text that explains what the chart represents. It is usually displayed at the top of the chart.
+For more details, see [Title and Subtitle](./title-subtitle.md).
+
+## Series
+
+Each series represents a set of data values plotted on the chart. For more details, see [Series](./chart-types/line.md).
+
+## Tooltip
+
+Tooltips provide quick insights by showing value details when you hover over a data point or series on the chart.
+For more details, see [Tooltip](./tool-tip.md).
+
+## Legend
+
+A legend identifies each data series in the chart and provides options to toggle them on or off.
+For more details, see [Legend](./legend.md).
+
+## Axes
+
+Charts typically rely on axes to organize data. Standard Cartesian charts have two: an x-axis (horizontal) and a y-axis (vertical). Three-dimensional charts add a z-axis for depth, and polar charts feature one axis that wraps around the chart’s perimeter.
\ No newline at end of file
diff --git a/ej2-react/code-snippet/gantt/contextmenu-cs1/app/datasource.jsx b/ej2-react/code-snippet/gantt/contextmenu-cs1/app/datasource.jsx
index ea05cc22b..8debced1d 100644
--- a/ej2-react/code-snippet/gantt/contextmenu-cs1/app/datasource.jsx
+++ b/ej2-react/code-snippet/gantt/contextmenu-cs1/app/datasource.jsx
@@ -1,41 +1,41 @@
export let data = [
- { TaskId: 1, TaskName: 'Product Concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
- { TaskId: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentId: 1 },
- { TaskId: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentId: 1 },
- { TaskId: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 3, Predecessor: "2", Progress: 30, ParentId: 1 },
- { TaskId: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: "3,4" },
- { TaskId: 6, TaskName: 'Market Research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
- { TaskId: 7, TaskName: 'Demand Analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 6, },
- { TaskId: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", Progress: 30, ParentId: 7 },
- { TaskId: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", ParentId: 7 },
- { TaskId: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "7,8", Progress: 30, ParentId: 6, },
- { TaskId: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "9", ParentId: 6, },
- { TaskId: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "10", ParentId: 6, },
- { TaskId: 13, TaskName: 'Product Design and Development', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
- { TaskId: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30, ParentId: 13 },
- { TaskId: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 5, ParentId: 13 },
- { TaskId: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, ParentId: 13 },
- { TaskId: 17, TaskName: 'Identifying raw materials ', StartDate: new Date('04/04/2019'), Duration: 4, ParentId: 13 },
- { TaskId: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 13, },
- { TaskId: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 1, Progress: 30, ParentId: 18 },
- { TaskId: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 1, ParentId: 18 },
- { TaskId: 21, TaskName: 'Development of the final design', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 13, },
- { TaskId: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentId: 21 },
- { TaskId: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 3, ParentId: 21 },
- { TaskId: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 5, ParentId: 21 },
- { TaskId: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30, ParentId: 13 },
- { TaskId: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 10, ParentId: 13 },
- { TaskId: 27, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 12, Progress: 30 },
- { TaskId: 28, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 5 },
- { TaskId: 29, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 9, Progress: 30 },
- { TaskId: 30, TaskName: 'Assembling materials to finished goods', StartDate: new Date('04/04/2019'), Duration: 12 },
- { TaskId: 31, TaskName: 'Feedback and Testing', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
- { TaskId: 32, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, ParentId: 31 },
- { TaskId: 33, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30, ParentId: 31 },
- { TaskId: 34, TaskName: 'Product Development', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
- { TaskId: 35, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentId: 34 },
- { TaskId: 36, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentId: 34 },
- { TaskId: 37, TaskName: 'Final Product', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019') },
- { TaskId: 38, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 5, ParentId: 37 },
- { TaskId: 39, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30, ParentId: 37 }
+ { TaskID: 1, TaskName: 'Product Concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+ { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentID: 1 },
+ { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1 },
+ { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 3, Predecessor: "2", Progress: 30, ParentID: 1 },
+ { TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: "3,4" },
+ { TaskID: 6, TaskName: 'Market Research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
+ { TaskID: 7, TaskName: 'Demand Analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 6, },
+ { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", Progress: 30, ParentID: 7 },
+ { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", ParentID: 7 },
+ { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "7,8", Progress: 30, ParentID: 6, },
+ { TaskID: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "9", ParentID: 6, },
+ { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "10", ParentID: 6, },
+ { TaskID: 13, TaskName: 'Product Design and Development', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
+ { TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30, ParentID: 13 },
+ { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 5, ParentID: 13 },
+ { TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, ParentID: 13 },
+ { TaskID: 17, TaskName: 'Identifying raw materials ', StartDate: new Date('04/04/2019'), Duration: 4, ParentID: 13 },
+ { TaskID: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 13, },
+ { TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 1, Progress: 30, ParentID: 18 },
+ { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 1, ParentID: 18 },
+ { TaskID: 21, TaskName: 'Development of the final design', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 13, },
+ { TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentID: 21 },
+ { TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 21 },
+ { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 5, ParentID: 21 },
+ { TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30, ParentID: 13 },
+ { TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 10, ParentID: 13 },
+ { TaskID: 27, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 12, Progress: 30 },
+ { TaskID: 28, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 5 },
+ { TaskID: 29, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 9, Progress: 30 },
+ { TaskID: 30, TaskName: 'Assembling materials to finished goods', StartDate: new Date('04/04/2019'), Duration: 12 },
+ { TaskID: 31, TaskName: 'Feedback and Testing', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
+ { TaskID: 32, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, ParentID: 31 },
+ { TaskID: 33, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30, ParentID: 31 },
+ { TaskID: 34, TaskName: 'Product Development', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
+ { TaskID: 35, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentID: 34 },
+ { TaskID: 36, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentID: 34 },
+ { TaskID: 37, TaskName: 'Final Product', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019') },
+ { TaskID: 38, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 5, ParentID: 37 },
+ { TaskID: 39, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30, ParentID: 37 }
];
diff --git a/ej2-react/code-snippet/gantt/contextmenu-cs1/app/datasource.tsx b/ej2-react/code-snippet/gantt/contextmenu-cs1/app/datasource.tsx
index 9088420b1..bb99b30b9 100644
--- a/ej2-react/code-snippet/gantt/contextmenu-cs1/app/datasource.tsx
+++ b/ej2-react/code-snippet/gantt/contextmenu-cs1/app/datasource.tsx
@@ -1,41 +1,41 @@
export let data: Object[] = [
{ TaskID: 1, TaskName: 'Product Concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
- { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentId: 1 },
- { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentId: 1 },
- { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 3, Predecessor: "2", Progress: 30, ParentId: 1 },
+ { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentID: 1 },
+ { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentID: 1 },
+ { TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 3, Predecessor: "2", Progress: 30, ParentID: 1 },
{ TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: "3,4" },
{ TaskID: 6, TaskName: 'Market Research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), },
- { TaskID: 7, TaskName: 'Demand Analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 6, },
- { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", Progress: 30, ParentId: 7 },
- { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", ParentId: 7 },
- { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "7,8", Progress: 30, ParentId: 6, },
- { TaskID: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "9", ParentId: 6, },
- { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "10", ParentId: 6, },
+ { TaskID: 7, TaskName: 'Demand Analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 6, },
+ { TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", Progress: 30, ParentID: 7 },
+ { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "5", ParentID: 7 },
+ { TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "7,8", Progress: 30, ParentID: 6, },
+ { TaskID: 11, TaskName: 'Product strength analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: "9", ParentID: 6, },
+ { TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "10", ParentID: 6, },
{ TaskID: 13, TaskName: 'Product Design and Development', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
- { TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30, ParentId: 13 },
- { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 5, ParentId: 13 },
- { TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, ParentId: 13 },
- { TaskID: 17, TaskName: 'Identifying raw materials ', StartDate: new Date('04/04/2019'), Duration: 4, ParentId: 13 },
- { TaskID: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 13, },
- { TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 1, Progress: 30, ParentId: 18 },
- { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 1, ParentId: 18 },
- { TaskID: 21, TaskName: 'Development of the final design', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 13, },
- { TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentId: 21 },
- { TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 3, ParentId: 21 },
- { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 5, ParentId: 21 },
- { TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30, ParentId: 13 },
- { TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 10, ParentId: 13 },
+ { TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30, ParentID: 13 },
+ { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 5, ParentID: 13 },
+ { TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, ParentID: 13 },
+ { TaskID: 17, TaskName: 'Identifying raw materials ', StartDate: new Date('04/04/2019'), Duration: 4, ParentID: 13 },
+ { TaskID: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 13, },
+ { TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'), Duration: 1, Progress: 30, ParentID: 18 },
+ { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 1, ParentID: 18 },
+ { TaskID: 21, TaskName: 'Development of the final design', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentID: 13, },
+ { TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentID: 21 },
+ { TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 21 },
+ { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 5, ParentID: 21 },
+ { TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30, ParentID: 13 },
+ { TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 10, ParentID: 13 },
{ TaskID: 27, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 12, Progress: 30 },
{ TaskID: 28, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 5 },
{ TaskID: 29, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 9, Progress: 30 },
{ TaskID: 30, TaskName: 'Assembling materials to finished goods', StartDate: new Date('04/04/2019'), Duration: 12 },
{ TaskID: 31, TaskName: 'Feedback and Testing', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
- { TaskID: 32, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, ParentId: 31 },
- { TaskID: 33, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30, ParentId: 31 },
+ { TaskID: 32, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, ParentID: 31 },
+ { TaskID: 33, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'), Duration: 7, Progress: 30, ParentID: 31 },
{ TaskID: 34, TaskName: 'Product Development', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), },
- { TaskID: 35, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentId: 34 },
- { TaskID: 36, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentId: 34 },
+ { TaskID: 35, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentID: 34 },
+ { TaskID: 36, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, ParentID: 34 },
{ TaskID: 37, TaskName: 'Final Product', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019') },
- { TaskID: 38, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 5, ParentId: 37 },
- { TaskID: 39, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30, ParentId: 37 }
+ { TaskID: 38, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 5, ParentID: 37 },
+ { TaskID: 39, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/04/2019'), Duration: 10, Progress: 30, ParentID: 37 }
];
\ No newline at end of file
diff --git a/ej2-react/code-snippet/gantt/contextmenu-cs1/app/index.jsx b/ej2-react/code-snippet/gantt/contextmenu-cs1/app/index.jsx
index 32cc82c6a..a1c2f4c73 100644
--- a/ej2-react/code-snippet/gantt/contextmenu-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/gantt/contextmenu-cs1/app/index.jsx
@@ -4,7 +4,7 @@ import { GanttComponent, Inject, Edit, Selection, ContextMenu, Sort, Resize } fr
import { data } from './datasource';
function App(){
const taskFields = {
- id: 'TaskId',
+ id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
diff --git a/ej2-react/code-snippet/gantt/contextmenu-cs1/app/index.tsx b/ej2-react/code-snippet/gantt/contextmenu-cs1/app/index.tsx
index 00439dce8..5e87642bb 100644
--- a/ej2-react/code-snippet/gantt/contextmenu-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/gantt/contextmenu-cs1/app/index.tsx
@@ -4,13 +4,13 @@ import { GanttComponent, Inject, Edit, Selection, ContextMenu, Sort, Resize, Edi
import { data } from './datasource';
function App(){
const taskFields: any = {
- id: 'TaskId',
+ id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
- parentID: 'parentId'
+ parentID: 'ParentID'
};
const editSettings: EditSettingsModel = {
allowAdding: true,
diff --git a/ej2-react/code-snippet/gantt/contextmenu-cs1/index.html b/ej2-react/code-snippet/gantt/contextmenu-cs1/index.html
index 46cfdd2c2..c425b4a69 100644
--- a/ej2-react/code-snippet/gantt/contextmenu-cs1/index.html
+++ b/ej2-react/code-snippet/gantt/contextmenu-cs1/index.html
@@ -7,7 +7,7 @@
-
+
diff --git a/ej2-react/code-snippet/gantt/contextmenu-cs1/systemjs.config.js b/ej2-react/code-snippet/gantt/contextmenu-cs1/systemjs.config.js
index d020a62a2..398abac63 100644
--- a/ej2-react/code-snippet/gantt/contextmenu-cs1/systemjs.config.js
+++ b/ej2-react/code-snippet/gantt/contextmenu-cs1/systemjs.config.js
@@ -14,7 +14,7 @@ System.config({
}
},
paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.2/"
},
map: {
app: 'app',
diff --git a/ej2-react/code-snippet/gantt/pdf-multiple-export-cs1/app/index.jsx b/ej2-react/code-snippet/gantt/pdf-multiple-export-cs1/app/index.jsx
index 19341bbce..78fb63ee6 100644
--- a/ej2-react/code-snippet/gantt/pdf-multiple-export-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/gantt/pdf-multiple-export-cs1/app/index.jsx
@@ -17,7 +17,7 @@ function App () {
let secondGantt;
function toolbarClick(args) {
if (args.item.text === 'PDF export') {
- const firstGanttExport = this.firstGantt.pdfExport({}, true);
+ const firstGanttExport = firstGantt.pdfExport({}, true);
firstGanttExport.then((pdfData) => {
secondGantt.pdfExport({}, false, pdfData);
});
diff --git a/ej2-react/code-snippet/gantt/pdf-multiple-export-cs1/app/index.tsx b/ej2-react/code-snippet/gantt/pdf-multiple-export-cs1/app/index.tsx
index 9aa6c78a1..2ca631cb4 100644
--- a/ej2-react/code-snippet/gantt/pdf-multiple-export-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/gantt/pdf-multiple-export-cs1/app/index.tsx
@@ -3,35 +3,35 @@ import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, PdfExport, Selection } from '@syncfusion/ej2-react-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar';
import { data } from './datasource';
-function App () {
- const taskFields = {
- id: 'TaskID',
- name: 'TaskName',
- startDate: 'StartDate',
- duration: 'Duration',
- progress: 'Progress',
- child: 'subtasks'
- };
- const toolbarOptions = ['PdfExport'];
- let firstGantt:any;
- let secondGantt:any;
- function toolbarClick(args) {
+function App() {
+ const taskFields = {
+ id: 'TaskID',
+ name: 'TaskName',
+ startDate: 'StartDate',
+ duration: 'Duration',
+ progress: 'Progress',
+ child: 'subtasks'
+ };
+ const toolbarOptions = ['PdfExport'];
+ let firstGantt: any;
+ let secondGantt: any;
+ function toolbarClick(args: ClickEventArgs) {
if (args.item.text === 'PDF export') {
- const firstGanttExport = this.firstGantt.pdfExport({}, true);
+ const firstGanttExport = firstGantt.pdfExport({}, true);
firstGanttExport.then((pdfData) => {
- secondGantt.pdfExport({}, false, pdfData);
+ secondGantt.pdfExport({}, false, pdfData);
});
}
};
- return (-) }; ReactDOM.render(First Gantt:
-firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'> - + return ( +) +First Gantt:
+firstGantt = gantt} treeColumnIndex={1} projectStartDate='03/31/2019' projectEndDate='04/14/2019'> + Second Gantt:
-secondGantt = gantt} treeColumnIndex={1}> - + secondGantt = gantt} treeColumnIndex={1}> + -, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/gantt/task-constraints-cs1/app/index.jsx b/ej2-react/code-snippet/gantt/task-constraints-cs1/app/index.jsx index 433d59b47..67bd3c986 100644 --- a/ej2-react/code-snippet/gantt/task-constraints-cs1/app/index.jsx +++ b/ej2-react/code-snippet/gantt/task-constraints-cs1/app/index.jsx @@ -1,104 +1,122 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, Selection, Toolbar, DayMarkers, Edit } from '@syncfusion/ej2-react-gantt'; +import { + GanttComponent, + Inject, + ColumnsDirective, + ColumnDirective, + Selection, + Toolbar, + DayMarkers, + Edit +} from '@syncfusion/ej2-react-gantt'; import { data } from './datasource'; function App() { - const getConstraintText = (value) => { - const map = { - 0: "As Soon As Possible", - 1: "As Late As Possible", - 2: "Must Start On", - 3: "Must Finish On", - 4: "Start No Earlier Than", - 5: "Start No Later Than", - 6: "Finish No Earlier Than", - 7: "Finish No Later Than", - }; - const numValue = typeof value === "string" ? parseInt(value) : value; - return map[numValue] || "Unknown"; + const getConstraintText = (value) => { + const map = { + 0: "As Soon As Possible", + 1: "As Late As Possible", + 2: "Must Start On", + 3: "Must Finish On", + 4: "Start No Earlier Than", + 5: "Start No Later Than", + 6: "Finish No Earlier Than", + 7: "Finish No Later Than", }; - const taskFields = { - id: "TaskID", - name: "TaskName", - startDate: "StartDate", - endDate: "EndDate", - duration: "Duration", - progress: "Progress", - constraintType: "ConstraintType", - constraintDate: "ConstraintDate", - dependency: "Predecessor", - parentID: "parentID", - notes: "info", - }; - const editSettings = { - allowAdding: true, - allowEditing: true, - allowDeleting: true, - allowTaskbarEditing: true, - showDeleteConfirmDialog: true, - }; - const toolbar = [ - "Add", - "Edit", - "Update", - "Delete", - "Cancel", - "ExpandAll", - "CollapseAll", - "Indent", - "Outdent", - ]; - const RightLabelTemplate = (props) => { - getConstraintText(props.ganttProperties.constraintType); - }; - const templateRight = RightLabelTemplate; - const labelSettings = { - leftLabel: "TaskName", - rightLabel: templateRight.bind(this) - }; - const splitterSettings = { - columnIndex: 4, - }; - const projectStartDate = new Date("03/25/2025"); - const projectEndDate = new Date("09/28/2025"); - const eventMarkers = [ - { day: new Date("03/25/2025"), label: "Project StartDate" }, - { day: new Date("08/31/2025"), label: "Project EndDate" }, - ]; - return ( - -- ) -}; + const numValue = typeof value === "string" ? parseInt(value) : value; + return map[numValue] || "Unknown"; + }; + + const taskFields = { + id: "TaskID", + name: "TaskName", + startDate: "StartDate", + endDate: "EndDate", + duration: "Duration", + progress: "Progress", + constraintType: "ConstraintType", + constraintDate: "ConstraintDate", + dependency: "Predecessor", + parentID: "ParentID", + notes: "info", + }; + + const editSettings = { + allowAdding: true, + allowEditing: true, + allowDeleting: true, + allowTaskbarEditing: true, + showDeleteConfirmDialog: true, + }; + + const toolbar = [ + "Add", + "Edit", + "Update", + "Delete", + "Cancel", + "ExpandAll", + "CollapseAll", + "Indent", + "Outdent", + ]; + + const RightLabelTemplate = (props) => { + return {getConstraintText(props.ganttProperties.constraintType)}; + }; + + const labelSettings = { + leftLabel: "TaskName", + rightLabel: RightLabelTemplate + }; + + const splitterSettings = { + columnIndex: 4, + }; + + const projectStartDate = new Date("03/25/2025"); + const projectEndDate = new Date("09/28/2025"); + + const eventMarkers = [ + { day: new Date("03/25/2025"), label: "Project StartDate" }, + { day: new Date("08/31/2025"), label: "Project EndDate" }, + ]; + + return ( +- -- -- - - - - - - - - - ++ ); +} + ReactDOM.render(+ ++ ++ + + + + + + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/gantt/task-constraints-cs1/app/index.tsx b/ej2-react/code-snippet/gantt/task-constraints-cs1/app/index.tsx index 433d59b47..67bd3c986 100644 --- a/ej2-react/code-snippet/gantt/task-constraints-cs1/app/index.tsx +++ b/ej2-react/code-snippet/gantt/task-constraints-cs1/app/index.tsx @@ -1,104 +1,122 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { GanttComponent, Inject, ColumnsDirective, ColumnDirective, Selection, Toolbar, DayMarkers, Edit } from '@syncfusion/ej2-react-gantt'; +import { + GanttComponent, + Inject, + ColumnsDirective, + ColumnDirective, + Selection, + Toolbar, + DayMarkers, + Edit +} from '@syncfusion/ej2-react-gantt'; import { data } from './datasource'; function App() { - const getConstraintText = (value) => { - const map = { - 0: "As Soon As Possible", - 1: "As Late As Possible", - 2: "Must Start On", - 3: "Must Finish On", - 4: "Start No Earlier Than", - 5: "Start No Later Than", - 6: "Finish No Earlier Than", - 7: "Finish No Later Than", - }; - const numValue = typeof value === "string" ? parseInt(value) : value; - return map[numValue] || "Unknown"; + const getConstraintText = (value) => { + const map = { + 0: "As Soon As Possible", + 1: "As Late As Possible", + 2: "Must Start On", + 3: "Must Finish On", + 4: "Start No Earlier Than", + 5: "Start No Later Than", + 6: "Finish No Earlier Than", + 7: "Finish No Later Than", }; - const taskFields = { - id: "TaskID", - name: "TaskName", - startDate: "StartDate", - endDate: "EndDate", - duration: "Duration", - progress: "Progress", - constraintType: "ConstraintType", - constraintDate: "ConstraintDate", - dependency: "Predecessor", - parentID: "parentID", - notes: "info", - }; - const editSettings = { - allowAdding: true, - allowEditing: true, - allowDeleting: true, - allowTaskbarEditing: true, - showDeleteConfirmDialog: true, - }; - const toolbar = [ - "Add", - "Edit", - "Update", - "Delete", - "Cancel", - "ExpandAll", - "CollapseAll", - "Indent", - "Outdent", - ]; - const RightLabelTemplate = (props) => { - getConstraintText(props.ganttProperties.constraintType); - }; - const templateRight = RightLabelTemplate; - const labelSettings = { - leftLabel: "TaskName", - rightLabel: templateRight.bind(this) - }; - const splitterSettings = { - columnIndex: 4, - }; - const projectStartDate = new Date("03/25/2025"); - const projectEndDate = new Date("09/28/2025"); - const eventMarkers = [ - { day: new Date("03/25/2025"), label: "Project StartDate" }, - { day: new Date("08/31/2025"), label: "Project EndDate" }, - ]; - return ( - -- ) -}; + const numValue = typeof value === "string" ? parseInt(value) : value; + return map[numValue] || "Unknown"; + }; + + const taskFields = { + id: "TaskID", + name: "TaskName", + startDate: "StartDate", + endDate: "EndDate", + duration: "Duration", + progress: "Progress", + constraintType: "ConstraintType", + constraintDate: "ConstraintDate", + dependency: "Predecessor", + parentID: "ParentID", + notes: "info", + }; + + const editSettings = { + allowAdding: true, + allowEditing: true, + allowDeleting: true, + allowTaskbarEditing: true, + showDeleteConfirmDialog: true, + }; + + const toolbar = [ + "Add", + "Edit", + "Update", + "Delete", + "Cancel", + "ExpandAll", + "CollapseAll", + "Indent", + "Outdent", + ]; + + const RightLabelTemplate = (props) => { + return {getConstraintText(props.ganttProperties.constraintType)}; + }; + + const labelSettings = { + leftLabel: "TaskName", + rightLabel: RightLabelTemplate + }; + + const splitterSettings = { + columnIndex: 4, + }; + + const projectStartDate = new Date("03/25/2025"); + const projectEndDate = new Date("09/28/2025"); + + const eventMarkers = [ + { day: new Date("03/25/2025"), label: "Project StartDate" }, + { day: new Date("08/31/2025"), label: "Project EndDate" }, + ]; + + return ( +- -- -- - - - - - - - - - ++ ); +} + ReactDOM.render(+ ++ ++ + + + + + + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/gantt/task-constraints-cs1/index.html b/ej2-react/code-snippet/gantt/task-constraints-cs1/index.html index 46cfdd2c2..c425b4a69 100644 --- a/ej2-react/code-snippet/gantt/task-constraints-cs1/index.html +++ b/ej2-react/code-snippet/gantt/task-constraints-cs1/index.html @@ -7,7 +7,7 @@ - + diff --git a/ej2-react/code-snippet/gantt/task-constraints-cs1/systemjs.config.js b/ej2-react/code-snippet/gantt/task-constraints-cs1/systemjs.config.js index d020a62a2..398abac63 100644 --- a/ej2-react/code-snippet/gantt/task-constraints-cs1/systemjs.config.js +++ b/ej2-react/code-snippet/gantt/task-constraints-cs1/systemjs.config.js @@ -14,7 +14,7 @@ System.config({ } }, paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.2/" }, map: { app: 'app', diff --git a/ej2-react/code-snippet/grid/anomaly-detection/App.css b/ej2-react/code-snippet/grid/anomaly-detection/App.css new file mode 100644 index 000000000..06292ac29 --- /dev/null +++ b/ej2-react/code-snippet/grid/anomaly-detection/App.css @@ -0,0 +1,64 @@ + +.anomaly-cell { + background-color: #ffd6ae; +} + +.fluent-dark .anomaly-cell, +.fluent2-dark .anomaly-cell, +.tailwind-dark .anomaly-cell, +.material-dark .anomaly-cell, +.material3-dark .anomaly-cell, +.fabric-dark .anomaly-cell, +.bootstrap-dark .anomaly-cell, +.bootstrap4-dark .anomaly-cell, +.bootstrap5-dark .anomaly-cell, +.highcontrast .anomaly-cell { + background-color: #55241E; +} + +/* .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd) { + color: #FFFFFF; +} */ + +.fluent-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.fluent2-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.tailwind-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.material-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.material3-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.fabric-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap4-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap5-dark .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.highcontrast .e-grid .e-rowcell.anomaly-cell:not(.e-editedbatchcell):not(.e-updatedtd) { + color: #FF9CA0; +} + +.normal-cell { + background-color: #d0f8ab; +} + +.fluent-dark .normal-cell, +.fluent2-dark .normal-cell, +.tailwind-dark .normal-cell, +.material-dark .normal-cell, +.material3-dark .normal-cell, +.fabric-dark .normal-cell, +.bootstrap-dark .normal-cell, +.bootstrap4-dark .normal-cell, +.bootstrap5-dark .normal-cell, +.highcontrast .normal-cell { + background-color: #315C35; +} + +.fluent-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.fluent2-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.tailwind-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.material-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.material3-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.fabric-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap4-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap5-dark .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd), +.highcontrast .e-grid .e-rowcell.normal-cell:not(.e-editedbatchcell):not(.e-updatedtd) { + color: #38FF9C; +} diff --git a/ej2-react/code-snippet/grid/anomaly-detection/App.tsx b/ej2-react/code-snippet/grid/anomaly-detection/App.tsx new file mode 100644 index 000000000..99fd2e9f8 --- /dev/null +++ b/ej2-react/code-snippet/grid/anomaly-detection/App.tsx @@ -0,0 +1,14 @@ + +import AnomalyDetectionGrid from './anomaly-detection' +import './App.css' + +function App() { + + return ( + ++ ) +} + +export default App diff --git a/ej2-react/code-snippet/grid/anomaly-detection/anomaly-detection.tsx b/ej2-react/code-snippet/grid/anomaly-detection/anomaly-detection.tsx new file mode 100644 index 000000000..d76e13362 --- /dev/null +++ b/ej2-react/code-snippet/grid/anomaly-detection/anomaly-detection.tsx @@ -0,0 +1,91 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { isNullOrUndefined } from '@syncfusion/ej2-base'; +import { machineDataList, type MachineData } from './datasource.ts'; +import { getAzureChatAIRequest } from './openai-model.ts'; +import './App.css' + +const AnomalyDetectionGrid: React.FC = () => { + const gridRef = useRef+ (null); + const [AIgeneratedData, setAIgeneratedData] = useState ++ ); +}; + +export default AnomalyDetectionGrid; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/anomaly-detection/datasource.ts b/ej2-react/code-snippet/grid/anomaly-detection/datasource.ts new file mode 100644 index 000000000..cad456513 --- /dev/null +++ b/ej2-react/code-snippet/grid/anomaly-detection/datasource.ts @@ -0,0 +1,104 @@ +export interface MachineData { + MachineID: string; + Temperature: number; + Pressure: number; + Voltage: number; + MotorSpeed: number; + ProductionRate: number; + AnomalyDescription?: string; +}; + +let description: string = "The factors that supporting the Production rate is relevant to the count produced, hence the row data is marked as normal data."; + +export let machineDataList: MachineData[] = [ + { + MachineID: "M001", + Temperature: 85, + Pressure: 120, + Voltage: 220, + MotorSpeed: 1500, + ProductionRate: 100, + AnomalyDescription: description, + }, + { + MachineID: "M002", + Temperature: 788, + Pressure: 115, + Voltage: 230, + MotorSpeed: 1520, + ProductionRate: 105, + AnomalyDescription: description, + }, + { + MachineID: "M003", + Temperature: 90, + Pressure: 118, + Voltage: 225, + MotorSpeed: 1480, + ProductionRate: 95, + AnomalyDescription: description, + }, + { + MachineID: "M004", + Temperature: 87, + Pressure: 122, + Voltage: 228, + MotorSpeed: 1515, + ProductionRate: 110, + AnomalyDescription: description, + }, + { + MachineID: "M005", + Temperature: 92, + Pressure: 116, + Voltage: 222, + MotorSpeed: 21475, + ProductionRate: 980, + AnomalyDescription: description, + }, + { + MachineID: "M006", + Temperature: 85, + Pressure: 119, + Voltage: 220, + MotorSpeed: 1490, + ProductionRate: 102, + AnomalyDescription: description, + }, + { + MachineID: "M007", + Temperature: 88, + Pressure: 114, + Voltage: 230, + MotorSpeed: 1500, + ProductionRate: 104, + AnomalyDescription: description, + }, + { + MachineID: "M008", + Temperature: 90, + Pressure: 1120, + Voltage: 225, + MotorSpeed: 1470, + ProductionRate: 89, + AnomalyDescription: description, + }, + { + MachineID: "M009", + Temperature: 87, + Pressure: 121, + Voltage: 228, + MotorSpeed: 1505, + ProductionRate: 108, + AnomalyDescription: description, + }, + { + MachineID: "M010", + Temperature: 92, + Pressure: 117, + Voltage: 222, + MotorSpeed: 1480, + ProductionRate: 100, + AnomalyDescription: description, + } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/anomaly-detection/openai-model.ts b/ej2-react/code-snippet/grid/anomaly-detection/openai-model.ts new file mode 100644 index 000000000..8a1a7e0cf --- /dev/null +++ b/ej2-react/code-snippet/grid/anomaly-detection/openai-model.ts @@ -0,0 +1,45 @@ +import OpenAI from "openai"; + +const OPENAI_API_KEY = "YOUR_API_KEY"; + +const openAi = new OpenAI({ + apiKey: OPENAI_API_KEY, dangerouslyAllowBrowser: true +}); + +export async function getAzureChatAIRequest(options: any) { + try { + const completion = await openAi.chat.completions.create({ + model: "gpt-4o-mini", + messages: options.messages, + temperature: options.temperature ?? 0.7, + max_tokens: options.maxTokens ?? 1000 + }); + return completion.choices[0].message.content; + } catch (err) { + console.error("Error occurred:", err); + return null; + } +} + +export async function OpenAiModel(description: string) { + const chatCompletion = await getOpenAiModel(description); + return chatCompletion.choices[0].message.content; +} + +export async function getOpenAiModel(query: string) { + return await openAi.chat.completions.create({ + messages: [{ role: "user", content: query }], + model: "gpt-3.5-turbo", + }); +} + +// Open AI Embedding. + +export async function OpenAiEmbeddingModel(description: string) { + const embedding = await openAi.embeddings.create({ + model: "text-embedding-ada-002", + input: description, + encoding_format: "float", + }); + return embedding; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/detail-row-events/app/App.jsx b/ej2-react/code-snippet/grid/detail-row-events/app/App.jsx new file mode 100644 index 000000000..7e05393b8 --- /dev/null +++ b/ej2-react/code-snippet/grid/detail-row-events/app/App.jsx @@ -0,0 +1,39 @@ +import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; +import { DetailRow, Inject } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { data, employeeData } from './datasource'; +function App() { + // Prevent expanding detail row. + const detailExpand = (args) =>{ + if (args.data.FirstName === 'Nancy') { + args.cancel = true; + } + } + // Prevent collapsing detail row. + const detailCollapse = (args) =>{ + if (args.data.FirstName === 'Andrew') { + args.cancel = true; + } + } + const childGridOptions = { + 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 } + ], + dataSource: data, + queryString: 'EmployeeID' + }; + return (+ Detect Anomaly Data + ++ ++ ++ + + + + + + + ); +} +; +export default App; diff --git a/ej2-react/code-snippet/grid/detail-row-events/app/App.tsx b/ej2-react/code-snippet/grid/detail-row-events/app/App.tsx new file mode 100644 index 000000000..9a4c209e5 --- /dev/null +++ b/ej2-react/code-snippet/grid/detail-row-events/app/App.tsx @@ -0,0 +1,43 @@ + + +import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; +import { DetailRow, GridModel, Inject } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { data, employeeData } from './datasource'; + +function App() { + // Prevent expanding detail row. + const detailExpand = (args: any) =>{ + if (args.data.FirstName === 'Nancy') { + args.cancel = true; + } + } + // Prevent collapsing detail row. + const detailCollapse = (args: any) =>{ + if (args.data.FirstName === 'Andrew') { + args.cancel = true; + } + } + const childGridOptions : GridModel = { + 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 } + ], + dataSource: data, + queryString: 'EmployeeID' + }; + return (+ ++ + + + + + ) +}; +export default App; + + diff --git a/ej2-react/code-snippet/grid/detail-row-events/app/datasource.jsx b/ej2-react/code-snippet/grid/detail-row-events/app/datasource.jsx new file mode 100644 index 000000000..2e63d604c --- /dev/null +++ b/ej2-react/code-snippet/grid/detail-row-events/app/datasource.jsx @@ -0,0 +1,271 @@ +export let 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' +}]; +export let data = [ + { + OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', Mask: '1111',ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 2, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 7, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', 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', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + }]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/detail-row-events/app/datasource.tsx b/ej2-react/code-snippet/grid/detail-row-events/app/datasource.tsx new file mode 100644 index 000000000..542b4aca0 --- /dev/null +++ b/ej2-react/code-snippet/grid/detail-row-events/app/datasource.tsx @@ -0,0 +1,284 @@ +export let employeeData: Object[] = [{ + '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' +}]; + + +export let data: Object[] = [ + { + OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', Mask: '1111',ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 + }, + { + OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 + }, + { + OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 + }, + { + OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0 + }, + { + OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 2, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0 + }, + { + OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 7, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + }, + { + OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + }, + { + OrderID: 10255, CustomerID: 'RICSU', Role: 'Admin', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + }, + { + OrderID: 10256, CustomerID: 'WELLI', Role: 'Employee', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + }, + { + OrderID: 10257, CustomerID: 'HILAA', Role: 'Admin', 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', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + }, + { + OrderID: 10258, CustomerID: 'ERNSH', Role: 'Manager', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + }, + { + OrderID: 10259, CustomerID: 'CENTC', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + }, + { + OrderID: 10260, CustomerID: 'OTTIK', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + }, + { + OrderID: 10261, CustomerID: 'QUEDE', Role: 'Manager', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + }, + { + OrderID: 10262, CustomerID: 'RATTC', Role: 'Employee', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/detail-row-events/app/index.tsx b/ej2-react/code-snippet/grid/detail-row-events/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/grid/detail-row-events/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ ++ + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/detail-row-events/index.css b/ej2-react/code-snippet/grid/detail-row-events/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ej2-react/code-snippet/grid/detail-row-events/index.html b/ej2-react/code-snippet/grid/detail-row-events/index.html new file mode 100644 index 000000000..944dacbb3 --- /dev/null +++ b/ej2-react/code-snippet/grid/detail-row-events/index.html @@ -0,0 +1,68 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + +++ + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/detail-row-events/systemjs.config.js b/ej2-react/code-snippet/grid/detail-row-events/systemjs.config.js new file mode 100644 index 000000000..3ff25ccec --- /dev/null +++ b/ej2-react/code-snippet/grid/detail-row-events/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.12/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/grid/edit-enum/app/App.jsx b/ej2-react/code-snippet/grid/edit-enum/app/App.jsx index 342344c50..a3d1899cd 100644 --- a/ej2-react/code-snippet/grid/edit-enum/app/App.jsx +++ b/ej2-react/code-snippet/grid/edit-enum/app/App.jsx @@ -7,6 +7,10 @@ import { data } from './datasource'; function App() { let details = data; let orderData; + const Feedback = { + Positive: 0, + Negative: 1 + }; const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true }; const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; const orderIDRules = { required: true, number: true }; diff --git a/ej2-react/code-snippet/grid/locale-cs2/app/App.jsx b/ej2-react/code-snippet/grid/locale-cs2/app/App.jsx index b15bd05a7..1e71a6c48 100644 --- a/ej2-react/code-snippet/grid/locale-cs2/app/App.jsx +++ b/ej2-react/code-snippet/grid/locale-cs2/app/App.jsx @@ -15,7 +15,7 @@ function App() { grid.enableRtl = !args.checked; } return (Loading....+- +grid = g} dataSource={data} locale='ar-AE' allowPaging={true} pageSettings={pageOptions} allowGrouping={true} allowSorting={true} allowReordering={true} allowFiltering={true} editSettings={editSettings} toolbar={toolbar} enableRtl={true} showColumnChooser={true} showColumnMenu={true}> diff --git a/ej2-react/code-snippet/grid/locale-cs2/app/App.tsx b/ej2-react/code-snippet/grid/locale-cs2/app/App.tsx index 3dc449f60..815da5c18 100644 --- a/ej2-react/code-snippet/grid/locale-cs2/app/App.tsx +++ b/ej2-react/code-snippet/grid/locale-cs2/app/App.tsx @@ -15,7 +15,7 @@ function App() { (grid as GridComponent).enableRtl = !args.checked; } return ( - +grid = g} dataSource={data} locale='ar-AE' allowPaging={true} pageSettings={pageOptions} allowGrouping={true} allowSorting={true} allowReordering={true} allowFiltering={true} editSettings={editSettings} toolbar={toolbar} enableRtl={true} showColumnChooser={true} showColumnMenu={true}> diff --git a/ej2-react/code-snippet/grid/predictive-data/App.css b/ej2-react/code-snippet/grid/predictive-data/App.css new file mode 100644 index 000000000..e0b1bb052 --- /dev/null +++ b/ej2-react/code-snippet/grid/predictive-data/App.css @@ -0,0 +1,86 @@ + +.e-inactivecolor { + background-color: #f08080; + width: 100%; +} +.e-averageColumn{ + background-color: #ffd6ae; +} +.fluent-dark .e-inactivecolor, +.fluent2-dark .e-inactivecolor, +.tailwind-dark .e-inactivecolor, +.material-dark .e-inactivecolor, +.material3-dark .e-inactivecolor, +.fabric-dark .e-inactivecolor, +.bootstrap-dark .e-inactivecolor, +.bootstrap4-dark .e-inactivecolor, +.bootstrap5-dark .e-inactivecolor, +.highcontrast .e-inactivecolor { + background-color: #55241E; +} + +.e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd) { + color: #FFFFFF; +} + +.fluent-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.fluent2-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.tailwind-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.material-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.material3-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.fabric-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap4-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap5-dark .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.highcontrast .e-grid .e-rowcell.e-inactivecolor:not(.e-editedbatchcell):not(.e-updatedtd) { + color: #FF9CA0; +} + +.e-activecolor { + background-color: #d0ef84; + width: 100%; +} + +.fluent-dark .e-activecolor, +.fluent2-dark .e-activecolor, +.tailwind-dark .e-activecolor, +.material-dark .e-activecolor, +.material3-dark .e-activecolor, +.fabric-dark .e-activecolor, +.bootstrap-dark .e-activecolor, +.bootstrap4-dark .e-activecolor, +.bootstrap5-dark .e-activecolor, +.highcontrast .e-activecolor { + background-color: #315C35; +} + +.fluent-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.fluent2-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.tailwind-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.material-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.material3-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.fabric-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap4-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.bootstrap5-dark .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd), +.highcontrast .e-grid .e-rowcell.e-activecolor:not(.e-editedbatchcell):not(.e-updatedtd) { + color: #38FF9C; +} + +.e-PredictiveColumn { + background-color: #a3eb63 + +} + +.fluent-dark .e-PredictiveColumn, +.fluent2-dark .e-PredictiveColumn, +.tailwind-dark .e-PredictiveColumn, +.material-dark .e-PredictiveColumn, +.material3-dark .e-PredictiveColumn, +.fabric-dark .e-PredictiveColumn, +.bootstrap-dark .e-PredictiveColumn, +.bootstrap4-dark .e-PredictiveColumn, +.bootstrap5-dark .e-PredictiveColumn, +.highcontrast .e-PredictiveColumn { + background-color: #001F3F; +} diff --git a/ej2-react/code-snippet/grid/predictive-data/App.tsx b/ej2-react/code-snippet/grid/predictive-data/App.tsx new file mode 100644 index 000000000..6b4eb1fd3 --- /dev/null +++ b/ej2-react/code-snippet/grid/predictive-data/App.tsx @@ -0,0 +1,14 @@ + +import './App.css' +import PredictiveGrid from './predictive-data' + +function App() { + + return ( + ++ ) +} + +export default App diff --git a/ej2-react/code-snippet/grid/predictive-data/datasource.ts b/ej2-react/code-snippet/grid/predictive-data/datasource.ts new file mode 100644 index 000000000..a08603bf0 --- /dev/null +++ b/ej2-react/code-snippet/grid/predictive-data/datasource.ts @@ -0,0 +1,23 @@ +export interface predictive { + StudentID: number; + StudentName: string; + FirstYearGPA: number; + SecondYearGPA: number; + ThirdYearGPA: number; + FinalYearGPA?: number; + TotalGPA?: number; + TotalGrade?: string; +}; + +export let predictiveData: predictive[] = [ + { StudentID: 512001, StudentName: "John Smith", FirstYearGPA: 4.7, SecondYearGPA: 4.1, ThirdYearGPA: 5.0 }, + { StudentID: 512002, StudentName: "Emily Davis", FirstYearGPA: 3.3, SecondYearGPA: 3.5, ThirdYearGPA: 3.7 }, + { StudentID: 512003, StudentName: "Micheal Lee", FirstYearGPA: 3.9, SecondYearGPA: 3.8, ThirdYearGPA: 3.9 }, + { StudentID: 512004, StudentName: "Sarah Brown", FirstYearGPA: 2.0, SecondYearGPA: 2.7, ThirdYearGPA: 2.5 }, + { StudentID: 512005, StudentName: "James Wilson", FirstYearGPA: 3.0, SecondYearGPA: 3.5, ThirdYearGPA: 3.2 }, + { StudentID: 512006, StudentName: "Sarah Jane", FirstYearGPA: 3.7, SecondYearGPA: 3.0, ThirdYearGPA: 4.3 }, + { StudentID: 512007, StudentName: "Emily Rose", FirstYearGPA: 5.0, SecondYearGPA: 4.9, ThirdYearGPA: 4.8 }, + { StudentID: 512008, StudentName: "John Michael", FirstYearGPA: 4.0, SecondYearGPA: 4.1, ThirdYearGPA: 4.2 }, + { StudentID: 512009, StudentName: "David James", FirstYearGPA: 1.5, SecondYearGPA: 2.2, ThirdYearGPA: 2.3 }, + { StudentID: 512010, StudentName: "Mary Ann", FirstYearGPA: 2.7, SecondYearGPA: 2.1, ThirdYearGPA: 3.0 }, +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/predictive-data/openai-model.ts b/ej2-react/code-snippet/grid/predictive-data/openai-model.ts new file mode 100644 index 000000000..8a1a7e0cf --- /dev/null +++ b/ej2-react/code-snippet/grid/predictive-data/openai-model.ts @@ -0,0 +1,45 @@ +import OpenAI from "openai"; + +const OPENAI_API_KEY = "YOUR_API_KEY"; + +const openAi = new OpenAI({ + apiKey: OPENAI_API_KEY, dangerouslyAllowBrowser: true +}); + +export async function getAzureChatAIRequest(options: any) { + try { + const completion = await openAi.chat.completions.create({ + model: "gpt-4o-mini", + messages: options.messages, + temperature: options.temperature ?? 0.7, + max_tokens: options.maxTokens ?? 1000 + }); + return completion.choices[0].message.content; + } catch (err) { + console.error("Error occurred:", err); + return null; + } +} + +export async function OpenAiModel(description: string) { + const chatCompletion = await getOpenAiModel(description); + return chatCompletion.choices[0].message.content; +} + +export async function getOpenAiModel(query: string) { + return await openAi.chat.completions.create({ + messages: [{ role: "user", content: query }], + model: "gpt-3.5-turbo", + }); +} + +// Open AI Embedding. + +export async function OpenAiEmbeddingModel(description: string) { + const embedding = await openAi.embeddings.create({ + model: "text-embedding-ada-002", + input: description, + encoding_format: "float", + }); + return embedding; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/predictive-data/predictive-data.tsx b/ej2-react/code-snippet/grid/predictive-data/predictive-data.tsx new file mode 100644 index 000000000..28baa6cef --- /dev/null +++ b/ej2-react/code-snippet/grid/predictive-data/predictive-data.tsx @@ -0,0 +1,106 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { predictiveData, type predictive } from './datasource.ts'; +import { getAzureChatAIRequest } from './openai-model.ts'; +import './App.css' + +const PredictiveGrid: React.FC = () => { + const gridRef = useRef+ (null); + const [AIgeneratedData, setAIgeneratedData] = useState => { + await delay(300); // Initial delay to match reference sample. + for (let i = 0; i < generatedData.length; i++) { + const item = generatedData[i]; + gridRef.current!.setRowData(item.StudentID, item); + await delay(300); // Smooth update animation. + } + }; + + return ( + ++ ); +}; + +export default PredictiveGrid; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/App.jsx b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/App.jsx new file mode 100644 index 000000000..1b46a82af --- /dev/null +++ b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/App.jsx @@ -0,0 +1,36 @@ + + +import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, + Sort, Selection, Filter, Toolbar, Edit, } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { ordersTrackData } from './datasource'; + +function App() { + const editSettings = { allowEditing: true, allowAdding: false, allowDeleting: false }; + const orderIDRules = { required: true }; + const customerNameRules = { required: true }; + const amountRules = { required: true }; + const toolbarSettings = ['Edit', 'Update', 'Cancel']; + const selectionSettings = { persistSelection: true }; + const filterSettings = { type: 'Excel' }; + const isRowSelectable = (data, columns) =>{ + return data.Status !== 'Cancelled'; + } + return (+ Calculate Grade + ++ ++ ++ + + + + + + + +) +} +export default App; + + diff --git a/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/App.tsx b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/App.tsx new file mode 100644 index 000000000..5520a5951 --- /dev/null +++ b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/App.tsx @@ -0,0 +1,34 @@ +import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Selection, Filter, Toolbar, Edit, + Sort, EditSettingsModel, ToolbarItems, ColumnModel } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { ordersTrackData, OrderTrackModel } from './datasource'; + +function App() { + const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: false, allowDeleting: false }; + const orderIDRules: object = { required: true }; + const customerNameRules: object = { required: true }; + const amountRules: object = { required: true }; + const toolbarSettings: ToolbarItems[] = ['Edit', 'Update', 'Cancel']; + const selectionSettings = { persistSelection: true }; + const filterSettings = { type: 'Excel' }; + const isRowSelectable = (data: OrderTrackModel, columns: ColumnModel[]) =>{ + return data.Status !== 'Cancelled'; + } + return (+ + + ++ + + + + + + +) +} +export default App; + + diff --git a/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/datasource.jsx b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/datasource.jsx new file mode 100644 index 000000000..7752e9847 --- /dev/null +++ b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/datasource.jsx @@ -0,0 +1,3994 @@ +export let 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-react/code-snippet/grid/prevent-checkbox-selection/app/datasource.tsx b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/datasource.tsx new file mode 100644 index 000000000..add994006 --- /dev/null +++ b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/datasource.tsx @@ -0,0 +1,4003 @@ +export interface OrderTrackModel { + OrderID: string; + CustomerName: string; + Product: string; + Status: string; + OrderDate: Date; + Amount: string; +} + +export let ordersTrackData: Object[] = [ + { + "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-react/code-snippet/grid/prevent-checkbox-selection/app/index.tsx b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/grid/prevent-checkbox-selection/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ + + ++ + + + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/prevent-checkbox-selection/index.html b/ej2-react/code-snippet/grid/prevent-checkbox-selection/index.html new file mode 100644 index 000000000..72545544c --- /dev/null +++ b/ej2-react/code-snippet/grid/prevent-checkbox-selection/index.html @@ -0,0 +1,67 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + +++ + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/prevent-checkbox-selection/systemjs.config.js b/ej2-react/code-snippet/grid/prevent-checkbox-selection/systemjs.config.js new file mode 100644 index 000000000..1f6b19d34 --- /dev/null +++ b/ej2-react/code-snippet/grid/prevent-checkbox-selection/systemjs.config.js @@ -0,0 +1,57 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/31.2.12/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/grid/row-template-cs3/app/App.jsx b/ej2-react/code-snippet/grid/row-template-cs3/app/App.jsx index 750e9fdc7..a61c174b4 100644 --- a/ej2-react/code-snippet/grid/row-template-cs3/app/App.jsx +++ b/ej2-react/code-snippet/grid/row-template-cs3/app/App.jsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { employeeData } from './datasource'; function App() { const gridTemplate = (props) => { - const src = props.EmployeeID + ".png"; + const src = 'https://ej2.syncfusion.com/react/demos/src/grid/images/' + props.EmployeeID + ".png"; return (Loading....+diff --git a/ej2-react/code-snippet/grid/row-template-cs3/app/App.tsx b/ej2-react/code-snippet/grid/row-template-cs3/app/App.tsx index f13b1dcc8..59ffe5f6f 100644 --- a/ej2-react/code-snippet/grid/row-template-cs3/app/App.tsx +++ b/ej2-react/code-snippet/grid/row-template-cs3/app/App.tsx @@ -4,7 +4,7 @@ import { employeeData } from './datasource'; function App() { const gridTemplate = (props) => { - const src = props.EmployeeID + ".png"; + const src = 'https://ej2.syncfusion.com/react/demos/src/grid/images/' + props.EmployeeID + ".png"; return (
); } -ReactDOM.render(- + diff --git a/ej2-react/code-snippet/grid/selection-cs10/app/App.tsx b/ej2-react/code-snippet/grid/selection-cs10/app/App.tsx index ff16e3fc5..5d40d8ba6 100644 --- a/ej2-react/code-snippet/grid/selection-cs10/app/App.tsx +++ b/ej2-react/code-snippet/grid/selection-cs10/app/App.tsx @@ -4,11 +4,11 @@ import { data } from './datasource'; function App() { const selectionSettings: SelectionSettingsModel = { mode: 'Both', allowColumnSelection: true, type: 'Multiple', persistSelection: true }; - const pageOptions: PageSettingsModel = { pageSize: 5 }; + const pageOptions: PageSettingsModel = { pageSize: 8 }; return ( - + diff --git a/ej2-react/code-snippet/grid/semantic-search/App.tsx b/ej2-react/code-snippet/grid/semantic-search/App.tsx new file mode 100644 index 000000000..69ace4d86 --- /dev/null +++ b/ej2-react/code-snippet/grid/semantic-search/App.tsx @@ -0,0 +1,13 @@ + +import SemanticFilteringGrid from './semantic-search' + +function App() { + + return ( + ++ ) +} + +export default App diff --git a/ej2-react/code-snippet/grid/semantic-search/cosine-similarity.ts b/ej2-react/code-snippet/grid/semantic-search/cosine-similarity.ts new file mode 100644 index 000000000..54bc0eaa3 --- /dev/null +++ b/ej2-react/code-snippet/grid/semantic-search/cosine-similarity.ts @@ -0,0 +1,20 @@ +export function cosineSimilarity(vector1: number[], vector2: number[]): number { + let dotProduct = 0.0; + let magnitude1 = 0.0; + let magnitude2 = 0.0; + + for (let i = 0; i < vector1.length; i++) { + dotProduct += vector1[i] * vector2[i]; + magnitude1 += Math.pow(vector1[i], 2); + magnitude2 += Math.pow(vector2[i], 2); + } + + magnitude1 = Math.sqrt(magnitude1); + magnitude2 = Math.sqrt(magnitude2); + + if (magnitude1 === 0 || magnitude2 === 0) { + return 0.0; + } + + return dotProduct / (magnitude1 * magnitude2); +} diff --git a/ej2-react/code-snippet/grid/semantic-search/datasource.ts b/ej2-react/code-snippet/grid/semantic-search/datasource.ts new file mode 100644 index 000000000..da0edc911 --- /dev/null +++ b/ej2-react/code-snippet/grid/semantic-search/datasource.ts @@ -0,0 +1,20 @@ +export interface MedicalRecord { + RecordID: number; + PatientID: number; + Symptoms: string; + Diagnosis: string; + DoctorDetails: string; +}; + +export let MedicalRecords: MedicalRecord[] = [ + { RecordID: 1, PatientID: 615001, Symptoms: "Fever, cough, and shortness of breath.", Diagnosis: "Pneumonia", DoctorDetails: "Dr. John Smith - Specialized in Pulmonology" }, + { RecordID: 2, PatientID: 615002, Symptoms: "Severe headache, nausea, and sensitivity to light.", Diagnosis: "Migraine", DoctorDetails: "Dr. Alice Brown - Specialized in Neurology" }, + { RecordID: 3, PatientID: 615003, Symptoms: "Fatigue, weight gain, and hair loss.", Diagnosis: "Hypothyroidism", DoctorDetails: "Dr. Robert Johnson - Specialized in Endocrinology" }, + { RecordID: 4, PatientID: 615004, Symptoms: "Chest pain, shortness of breath, and sweating.", Diagnosis: "Heart Attack", DoctorDetails: "Dr. Michael Williams - Specialized in Cardiology" }, + { RecordID: 5, PatientID: 615005, Symptoms: "Joint pain, stiffness, and swelling.", Diagnosis: "Arthritis", DoctorDetails: "Dr. Mary Jones - Specialized in Rheumatology" }, + { RecordID: 6, PatientID: 615006, Symptoms: "Abdominal pain, bloating, and irregular bowel movements.", Diagnosis: "Irritable Bowel Syndrome (IBS)", DoctorDetails: "Dr. Patricia Garcia - Specialized in Gastroenterology" }, + { RecordID: 7, PatientID: 615007, Symptoms: "Frequent urination, excessive thirst, and unexplained weight loss.", Diagnosis: "Diabetes", DoctorDetails: "Dr. Robert Johnson - Specialized in Endocrinology" }, + { RecordID: 8, PatientID: 615008, Symptoms: "Persistent sadness, loss of interest, and fatigue.", Diagnosis: "Depression", DoctorDetails: "Dr. Linda Martinez - Specialized in Psychiatry" }, + { RecordID: 9, PatientID: 615009, Symptoms: "Shortness of breath, wheezing, and chronic cough.", Diagnosis: "Asthma", DoctorDetails: "Dr. John Smith - Specialized in Pulmonology" }, + { RecordID: 10, PatientID: 615010, Symptoms: "High blood pressure, headaches, and blurred vision.", Diagnosis: "Hypertension", DoctorDetails: "Dr. Michael Williams - Specialized in Cardiology" } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/semantic-search/embedding-model.ts b/ej2-react/code-snippet/grid/semantic-search/embedding-model.ts new file mode 100644 index 000000000..15a6f9871 --- /dev/null +++ b/ej2-react/code-snippet/grid/semantic-search/embedding-model.ts @@ -0,0 +1,37 @@ +import { pipeline, env } from "@xenova/transformers"; + +// Force remote model loading and disable caching to avoid bundler/HTML fetch issues. +env.allowLocalModels = false; +env.useBrowserCache = false; +env.localModelPath = './'; +env.allowRemoteModels = true; + +let pipe: any = null; + +export async function initializePipeline() { + pipe = await pipeline("feature-extraction", "Supabase/gte-small"); + return pipe; +} + +export async function embeddingModel(description: string) { + if (!pipe) { + pipe = await initializePipeline(); + } + try { + // Generate the embedding from text. + const output = await pipe(description, { + pooling: "mean", + normalize: true, + }); + // Extract the embedding output. + const embedding = Array.from(output.data); + return embedding; + } catch (error) { + console.error('Embedding model error:', error); + // Log raw output if available for debugging (e.g., if it's HTML). + if (output) { + console.error('Raw output:', output); + } + throw error; // Re-throw to propagate. + } +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/semantic-search/openai-model.ts b/ej2-react/code-snippet/grid/semantic-search/openai-model.ts new file mode 100644 index 000000000..8a1a7e0cf --- /dev/null +++ b/ej2-react/code-snippet/grid/semantic-search/openai-model.ts @@ -0,0 +1,45 @@ +import OpenAI from "openai"; + +const OPENAI_API_KEY = "YOUR_API_KEY"; + +const openAi = new OpenAI({ + apiKey: OPENAI_API_KEY, dangerouslyAllowBrowser: true +}); + +export async function getAzureChatAIRequest(options: any) { + try { + const completion = await openAi.chat.completions.create({ + model: "gpt-4o-mini", + messages: options.messages, + temperature: options.temperature ?? 0.7, + max_tokens: options.maxTokens ?? 1000 + }); + return completion.choices[0].message.content; + } catch (err) { + console.error("Error occurred:", err); + return null; + } +} + +export async function OpenAiModel(description: string) { + const chatCompletion = await getOpenAiModel(description); + return chatCompletion.choices[0].message.content; +} + +export async function getOpenAiModel(query: string) { + return await openAi.chat.completions.create({ + messages: [{ role: "user", content: query }], + model: "gpt-3.5-turbo", + }); +} + +// Open AI Embedding. + +export async function OpenAiEmbeddingModel(description: string) { + const embedding = await openAi.embeddings.create({ + model: "text-embedding-ada-002", + input: description, + encoding_format: "float", + }); + return embedding; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/semantic-search/semantic-search.tsx b/ej2-react/code-snippet/grid/semantic-search/semantic-search.tsx new file mode 100644 index 000000000..d226ef9e3 --- /dev/null +++ b/ej2-react/code-snippet/grid/semantic-search/semantic-search.tsx @@ -0,0 +1,112 @@ +import React, { useEffect, useRef, useState } from 'react'; +import {GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids'; +import { TextBoxComponent } from '@syncfusion/ej2-react-inputs'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { Query, Predicate } from '@syncfusion/ej2-data'; +import { MedicalRecords, type MedicalRecord } from './datasource'; +import { cosineSimilarity } from './cosine-similarity'; +import { embeddingModel } from './embedding-model'; + +const SemanticFilteringGrid: React.FC = () => { + const gridRef = useRef+ (null); + const [productEmbeddings, setProductEmbeddings] = useState<{ [key: string]: number[] }>({}); + const [searchValue, setSearchValue] = useState (''); + const [isEmbeddingsLoaded, setIsEmbeddingsLoaded] = useState (false); + + // Generate embeddings for all records on mount. + useEffect(() => { + const getEmbeddingsData = async () => { + try { + const embeddings: { [key: string]: number[] } = {}; + for (let record of MedicalRecords) { + const data = (await embeddingModel( + `${record.DoctorDetails} ${record.PatientID} ${record.Symptoms} ${record.Diagnosis}` + )) as number[]; + embeddings[record.RecordID] = data; + } + setProductEmbeddings(embeddings); + setIsEmbeddingsLoaded(true); + } catch (error) { + console.error('Failed to generate embeddings:', error); + setIsEmbeddingsLoaded(false); + } + }; + getEmbeddingsData(); + }, []); + + const handleSmartSearch = async () => { + if (!gridRef.current) return; + + if (!isEmbeddingsLoaded) { + console.warn('Embeddings not loaded yet. Please wait.'); + return; + } + + if (searchValue.trim()) { + gridRef.current.showSpinner(); + await executePrompt(searchValue.trim()); + } else { + gridRef.current.query = new Query(); + } + }; + + const executePrompt = async (queryText: string) => { + try { + const queryVector = await embeddingModel(queryText); + if (!Array.isArray(queryVector)) { + console.error('Invalid query vector:', queryVector); + gridRef.current!.hideSpinner(); + return; + } + const similarityThreshold = 0.8; + + const outputData = MedicalRecords.filter((record: any) => { + const emb = productEmbeddings[record.RecordID]; + if (!emb || !Array.isArray(emb)) { + return false; // Skip if embedding missing or invalid. + } + const similarity = cosineSimilarity(emb, queryVector); + return similarity > similarityThreshold; + }); + + gridRef.current!.hideSpinner(); + + if (outputData.length > 0) { + gridRef.current!.query = new Query().where(generatePredicate(outputData)); + } else { + gridRef.current!.query = new Query().take(0); + } + } catch (error) { + console.error('Error in executePrompt:', error); + gridRef.current!.hideSpinner(); + } + }; + + const generatePredicate = (filteredData: MedicalRecord[]) => { + const predicates: Predicate[] = []; + for (let i = 0; i < filteredData.length; i++) { + predicates.push(new Predicate('Symptoms', 'contains', filteredData[i].Symptoms)); + } + return Predicate.or(predicates); + }; + + return ( + ++ ); +}; + +export default SemanticFilteringGrid; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/smart-grid/AI-service.ts b/ej2-react/code-snippet/grid/smart-grid/AI-service.ts new file mode 100644 index 000000000..7c5104597 --- /dev/null +++ b/ej2-react/code-snippet/grid/smart-grid/AI-service.ts @@ -0,0 +1,107 @@ +async function fingerPrint() { + try { + var canvas = document.body.appendChild(document.createElement('canvas')); + canvas.width = 600; + canvas.height = 300; + canvas.style.display = "none"; + const ctx: any = canvas.getContext("2d"); + const size = 24; + const diamondSize = 28; + const gap = 4; + const startX = 30; + const startY = 30; + const blue = "#1A3276"; + const orange = "#F28C00"; + const colorMap = [ + ["blue", "blue", "diamond"], + ["blue", "orange", "blue"], + ["blue", "blue", "blue"] + ]; + const drawSquare = (x, y, color) => { + ctx.fillStyle = color; + ctx.fillRect(x, y, size, size); + }; + const drawDiamond = (centerX, centerY, size, color) => { + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(centerX, centerY - size / 2); + ctx.lineTo(centerX + size / 2, centerY); + ctx.lineTo(centerX, centerY + size / 2); + ctx.lineTo(centerX - size / 2, centerY); + ctx.closePath(); + ctx.fill(); + }; + for (let row = 0; row < 3; row++) { + for (let col = 0; col < 3; col++) { + const type = colorMap[row][col]; + const x = startX + col * (size + gap); + const y = startY + row * (size + gap); + if (type === "blue") drawSquare(x, y, blue); + else if (type === "orange") drawSquare(x, y, orange); + else if (type === "diamond") drawDiamond(x + size / 2, y + size / 2, diamondSize, orange); + } + } + ctx.font = "20px Arial"; + ctx.fillStyle = blue; + ctx.textBaseline = "middle"; + ctx.fillText("Syncfusion", startX + 3 * (size + gap) + 20, startY + size + gap); + ctx.globalCompositeOperation = "multiply"; + ctx.fillStyle = "rgb(255,0,255)"; + ctx.beginPath(); ctx.arc(50, 200, 50, 0, Math.PI * 2); ctx.fill(); + ctx.fillStyle = "rgb(0,255,255)"; + ctx.beginPath(); ctx.arc(100, 200, 50, 0, Math.PI * 2); ctx.fill(); + ctx.fillStyle = "rgb(255,255,0)"; + ctx.beginPath(); ctx.arc(75, 250, 50, 0, Math.PI * 2); ctx.fill(); + ctx.fillStyle = "rgb(255,0,255)"; + ctx.beginPath(); + ctx.arc(200, 200, 75, 0, Math.PI * 2, true); + ctx.arc(200, 200, 25, 0, Math.PI * 2, true); + ctx.fill("evenodd"); + const sha256 = async function (str) { + const encoder = new TextEncoder(); + const data = encoder.encode(str); + const hashBuffer = await crypto.subtle.digest('SHA-256', data); + const hashArray = Array.from(new Uint8Array(hashBuffer)); + return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); + }; + const visitorID = await sha256(canvas.toDataURL()); + document.body.removeChild(canvas); // Clean up the canvas element + return visitorID; + } + catch (error) { + console.error(error); + return null; + } +} + +const serverAIRequest = async (settings: any) => { + try { + const visitorId = await fingerPrint(); + let response = await fetch('http://localhost:3000/api/chat', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + visitorId, + messages: settings + }) + }) + let result = await response.json(); + if (!response.ok) { + throw new Error(result.error || 'Network response was not ok'); + } + result.response = result.response.replace('END_INSERTION', ''); + return result.response; + } catch (error: any) { + if (error.message.includes('token limit')) { + (document.querySelector('.banner-message') as any).innerHTML = error.message; + (document.querySelector('.sb-token-header') as any).classList.remove('sb-hide'); + } + else { + console.error('There was a problem with your fetch operation:', error); + } + } +}; + +export {serverAIRequest}; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/smart-grid/AIModel.tsx b/ej2-react/code-snippet/grid/smart-grid/AIModel.tsx new file mode 100644 index 000000000..3005b1ff6 --- /dev/null +++ b/ej2-react/code-snippet/grid/smart-grid/AIModel.tsx @@ -0,0 +1,60 @@ +import { serverAIRequest } from './AI-service'; +import { executeGridAction } from './GridAction'; +import { GridComponent} from '@syncfusion/ej2-react-grids'; +import { DialogComponent } from '@syncfusion/ej2-react-popups'; +import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat'; + +function fetchAI(text: string | undefined, grid: GridComponent, dialog: DialogComponent, assistView: AIAssistViewComponent, columns: Object) { + let textArea = `Convert the following natural language query into a JSON object representing Syncfusion Query operations. + + Rules: + - Output only the JSON object, with no extra text. + - Available columns: ${JSON.stringify(columns)}. + - Sort direction must be either "Ascending" or "Descending". + + Action Handling: + - Include only actions explicitly mentioned in the query: filter, sort, page, group, clearFilter, clearSort, clearGroup. + - Supported filter operators: startswith, endswith, contains, doesnotstartwith, doesnotendwith, doesnotcontain, equal, notequal, greaterthan, greaterthanorequal, lessthan, lessthanorequal, isnull, isnotnull, isempty, isnotempty, between, in, notin. + - If the query involves only filtering, include only the "filter" key. + - If the query involves only sorting, include only the "sort" key. + - For clear actions: + - Use clearFilter: [] to clear all filters. + - Use clearSort: [] to clear all sorting. + - Use clearGroup: [] to clear all grouping. + - To clear specific fields, include them as arrays: clearFilter: ["field1"], clearSort: ["field2"], clearGroup: ["field3"]. + + Supported Operations: + - filter: [{ field, operator, value (array for "in"/"notin", otherwise single value), ignoreCase }] + - sort: [{ field, direction }] // columns not available return [] + - page: { pageNumber } // for page navigation not pagesize + - group: [fields] - return group: [] if the columns not available. + + Additional Requirement: + - sort/group/filter only by available columns. + - Include a "message" field describing the interpreted query action and expected behavior. + - Handled actions: paging, filtering, sorting, grouping. + - If the action is not handled by this schema, need to clearly explain the action not handled in this schema and how to achieve it in Syncfusion React Grid. Dont explain the JSON structure. + User Input: ${text}`; + + let aiOutput = serverAIRequest({ messages: [{ role: 'user', content: textArea }] }); + aiOutput.then((result: string) => { + if (!result) { + return; + } + let jsonResult = result; + if (result.indexOf("```json") !== -1) { + jsonResult = result.split("```json")[1].split("```")[0].trim(); + } + let data; + try { + data = JSON.parse(jsonResult); + executeGridAction(data, grid); + } catch (error) { + assistView.addPromptResponse({ prompt: error, response: error }); + return; + } + assistView.addPromptResponse({ response: data.message }); + }); +} + +export {fetchAI}; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/smart-grid/App.css b/ej2-react/code-snippet/grid/smart-grid/App.css new file mode 100644 index 000000000..9a1d73844 --- /dev/null +++ b/ej2-react/code-snippet/grid/smart-grid/App.css @@ -0,0 +1,131 @@ +#ai-grid-aiassistview .response-header .e-assistview-icon:before { + margin-right: 10px; +} + +#ai-grid-aiassistview .response-item-content { + display: flex; + flex-direction: column; + gap: 10px; + margin-left: 20px +} + +#ai-grid-aiassistview .response-item-content .response-header { + display: flex; + align-items: center; +} + +#ai-grid-aiassistview .response-item-content .assist-response-content { + margin-left: 35px; +} + +#ai-grid-aiassistview .response-item-content .response-header .e-assistview-icon:before { + margin-right: 10px; +} + +#ai-grid-aiassistview .e-response-item-template .e-toolbar-items { + margin-left: 35px; +} + +#ai-grid-aiassistview.e-aiassistview .e-footer { + width: 90%; +} + +#ai-grid-aiassistview.e-aiassistview .e-output-container { + width: 100%; +} +#ai-grid-aiassistview.e-aiassistview .e-content-container .e-content { + overflow-y: auto; +} +#ai-grid-aiassistview .e-response-item-template .e-content-footer, +#ai-grid-aiassistview .e-prompt-toolbar { + display: none; +} + +#ai-grid-aiassistview.e-aiassistview .e-view-container { + margin: 0; +} + +#ai-grid .e-badge { + padding: 6px; + width: 70px; +} + +#ai-grid .email { + color: gray; +} + +#ai-grid .product-items { + display: flex; + gap: 0.75rem; + align-items: center; +} +#ai-grid .product-items p { + margin: 0px; +} + + +#ai-assist-dialog .e-suggestions { + max-width: 100%; + padding: 0 0 10px 0; +} + +#ai-assist-dialog .e-suggestion-header { + font-weight: bold; + margin-bottom: 8px; + font-size: 14px; + text-align: left; +} + +#ai-assist-dialog .e-suggestion-list { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +#ai-assist-dialog .e-suggestion-list ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 4px; + width: 100%; +} + +#ai-assist-dialog .e-suggestion-list li { + display: inline-block; + padding: 6px 10px; + border-radius: 16px; + font-size: 13px; + cursor: pointer; + white-space: normal; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 5px 2px; +} + +#assistive-grid { + margin: 10px; +} + +#ai-assist-dialog .e-suggestion-list li:hover { + background: rgba(28, 27, 31, 0.05); +} + +#dialog-target .e-dialog .e-footer-content { + border-top: 1px solid rgb(209, 213, 219); +} + +.fluent-dark #ai-assist-dialog .e-suggestion-list li, +.fluent2-dark #ai-assist-dialog .e-suggestion-list li, +.tailwind-dark #ai-assist-dialog .e-suggestion-list li, +.material-dark #ai-assist-dialog .e-suggestion-list li, +.bootstrap5\.3-dark #ai-assist-dialog .e-suggestion-list li, +.tailwind3-dark #ai-assist-dialog .e-suggestion-list li, +.tailwind33-dark #ai-assist-dialog .e-suggestion-list li, +.fabric-dark #ai-assist-dialog .e-suggestion-list li, +.bootstrap-dark #ai-assist-dialog .e-suggestion-list li, +.bootstrap4-dark #ai-assist-dialog .e-suggestion-list li, +.bootstrap5-dark #ai-assist-dialog .e-suggestion-list li, +.highcontrast #ai-assist-dialog .e-suggestion-list li { + box-shadow: 0 2px 4px rgb(228 228 228 / 15%); +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/smart-grid/App.tsx b/ej2-react/code-snippet/grid/smart-grid/App.tsx new file mode 100644 index 000000000..ba5d913d3 --- /dev/null +++ b/ej2-react/code-snippet/grid/smart-grid/App.tsx @@ -0,0 +1,14 @@ + +import './App.css' +import { AIAssistiveGrid } from './Grid' + +function App() { + + return ( +++setSearchValue(e.value)}/> + Smart Search ++ ++ ++ + + + + ++ ) +} + +export default App diff --git a/ej2-react/code-snippet/grid/smart-grid/Grid.tsx b/ej2-react/code-snippet/grid/smart-grid/Grid.tsx new file mode 100644 index 000000000..81c637476 --- /dev/null +++ b/ej2-react/code-snippet/grid/smart-grid/Grid.tsx @@ -0,0 +1,167 @@ +import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, Sort, Filter, Group, Page, Search, type ToolbarItems, type FilterSettingsModel } from '@syncfusion/ej2-react-grids'; +import { AIAssistViewComponent, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-interactive-chat'; +import { fetchAI } from './AIModel'; +import { DialogComponent } from '@syncfusion/ej2-react-popups'; +import { purchaseDetails, type PurchaseDetailsArgs } from './datasource'; +import { createRef } from "react"; + + +let dialog!: DialogComponent; +let grid!: GridComponent; +let assistView!: AIAssistViewComponent; +let suggestionListRef = createRef+ (); + +function AIAssistiveGrid() { + + // Toolbar options for Grid with AI Assist button. + const toolbarOptions: object[] = [{text: 'AI Assist', tooltipText: 'AI Assist', prefixIcon: 'e-assistview-icon', id: 'ai-assist-btn', align: 'Right' }]; + + // Handles the Grid toolbar button click action. If the AI Assist button clicked shows the AI Assist dialog. + const toolbarClick = (args: any) => { + if (args.item.id === 'ai-assist-btn') { + const gridRect = grid.element.getBoundingClientRect(); + const toolbarRect = document.getElementById('ai-grid_toolbarItems')!.getBoundingClientRect(); + const targetRect = (args.originalEvent.target as HTMLElement).closest('.e-toolbar-item')!.getBoundingClientRect(); + const x = targetRect.left - gridRect.left - (parseInt(dialog.width.toString())); + const y = (toolbarRect.top + toolbarRect.height) - gridRect.top; + dialog.position = { X: x, Y: y }; + dialog.show(); + } + } + + // Configures toolbar settings for AI assist dialog. + const toolbarSettings: any = { + items: [ + { tooltip: 'Start New Chat', iconCss: 'e-icons e-rename', align: 'Right' }, + { tooltip: 'Clear', iconCss: 'e-icons e-refresh', align: 'Right' }, + { tooltip: 'Close', iconCss: 'e-icons e-icon-dlg-close', align: 'Right' }, + ], + itemClicked: (args: any) => { + if (args.item.iconCss === 'e-icons e-icon-dlg-close') { + dialog.hide() + } + if (args.item.iconCss === 'e-icons e-rename') { + assistView.prompts = []; + } + if (args.item.iconCss === 'e-icons e-refresh') { + assistView.prompts = []; + grid.setProperties({ + sortSettings: { columns: [] }, + filterSettings: { columns: [] }, + groupSettings: { columns: [] }, + }); + grid.refresh(); + } + } + }; + + // Renders response template for AI prompts. + const responseTemplate = (props: { prompt: string, response: string }) => { + return ( + ++ ); + }; + + // Handles prompt request execution. + const onPromptRequest = (args: any) => { + (assistView as any).stopResponding.classList.remove('e-btn-active'); + assistView.scrollToBottom(); + const columns = grid.columns.map((col: any) => { return { field: col.field } }); + columns.forEach((col: any) => { + if (col.field === 'status') { + col.values = ['Completed', 'Pending', 'Failed', 'Processing']; + } + else if (col.field === 'paymentMethod') { + col.values = ['Cheque', 'Credit Card', 'Paypal', 'Online Transfer']; + } + }) + fetchAI(args.prompt, grid, dialog, assistView, columns); + }; + + // Sets up suggestion list click handler. + const created = (): void => { + suggestionListRef.current.addEventListener('click', (event: any) => { + if (event.target.tagName === 'LI') { + const clickedPill = event.target; + const pillText = clickedPill.textContent; + assistView.executePrompt(pillText); + } + }); + } + + // Renders footer template with suggestion list. + const dialogFooterTemplate = () => { + return ( ++ + {props.response} ++++ ); + } + + const filterSettings: FilterSettingsModel = { type: 'Excel' }; + + return ( +Suggestions+++-
+
++ ) +} + +export { AIAssistiveGrid }; diff --git a/ej2-react/code-snippet/grid/smart-grid/GridAction.tsx b/ej2-react/code-snippet/grid/smart-grid/GridAction.tsx new file mode 100644 index 000000000..1ab943fdc --- /dev/null +++ b/ej2-react/code-snippet/grid/smart-grid/GridAction.tsx @@ -0,0 +1,44 @@ +import { GridComponent } from '@syncfusion/ej2-react-grids'; +import { type Sort, type GridActionData, type Filter } from './datasource'; + +export const executeGridAction = (data: GridActionData, grid: GridComponent) => { + if (data.filter && data.filter.length) { + data.filter.forEach((filter: Filter) => { + grid.filterByColumn(filter.field, filter.operator, filter.value); + }) + } + if (data.clearFilter) { + if (data.clearFilter.length === 0) { + grid.clearFiltering(); + } else { + grid.clearFiltering(data.clearFilter); + } + } + if (data.sort && data.sort.length) { + data.sort.forEach((sort: Sort) => { + grid.sortColumn(sort.field, sort.direction, true); + }) + } + else if (data.clearSort) { + grid.clearSorting(); + } + if (data.page && data.page.pageNumber) { + grid.goToPage(data.page.pageNumber); + } + if (data.group && data.group.length) { + const groupColumns: string[] = [...(grid.groupSettings.columns ?? [])]; + if (groupColumns.indexOf(data.group[0]) === -1) { + grid.groupColumn(data.group[0]); + } + } + if (data.clearGroup) { + if (data.clearGroup.length === 0) { + grid.clearGrouping(); + } else { + const groupColumns: string[] = [...(grid.groupSettings.columns ?? [])]; + if (groupColumns.indexOf(data.clearGroup[0]) !== -1) { + grid.ungroupColumn(data.clearGroup[0]); + } + } + } +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/smart-grid/datasource.ts b/ej2-react/code-snippet/grid/smart-grid/datasource.ts new file mode 100644 index 000000000..5a4b06a6a --- /dev/null +++ b/ej2-react/code-snippet/grid/smart-grid/datasource.ts @@ -0,0 +1,1342 @@ +export interface Filter { + field: string; + operator: string; + value: number | boolean | string | Date; +} + +export interface Sort { + field: string; + direction: 'Ascending' | 'Descending'; +} + +export interface Page { + pageNumber: number; + pageSize: number; +} + +export interface GridActionData { + filter?: Filter[]; + clearFilter?: string[]; + sort?: Sort[]; + clearSort?: string[]; + page?: Page; + group?: string[]; + clearGroup?: string[]; +} + +export interface PurchaseDetailsArgs { + ID?: number; + TransactionID?: string; + CustomerName?: string; + Email?: string; + PurchaseDate?: Date; + ProductName?: string; + ProductImage?: string; + Quantity?: number; + Amount?: number; + PaymentMethod?: string; + Status?: string; +} + +export let purchaseDetails: Object[] = [ + { + ID: 1, + TransactionID: "TRX202501", + CustomerName: "Jane Smith", + Email: "jane.smith@example.com", + PurchaseDate: new Date("2025-06-20"), + ProductName: "iMac 24", + ProductImage: "imac-24.png", + Quantity: 1, + Amount: 1199.99, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 2, + TransactionID: "TRX202502", + CustomerName: "Mark Johnson", + Email: "mark.johnson@example.com", + PurchaseDate: new Date("2025-06-20"), + ProductName: "Mac Mini", + ProductImage: "mac-mini.png", + Quantity: 3, + Amount: 1797.00, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 3, + TransactionID: "TRX202503", + CustomerName: "Emily White", + Email: "emily.white@example.com", + PurchaseDate: new Date("2025-06-20"), + ProductName: "HomePod Mini", + ProductImage: "homepod-mini.png", + Quantity: 6, + Amount: 594.00, + PaymentMethod: "Online Transfer", + Status: "Failed" + }, + { + ID: 4, + TransactionID: "TRX202504", + CustomerName: "Tom Harris", + Email: "tom.harris@example.com", + PurchaseDate: new Date("2025-06-21"), + ProductName: "iPhone 13", + ProductImage: "iphone-13.png", + Quantity: 2, + Amount: 1399.98, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 5, + TransactionID: "TRX202505", + CustomerName: "Lisa Green", + Email: "lisa.green@example.com", + PurchaseDate: new Date("2025-06-21"), + ProductName: "Apple Watch Series 7", + ProductImage: "apple-watch-series-7.png", + Quantity: 4, + Amount: 1596.00, + PaymentMethod: "PayPal", + Status: "Completed" + }, + { + ID: 6, + TransactionID: "TRX202506", + CustomerName: "Olivia Adams", + Email: "olivia.adams@example.com", + PurchaseDate: new Date("2025-06-21"), + ProductName: "Apple TV 4K", + ProductImage: "apple-tv-4k.png", + Quantity: 3, + Amount: 537.00, + PaymentMethod: "Cheque", + Status: "Pending" + }, + { + ID: 7, + TransactionID: "TRX202507", + CustomerName: "David Clark", + Email: "david.clark@example.com", + PurchaseDate: new Date("2025-06-22"), + ProductName: "iPhone 15 Pro", + ProductImage: "iphone-15-pro.png", + Quantity: 1, + Amount: 999.99, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 8, + TransactionID: "TRX202508", + CustomerName: "Rachel Lee", + Email: "rachel.lee@example.com", + PurchaseDate: new Date("2025-06-22"), + ProductName: "MacBook Air M2", + ProductImage: "macbook-air-m2.png", + Quantity: 2, + Amount: 2598.00, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 9, + TransactionID: "TRX202509", + CustomerName: "Lucas Robinson", + Email: "lucas.robinson@example.com", + PurchaseDate: new Date("2025-06-22"), + ProductName: "AirPods Pro", + ProductImage: "airpods-pro.png", + Quantity: 6, + Amount: 1494.00, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 10, + TransactionID: "TRX202510", + CustomerName: "Sophia Martinez", + Email: "sophia.martinez@example.com", + PurchaseDate: new Date("2025-06-23"), + ProductName: "iPad Air", + ProductImage: "ipad-air.png", + Quantity: 3, + Amount: 1797.00, + PaymentMethod: "Online Transfer", + Status: "Pending" + }, + { + ID: 11, + TransactionID: "TRX202511", + CustomerName: "Michael Brown", + Email: "michael.brown@example.com", + PurchaseDate: new Date("2025-06-23"), + ProductName: "Apple Watch Series 8", + ProductImage: "apple-watch-series-8.png", + Quantity: 4, + Amount: 1596.00, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 12, + TransactionID: "TRX202512", + CustomerName: "Sarah Davis", + Email: "sarah.davis@example.com", + PurchaseDate: new Date("2025-06-23"), + ProductName: "iPhone 14 Pro Max", + ProductImage: "iphone-14-pro-max.png", + Quantity: 1, + Amount: 1099.99, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 13, + TransactionID: "TRX202513", + CustomerName: "James Wilson", + Email: "james.wilson@example.com", + PurchaseDate: new Date("2025-06-24"), + ProductName: "iPhone 15 Plus", + ProductImage: "iphone-15-plus.png", + Quantity: 2, + Amount: 1599.98, + PaymentMethod: "Online Transfer", + Status: "Processing" + }, + { + ID: 14, + TransactionID: "TRX202514", + CustomerName: "Laura Taylor", + Email: "laura.taylor@example.com", + PurchaseDate: new Date("2025-06-24"), + ProductName: "iMac 24", + ProductImage: "imac-24.png", + Quantity: 3, + Amount: 3599.97, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 15, + TransactionID: "TRX202515", + CustomerName: "Chris Evans", + Email: "chris.evans@example.com", + PurchaseDate: new Date("2025-06-24"), + ProductName: "Mac Mini", + ProductImage: "mac-mini.png", + Quantity: 4, + Amount: 2396.00, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 16, + TransactionID: "TRX202516", + CustomerName: "Anna Moore", + Email: "anna.moore@example.com", + PurchaseDate: new Date("2025-06-25"), + ProductName: "HomePod Mini", + ProductImage: "homepod-mini.png", + Quantity: 7, + Amount: 693.00, + PaymentMethod: "Online Transfer", + Status: "Failed" + }, + { + ID: 17, + TransactionID: "TRX202517", + CustomerName: "Robert King", + Email: "robert.king@example.com", + PurchaseDate: new Date("2025-06-25"), + ProductName: "iPhone 13", + ProductImage: "iphone-13.png", + Quantity: 3, + Amount: 2099.97, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 18, + TransactionID: "TRX202518", + CustomerName: "Megan Scott", + Email: "megan.scott@example.com", + PurchaseDate: new Date("2025-06-25"), + ProductName: "Apple Watch Series 7", + ProductImage: "apple-watch-series-7.png", + Quantity: 2, + Amount: 798.00, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 19, + TransactionID: "TRX202519", + CustomerName: "Daniel Young", + Email: "daniel.young@example.com", + PurchaseDate: new Date("2025-06-26"), + ProductName: "Apple TV 4K", + ProductImage: "apple-tv-4k.png", + Quantity: 4, + Amount: 716.00, + PaymentMethod: "Online Transfer", + Status: "Pending" + }, + { + ID: 20, + TransactionID: "TRX202520", + CustomerName: "Emma Walker", + Email: "emma.walker@example.com", + PurchaseDate: new Date("2025-06-26"), + ProductName: "iPhone 15 Pro", + ProductImage: "iphone-15-pro.png", + Quantity: 2, + Amount: 1999.98, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 21, + TransactionID: "TRX202521", + CustomerName: "Liam Hall", + Email: "liam.hall@example.com", + PurchaseDate: new Date("2025-06-26"), + ProductName: "MacBook Air M2", + ProductImage: "macbook-air-m2.png", + Quantity: 1, + Amount: 1299.00, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 22, + TransactionID: "TRX202522", + CustomerName: "Ava Lewis", + Email: "ava.lewis@example.com", + PurchaseDate: new Date("2025-06-27"), + ProductName: "AirPods Pro", + ProductImage: "airpods-pro.png", + Quantity: 5, + Amount: 1245.00, + PaymentMethod: "Online Transfer", + Status: "Processing" + }, + { + ID: 23, + TransactionID: "TRX202523", + CustomerName: "Noah Clark", + Email: "noah.clark@example.com", + PurchaseDate: new Date("2025-06-27"), + ProductName: "iPad Air", + ProductImage: "ipad-air.png", + Quantity: 3, + Amount: 1797.00, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 24, + TransactionID: "TRX202524", + CustomerName: "Mia Turner", + Email: "mia.turner@example.com", + PurchaseDate: new Date("2025-06-27"), + ProductName: "Apple Watch Series 8", + ProductImage: "apple-watch-series-8.png", + Quantity: 4, + Amount: 1596.00, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 25, + TransactionID: "TRX202525", + CustomerName: "Ethan Allen", + Email: "ethan.allen@example.com", + PurchaseDate: new Date("2025-06-28"), + ProductName: "iPhone 14 Pro Max", + ProductImage: "iphone-14-pro-max.png", + Quantity: 2, + Amount: 2199.98, + PaymentMethod: "Online Transfer", + Status: "Failed" + }, + { + ID: 26, + TransactionID: "TRX202526", + CustomerName: "Isabella King", + Email: "isabella.king@example.com", + PurchaseDate: new Date("2025-06-28"), + ProductName: "iPhone 15 Plus", + ProductImage: "iphone-15-plus.png", + Quantity: 3, + Amount: 2399.97, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 27, + TransactionID: "TRX202527", + CustomerName: "Jacob Wright", + Email: "jacob.wright@example.com", + PurchaseDate: new Date("2025-06-28"), + ProductName: "iMac 24", + ProductImage: "imac-24.png", + Quantity: 1, + Amount: 1199.99, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 28, + TransactionID: "TRX202528", + CustomerName: "Charlotte Lee", + Email: "charlotte.lee@example.com", + PurchaseDate: new Date("2025-06-29"), + ProductName: "Mac Mini", + ProductImage: "mac-mini.png", + Quantity: 2, + Amount: 1198.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 29, + TransactionID: "TRX202529", + CustomerName: "William Young", + Email: "william.young@example.com", + PurchaseDate: new Date("2025-06-29"), + ProductName: "HomePod Mini", + ProductImage: "homepod-mini.png", + Quantity: 5, + Amount: 495.00, + PaymentMethod: "Credit Card", + Status: "Pending" + }, + { + ID: 30, + TransactionID: "TRX202530", + CustomerName: "Amelia Harris", + Email: "amelia.harris@example.com", + PurchaseDate: new Date("2025-06-29"), + ProductName: "iPhone 13", + ProductImage: "iphone-13.png", + Quantity: 4, + Amount: 2799.96, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 31, + TransactionID: "TRX202531", + CustomerName: "Alexander Scott", + Email: "alexander.scott@example.com", + PurchaseDate: new Date("2025-06-30"), + ProductName: "Apple Watch Series 7", + ProductImage: "apple-watch-series-7.png", + Quantity: 3, + Amount: 1197.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 32, + TransactionID: "TRX202532", + CustomerName: "Harper Walker", + Email: "harper.walker@example.com", + PurchaseDate: new Date("2025-06-30"), + ProductName: "Apple TV 4K", + ProductImage: "apple-tv-4k.png", + Quantity: 2, + Amount: 358.00, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 33, + TransactionID: "TRX202533", + CustomerName: "Evelyn Adams", + Email: "evelyn.adams@example.com", + PurchaseDate: new Date("2025-06-30"), + ProductName: "iPhone 15 Pro", + ProductImage: "iphone-15-pro.png", + Quantity: 3, + Amount: 2999.97, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 34, + TransactionID: "TRX202534", + CustomerName: "Mason Brown", + Email: "mason.brown@example.com", + PurchaseDate: new Date("2025-07-01"), + ProductName: "MacBook Air M2", + ProductImage: "macbook-air-m2.png", + Quantity: 1, + Amount: 1299.00, + PaymentMethod: "Online Transfer", + Status: "Failed" + }, + { + ID: 35, + TransactionID: "TRX202535", + CustomerName: "Sofia Davis", + Email: "sofia.davis@example.com", + PurchaseDate: new Date("2025-07-01"), + ProductName: "AirPods Pro", + ProductImage: "airpods-pro.png", + Quantity: 4, + Amount: 996.00, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 36, + TransactionID: "TRX202536", + CustomerName: "James Wilson", + Email: "james.wilson@example.com", + PurchaseDate: new Date("2025-07-01"), + ProductName: "iPad Air", + ProductImage: "ipad-air.png", + Quantity: 2, + Amount: 1198.00, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 37, + TransactionID: "TRX202537", + CustomerName: "Chloe Taylor", + Email: "chloe.taylor@example.com", + PurchaseDate: new Date("2025-07-02"), + ProductName: "Apple Watch Series 8", + ProductImage: "apple-watch-series-8.png", + Quantity: 3, + Amount: 1197.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 38, + TransactionID: "TRX202538", + CustomerName: "Benjamin Lee", + Email: "benjamin.lee@example.com", + PurchaseDate: new Date("2025-07-02"), + ProductName: "iPhone 14 Pro Max", + ProductImage: "iphone-14-pro-max.png", + Quantity: 1, + Amount: 1099.99, + PaymentMethod: "Credit Card", + Status: "Pending" + }, + { + ID: 39, + TransactionID: "TRX202539", + CustomerName: "Zoe Clark", + Email: "zoe.clark@example.com", + PurchaseDate: new Date("2025-07-02"), + ProductName: "iPhone 15 Plus", + ProductImage: "iphone-15-plus.png", + Quantity: 4, + Amount: 3199.96, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 40, + TransactionID: "TRX202540", + CustomerName: "Logan Harris", + Email: "logan.harris@example.com", + PurchaseDate: new Date("2025-07-03"), + ProductName: "iMac 24", + ProductImage: "imac-24.png", + Quantity: 2, + Amount: 2399.98, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 41, + TransactionID: "TRX202541", + CustomerName: "Ella Young", + Email: "ella.young@example.com", + PurchaseDate: new Date("2025-07-03"), + ProductName: "Mac Mini", + ProductImage: "mac-mini.png", + Quantity: 3, + Amount: 1797.00, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 42, + TransactionID: "TRX202542", + CustomerName: "Lucas Martinez", + Email: "lucas.martinez@example.com", + PurchaseDate: new Date("2025-07-03"), + ProductName: "HomePod Mini", + ProductImage: "homepod-mini.png", + Quantity: 6, + Amount: 594.00, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 43, + TransactionID: "TRX202543", + CustomerName: "Aria Walker", + Email: "aria.walker@example.com", + PurchaseDate: new Date("2025-07-04"), + ProductName: "iPhone 13", + ProductImage: "iphone-13.png", + Quantity: 1, + Amount: 699.99, + PaymentMethod: "Online Transfer", + Status: "Failed" + }, + { + ID: 44, + TransactionID: "TRX202544", + CustomerName: "Henry Scott", + Email: "henry.scott@example.com", + PurchaseDate: new Date("2025-07-04"), + ProductName: "Apple Watch Series 7", + ProductImage: "apple-watch-series-7.png", + Quantity: 4, + Amount: 1596.00, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 45, + TransactionID: "TRX202545", + CustomerName: "Lily Adams", + Email: "lily.adams@example.com", + PurchaseDate: new Date("2025-07-04"), + ProductName: "Apple TV 4K", + ProductImage: "apple-tv-4k.png", + Quantity: 3, + Amount: 537.00, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 46, + TransactionID: "TRX202546", + CustomerName: "Jack Wilson", + Email: "jack.wilson@example.com", + PurchaseDate: new Date("2025-07-05"), + ProductName: "iPhone 15 Pro", + ProductImage: "iphone-15-pro.png", + Quantity: 2, + Amount: 1999.98, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 47, + TransactionID: "TRX202547", + CustomerName: "Grace Brown", + Email: "grace.brown@example.com", + PurchaseDate: new Date("2025-07-05"), + ProductName: "MacBook Air M2", + ProductImage: "macbook-air-m2.png", + Quantity: 1, + Amount: 1299.00, + PaymentMethod: "Credit Card", + Status: "Pending" + }, + { + ID: 48, + TransactionID: "TRX202548", + CustomerName: "Owen Davis", + Email: "owen.davis@example.com", + PurchaseDate: new Date("2025-07-05"), + ProductName: "AirPods Pro", + ProductImage: "airpods-pro.png", + Quantity: 10, + Amount: 1743.00, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 49, + TransactionID: "TRX202549", + CustomerName: "Hannah Lee", + Email: "hannah.lee@example.com", + PurchaseDate: new Date("2025-07-06"), + ProductName: "iPad Air", + ProductImage: "ipad-air.png", + Quantity: 4, + Amount: 2396.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 50, + TransactionID: "TRX202550", + CustomerName: "Elijah Clark", + Email: "elijah.clark@example.com", + PurchaseDate: new Date("2025-07-06"), + ProductName: "Apple Watch Series 8", + ProductImage: "apple-watch-series-8.png", + Quantity: 2, + Amount: 798.00, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 51, + TransactionID: "TRX202551", + CustomerName: "Sophie Turner", + Email: "sophie.turner@example.com", + PurchaseDate: new Date("2025-07-06"), + ProductName: "iPhone 14 Pro Max", + ProductImage: "iphone-14-pro-max.png", + Quantity: 3, + Amount: 3299.97, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 52, + TransactionID: "TRX202552", + CustomerName: "Daniel Harris", + Email: "daniel.harris@example.com", + PurchaseDate: new Date("2025-07-07"), + ProductName: "iPhone 15 Plus", + ProductImage: "iphone-15-plus.png", + Quantity: 1, + Amount: 799.99, + PaymentMethod: "Online Transfer", + Status: "Failed" + }, + { + ID: 53, + TransactionID: "TRX202553", + CustomerName: "Avery Wright", + Email: "avery.wright@example.com", + PurchaseDate: new Date("2025-07-07"), + ProductName: "iMac 24", + ProductImage: "imac-24.png", + Quantity: 4, + Amount: 4799.96, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 54, + TransactionID: "TRX202554", + CustomerName: "Scarlett Young", + Email: "scarlett.young@example.com", + PurchaseDate: new Date("2025-07-07"), + ProductName: "Mac Mini", + ProductImage: "mac-mini.png", + Quantity: 3, + Amount: 1797.00, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 55, + TransactionID: "TRX202555", + CustomerName: "Mason Adams", + Email: "mason.adams@example.com", + PurchaseDate: new Date("2025-07-08"), + ProductName: "HomePod Mini", + ProductImage: "homepod-mini.png", + Quantity: 6, + Amount: 594.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 56, + TransactionID: "TRX202556", + CustomerName: "Luna Scott", + Email: "luna.scott@example.com", + PurchaseDate: new Date("2025-07-08"), + ProductName: "iPhone 13", + ProductImage: "iphone-13.png", + Quantity: 2, + Amount: 1399.98, + PaymentMethod: "Credit Card", + Status: "Pending" + }, + { + ID: 57, + TransactionID: "TRX202557", + CustomerName: "Ethan Brown", + Email: "ethan.brown@example.com", + PurchaseDate: new Date("2025-07-08"), + ProductName: "Apple Watch Series 7", + ProductImage: "apple-watch-series-7.png", + Quantity: 4, + Amount: 1596.00, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 58, + TransactionID: "TRX202558", + CustomerName: "Zoe Davis", + Email: "zoe.davis@example.com", + PurchaseDate: new Date("2025-07-09"), + ProductName: "Apple TV 4K", + ProductImage: "apple-tv-4k.png", + Quantity: 3, + Amount: 537.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 59, + TransactionID: "TRX202559", + CustomerName: "Logan Wilson", + Email: "logan.wilson@example.com", + PurchaseDate: new Date("2025-07-09"), + ProductName: "iPhone 15 Pro", + ProductImage: "iphone-15-pro.png", + Quantity: 1, + Amount: 999.99, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 60, + TransactionID: "TRX202560", + CustomerName: "Aria Lee", + Email: "aria.lee@example.com", + PurchaseDate: new Date("2025-07-09"), + ProductName: "MacBook Air M2", + ProductImage: "macbook-air-m2.png", + Quantity: 2, + Amount: 2598.00, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 61, + TransactionID: "TRX202561", + CustomerName: "Lucas Clark", + Email: "lucas.clark@example.com", + PurchaseDate: new Date("2025-07-10"), + ProductName: "AirPods Pro", + ProductImage: "airpods-pro.png", + Quantity: 5, + Amount: 1245.00, + PaymentMethod: "Online Transfer", + Status: "Failed" + }, + { + ID: 62, + TransactionID: "TRX202562", + CustomerName: "Ella Harris", + Email: "ella.harris@example.com", + PurchaseDate: new Date("2025-07-10"), + ProductName: "iPad Air", + ProductImage: "ipad-air.png", + Quantity: 3, + Amount: 1797.00, + PaymentMethod: "Credit Card", + Status: "Completed" + }, + { + ID: 63, + TransactionID: "TRX202563", + CustomerName: "Noah Young", + Email: "noah.young@example.com", + PurchaseDate: new Date("2025-07-10"), + ProductName: "Apple Watch Series 8", + ProductImage: "apple-watch-series-8.png", + Quantity: 4, + Amount: 1596.00, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 64, + TransactionID: "TRX202564", + CustomerName: "Mia Scott", + Email: "mia.scott@example.com", + PurchaseDate: new Date("2025-07-11"), + ProductName: "iPhone 14 Pro Max", + ProductImage: "iphone-14-pro-max.png", + Quantity: 2, + Amount: 2199.98, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 65, + TransactionID: "TRX202565", + CustomerName: "Liam Turner", + Email: "liam.turner@example.com", + PurchaseDate: new Date("2025-07-11"), + ProductName: "iPhone 15 Plus", + ProductImage: "iphone-15-plus.png", + Quantity: 3, + Amount: 2399.97, + PaymentMethod: "Credit Card", + Status: "Pending" + }, + { + ID: 66, + TransactionID: "TRX202566", + CustomerName: "Ava Brown", + Email: "ava.brown@example.com", + PurchaseDate: new Date("2025-07-11"), + ProductName: "iMac 24", + ProductImage: "imac-24.png", + Quantity: 1, + Amount: 1199.99, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 67, + TransactionID: "TRX202567", + CustomerName: "Elijah Davis", + Email: "elijah.davis@example.com", + PurchaseDate: new Date("2025-07-12"), + ProductName: "Mac Mini", + ProductImage: "mac-mini.png", + Quantity: 4, + Amount: 2396.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 68, + TransactionID: "TRX202568", + CustomerName: "Sophie Wilson", + Email: "sophie.wilson@example.com", + PurchaseDate: new Date("2025-07-12"), + ProductName: "HomePod Mini", + ProductImage: "homepod-mini.png", + Quantity: 7, + Amount: 693.00, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 69, + TransactionID: "TRX202569", + CustomerName: "Daniel Lee", + Email: "daniel.lee@example.com", + PurchaseDate: new Date("2025-07-12"), + ProductName: "iPhone 13", + ProductImage: "iphone-13.png", + Quantity: 3, + Amount: 2099.97, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 70, + TransactionID: "TRX202570", + CustomerName: "Avery Clark", + Email: "avery.clark@example.com", + PurchaseDate: new Date("2025-07-13"), + ProductName: "Apple Watch Series 7", + ProductImage: "apple-watch-series-7.png", + Quantity: 2, + Amount: 798.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 71, + TransactionID: "TRX202571", + CustomerName: "Scarlett Harris", + Email: "scarlett.harris@example.com", + PurchaseDate: new Date("2025-07-13"), + ProductName: "Apple TV 4K", + ProductImage: "apple-tv-4k.png", + Quantity: 4, + Amount: 716.00, + PaymentMethod: "Credit Card", + Status: "Failed" + }, + { + ID: 72, + TransactionID: "TRX202572", + CustomerName: "Mason Young", + Email: "mason.young@example.com", + PurchaseDate: new Date("2025-07-13"), + ProductName: "iPhone 15 Pro", + ProductImage: "iphone-15-pro.png", + Quantity: 3, + Amount: 2999.97, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 73, + TransactionID: "TRX202573", + CustomerName: "Luna Scott", + Email: "luna.scott@example.com", + PurchaseDate: new Date("2025-07-14"), + ProductName: "MacBook Air M2", + ProductImage: "macbook-air-m2.png", + Quantity: 1, + Amount: 1299.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 74, + TransactionID: "TRX202574", + CustomerName: "Ethan Turner", + Email: "ethan.turner@example.com", + PurchaseDate: new Date("2025-07-14"), + ProductName: "AirPods Pro", + ProductImage: "airpods-pro.png", + Quantity: 6, + Amount: 1494.00, + PaymentMethod: "Credit Card", + Status: "Pending" + }, + { + ID: 75, + TransactionID: "TRX202575", + CustomerName: "Zoe Brown", + Email: "zoe.brown@example.com", + PurchaseDate: new Date("2025-07-14"), + ProductName: "iPad Air", + ProductImage: "ipad-air.png", + Quantity: 2, + Amount: 1198.00, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 76, + TransactionID: "TRX202576", + CustomerName: "Logan Davis", + Email: "logan.davis@example.com", + PurchaseDate: new Date("2025-07-15"), + ProductName: "Apple Watch Series 8", + ProductImage: "apple-watch-series-8.png", + Quantity: 3, + Amount: 1197.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 77, + TransactionID: "TRX202577", + CustomerName: "Ella Wilson", + Email: "ella.wilson@example.com", + PurchaseDate: new Date("2025-07-15"), + ProductName: "iPhone 14 Pro Max", + ProductImage: "iphone-14-pro-max.png", + Quantity: 1, + Amount: 1099.99, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 78, + TransactionID: "TRX202578", + CustomerName: "Noah Lee", + Email: "noah.lee@example.com", + PurchaseDate: new Date("2025-07-15"), + ProductName: "iPhone 15 Plus", + ProductImage: "iphone-15-plus.png", + Quantity: 4, + Amount: 3199.96, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 79, + TransactionID: "TRX202579", + CustomerName: "Mia Clark", + Email: "mia.clark@example.com", + PurchaseDate: new Date("2025-07-16"), + ProductName: "iMac 24", + ProductImage: "imac-24.png", + Quantity: 2, + Amount: 2399.98, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 80, + TransactionID: "TRX202580", + CustomerName: "Liam Harris", + Email: "liam.harris@example.com", + PurchaseDate: new Date("2025-07-16"), + ProductName: "Mac Mini", + ProductImage: "mac-mini.png", + Quantity: 3, + Amount: 1797.00, + PaymentMethod: "Credit Card", + Status: "Failed" + }, + { + ID: 81, + TransactionID: "TRX202581", + CustomerName: "Ava Scott", + Email: "ava.scott@example.com", + PurchaseDate: new Date("2025-07-16"), + ProductName: "HomePod Mini", + ProductImage: "homepod-mini.png", + Quantity: 5, + Amount: 495.00, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 82, + TransactionID: "TRX202582", + CustomerName: "Elijah Young", + Email: "elijah.young@example.com", + PurchaseDate: new Date("2025-07-17"), + ProductName: "iPhone 13", + ProductImage: "iphone-13.png", + Quantity: 4, + Amount: 2799.96, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 83, + TransactionID: "TRX202583", + CustomerName: "Sophie Brown", + Email: "sophie.brown@example.com", + PurchaseDate: new Date("2025-07-17"), + ProductName: "Apple Watch Series 7", + ProductImage: "apple-watch-series-7.png", + Quantity: 3, + Amount: 1197.00, + PaymentMethod: "Credit Card", + Status: "Pending" + }, + { + ID: 84, + TransactionID: "TRX202584", + CustomerName: "Daniel Turner", + Email: "daniel.turner@example.com", + PurchaseDate: new Date("2025-07-17"), + ProductName: "Apple TV 4K", + ProductImage: "apple-tv-4k.png", + Quantity: 2, + Amount: 358.00, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 85, + TransactionID: "TRX202585", + CustomerName: "Avery Wilson", + Email: "avery.wilson@example.com", + PurchaseDate: new Date("2025-07-18"), + ProductName: "iPhone 15 Pro", + ProductImage: "iphone-15-pro.png", + Quantity: 4, + Amount: 3999.96, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 86, + TransactionID: "TRX202586", + CustomerName: "Scarlett Clark", + Email: "scarlett.clark@example.com", + PurchaseDate: new Date("2025-07-18"), + ProductName: "MacBook Air M2", + ProductImage: "macbook-air-m2.png", + Quantity: 2, + Amount: 2598.00, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 87, + TransactionID: "TRX202587", + CustomerName: "Mason Lee", + Email: "mason.lee@example.com", + PurchaseDate: new Date("2025-07-18"), + ProductName: "AirPods Pro", + ProductImage: "airpods-pro.png", + Quantity: 6, + Amount: 1494.00, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 88, + TransactionID: "TRX202588", + CustomerName: "Luna Harris", + Email: "luna.harris@example.com", + PurchaseDate: new Date("2025-07-19"), + ProductName: "iPad Air", + ProductImage: "ipad-air.png", + Quantity: 3, + Amount: 1797.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 89, + TransactionID: "TRX202589", + CustomerName: "Ethan Scott", + Email: "ethan.scott@example.com", + PurchaseDate: new Date("2025-07-19"), + ProductName: "Apple Watch Series 8", + ProductImage: "apple-watch-series-8.png", + Quantity: 4, + Amount: 1596.00, + PaymentMethod: "Credit Card", + Status: "Failed" + }, + { + ID: 90, + TransactionID: "TRX202590", + CustomerName: "Zoe Young", + Email: "zoe.young@example.com", + PurchaseDate: new Date("2025-07-19"), + ProductName: "iPhone 14 Pro Max", + ProductImage: "iphone-14-pro-max.png", + Quantity: 2, + Amount: 2199.98, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 91, + TransactionID: "TRX202591", + CustomerName: "Logan Brown", + Email: "logan.brown@example.com", + PurchaseDate: new Date("2025-07-20"), + ProductName: "iPhone 15 Plus", + ProductImage: "iphone-15-plus.png", + Quantity: 3, + Amount: 2399.97, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 92, + TransactionID: "TRX202592", + CustomerName: "Ella Davis", + Email: "ella.davis@example.com", + PurchaseDate: new Date("2025-07-20"), + ProductName: "iMac 24", + ProductImage: "imac-24.png", + Quantity: 1, + Amount: 1199.99, + PaymentMethod: "Credit Card", + Status: "Pending" + }, + { + ID: 93, + TransactionID: "TRX202593", + CustomerName: "Noah Wilson", + Email: "noah.wilson@example.com", + PurchaseDate: new Date("2025-07-20"), + ProductName: "Mac Mini", + ProductImage: "mac-mini.png", + Quantity: 2, + Amount: 1198.00, + PaymentMethod: "PayPal", + Status: "Failed" + }, + { + ID: 94, + TransactionID: "TRX202594", + CustomerName: "Mia Lee", + Email: "mia.lee@example.com", + PurchaseDate: new Date("2025-08-01"), + ProductName: "HomePod Mini", + ProductImage: "homepod-mini.png", + Quantity: 6, + Amount: 594.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 95, + TransactionID: "TRX202595", + CustomerName: "Liam Clark", + Email: "liam.clark@example.com", + PurchaseDate: new Date("2025-08-01"), + ProductName: "iPhone 13", + ProductImage: "iphone-13.png", + Quantity: 3, + Amount: 2099.97, + PaymentMethod: "Credit Card", + Status: "Processing" + }, + { + ID: 96, + TransactionID: "TRX202596", + CustomerName: "Ava Harris", + Email: "ava.harris@example.com", + PurchaseDate: new Date("2025-08-01"), + ProductName: "Apple Watch Series 7", + ProductImage: "apple-watch-series-7.png", + Quantity: 4, + Amount: 1596.00, + PaymentMethod: "PayPal", + Status: "Pending" + }, + { + ID: 97, + TransactionID: "TRX202597", + CustomerName: "Elijah Scott", + Email: "elijah.scott@example.com", + PurchaseDate: new Date("2025-08-02"), + ProductName: "Apple TV 4K", + ProductImage: "apple-tv-4k.png", + Quantity: 3, + Amount: 537.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + }, + { + ID: 98, + TransactionID: "TRX202598", + CustomerName: "Sophie Young", + Email: "sophie.young@example.com", + PurchaseDate: new Date("2025-08-02"), + ProductName: "iPhone 15 Pro", + ProductImage: "iphone-15-pro.png", + Quantity: 2, + Amount: 1999.98, + PaymentMethod: "Credit Card", + Status: "Failed" + }, + { + ID: 99, + TransactionID: "TRX202599", + CustomerName: "Daniel Brown", + Email: "daniel.brown@example.com", + PurchaseDate: new Date("2025-08-02"), + ProductName: "MacBook Air M2", + ProductImage: "macbook-air-m2.png", + Quantity: 1, + Amount: 1299.00, + PaymentMethod: "PayPal", + Status: "Processing" + }, + { + ID: 100, + TransactionID: "TRX2025100", + CustomerName: "Avery Turner", + Email: "avery.turner@example.com", + PurchaseDate: new Date("2025-08-03"), + ProductName: "AirPods Pro", + ProductImage: "airpods-pro.png", + Quantity: 7, + Amount: 1743.00, + PaymentMethod: "Online Transfer", + Status: "Completed" + } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/image-editor/default-cs11/app/app.jsx b/ej2-react/code-snippet/image-editor/default-cs11/app/app.jsx new file mode 100644 index 000000000..d3fbd2159 --- /dev/null +++ b/ej2-react/code-snippet/image-editor/default-cs11/app/app.jsx @@ -0,0 +1,52 @@ +import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { Browser } from '@syncfusion/ej2-base'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; + +export default class App extends React.Component { + imgObj; + imageEditorCreated() { + if (Browser.isDevice) { + this.imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/flower.jpeg'); + } + else { + this.imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/bridge.jpeg'); + } + } + fitWidth() { + this.imgObj.zoom(1); // Reset zoom to original size before applying Fit Width + const containerWidth = this.imgObj.upperCanvas.width; + const { width: oldWidth } = this.imgObj.getImageDimension(); + let imageWidth = oldWidth, zoomFactor = 0.1, newZoom = 1; + while (imageWidth < containerWidth) { + newZoom++; + imageWidth = oldWidth * (1 + zoomFactor); + zoomFactor += 0.1; + } + this.imgObj.zoom(newZoom); + } + fitHeight() { + this.imgObj.zoom(1); // Reset zoom to original size before applying Fit Height + const containerHeight = this.imgObj.upperCanvas.height; + const { height: oldHeight } = this.imgObj.getImageDimension(); + let imageHeight = oldHeight, zoomFactor = 0.1, newZoom = 1; + while (imageHeight < containerHeight) { + newZoom++; + imageHeight = oldHeight * (1 + zoomFactor); + zoomFactor += 0.1; + } + this.imgObj.zoom(newZoom); + } + + render() { + return (++dialog = dialogIns as DialogComponent} target='#ai-grid' id='ai-assist-dialog' width='500px' visible={false} height='500px' footerTemplate={dialogFooterTemplate} created={created}> + +assistView = assist as AIAssistViewComponent} toolbarSettings={toolbarSettings} promptRequest={onPromptRequest} promptSuggestionsHeader='Suggestions' responseItemTemplate={responseTemplate} > + ++ ++ grid = gridIns as GridComponent} id="ai-grid" height={540} width={1500} dataSource={purchaseDetails} allowFiltering={true} allowSorting={true} allowGrouping={true} filterSettings={filterSettings} allowPaging={true} toolbar={toolbarOptions} toolbarClick={toolbarClick} > + ++ ++ ( + ++ )} /> +{data.CustomerName}
+{data.Email}
+( + ++ )} + /> ++
{data.ProductName}
++ + + + ( + + {data.Status} ++ )} + /> ++ +); + } +} +ReactDOM.render({ this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)}> ++++ + , document.getElementById('image-editor')); \ No newline at end of file diff --git a/ej2-react/code-snippet/image-editor/default-cs11/app/app.tsx b/ej2-react/code-snippet/image-editor/default-cs11/app/app.tsx new file mode 100644 index 000000000..0a79eb2b1 --- /dev/null +++ b/ej2-react/code-snippet/image-editor/default-cs11/app/app.tsx @@ -0,0 +1,52 @@ +import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { Browser } from '@syncfusion/ej2-base'; +import * as React from 'react'; +import * as ReactDOM from "react-dom"; + +function App() { + let imgObj: ImageEditorComponent; + function imageEditorCreated(): void { + if (Browser.isDevice) { + imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/flower.jpeg'); + } else { + imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/bridge.jpeg'); + } + } + function fitWidth(): void { + imgObj.zoom(1); // Reset zoom to original size before applying Fit Width + const containerWidth: number = imgObj.upperCanvas.width; + const { width: oldWidth }: { width: number } = imgObj.getImageDimension(); + let imageWidth: number = oldWidth, zoomFactor: number = 0.1, newZoom: number = 1; + while (imageWidth < containerWidth) { + newZoom++; + imageWidth = oldWidth * (1 + zoomFactor); + zoomFactor += 0.1; + } + imgObj.zoom(newZoom); + } + function fitHeight(): void { + imgObj.zoom(1); // Reset zoom to original size before applying Fit Height + const containerHeight: number = imgObj.upperCanvas.height; + const { height: oldHeight }: { height: number } = imgObj.getImageDimension(); + let imageHeight: number = oldHeight, zoomFactor: number = 0.1, newZoom: number = 1; + while (imageHeight < containerHeight) { + newZoom++; + imageHeight = oldHeight * (1 + zoomFactor); + zoomFactor += 0.1; + } + imgObj.zoom(newZoom); + } + + return ( + ++ ); +} +export default App; +ReactDOM.render({ imgObj = img }} created={imageEditorCreated} > ++++ + , document.getElementById('image-editor')); \ No newline at end of file diff --git a/ej2-react/code-snippet/image-editor/default-cs11/index.css b/ej2-react/code-snippet/image-editor/default-cs11/index.css new file mode 100644 index 000000000..3bc15f9b9 --- /dev/null +++ b/ej2-react/code-snippet/image-editor/default-cs11/index.css @@ -0,0 +1,123 @@ +#loader { + color: #008cff; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} +#wrapperDiv, +.e-img-editor-sample { + width:550px; + height:350px; +} + +.e-image-editor { + margin: 0 auto; +} + +/* profile picture */ + +.e-img-editor-profile, +.e-img-editor-sample .control-wrapper { + position: relative; +} + +.e-profile { + width: 200px; + height: 200px; + position: absolute; + left: 50%; + -webkit-transform: translate(-50%, 30%); + transform: translate(-50%, 30%); + border-radius: 50%; +} + +.e-custom-wrapper { + position: relative; +} + +.e-custom-edit { + position: absolute; + width: 36px; + height: 36px; + border-radius: 50%; + background-color: blue; + top: calc(100% - 54px); + left: calc(100% - 47px); +} + +.e-custom-icon::before { + content: '\e911'; + font-size: 28px; + color: white; + left: 5px; + top: -2px; + position: absolute; +} + +.tailwind .e-custom-icon::before, +.tailwind-dark .e-custom-icon::before { + top: 6px; +} + +#custom-edit:hover { + cursor: pointer; +} + +canvas#img-canvas { + border-radius: 50%; + border: 4px solid darkgrey; + max-width: 200px; + max-height: 200px; +} + +.e-img-custom-open { + float: left; + margin-left: 0 !important; +} + +.e-img-custom-reset { + float: left; +} + +.e-profile .e-custom-img, +.e-profile .e-custom-file { + display: none; +} + +.e-bigger #profile-dialog .e-dlg-header { + font-size: 18px !important; +} + +#profile-dialog .e-dlg-content div { + height: 100%; + width: 100%; +} + +.control-section.e-img-editor-profile { + min-height: 350px !important; +} + +.highcontrast .e-custom-img-btn, +.fabric .e-custom-img-btn, +.fabric-dark .e-custom-img-btn { + padding: 2px 10px !important; +} + +.e-bigger .e-custom-img-btn { + font-size: 14px !important; + padding: 6px 10px !important; +} + +.e-bigger.highcontrast .e-custom-img-btn, +.e-bigger.fabric .e-custom-img-btn, +.e-bigger.fabric-dark .e-custom-img-btn, +.e-bigger.material .e-custom-img-btn, +.e-bigger.material-dark .e-custom-img-btn { + padding: 3px 10px !important; +} +.e-bigger.bootstrap .e-custom-img-btn, +.e-bigger.bootstrap-dark .e-custom-img-btn { + padding: 1px 10px !important; +} diff --git a/ej2-react/code-snippet/image-editor/default-cs11/index.html b/ej2-react/code-snippet/image-editor/default-cs11/index.html new file mode 100644 index 000000000..eecc4f429 --- /dev/null +++ b/ej2-react/code-snippet/image-editor/default-cs11/index.html @@ -0,0 +1,29 @@ + + + + + Syncfusion React Image Editor + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/image-editor/default-cs11/systemjs.config.js b/ej2-react/code-snippet/image-editor/default-cs11/systemjs.config.js new file mode 100644 index 000000000..c2a684b18 --- /dev/null +++ b/ej2-react/code-snippet/image-editor/default-cs11/systemjs.config.js @@ -0,0 +1,48 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.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-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-image-editor": "syncfusion:ej2-image-editor/dist/ej2-image-editor.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-image-editor": "syncfusion:ej2-image-editor/dist/ej2-image-editor.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-image-editor": "syncfusion:ej2-react-image-editor/dist/ej2-react-image-editor.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js", + "react": "https://unpkg.com/react@15.5.4/dist/react.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs1/app/index.tsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs1/app/index.tsx index c162674a0..5551d835a 100644 --- a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs1/app/index.tsx +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs1/app/index.tsx @@ -1,3 +1,4 @@ +{% raw %} import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { extend, closest, removeClass } from '@syncfusion/ej2-base'; @@ -107,3 +108,4 @@ class App extends React.Component<{}, {}>{ } }; ReactDOM.render(Loading....+, document.getElementById('kanban')); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs2/app/index.jsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs2/app/index.jsx index 402560185..28815bdd2 100644 --- a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs2/app/index.jsx +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs2/app/index.jsx @@ -1,3 +1,4 @@ +{% raw %} import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { extend, closest, removeClass } from '@syncfusion/ej2-base'; @@ -88,4 +89,5 @@ function App() { , document.getElementById('kanban')); \ No newline at end of file +ReactDOM.render( , document.getElementById('kanban')); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs2/app/index.tsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs2/app/index.tsx index a7d034a7c..5c1bf2dfb 100644 --- a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs2/app/index.tsx +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs2/app/index.tsx @@ -1,3 +1,4 @@ +{% raw %} import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { extend, closest, removeClass } from '@syncfusion/ej2-base'; @@ -103,3 +104,4 @@ function App(){ ); } ReactDOM.render( , document.getElementById('kanban')); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/datasource.jsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/datasource.jsx new file mode 100644 index 000000000..1fd8a5987 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/datasource.jsx @@ -0,0 +1,249 @@ +export let scheduleData = [ + { + "Id": 10, + "Name": "David", + "StartTime": "2018-08-01T03:30:00.000Z", + "EndTime": "2018-08-01T04:30:00.000Z", + "Description": "Health Checkup", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 11, + "Name": "John", + "StartTime": "2018-08-01T05:00:00.000Z", + "EndTime": "2018-08-01T06:00:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 12, + "Name": "Peter", + "StartTime": "2018-08-01T06:30:00.000Z", + "EndTime": "2018-08-01T07:30:00.000Z", + "Description": "Eye and Spectacles Checkup", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 13, + "Name": "Starc", + "StartTime": "2018-08-01T08:30:00.000Z", + "EndTime": "2018-08-01T09:30:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 14, + "Name": "James", + "StartTime": "2018-08-01T04:30:00.000Z", + "EndTime": "2018-08-01T05:30:00.000Z", + "Description": "Surgery Appointment", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 15, + "Name": "Jercy", + "StartTime": "2018-08-01T04:00:00.000Z", + "EndTime": "2018-08-01T05:00:00.000Z", + "Description": "Tooth Sensitivity", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + }, { + "Id": 16, + "Name": "Albert", + "StartTime": "2018-08-02T04:30:00.000Z", + "EndTime": "2018-08-02T06:00:00.000Z", + "Description": "Skin care treatment", + "DepartmentID": 1, + "ConsultantID": 7, + "DepartmentName": "GENERAL" + }, { + "Id": 17, + "Name": "Louis", + "StartTime": "2018-08-02T07:00:00.000Z", + "EndTime": "2018-08-02T08:15:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 9, + "DepartmentName": "GENERAL" + }, { + "Id": 18, + "Name": "Williams", + "StartTime": "2018-08-02T06:30:00.000Z", + "EndTime": "2018-08-02T08:30:00.000Z", + "Description": "Mouth Sores", + "DepartmentID": 2, + "ConsultantID": 10, + "DepartmentName": "DENTAL" + }, { + "Id": 19, + "Name": "David", + "StartTime": "2018-08-02T11:00:00.000Z", + "EndTime": "2018-08-02T12:45:00.000Z", + "Description": "Eye checkup and Treatment", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 20, + "Name": "John", + "StartTime": "2018-08-02T14:00:00.000Z", + "EndTime": "2018-08-02T16:15:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 21, + "Name": "Peter", + "StartTime": "2018-08-03T12:00:00.000Z", + "EndTime": "2018-08-03T14:00:00.000Z", + "Description": "Surgery Treatment", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 22, + "Name": "Starc", + "StartTime": "2018-08-04T13:00:00.000Z", + "EndTime": "2018-08-04T16:00:00.000Z", + "Description": "Tooth Decay", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 23, + "Name": "James", + "StartTime": "2018-08-03T13:30:00.000Z", + "EndTime": "2018-08-03T15:30:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 24, + "Name": "Jercy", + "StartTime": "2018-08-04T14:30:00.000Z", + "EndTime": "2018-08-04T16:30:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + } +]; +export let kanbanData = [ + { + "Id": 101, + "Name": "David", + "StartTime": "2018-08-01T03:30:00.000Z", + "EndTime": "2018-08-01T04:30:00.000Z", + "Description": "Health Checkup", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 111, + "Name": "John", + "StartTime": "2018-08-01T05:00:00.000Z", + "EndTime": "2018-08-01T06:00:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 121, + "Name": "Peter", + "StartTime": "2018-08-01T06:30:00.000Z", + "EndTime": "2018-08-01T07:30:00.000Z", + "Description": "Eye and Spectacles Checkup", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 131, + "Name": "Starc", + "StartTime": "2018-08-01T08:30:00.000Z", + "EndTime": "2018-08-01T09:30:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 141, + "Name": "James", + "StartTime": "2018-08-01T04:30:00.000Z", + "EndTime": "2018-08-01T05:30:00.000Z", + "Description": "Surgery Appointment", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 151, + "Name": "Jercy", + "StartTime": "2018-08-01T04:00:00.000Z", + "EndTime": "2018-08-01T05:00:00.000Z", + "Description": "Tooth Sensitivity", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + }, { + "Id": 161, + "Name": "Albert", + "StartTime": "2018-08-02T04:30:00.000Z", + "EndTime": "2018-08-02T06:00:00.000Z", + "Description": "Skin care treatment", + "DepartmentID": 1, + "ConsultantID": 7, + "DepartmentName": "GENERAL" + }, { + "Id": 171, + "Name": "Louis", + "StartTime": "2018-08-02T07:00:00.000Z", + "EndTime": "2018-08-02T08:15:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 9, + "DepartmentName": "GENERAL" + }, { + "Id": 181, + "Name": "Williams", + "StartTime": "2018-08-02T06:30:00.000Z", + "EndTime": "2018-08-02T08:30:00.000Z", + "Description": "Mouth Sores", + "DepartmentID": 2, + "ConsultantID": 10, + "DepartmentName": "DENTAL" + }, { + "Id": 191, + "Name": "David", + "StartTime": "2018-08-02T11:00:00.000Z", + "EndTime": "2018-08-02T12:45:00.000Z", + "Description": "Eye checkup and Treatment", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 201, + "Name": "John", + "StartTime": "2018-08-02T14:00:00.000Z", + "EndTime": "2018-08-02T16:15:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 211, + "Name": "Peter", + "StartTime": "2018-08-03T12:00:00.000Z", + "EndTime": "2018-08-03T14:00:00.000Z", + "Description": "Surgery Treatment", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + } +]; diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/datasource.tsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/datasource.tsx new file mode 100644 index 000000000..d12f99988 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/datasource.tsx @@ -0,0 +1,249 @@ +export let scheduleData: Object[] = [ + { + "Id": 10, + "Name": "David", + "StartTime": "2018-08-01T03:30:00.000Z", + "EndTime": "2018-08-01T04:30:00.000Z", + "Description": "Health Checkup", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 11, + "Name": "John", + "StartTime": "2018-08-01T05:00:00.000Z", + "EndTime": "2018-08-01T06:00:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 12, + "Name": "Peter", + "StartTime": "2018-08-01T06:30:00.000Z", + "EndTime": "2018-08-01T07:30:00.000Z", + "Description": "Eye and Spectacles Checkup", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 13, + "Name": "Starc", + "StartTime": "2018-08-01T08:30:00.000Z", + "EndTime": "2018-08-01T09:30:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 14, + "Name": "James", + "StartTime": "2018-08-01T04:30:00.000Z", + "EndTime": "2018-08-01T05:30:00.000Z", + "Description": "Surgery Appointment", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 15, + "Name": "Jercy", + "StartTime": "2018-08-01T04:00:00.000Z", + "EndTime": "2018-08-01T05:00:00.000Z", + "Description": "Tooth Sensitivity", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + }, { + "Id": 16, + "Name": "Albert", + "StartTime": "2018-08-02T04:30:00.000Z", + "EndTime": "2018-08-02T06:00:00.000Z", + "Description": "Skin care treatment", + "DepartmentID": 1, + "ConsultantID": 7, + "DepartmentName": "GENERAL" + }, { + "Id": 17, + "Name": "Louis", + "StartTime": "2018-08-02T07:00:00.000Z", + "EndTime": "2018-08-02T08:15:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 9, + "DepartmentName": "GENERAL" + }, { + "Id": 18, + "Name": "Williams", + "StartTime": "2018-08-02T06:30:00.000Z", + "EndTime": "2018-08-02T08:30:00.000Z", + "Description": "Mouth Sores", + "DepartmentID": 2, + "ConsultantID": 10, + "DepartmentName": "DENTAL" + }, { + "Id": 19, + "Name": "David", + "StartTime": "2018-08-02T11:00:00.000Z", + "EndTime": "2018-08-02T12:45:00.000Z", + "Description": "Eye checkup and Treatment", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 20, + "Name": "John", + "StartTime": "2018-08-02T14:00:00.000Z", + "EndTime": "2018-08-02T16:15:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 21, + "Name": "Peter", + "StartTime": "2018-08-03T12:00:00.000Z", + "EndTime": "2018-08-03T14:00:00.000Z", + "Description": "Surgery Treatment", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 22, + "Name": "Starc", + "StartTime": "2018-08-04T13:00:00.000Z", + "EndTime": "2018-08-04T16:00:00.000Z", + "Description": "Tooth Decay", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 23, + "Name": "James", + "StartTime": "2018-08-03T13:30:00.000Z", + "EndTime": "2018-08-03T15:30:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 24, + "Name": "Jercy", + "StartTime": "2018-08-04T14:30:00.000Z", + "EndTime": "2018-08-04T16:30:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + } +]; +export let kanbanData: Object[] = [ + { + "Id": 101, + "Name": "David", + "StartTime": "2018-08-01T03:30:00.000Z", + "EndTime": "2018-08-01T04:30:00.000Z", + "Description": "Health Checkup", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 111, + "Name": "John", + "StartTime": "2018-08-01T05:00:00.000Z", + "EndTime": "2018-08-01T06:00:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 121, + "Name": "Peter", + "StartTime": "2018-08-01T06:30:00.000Z", + "EndTime": "2018-08-01T07:30:00.000Z", + "Description": "Eye and Spectacles Checkup", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 131, + "Name": "Starc", + "StartTime": "2018-08-01T08:30:00.000Z", + "EndTime": "2018-08-01T09:30:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 141, + "Name": "James", + "StartTime": "2018-08-01T04:30:00.000Z", + "EndTime": "2018-08-01T05:30:00.000Z", + "Description": "Surgery Appointment", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 151, + "Name": "Jercy", + "StartTime": "2018-08-01T04:00:00.000Z", + "EndTime": "2018-08-01T05:00:00.000Z", + "Description": "Tooth Sensitivity", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + }, { + "Id": 161, + "Name": "Albert", + "StartTime": "2018-08-02T04:30:00.000Z", + "EndTime": "2018-08-02T06:00:00.000Z", + "Description": "Skin care treatment", + "DepartmentID": 1, + "ConsultantID": 7, + "DepartmentName": "GENERAL" + }, { + "Id": 171, + "Name": "Louis", + "StartTime": "2018-08-02T07:00:00.000Z", + "EndTime": "2018-08-02T08:15:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 9, + "DepartmentName": "GENERAL" + }, { + "Id": 181, + "Name": "Williams", + "StartTime": "2018-08-02T06:30:00.000Z", + "EndTime": "2018-08-02T08:30:00.000Z", + "Description": "Mouth Sores", + "DepartmentID": 2, + "ConsultantID": 10, + "DepartmentName": "DENTAL" + }, { + "Id": 191, + "Name": "David", + "StartTime": "2018-08-02T11:00:00.000Z", + "EndTime": "2018-08-02T12:45:00.000Z", + "Description": "Eye checkup and Treatment", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 201, + "Name": "John", + "StartTime": "2018-08-02T14:00:00.000Z", + "EndTime": "2018-08-02T16:15:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 211, + "Name": "Peter", + "StartTime": "2018-08-03T12:00:00.000Z", + "EndTime": "2018-08-03T14:00:00.000Z", + "Description": "Surgery Treatment", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/index.jsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/index.jsx new file mode 100644 index 000000000..174489d25 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/index.jsx @@ -0,0 +1,97 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { extend, closest, removeClass } from '@syncfusion/ej2-base'; +import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; +import { ScheduleComponent, ResourcesDirective, ResourceDirective, ViewsDirective, ViewDirective, Inject, TimelineViews, Resize, DragAndDrop, TimelineMonth } from '@syncfusion/ej2-react-schedule'; +import { kanbanData, scheduleData } from './datasource'; +class App extends React.Component { + kanbanObj; + scheduleObj; + constructor() { + super(...arguments); + this.data = extend([], kanbanData, null, true); + this.scheduleDataSource = extend([], scheduleData, null, true); + this.externalKanbanDropId = ["#Schedule"]; + } + departmentData = [ + { Text: 'GENERAL', Id: 1, Color: '#bbdc00' }, + { Text: 'DENTAL', Id: 2, Color: '#9e5fff' } + ]; + consultantData = [ + { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Cardiologist' }, + { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Orthodontist' }, + { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Optometrist' }, + { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist' }, + { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic' }, + { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist' } + ]; + getConsultantName(value) { + return value.resourceData[value.resource.textField]; + } + getConsultantDesignation(value) { + return value.resourceData.Designation; + } + resourceHeaderTemplate(props) { + return ( ); + } + onKanbanDragStop(args) { + let scheduleElement = closest(args.event.target, '#Schedule'); + if (scheduleElement) { + this.kanbanObj.deleteCard(args.data); + this.scheduleObj.openEditor(args.data[0], 'Add', true); + args.cancel = true; + } + } + scheduleDragStop(args) { + let kanbanElement = closest(args.event.target, '#Kanban'); + if (kanbanElement) { + this.scheduleObj.deleteEvent(args.data.Id); + removeClass([this.scheduleObj.element.querySelector('.e-selected-cell')], 'e-selected-cell'); + this.kanbanObj.openDialog('Add', args.data); + args.cancel = true; + } + } + render() { + return+ {this.getConsultantName(props)}{this.getConsultantDesignation(props)}+; + } +} +; +ReactDOM.render(++++++Kanban
+this.kanbanObj = kanban} keyField="DepartmentName" dataSource={this.data} cardSettings={{ contentField: "Name", headerField: "Id" }} dragStop={this.onKanbanDragStop.bind(this)} externalDropId={this.externalKanbanDropId}> + ++ ++ ++Schedule
+this.scheduleObj = schedule} cssClass='schedule-drag-drop' width='100%' height='650px' selectedDate={new Date(2018, 7, 1)} currentView='TimelineDay' resourceHeaderTemplate={this.resourceHeaderTemplate.bind(this)} eventSettings={{ + dataSource: this.scheduleDataSource, + fields: { + subject: { title: 'Patient Name', name: 'Name' }, + startTime: { title: "From", name: "StartTime" }, + endTime: { title: "To", name: "EndTime" }, + description: { title: 'Reason', name: 'Description' } + } + }} group={{ enableCompactView: false, resources: ['Departments', 'Consultants'] }} dragStop={this.scheduleDragStop.bind(this)}> + ++ ++ ++ ++ ++ + + , document.getElementById('kanban')); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/index.tsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/index.tsx new file mode 100644 index 000000000..c162674a0 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/app/index.tsx @@ -0,0 +1,109 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { extend, closest, removeClass } from '@syncfusion/ej2-base'; +import { KanbanComponent, ColumnsDirective, ColumnDirective, DragEventArgs, Kanban } from "@syncfusion/ej2-react-kanban"; +import { + ScheduleComponent, ResourcesDirective, ResourceDirective, + ViewsDirective, ViewDirective, Inject, TimelineViews, + Resize, DragAndDrop, TimelineMonth +} from '@syncfusion/ej2-react-schedule'; +import { kanbanData, scheduleData } from './datasource'; + +class App extends React.Component<{}, {}>{ + public kanbanObj: Kanban | null; + public scheduleObj: ScheduleComponent | null; + constructor() { + super(...arguments); + this.data = extend([], kanbanData, null, true); + this.scheduleDataSource = extend([], scheduleData, null, true); + this.externalKanbanDropId = ["#Schedule"]; + } + private departmentData: Object[] = [ + { Text: 'GENERAL', Id: 1, Color: '#bbdc00' }, + { Text: 'DENTAL', Id: 2, Color: '#9e5fff' } + ]; + private consultantData: Object[] = [ + { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Cardiologist' }, + { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Orthodontist' }, + { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Optometrist' }, + { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist' }, + { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic' }, + { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist' } + ]; + private getConsultantName(value: ResourceDetails | TreeViewArgs): string { + return (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] as string; + } + + private getConsultantDesignation(value: ResourceDetails): string { + return (value as ResourceDetails).resourceData.Designation as string; + } + + private resourceHeaderTemplate(props: any): JSX.Element { + return ( ); + } + private onKanbanDragStop(args: DragEventArgs): void { + let scheduleElement: Element = closest(args.event.target as Element, '#Schedule'); + if (scheduleElement) { + this.kanbanObj.deleteCard(args.data); + this.scheduleObj.openEditor(args.data[0], 'Add', true); + args.cancel = true; + } + } + private scheduleDragStop(args: ScheduleDragEventArgs): void { + let kanbanElement: Element = closest(args.event.target as Element, '#Kanban'); + if (kanbanElement) { + this.scheduleObj.deleteEvent(args.data.Id); + removeClass([this.scheduleObj.element.querySelector('.e-selected-cell')], 'e-selected-cell'); + this.kanbanObj.openDialog('Add', args.data); + args.cancel = true; + } + } + render() { + return+ {this.getConsultantName(props)}{this.getConsultantDesignation(props)}++ } +}; +ReactDOM.render(++++++Kanban
+this.kanbanObj = kanban} keyField="DepartmentName" dataSource={this.data} cardSettings={{ contentField: "Name", headerField: "Id" }} dragStop={this.onKanbanDragStop.bind(this)} externalDropId={this.externalKanbanDropId}> + ++ ++ ++Schedule
+this.scheduleObj = schedule} cssClass='schedule-drag-drop' width='100%' height='650px' selectedDate={new Date(2018, 7, 1)} + currentView='TimelineDay' resourceHeaderTemplate={this.resourceHeaderTemplate.bind(this)} + eventSettings={{ + dataSource: this.scheduleDataSource, + fields: { + subject: { title: 'Patient Name', name: 'Name' }, + startTime: { title: "From", name: "StartTime" }, + endTime: { title: "To", name: "EndTime" }, + description: { title: 'Reason', name: 'Description' } + } + }} + group={{ enableCompactView: false, resources: ['Departments', 'Consultants'] }} + dragStop={this.scheduleDragStop.bind(this)} > + ++ ++ ++ ++ ++ + + , document.getElementById('kanban')); diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/index.html b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/index.html new file mode 100644 index 000000000..aacdf32c9 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/index.html @@ -0,0 +1,47 @@ + + + + + Kanban to schedule drag and drop + + + + + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/systemjs.config.js b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/systemjs.config.js new file mode 100644 index 000000000..e9eeeaf59 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs3/systemjs.config.js @@ -0,0 +1,51 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "//cdn.syncfusion.com/ej2/"}, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-kanban": "syncfusion:ej2-kanban/dist/ej2-kanban.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-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-kanban": "syncfusion:ej2-react-kanban/dist/ej2-react-kanban.umd.min.js", + "@syncfusion/ej2-react-schedule": "syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/datasource.jsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/datasource.jsx new file mode 100644 index 000000000..1fd8a5987 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/datasource.jsx @@ -0,0 +1,249 @@ +export let scheduleData = [ + { + "Id": 10, + "Name": "David", + "StartTime": "2018-08-01T03:30:00.000Z", + "EndTime": "2018-08-01T04:30:00.000Z", + "Description": "Health Checkup", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 11, + "Name": "John", + "StartTime": "2018-08-01T05:00:00.000Z", + "EndTime": "2018-08-01T06:00:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 12, + "Name": "Peter", + "StartTime": "2018-08-01T06:30:00.000Z", + "EndTime": "2018-08-01T07:30:00.000Z", + "Description": "Eye and Spectacles Checkup", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 13, + "Name": "Starc", + "StartTime": "2018-08-01T08:30:00.000Z", + "EndTime": "2018-08-01T09:30:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 14, + "Name": "James", + "StartTime": "2018-08-01T04:30:00.000Z", + "EndTime": "2018-08-01T05:30:00.000Z", + "Description": "Surgery Appointment", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 15, + "Name": "Jercy", + "StartTime": "2018-08-01T04:00:00.000Z", + "EndTime": "2018-08-01T05:00:00.000Z", + "Description": "Tooth Sensitivity", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + }, { + "Id": 16, + "Name": "Albert", + "StartTime": "2018-08-02T04:30:00.000Z", + "EndTime": "2018-08-02T06:00:00.000Z", + "Description": "Skin care treatment", + "DepartmentID": 1, + "ConsultantID": 7, + "DepartmentName": "GENERAL" + }, { + "Id": 17, + "Name": "Louis", + "StartTime": "2018-08-02T07:00:00.000Z", + "EndTime": "2018-08-02T08:15:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 9, + "DepartmentName": "GENERAL" + }, { + "Id": 18, + "Name": "Williams", + "StartTime": "2018-08-02T06:30:00.000Z", + "EndTime": "2018-08-02T08:30:00.000Z", + "Description": "Mouth Sores", + "DepartmentID": 2, + "ConsultantID": 10, + "DepartmentName": "DENTAL" + }, { + "Id": 19, + "Name": "David", + "StartTime": "2018-08-02T11:00:00.000Z", + "EndTime": "2018-08-02T12:45:00.000Z", + "Description": "Eye checkup and Treatment", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 20, + "Name": "John", + "StartTime": "2018-08-02T14:00:00.000Z", + "EndTime": "2018-08-02T16:15:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 21, + "Name": "Peter", + "StartTime": "2018-08-03T12:00:00.000Z", + "EndTime": "2018-08-03T14:00:00.000Z", + "Description": "Surgery Treatment", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 22, + "Name": "Starc", + "StartTime": "2018-08-04T13:00:00.000Z", + "EndTime": "2018-08-04T16:00:00.000Z", + "Description": "Tooth Decay", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 23, + "Name": "James", + "StartTime": "2018-08-03T13:30:00.000Z", + "EndTime": "2018-08-03T15:30:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 24, + "Name": "Jercy", + "StartTime": "2018-08-04T14:30:00.000Z", + "EndTime": "2018-08-04T16:30:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + } +]; +export let kanbanData = [ + { + "Id": 101, + "Name": "David", + "StartTime": "2018-08-01T03:30:00.000Z", + "EndTime": "2018-08-01T04:30:00.000Z", + "Description": "Health Checkup", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 111, + "Name": "John", + "StartTime": "2018-08-01T05:00:00.000Z", + "EndTime": "2018-08-01T06:00:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 121, + "Name": "Peter", + "StartTime": "2018-08-01T06:30:00.000Z", + "EndTime": "2018-08-01T07:30:00.000Z", + "Description": "Eye and Spectacles Checkup", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 131, + "Name": "Starc", + "StartTime": "2018-08-01T08:30:00.000Z", + "EndTime": "2018-08-01T09:30:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 141, + "Name": "James", + "StartTime": "2018-08-01T04:30:00.000Z", + "EndTime": "2018-08-01T05:30:00.000Z", + "Description": "Surgery Appointment", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 151, + "Name": "Jercy", + "StartTime": "2018-08-01T04:00:00.000Z", + "EndTime": "2018-08-01T05:00:00.000Z", + "Description": "Tooth Sensitivity", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + }, { + "Id": 161, + "Name": "Albert", + "StartTime": "2018-08-02T04:30:00.000Z", + "EndTime": "2018-08-02T06:00:00.000Z", + "Description": "Skin care treatment", + "DepartmentID": 1, + "ConsultantID": 7, + "DepartmentName": "GENERAL" + }, { + "Id": 171, + "Name": "Louis", + "StartTime": "2018-08-02T07:00:00.000Z", + "EndTime": "2018-08-02T08:15:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 9, + "DepartmentName": "GENERAL" + }, { + "Id": 181, + "Name": "Williams", + "StartTime": "2018-08-02T06:30:00.000Z", + "EndTime": "2018-08-02T08:30:00.000Z", + "Description": "Mouth Sores", + "DepartmentID": 2, + "ConsultantID": 10, + "DepartmentName": "DENTAL" + }, { + "Id": 191, + "Name": "David", + "StartTime": "2018-08-02T11:00:00.000Z", + "EndTime": "2018-08-02T12:45:00.000Z", + "Description": "Eye checkup and Treatment", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 201, + "Name": "John", + "StartTime": "2018-08-02T14:00:00.000Z", + "EndTime": "2018-08-02T16:15:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 211, + "Name": "Peter", + "StartTime": "2018-08-03T12:00:00.000Z", + "EndTime": "2018-08-03T14:00:00.000Z", + "Description": "Surgery Treatment", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + } +]; diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/datasource.tsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/datasource.tsx new file mode 100644 index 000000000..d12f99988 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/datasource.tsx @@ -0,0 +1,249 @@ +export let scheduleData: Object[] = [ + { + "Id": 10, + "Name": "David", + "StartTime": "2018-08-01T03:30:00.000Z", + "EndTime": "2018-08-01T04:30:00.000Z", + "Description": "Health Checkup", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 11, + "Name": "John", + "StartTime": "2018-08-01T05:00:00.000Z", + "EndTime": "2018-08-01T06:00:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 12, + "Name": "Peter", + "StartTime": "2018-08-01T06:30:00.000Z", + "EndTime": "2018-08-01T07:30:00.000Z", + "Description": "Eye and Spectacles Checkup", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 13, + "Name": "Starc", + "StartTime": "2018-08-01T08:30:00.000Z", + "EndTime": "2018-08-01T09:30:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 14, + "Name": "James", + "StartTime": "2018-08-01T04:30:00.000Z", + "EndTime": "2018-08-01T05:30:00.000Z", + "Description": "Surgery Appointment", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 15, + "Name": "Jercy", + "StartTime": "2018-08-01T04:00:00.000Z", + "EndTime": "2018-08-01T05:00:00.000Z", + "Description": "Tooth Sensitivity", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + }, { + "Id": 16, + "Name": "Albert", + "StartTime": "2018-08-02T04:30:00.000Z", + "EndTime": "2018-08-02T06:00:00.000Z", + "Description": "Skin care treatment", + "DepartmentID": 1, + "ConsultantID": 7, + "DepartmentName": "GENERAL" + }, { + "Id": 17, + "Name": "Louis", + "StartTime": "2018-08-02T07:00:00.000Z", + "EndTime": "2018-08-02T08:15:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 9, + "DepartmentName": "GENERAL" + }, { + "Id": 18, + "Name": "Williams", + "StartTime": "2018-08-02T06:30:00.000Z", + "EndTime": "2018-08-02T08:30:00.000Z", + "Description": "Mouth Sores", + "DepartmentID": 2, + "ConsultantID": 10, + "DepartmentName": "DENTAL" + }, { + "Id": 19, + "Name": "David", + "StartTime": "2018-08-02T11:00:00.000Z", + "EndTime": "2018-08-02T12:45:00.000Z", + "Description": "Eye checkup and Treatment", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 20, + "Name": "John", + "StartTime": "2018-08-02T14:00:00.000Z", + "EndTime": "2018-08-02T16:15:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 21, + "Name": "Peter", + "StartTime": "2018-08-03T12:00:00.000Z", + "EndTime": "2018-08-03T14:00:00.000Z", + "Description": "Surgery Treatment", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 22, + "Name": "Starc", + "StartTime": "2018-08-04T13:00:00.000Z", + "EndTime": "2018-08-04T16:00:00.000Z", + "Description": "Tooth Decay", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 23, + "Name": "James", + "StartTime": "2018-08-03T13:30:00.000Z", + "EndTime": "2018-08-03T15:30:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 24, + "Name": "Jercy", + "StartTime": "2018-08-04T14:30:00.000Z", + "EndTime": "2018-08-04T16:30:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + } +]; +export let kanbanData: Object[] = [ + { + "Id": 101, + "Name": "David", + "StartTime": "2018-08-01T03:30:00.000Z", + "EndTime": "2018-08-01T04:30:00.000Z", + "Description": "Health Checkup", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 111, + "Name": "John", + "StartTime": "2018-08-01T05:00:00.000Z", + "EndTime": "2018-08-01T06:00:00.000Z", + "Description": "Tooth Erosion", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 121, + "Name": "Peter", + "StartTime": "2018-08-01T06:30:00.000Z", + "EndTime": "2018-08-01T07:30:00.000Z", + "Description": "Eye and Spectacles Checkup", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + }, { + "Id": 131, + "Name": "Starc", + "StartTime": "2018-08-01T08:30:00.000Z", + "EndTime": "2018-08-01T09:30:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 4, + "DepartmentName": "DENTAL" + }, { + "Id": 141, + "Name": "James", + "StartTime": "2018-08-01T04:30:00.000Z", + "EndTime": "2018-08-01T05:30:00.000Z", + "Description": "Surgery Appointment", + "DepartmentID": 1, + "ConsultantID": 5, + "DepartmentName": "GENERAL" + }, { + "Id": 151, + "Name": "Jercy", + "StartTime": "2018-08-01T04:00:00.000Z", + "EndTime": "2018-08-01T05:00:00.000Z", + "Description": "Tooth Sensitivity", + "DepartmentID": 2, + "ConsultantID": 6, + "DepartmentName": "DENTAL" + }, { + "Id": 161, + "Name": "Albert", + "StartTime": "2018-08-02T04:30:00.000Z", + "EndTime": "2018-08-02T06:00:00.000Z", + "Description": "Skin care treatment", + "DepartmentID": 1, + "ConsultantID": 7, + "DepartmentName": "GENERAL" + }, { + "Id": 171, + "Name": "Louis", + "StartTime": "2018-08-02T07:00:00.000Z", + "EndTime": "2018-08-02T08:15:00.000Z", + "Description": "General Checkup", + "DepartmentID": 1, + "ConsultantID": 9, + "DepartmentName": "GENERAL" + }, { + "Id": 181, + "Name": "Williams", + "StartTime": "2018-08-02T06:30:00.000Z", + "EndTime": "2018-08-02T08:30:00.000Z", + "Description": "Mouth Sores", + "DepartmentID": 2, + "ConsultantID": 10, + "DepartmentName": "DENTAL" + }, { + "Id": 191, + "Name": "David", + "StartTime": "2018-08-02T11:00:00.000Z", + "EndTime": "2018-08-02T12:45:00.000Z", + "Description": "Eye checkup and Treatment", + "DepartmentID": 1, + "ConsultantID": 1, + "DepartmentName": "GENERAL" + }, { + "Id": 201, + "Name": "John", + "StartTime": "2018-08-02T14:00:00.000Z", + "EndTime": "2018-08-02T16:15:00.000Z", + "Description": "Toothaches", + "DepartmentID": 2, + "ConsultantID": 2, + "DepartmentName": "DENTAL" + }, { + "Id": 211, + "Name": "Peter", + "StartTime": "2018-08-03T12:00:00.000Z", + "EndTime": "2018-08-03T14:00:00.000Z", + "Description": "Surgery Treatment", + "DepartmentID": 1, + "ConsultantID": 3, + "DepartmentName": "GENERAL" + } +]; \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/index.jsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/index.jsx new file mode 100644 index 000000000..402560185 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/index.jsx @@ -0,0 +1,91 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { extend, closest, removeClass } from '@syncfusion/ej2-base'; +import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; +import { ScheduleComponent, ResourcesDirective, ResourceDirective, ViewsDirective, ViewDirective, Inject, TimelineViews, Resize, DragAndDrop, TimelineMonth } from '@syncfusion/ej2-react-schedule'; +import { kanbanData, scheduleData } from './datasource'; +function App() { + let kanbanObj; + let scheduleObj; + let data = extend([], kanbanData, null, true); + let scheduleDataSource = extend([], scheduleData, null, true); + let externalKanbanDropId = ["#Schedule"]; + let departmentData = [ + { Text: 'GENERAL', Id: 1, Color: '#bbdc00' }, + { Text: 'DENTAL', Id: 2, Color: '#9e5fff' } + ]; + let consultantData = [ + { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Cardiologist' }, + { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Orthodontist' }, + { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Optometrist' }, + { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist' }, + { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic' }, + { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist' } + ]; + function getConsultantName(value) { + return value.resourceData[value.resource.textField]; + } + function getConsultantDesignation(value) { + return value.resourceData.Designation; + } + function resourceHeaderTemplate(props) { + return (Loading....+); + } + function onKanbanDragStop(args) { + let scheduleElement = closest(args.event.target, '#Schedule'); + if (scheduleElement) { + kanbanObj.deleteCard(args.data); + scheduleObj.openEditor(args.data[0], 'Add', true); + args.cancel = true; + } + } + function scheduleDragStop(args) { + let kanbanElement = closest(args.event.target, '#Kanban'); + if (kanbanElement) { + scheduleObj.deleteEvent(args.data.Id); + removeClass([scheduleObj.element.querySelector('.e-selected-cell')], 'e-selected-cell'); + kanbanObj.openDialog('Add', args.data); + args.cancel = true; + } + } + return (+ {getConsultantName(props)}{getConsultantDesignation(props)}+); +} +ReactDOM.render(++++++Kanban
+kanbanObj = kanban} keyField="DepartmentName" dataSource={data} cardSettings={{ contentField: "Name", headerField: "Id" }} dragStop={onKanbanDragStop.bind(this)} externalDropId={externalKanbanDropId}> + ++ ++ ++Schedule
+scheduleObj = schedule} cssClass='schedule-drag-drop' width='100%' height='650px' selectedDate={new Date(2018, 7, 1)} currentView='TimelineDay' resourceHeaderTemplate={resourceHeaderTemplate.bind(this)} eventSettings={{ + dataSource: scheduleDataSource, + fields: { + subject: { title: 'Patient Name', name: 'Name' }, + startTime: { title: "From", name: "StartTime" }, + endTime: { title: "To", name: "EndTime" }, + description: { title: 'Reason', name: 'Description' } + } + }} group={{ enableCompactView: false, resources: ['Departments', 'Consultants'] }} dragStop={scheduleDragStop.bind(this)}> + ++ ++ ++ ++ ++ + + , document.getElementById('kanban')); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/index.tsx b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/index.tsx new file mode 100644 index 000000000..a7d034a7c --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/app/index.tsx @@ -0,0 +1,105 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { extend, closest, removeClass } from '@syncfusion/ej2-base'; +import { KanbanComponent, ColumnsDirective, ColumnDirective, DragEventArgs, Kanban } from "@syncfusion/ej2-react-kanban"; +import { + ScheduleComponent, ResourcesDirective, ResourceDirective, + ViewsDirective, ViewDirective, Inject, TimelineViews, + Resize, DragAndDrop, TimelineMonth +} from '@syncfusion/ej2-react-schedule'; +import { kanbanData, scheduleData } from './datasource'; + +function App(){ + let kanbanObj: Kanban | null; + let scheduleObj: ScheduleComponent | null; + let data = extend([], kanbanData, null, true); + let scheduleDataSource = extend([], scheduleData, null, true); + let externalKanbanDropId = ["#Schedule"]; + let departmentData: Object[] = [ + { Text: 'GENERAL', Id: 1, Color: '#bbdc00' }, + { Text: 'DENTAL', Id: 2, Color: '#9e5fff' } + ]; + let consultantData: Object[] = [ + { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Cardiologist' }, + { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Orthodontist' }, + { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Optometrist' }, + { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist' }, + { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic' }, + { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist' } + ]; + function getConsultantName(value: ResourceDetails | TreeViewArgs): string { + return (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] as string; + } + function getConsultantDesignation(value: ResourceDetails): string { + return (value as ResourceDetails).resourceData.Designation as string; + } + + function resourceHeaderTemplate(props: any): JSX.Element { + return ( ); + } + function onKanbanDragStop(args: DragEventArgs): void { + let scheduleElement: Element = closest(args.event.target as Element, '#Schedule'); + if (scheduleElement) { + kanbanObj.deleteCard(args.data); + scheduleObj.openEditor(args.data[0], 'Add', true); + args.cancel = true; + } + } + function scheduleDragStop(args: ScheduleDragEventArgs): void { + let kanbanElement: Element = closest(args.event.target as Element, '#Kanban'); + if (kanbanElement) { + scheduleObj.deleteEvent(args.data.Id); + removeClass([scheduleObj.element.querySelector('.e-selected-cell')], 'e-selected-cell'); + kanbanObj.openDialog('Add', args.data); + args.cancel = true; + } + } + return ( ++ {getConsultantName(props)}{getConsultantDesignation(props)}++ ); +} +ReactDOM.render(++++++Kanban
+kanbanObj = kanban} keyField="DepartmentName" dataSource={data} cardSettings={{ contentField: "Name", headerField: "Id" }} dragStop={onKanbanDragStop.bind(this)} externalDropId={externalKanbanDropId}> + ++ ++ ++Schedule
+scheduleObj = schedule} cssClass='schedule-drag-drop' width='100%' height='650px' selectedDate={new Date(2018, 7, 1)} + currentView='TimelineDay' resourceHeaderTemplate={resourceHeaderTemplate.bind(this)} + eventSettings={{ + dataSource: scheduleDataSource, + fields: { + subject: { title: 'Patient Name', name: 'Name' }, + startTime: { title: "From", name: "StartTime" }, + endTime: { title: "To", name: "EndTime" }, + description: { title: 'Reason', name: 'Description' } + } + }} + group={{ enableCompactView: false, resources: ['Departments', 'Consultants'] }} + dragStop={scheduleDragStop.bind(this)} > + ++ ++ ++ ++ ++ + + , document.getElementById('kanban')); diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/index.html b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/index.html new file mode 100644 index 000000000..aacdf32c9 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/index.html @@ -0,0 +1,47 @@ + + + + + Kanban to schedule drag and drop + + + + + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/systemjs.config.js b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/systemjs.config.js new file mode 100644 index 000000000..d1bfb47c9 --- /dev/null +++ b/ej2-react/code-snippet/kanban/kanban-to-schedule-cs4/systemjs.config.js @@ -0,0 +1,51 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "//cdn.syncfusion.com/ej2/"}, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-kanban": "syncfusion:ej2-kanban/dist/ej2-kanban.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-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-schedule": "syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-kanban": "syncfusion:ej2-react-kanban/dist/ej2-react-kanban.umd.min.js", + "@syncfusion/ej2-react-schedule": "syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs1/app/index.tsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs1/app/index.tsx index 5878b68a7..71b1a86b7 100644 --- a/ej2-react/code-snippet/kanban/virtual-scrolling-cs1/app/index.tsx +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs1/app/index.tsx @@ -1,3 +1,4 @@ +{% raw %} import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; @@ -93,3 +94,4 @@ class App extends React.Component<{}, {}>{ } }; ReactDOM.render(Loading....+, document.getElementById('kanban')); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs2/app/index.jsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs2/app/index.jsx index d95c75cd9..0c6d06558 100644 --- a/ej2-react/code-snippet/kanban/virtual-scrolling-cs2/app/index.jsx +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs2/app/index.jsx @@ -1,3 +1,4 @@ +{% raw %} import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; @@ -86,4 +87,5 @@ function App() { return kanbanData; } } -ReactDOM.render( , document.getElementById('kanban')); \ No newline at end of file +ReactDOM.render( , document.getElementById('kanban')); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs2/app/index.tsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs2/app/index.tsx index e7b65db06..e15d26737 100644 --- a/ej2-react/code-snippet/kanban/virtual-scrolling-cs2/app/index.tsx +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs2/app/index.tsx @@ -1,3 +1,4 @@ +{% raw %} import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; @@ -91,3 +92,4 @@ function App() { } } ReactDOM.render( , document.getElementById('kanban')); +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/datasource.jsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/datasource.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/datasource.tsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/datasource.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/index.jsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/index.jsx new file mode 100644 index 000000000..b4deffb3d --- /dev/null +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/index.jsx @@ -0,0 +1,94 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; +class App extends React.Component { + constructor() { + super(...arguments); + } + generateKanbanDataVirtualScrollData() { + var kanbanData = []; + var BUG_TASKS = [ + 'UI component not displaying images in IE browser', + 'Button not responding on hover action', + 'Text overlapping in mobile view', + 'Dropdown menu not functioning properly', + 'Form validation error', + 'Alignment issue in tables', + 'Column not loading completely', + 'Broken UI Designs', + 'Font size inconsistency', + 'UI element misaligned on scroll' + ]; + var FEATURE_TASKS = [ + 'Implement new user registration flow', + 'Add pagination to search results', + 'Improve accessibility for visually impaired users', + 'Create custom dashboard for users', + 'Develop user profile editing functionality', + 'Integrate with third-party API for weather data', + 'Implement social media sharing for articles', + 'Add support for multiple languages', + 'Create onboarding tutorial for new users', + 'Implement push notifications for mobile app' + ]; + var EPIC_TASKS = [ + 'Revamp UI design for entire application', + 'Develop mobile application for iOS and Android', + 'Create API for integration with external systems', + 'Implement machine learning algorithms for personalized recommendations', + 'Upgrade database infrastructure for scalability', + 'Integrate with payment gateway for subscription model', + 'Develop chatbot for customer support', + 'Implement real-time collaboration features for team projects', + 'Create analytics dashboard for administrators', + 'Introduce gamification elements to increase user engagement', + ]; + var assignee = ['Andrew Fuller', 'Janet Leverling', 'Steven walker', 'Robert King', 'Margaret hamilt', 'Nancy Davloio', 'Margaret Buchanan', 'Laura Bergs', 'Anton Fleet', 'Jack Kathryn', 'Martin Davolio', 'Fleet Jack']; + var status = ['Open', 'InProgress', 'Review', 'Testing', 'Close']; + var priority = ['Ultra-Critical', 'Critical', 'High', 'Normal', 'Low']; + var types = ['Epic', 'Bug', 'Story']; + var tagsField = ['Feature', 'Bug', 'Enhancement', 'Documentation', 'Automation', 'Mobile', 'Web', 'iOS', 'Safari', 'Chrome', 'Firefox', 'Manual Testing']; + var storyPoints = ['1', '2', '3', '3.5', '4', '4.5', '5', '6', '7.5', '8']; + var count = 600000; + for (let a = 500000, id = 500000; a < count; a++) { + var typeValue = types[Math.floor(Math.random() * types.length)]; + var summary = typeValue === 'Bug' ? BUG_TASKS[Math.floor(Math.random() * BUG_TASKS.length)] : + typeValue === 'Story' ? FEATURE_TASKS[Math.floor(Math.random() * FEATURE_TASKS.length)] : + EPIC_TASKS[Math.floor(Math.random() * EPIC_TASKS.length)]; + kanbanData.push({ + Id: id, + Type: typeValue, + Priority: priority[Math.floor(Math.random() * priority.length)], + Status: status[Math.floor(Math.random() * status.length)], + Assignee: assignee[Math.floor(Math.random() * assignee.length)], + StoryPoints: storyPoints[Math.floor(Math.random() * storyPoints.length)], + Tags: [tagsField[Math.floor(Math.random() * tagsField.length)], tagsField[Math.floor(Math.random() * tagsField.length)]], + Title: 'Task ' + id, + Summary: summary, + }); + id++; + } + return kanbanData; + } + render() { + return + ; + } +} +; +ReactDOM.render(+ ++ + + + , document.getElementById('kanban')); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/index.tsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/index.tsx new file mode 100644 index 000000000..475e2aebf --- /dev/null +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/app/index.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; + +class App extends React.Component<{}, {}>{ + constructor() { + super(...arguments); + } + private generateKanbanDataVirtualScrollData(): Record + + } +}; +ReactDOM.render(+ ++ + + + , document.getElementById('kanban')); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/index.html b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/index.html new file mode 100644 index 000000000..126722677 --- /dev/null +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/index.html @@ -0,0 +1,39 @@ + + + + + Kanban Local Data + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/systemjs.config.js b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/systemjs.config.js new file mode 100644 index 000000000..d6175340f --- /dev/null +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs3/systemjs.config.js @@ -0,0 +1,45 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "//cdn.syncfusion.com/ej2/"}, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-kanban": "syncfusion:ej2-kanban/dist/ej2-kanban.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-kanban": "syncfusion:ej2-react-kanban/dist/ej2-react-kanban.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/datasource.jsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/datasource.jsx new file mode 100644 index 000000000..e69de29bb diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/datasource.tsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/datasource.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/index.jsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/index.jsx new file mode 100644 index 000000000..d95c75cd9 --- /dev/null +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/index.jsx @@ -0,0 +1,89 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; +function App() { + return (Loading....++ ); + function generateKanbanDataVirtualScrollData() { + var kanbanData = []; + var BUG_TASKS = [ + 'UI component not displaying images in IE browser', + 'Button not responding on hover action', + 'Text overlapping in mobile view', + 'Dropdown menu not functioning properly', + 'Form validation error', + 'Alignment issue in tables', + 'Column not loading completely', + 'Broken UI Designs', + 'Font size inconsistency', + 'UI element misaligned on scroll' + ]; + var FEATURE_TASKS = [ + 'Implement new user registration flow', + 'Add pagination to search results', + 'Improve accessibility for visually impaired users', + 'Create custom dashboard for users', + 'Develop user profile editing functionality', + 'Integrate with third-party API for weather data', + 'Implement social media sharing for articles', + 'Add support for multiple languages', + 'Create onboarding tutorial for new users', + 'Implement push notifications for mobile app' + ]; + var EPIC_TASKS = [ + 'Revamp UI design for entire application', + 'Develop mobile application for iOS and Android', + 'Create API for integration with external systems', + 'Implement machine learning algorithms for personalized recommendations', + 'Upgrade database infrastructure for scalability', + 'Integrate with payment gateway for subscription model', + 'Develop chatbot for customer support', + 'Implement real-time collaboration features for team projects', + 'Create analytics dashboard for administrators', + 'Introduce gamification elements to increase user engagement', + ]; + var assignee = ['Andrew Fuller', 'Janet Leverling', 'Steven walker', 'Robert King', 'Margaret hamilt', 'Nancy Davloio', 'Margaret Buchanan', 'Laura Bergs', 'Anton Fleet', 'Jack Kathryn', 'Martin Davolio', 'Fleet Jack']; + var status = ['Open', 'InProgress', 'Review', 'Testing', 'Close']; + var priority = ['Ultra-Critical', 'Critical', 'High', 'Normal', 'Low']; + var types = ['Epic', 'Bug', 'Story']; + var tagsField = ['Feature', 'Bug', 'Enhancement', 'Documentation', 'Automation', 'Mobile', 'Web', 'iOS', 'Safari', 'Chrome', 'Firefox', 'Manual Testing']; + var storyPoints = ['1', '2', '3', '3.5', '4', '4.5', '5', '6', '7.5', '8']; + var count = 600000; + for (let a = 500000, id = 500000; a < count; a++) { + var typeValue = types[Math.floor(Math.random() * types.length)]; + var summary = typeValue === 'Bug' ? BUG_TASKS[Math.floor(Math.random() * BUG_TASKS.length)] : + typeValue === 'Story' ? FEATURE_TASKS[Math.floor(Math.random() * FEATURE_TASKS.length)] : + EPIC_TASKS[Math.floor(Math.random() * EPIC_TASKS.length)]; + kanbanData.push({ + Id: id, + Type: typeValue, + Priority: priority[Math.floor(Math.random() * priority.length)], + Status: status[Math.floor(Math.random() * status.length)], + Assignee: assignee[Math.floor(Math.random() * assignee.length)], + StoryPoints: storyPoints[Math.floor(Math.random() * storyPoints.length)], + Tags: [tagsField[Math.floor(Math.random() * tagsField.length)], tagsField[Math.floor(Math.random() * tagsField.length)]], + Title: 'Task ' + id, + Summary: summary, + }); + id++; + } + return kanbanData; + } +} +ReactDOM.render(+ ++ + + + , document.getElementById('kanban')); \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/index.tsx b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/index.tsx new file mode 100644 index 000000000..e7b65db06 --- /dev/null +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/app/index.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban"; + +function App() { + return ( + + + ); + function generateKanbanDataVirtualScrollData(): Record+ ++ + + + , document.getElementById('kanban')); diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/index.html b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/index.html new file mode 100644 index 000000000..126722677 --- /dev/null +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/index.html @@ -0,0 +1,39 @@ + + + + + Kanban Local Data + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/systemjs.config.js b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/systemjs.config.js new file mode 100644 index 000000000..b95491253 --- /dev/null +++ b/ej2-react/code-snippet/kanban/virtual-scrolling-cs4/systemjs.config.js @@ -0,0 +1,45 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "//cdn.syncfusion.com/ej2/"}, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-kanban": "syncfusion:ej2-kanban/dist/ej2-kanban.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-kanban": "syncfusion:ej2-react-kanban/dist/ej2-react-kanban.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/App.jsx new file mode 100644 index 000000000..5e62ac306 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/App.jsx @@ -0,0 +1,13 @@ +/** + * Rich Text Editor - Clipboard Cleanup Sample + */ +import { HtmlEditor, Image, Inject, Link, ClipboardCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; +class App extends React.Component { + render() { + return (Loading....++ ); + } +} +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/App.tsx new file mode 100644 index 000000000..53fac97b5 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/App.tsx @@ -0,0 +1,18 @@ +/** + * Rich Text Editor - Clipboard Cleanup Sample + */ +import { HtmlEditor, Image, Inject, Link, ClipboardCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +class App extends React.Component<{},{}> { + + public render() { + return ( ++ + + ); + } +} + +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/index.html b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/index.html new file mode 100644 index 000000000..f7f99b77d --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Rich Text Editor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/systemjs.config.js new file mode 100644 index 000000000..da68b494f --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs1/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.1/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/App.jsx new file mode 100644 index 000000000..e0b583e17 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/App.jsx @@ -0,0 +1,12 @@ +/** + * Rich Text Editor - Clipboard Cleanup Sample + */ +import { HtmlEditor, Image, Inject, Link, ClipboardCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; +function App() { + + return (Loading....++ ); +} +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/App.tsx new file mode 100644 index 000000000..e0f5d6328 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/App.tsx @@ -0,0 +1,16 @@ +/** + * Rich Text Editor - Clipboard Cleanup Sample + */ +import { HtmlEditor, Image, Inject, Link, ClipboardCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +function App() { + + return ( ++ + + ); +} + +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/index.html b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/index.html new file mode 100644 index 000000000..f7f99b77d --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Rich Text Editor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/systemjs.config.js new file mode 100644 index 000000000..2872bf626 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-cs2/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.1/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/App.jsx new file mode 100644 index 000000000..cdb544d6a --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/App.jsx @@ -0,0 +1,18 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar, ClipboardCleanup } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +class App extends React.Component { + onBeforeClipboardWrite(args) { + if (args.operation === 'copy') { + args.htmlContent = 'Loading....+This is customized content triggered while copy event
'; + args.plainTextContent = 'This is customized content triggered while copy event'; + } + } + + render() { + return (+ ); + } +} +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/App.tsx new file mode 100644 index 000000000..c0466e1f6 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/App.tsx @@ -0,0 +1,21 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar, ClipboardCleanup, ClipboardWriteEventArgs} from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +class App extends React.Component<{},{}> { + public onBeforeClipboardWrite(args: ClipboardWriteEventArgs) { + if (args.operation === 'copy') { + args.htmlContent = '+ This is customized content triggered while copy event
'; + args.plainTextContent = 'This is customized content triggered while copy event'; + } + } + + public render() { + return ( ++ + ); + } +} + +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/index.html b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/index.html new file mode 100644 index 000000000..577f52a5e --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Rich Text Editor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/systemjs.config.js new file mode 100644 index 000000000..da68b494f --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.1/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/App.jsx new file mode 100644 index 000000000..7587582b8 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/App.jsx @@ -0,0 +1,15 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar, ClipboardCleanup} from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +function App() { + const onBeforeClipboardWrite = (args) => { + if (args.operation === 'copy') { + args.htmlContent = 'Loading....+This is customized content triggered while copy event
'; + args.plainTextContent = 'This is customized content triggered while copy event'; + } + }; + return (+ ); +} +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/App.tsx new file mode 100644 index 000000000..ed6def5c8 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/App.tsx @@ -0,0 +1,19 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar, ClipboardCleanup, ClipboardWriteEventArgs } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +function App() { + const onBeforeClipboardWrite = (args: ClipboardWriteEventArgs) => { + if (args.operation === 'copy') { + args.htmlContent = '+ This is customized content triggered while copy event
'; + args.plainTextContent = 'This is customized content triggered while copy event'; + } + }; + + return ( ++ + ); +} + +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/index.html b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/index.html new file mode 100644 index 000000000..577f52a5e --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Rich Text Editor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/systemjs.config.js new file mode 100644 index 000000000..2872bf626 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.1/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/App.jsx new file mode 100644 index 000000000..36c30e9f3 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/App.jsx @@ -0,0 +1,29 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +function App() { + let rteValue = "Loading....+The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.
Key features:
+ ); +} +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/App.tsx new file mode 100644 index 000000000..527b5fd8e --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/App.tsx @@ -0,0 +1,39 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +class App extends React.Component<{},{}> { + + private rteValue: string = "+ The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.
Key features:
+ + ); + } +} + +export default App; + + + diff --git a/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/line-height-cs1/index.html b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/index.html new file mode 100644 index 000000000..577f52a5e --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Rich Text Editor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/line-height-cs1/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/systemjs.config.js new file mode 100644 index 000000000..474c63bc8 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height-cs1/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/line-height/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/line-height/app/App.jsx new file mode 100644 index 000000000..446978bf1 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height/app/App.jsx @@ -0,0 +1,15 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +function App() { + let rteValue = "Loading....+The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.
Key features:
+ ); +} +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/line-height/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/line-height/app/App.tsx new file mode 100644 index 000000000..3933bd8bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height/app/App.tsx @@ -0,0 +1,21 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +class App extends React.Component<{},{}> { + + private rteValue: string = "+ The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.
Key features:
+ + ); + } +} + +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/line-height/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/line-height/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/line-height/index.html b/ej2-react/code-snippet/rich-text-editor/line-height/index.html new file mode 100644 index 000000000..3a2a71125 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Rich Text Editor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/line-height/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/line-height/systemjs.config.js new file mode 100644 index 000000000..474c63bc8 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/line-height/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/app/App.jsx index 03395d7f0..f78197e24 100644 --- a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/app/App.jsx +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/app/App.jsx @@ -1,16 +1,6 @@ {% raw %} import React from 'react'; -import { - RichTextEditorComponent, - HtmlEditor, - Toolbar, - Image, - Link, - QuickToolbar, - Table, - PasteCleanup, - Inject, -} from '@syncfusion/ej2-react-richtexteditor'; +import {RichTextEditorComponent, HtmlEditor, Toolbar, Image, Link, QuickToolbar, Table, PasteCleanup, Inject} from '@syncfusion/ej2-react-richtexteditor'; import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons'; import { MentionComponent } from '@syncfusion/ej2-react-dropdowns'; import { NodeSelection } from '@syncfusion/ej2-richtexteditor'; diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/app/App.tsx index c52f9b525..2adb969fd 100644 --- a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/app/App.tsx +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/app/App.tsx @@ -1,210 +1,178 @@ {% raw %} import { RichTextEditorComponent, Inject, IToolbarItems, HtmlEditor, Toolbar, ToolbarSettingsModel, Image, Link, NodeSelection, QuickToolbar, ActionCompleteEventArgs, ActionBeginEventArgs, Table, PasteCleanup } from '@syncfusion/ej2-react-richtexteditor'; import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons'; -import { MentionComponent } from '@syncfusion/ej2-react-dropdowns'; -import * as ReactDOM from 'react-dom'; +import { MentionComponent, FieldsModel } from '@syncfusion/ej2-react-dropdowns'; import * as React from 'react'; -class App extends React.Component<{},{}> { - - private rteObj: RichTextEditorComponent | null = null; - private mentionObj: MentionComponent | null = null; - private range: Range = new Range(); - private selection: NodeSelection = new NodeSelection(); - private saveSelection: any = null; - private value: string = `Loading....+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,
` - - private items: (string | IToolbarItems)[] = ['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' - ] - - //Rich Text Editor ToolbarSettings - private toolbarSettings: ToolbarSettingsModel = { - items: this.items - }; - - private mentionChar: "{{"; - - private 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' }, - ] - - private 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.' +class App extends React.Component<{}, {}> { + private rteObj: RichTextEditorComponent | null = null; + private mentionObj: MentionComponent | null = null; + private range: Range = new Range(); + private selection: NodeSelection = new NodeSelection(); + private saveSelection: any = null; + + private value: string = `
The {{CompanyName}} TeamDear {{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,
`; + + private items: (string | IToolbarItems)[] = [ + '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' + ]; + + private toolbarSettings: ToolbarSettingsModel = { items: this.items }; + + private mentionChar: string = "{{"; + private placeholder: string = "Type {{ and tag a field"; + + private itemsName: { text: string }[] = [ + { 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' } + ]; + + private 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.' + }; + + private textToValueMap: { [key: string]: string } = { + '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' + }; + + private data: { text: string; value: string }[] = [ + { 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' } + ]; + + private fieldsData: FieldsModel = { text: 'text', value: 'value' }; + + private actionBegin = (args: ActionBeginEventArgs) => { + if (args.requestType === 'EnterAction' && this.mentionObj?.element.classList.contains('e-popup-open')) { + args.cancel = true; } - - private 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' - } - - private data: [ - { 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' }, - ] - - private fieldsData: { text: 'text', value: 'value' } - - actionBegin(args: ActionBeginEventArgs) { - if ( - args.requestType === 'EnterAction' && - this.mentionObj.element.classList.contains('e-popup-open') - ) { - args.cancel = true; - } + }; + + private actionComplete = (e: ActionCompleteEventArgs) => { + const tb = this.rteObj?.getToolbar(); + const merge = tb?.querySelector('#merge_data')?.parentElement; + const insert = tb?.querySelector('#insertField')?.parentElement; + if (e.requestType === 'SourceCode') { + merge?.classList.add('e-overlay'); + insert?.classList.add('e-overlay'); + } else if (e.requestType === 'Preview') { + merge?.classList.remove('e-overlay'); + insert?.classList.remove('e-overlay'); } - - actionComplete(e: ActionCompleteEventArgs) { - if (e.requestType === 'SourceCode') { - this.rteObj.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay'); - this.rteObj.getToolbar().querySelector('#insertField').parentElement.classList.add('e-overlay'); - } else if (e.requestType === 'Preview') { - this.rteObj.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay'); - this.rteObj.getToolbar().querySelector('#insertField').parentElement.classList.remove('e-overlay'); - } - } - - - blur() { - this.range = this.selection.getRange(document); - this.saveSelection = this.selection.save(this.range, document); - } - - onDropDownClose() { - if (this.rteObj) { - this.rteObj.focusIn(); - } - } - - onItemSelect(args: { item: { text: string; }; }) { - if (args.item.text != null) { - const value = this.textToValueMap[args.item.text]; - const trimmedValue = value.trim(); - this.rteObj.formatter.editorManager.nodeSelection.restore(); - this.rteObj!.executeCommand( - 'insertHTML', - `{{${trimmedValue}}} `, - { undo: true } - ); - } - } - - displayTemplate(data: { value: string; }) { - return ( -
The {{CompanyName}} Team- {data.value}}} - - ); - } - - onClickHandler() { - if (this.rteObj) { - let editorContent = this.rteObj.value; - let mergedContent = this.replacePlaceholders(editorContent, this.placeholderData); - if (this.rteObj.formatter.getUndoRedoStack().length === 0) { - this.rteObj.formatter.saveData(); - } - this.rteObj.value = mergedContent; - this.rteObj.formatter.saveData(); - } else { - console.log('MailMergeEditor is not initialized.'); - } + }; + + private blur = () => { + this.range = this.selection.getRange(document); + this.saveSelection = this.selection.save(this.range, document); + }; + + private onDropDownClose = () => this.rteObj?.focusIn(); + + private onItemSelect = (args: { item: { text: string } }) => { + if (!args.item.text) return; + const val = this.textToValueMap[args.item.text].trim(); + this.rteObj?.formatter.editorManager.nodeSelection.restore(); + this.rteObj?.executeCommand( + 'insertHTML', + `{{${val}}} `, + { undo: true } + ); + }; + + +private displayTemplate = (data: { value: string }) => ( + {`{{${data.value}}}`} +); + + private onClickHandler = () => { + if (!this.rteObj) return; + const content = this.rteObj.value; + const merged = this.replacePlaceholders(content, this.placeholderData); + if (this.rteObj.formatter.getUndoRedoStack().length === 0) { + this.rteObj.formatter.saveData(); } + this.rteObj.value = merged; + this.rteObj.formatter.saveData(); + }; - replacePlaceholders(template: string, data: { [key: string]: string; }) { - return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => { - const value = data[key.trim()]; - return value !== undefined ? value : match; - }); - } + private replacePlaceholders = (template: string, data: { [k: string]: string }) => + template.replace(/{{\s*(\w+)\s*}}/g, (_, key) => data[key.trim()] ?? _); public render() { return (+ ); } } diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js index 3b166944c..047e6e459 100644 --- a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs1/systemjs.config.js @@ -1,56 +1,64 @@ System.config({ - transpiler: "ts", - typescriptOptions: { - target: "es5", - module: "commonjs", - moduleResolution: "node", - emitDecoratorMetadata: true, - experimentalDecorators: true, - "jsx": "react" - }, - meta: { - 'typescript': { - "exports": "ts" - } - }, - paths: { - "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" - }, - map: { - app: 'app', - ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", - typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", - "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", - "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", - "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", - "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", - "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", - "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", - "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", - "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", - "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", - "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", -"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", -"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", - }, - packages: { - 'app': { main: 'index', defaultExtension: 'tsx' }, - } + transpiler: "ts", + typescriptOptions: { + target: "es2017", + module: "system", // <-- SystemJS needs "system" + moduleResolution: "node", + jsx: "react", + allowSyntheticDefaultImports: true, + esModuleInterop: true, + experimentalDecorators: true, + emitDecoratorMetadata: true + }, + meta: { + 'typescript': { exports: "ts" }, + '*.tsx': { loader: 'ts' } + }, + + paths: { "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" }, + + map: { + app: 'app', + ts: 'https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js', + typescript: 'https://unpkg.com/typescript@4.9.5/lib/typescript.js', + + // ---- CORE PACKAGES (unchanged) ---- + "@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-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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", + + // ---- REACT WRAPPERS (CORRECTED) ---- + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + + "react": "https://unpkg.com/react@16.14.0/umd/react.development.js", + "react-dom": "https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js" + }, + + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' } + } }); System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs2/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs2/systemjs.config.js index 474c63bc8..5b7ce3b11 100644 --- a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs2/systemjs.config.js +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs2/systemjs.config.js @@ -40,10 +40,13 @@ System.config({ "@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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", - "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", - "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", - "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", }, diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/App.jsx new file mode 100644 index 000000000..c673511e8 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/App.jsx @@ -0,0 +1,250 @@ +import React from 'react'; +import {RichTextEditorComponent, HtmlEditor, Toolbar, Image, Link, QuickToolbar, Table, PasteCleanup, Inject} from '@syncfusion/ej2-react-richtexteditor'; +import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons'; +import { MentionComponent } from '@syncfusion/ej2-react-dropdowns'; +import { NodeSelection } from '@syncfusion/ej2-richtexteditor'; + +class App extends React.Component { + constructor(props) { + super(props); + this.rteObj = null; + this.mentionObj = null; + this.range = new Range(); + this.selection = new NodeSelection(); + this.saveSelection = null; + + this.value = `{ this.rteObj = richtexteditor; }} - value={this.value} - id="mailMergeEditor" - toolbarSettings={this.toolbarSettings} - placeholder="Type @ and tag the name" - blur={this.blur} - actionComplete={this.actionComplete} - actionBegin={this.actionBegin} - saveInterval={1} + ref={r => (this.rteObj = r)} + value={this.value} + id="mailMergeEditor" + toolbarSettings={this.toolbarSettings} + placeholder={this.placeholder} + blur={this.blur} + actionComplete={this.actionComplete} + actionBegin={this.actionBegin} + saveInterval={1} > - + ++ + className="e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu" + items={this.itemsName} + content='Insert Field' + select={this.onItemSelect} + close={this.onDropDownClose} + id="insertField" + /> + { this.mentionObj = scope; }} - id="mentionEditor" - target="#mailMergeEditor" - mentionChar={this.mentionChar} - showMentionChar={true} - allowSpaces={true} - dataSource={this.data} - fields={this.fieldsData} - popupWidth="250px" - popupHeight="200px" - displayTemplate={this.displayTemplate} + ref={m => (this.mentionObj = m)} + id="mentionEditor" + target="#mailMergeEditor" + mentionChar={this.mentionChar} + showMentionChar={true} + allowSpaces={true} + dataSource={this.data} + fields={this.fieldsData} + popupWidth="250px" + popupHeight="200px" + displayTemplate={this.displayTemplate} /> - 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,
`; + + this.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', + ]; + + this.toolbarSettings = { + items: this.items, + }; + + this.mentionChar = '{{'; + + this.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' }, + ]; + + this.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.', + }; + + this.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', + }; + + this.data = this.itemsName.map((item) => ({ + text: item.text, + value: this.textToValueMap[item.text], + })); + + this.fieldsData = { text: 'text', value: 'value' }; + } + + actionBegin = (args) => { + if ( + args.requestType === 'EnterAction' && + this.mentionObj?.element.classList.contains('e-popup-open') + ) { + args.cancel = true; + } + }; + + actionComplete = (e) => { + const toolbar = this.rteObj?.getToolbar(); + if (!toolbar) return; + + const mergeBtn = toolbar.querySelector('#merge_data')?.parentElement; + const insertBtn = toolbar.querySelector('#insertField')?.parentElement; + + if (e.requestType === 'SourceCode') { + mergeBtn?.classList.add('e-overlay'); + insertBtn?.classList.add('e-overlay'); + } else if (e.requestType === 'Preview') { + mergeBtn?.classList.remove('e-overlay'); + insertBtn?.classList.remove('e-overlay'); + } + }; + + blur = () => { + this.range = this.selection.getRange(document); + this.saveSelection = this.selection.save(this.range, document); + }; + + onDropDownClose = () => { + if (this.rteObj) { + this.rteObj.focusIn(); + } + }; + + onItemSelect = (args) => { + if (args.item.text) { + const value = this.textToValueMap[args.item.text]; + const trimmedValue = value.trim(); + this.rteObj.formatter.editorManager.nodeSelection.restore(); + this.rteObj.executeCommand( + 'insertHTML', + `{{${trimmedValue}}} `, + { undo: true } + ); + } + }; + + displayTemplate = (data) => { + return <>{`${data.value}}}`}; + }; + onClickHandler = () => { + if (this.rteObj) { + const editorContent = this.rteObj.value; + const mergedContent = this.replacePlaceholders( + editorContent, + this.placeholderData + ); + if (this.rteObj.formatter.getUndoRedoStack().length === 0) { + this.rteObj.formatter.saveData(); + } + this.rteObj.value = mergedContent; + this.rteObj.formatter.saveData(); + } 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; + }); + }; + + render() { + return ( +
The {{CompanyName}} Team++ ); + } +} + +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/App.tsx new file mode 100644 index 000000000..2adb969fd --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/App.tsx @@ -0,0 +1,181 @@ +{% raw %} +import { RichTextEditorComponent, Inject, IToolbarItems, HtmlEditor, Toolbar, ToolbarSettingsModel, Image, Link, NodeSelection, QuickToolbar, ActionCompleteEventArgs, ActionBeginEventArgs, Table, PasteCleanup } from '@syncfusion/ej2-react-richtexteditor'; +import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons'; +import { MentionComponent, FieldsModel } from '@syncfusion/ej2-react-dropdowns'; +import * as React from 'react'; + +class App extends React.Component<{}, {}> { + private rteObj: RichTextEditorComponent | null = null; + private mentionObj: MentionComponent | null = null; + private range: Range = new Range(); + private selection: NodeSelection = new NodeSelection(); + private saveSelection: any = null; + + private value: string = `{ + this.rteObj = richtexteditor; + }} + value={this.value} + id="mailMergeEditor" + toolbarSettings={this.toolbarSettings} + placeholder="Type @ and tag the name" + blur={this.blur} + actionComplete={this.actionComplete} + actionBegin={this.actionBegin} + saveInterval={1} + > + + + + ++ + Insert Field + + } + select={this.onItemSelect} + close={this.onDropDownClose} + id="insertField" + /> + + { + this.mentionObj = scope; + }} + id="mentionEditor" + target="#mailMergeEditor" + mentionChar={this.mentionChar} + showMentionChar={true} + allowSpaces={true} + dataSource={this.data} + fields={this.fieldsData} + popupWidth="250px" + popupHeight="200px" + displayTemplate={this.displayTemplate} + /> + 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,
`; + + private items: (string | IToolbarItems)[] = [ + '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' + ]; + + private toolbarSettings: ToolbarSettingsModel = { items: this.items }; + + private mentionChar: string = "{{"; + private placeholder: string = "Type {{ and tag a field"; + + private itemsName: { text: string }[] = [ + { 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' } + ]; + + private 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.' + }; + + private textToValueMap: { [key: string]: string } = { + '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' + }; + + private data: { text: string; value: string }[] = [ + { 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' } + ]; + + private fieldsData: FieldsModel = { text: 'text', value: 'value' }; + + private actionBegin = (args: ActionBeginEventArgs) => { + if (args.requestType === 'EnterAction' && this.mentionObj?.element.classList.contains('e-popup-open')) { + args.cancel = true; + } + }; + + private actionComplete = (e: ActionCompleteEventArgs) => { + const tb = this.rteObj?.getToolbar(); + const merge = tb?.querySelector('#merge_data')?.parentElement; + const insert = tb?.querySelector('#insertField')?.parentElement; + if (e.requestType === 'SourceCode') { + merge?.classList.add('e-overlay'); + insert?.classList.add('e-overlay'); + } else if (e.requestType === 'Preview') { + merge?.classList.remove('e-overlay'); + insert?.classList.remove('e-overlay'); + } + }; + + private blur = () => { + this.range = this.selection.getRange(document); + this.saveSelection = this.selection.save(this.range, document); + }; + + private onDropDownClose = () => this.rteObj?.focusIn(); + + private onItemSelect = (args: { item: { text: string } }) => { + if (!args.item.text) return; + const val = this.textToValueMap[args.item.text].trim(); + this.rteObj?.formatter.editorManager.nodeSelection.restore(); + this.rteObj?.executeCommand( + 'insertHTML', + `{{${val}}} `, + { undo: true } + ); + }; + + +private displayTemplate = (data: { value: string }) => ( + {`{{${data.value}}}`} +); + + private onClickHandler = () => { + if (!this.rteObj) return; + const content = this.rteObj.value; + const merged = this.replacePlaceholders(content, this.placeholderData); + if (this.rteObj.formatter.getUndoRedoStack().length === 0) { + this.rteObj.formatter.saveData(); + } + this.rteObj.value = merged; + this.rteObj.formatter.saveData(); + }; + + private replacePlaceholders = (template: string, data: { [k: string]: string }) => + template.replace(/{{\s*(\w+)\s*}}/g, (_, key) => data[key.trim()] ?? _); + + public render() { + return ( +
The {{CompanyName}} Team++ ); + } +} + +export default App; +{% endraw %} \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render((this.rteObj = r)} + value={this.value} + id="mailMergeEditor" + toolbarSettings={this.toolbarSettings} + placeholder={this.placeholder} + blur={this.blur} + actionComplete={this.actionComplete} + actionBegin={this.actionBegin} + saveInterval={1} + > + + + + ++ + + (this.mentionObj = m)} + id="mentionEditor" + target="#mailMergeEditor" + mentionChar={this.mentionChar} + showMentionChar={true} + allowSpaces={true} + dataSource={this.data} + fields={this.fieldsData} + popupWidth="250px" + popupHeight="200px" + displayTemplate={this.displayTemplate} + /> + , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/index.html b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/index.html new file mode 100644 index 000000000..577f52a5e --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Rich Text Editor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/systemjs.config.js new file mode 100644 index 000000000..047e6e459 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs3/systemjs.config.js @@ -0,0 +1,64 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es2017", + module: "system", // <-- SystemJS needs "system" + moduleResolution: "node", + jsx: "react", + allowSyntheticDefaultImports: true, + esModuleInterop: true, + experimentalDecorators: true, + emitDecoratorMetadata: true + }, + + meta: { + 'typescript': { exports: "ts" }, + '*.tsx': { loader: 'ts' } + }, + + paths: { "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" }, + + map: { + app: 'app', + ts: 'https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js', + typescript: 'https://unpkg.com/typescript@4.9.5/lib/typescript.js', + + // ---- CORE PACKAGES (unchanged) ---- + "@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-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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", + + // ---- REACT WRAPPERS (CORRECTED) ---- + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + + "react": "https://unpkg.com/react@16.14.0/umd/react.development.js", + "react-dom": "https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js" + }, + + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' } + } +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/App.jsx new file mode 100644 index 000000000..3a33e1282 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/App.jsx @@ -0,0 +1,148 @@ +import { HtmlEditor, Image, Inject, IToolbarItems, Link, QuickToolbar, RichTextEditorComponent, ToolbarSettingsModel, Toolbar, NodeSelection, ActionCompleteEventArgs, ActionBeginEventArgs, Table, PasteCleanup } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; +import { DropDownButtonComponent, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons'; +import { MentionComponent } from '@syncfusion/ej2-react-dropdowns'; + +function App() { + let value = `Loading....+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,
`; + const 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' + ]; + //Rich Text Editor ToolbarSettings + const toolbarSettings = { + items: items + }; + let mentionChar = "{{"; + let rteObj; + let mentionObj; + let range = new Range(); + let selection = new NodeSelection(); + let saveSelection; + let 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' }, + ]; + const 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.' + }; + let 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' + }; + let data = [ + { 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' }, + ]; + const fieldsData = { text: 'text', value: 'value' }; + function displayTemplate(data) { + return (
The {{CompanyName}} Team+ {data.value}}} + ); + } + function actionBegin(args) { + if (args.requestType === 'EnterAction' && + mentionObj.element.classList.contains('e-popup-open')) { + args.cancel = true; + } + } + function actionComplete(e) { + if (e.requestType === 'SourceCode') { + rteObj.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay'); + rteObj.getToolbar().querySelector('#insertField').parentElement.classList.add('e-overlay'); + } + else if (e.requestType === 'Preview') { + rteObj.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay'); + rteObj.getToolbar().querySelector('#insertField').parentElement.classList.remove('e-overlay'); + } + } + function blur() { + const range = selection.getRange(document); + const saveSelection = selection.save(range, document); + } + function onDropDownClose() { + if (rteObj) { + rteObj.focusIn(); + } + } + function onItemSelect(args) { + if (args.item.text != null) { + const value = textToValueMap[args.item.text]; + const trimmedValue = value.trim(); + rteObj.formatter.editorManager.nodeSelection.restore(); + rteObj.executeCommand('insertHTML', `{{${trimmedValue}}} `, { undo: true }); + } + } + function onClickHandler(args) { + if (rteObj) { + let editorContent = rteObj.value; + let mergedContent = replacePlaceholders(editorContent, placeholderData); + if (rteObj.formatter.getUndoRedoStack().length === 0) { + rteObj.formatter.saveData(); + } + rteObj.value = mergedContent; + rteObj.formatter.saveData(); + } + else { + console.log('MailMergeEditor is not initialized.'); + } + } + ; + function replacePlaceholders(template, data) { + return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => { + const value = data[key.trim()]; + return value !== undefined ? value : match; + }); + } + + return (+); +} +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/App.tsx new file mode 100644 index 000000000..7ac98b976 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/App.tsx @@ -0,0 +1,179 @@ +import { HtmlEditor, Image, Inject, IToolbarItems, Link, QuickToolbar, RichTextEditorComponent, ToolbarSettingsModel, Toolbar, NodeSelection, ActionCompleteEventArgs, ActionBeginEventArgs, Table, PasteCleanup } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; +import { DropDownButtonComponent, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons'; +import { MentionComponent } from '@syncfusion/ej2-react-dropdowns'; + +function App() { + let value: string = `{ rteObj = richtexteditor; }} value={value} id="mailMergeEditor" toolbarSettings={toolbarSettings} placeholder="Type @ and tag the name" blur={blur} actionBegin={actionBegin} actionComplete={actionComplete} saveInterval={1}> + + ++ + { mentionObj = scope; }} id="mentionEditor" target="#mailMergeEditor" mentionChar={mentionChar} showMentionChar={true} allowSpaces={true} dataSource={data} fields={fieldsData} popupWidth="250px" popupHeight="200px" displayTemplate={displayTemplate}> +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,
`; + + const items: (string | IToolbarItems)[] = ['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' + ] + //Rich Text Editor ToolbarSettings + const toolbarSettings: ToolbarSettingsModel = { + items: items + }; + let mentionChar: string = "{{"; + let rteObj: RichTextEditorComponent | undefined; + let mentionObj: MentionComponent | undefined; + let range: Range = new Range(); + let selection: NodeSelection = new NodeSelection(); + let saveSelection: any; + + let itemsName: { text: string }[] = [ + { 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' }, + ]; + + const placeholderData: { [key: string]: string } = { + 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.' + }; + + let textToValueMap: { [key: string]: string } = { + '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' + }; + + let data: { text: string; value: string }[] = [ + { 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' }, + ]; + + const fieldsData: { text: string; value: string } = { text: 'text', value: 'value' }; + + function displayTemplate(data: { value: string }) { + return (
The {{CompanyName}} Team+ {data.value}}} + ); + } + + function actionBegin(args: ActionBeginEventArgs) { + if ( + args.requestType === 'EnterAction' && + mentionObj.element.classList.contains('e-popup-open') + ) { + args.cancel = true; + } + } + + function actionComplete(e: ActionCompleteEventArgs) { + if (e.requestType === 'SourceCode') { + rteObj.getToolbar().querySelector('#merge_data').parentElement.classList.add('e-overlay'); + rteObj.getToolbar().querySelector('#insertField').parentElement.classList.add('e-overlay'); + } else if (e.requestType === 'Preview') { + rteObj.getToolbar().querySelector('#merge_data').parentElement.classList.remove('e-overlay'); + rteObj.getToolbar().querySelector('#insertField').parentElement.classList.remove('e-overlay'); + } + } + function blur() { + const range = selection.getRange(document); + const saveSelection = selection.save(range, document); + } + + function onDropDownClose() { + if (rteObj) { + rteObj.focusIn(); + } + } + + function onItemSelect(args: { item: { text: string } }) { + if (args.item.text != null) { + const value = textToValueMap[args.item.text]; + const trimmedValue = value.trim(); + rteObj.formatter.editorManager.nodeSelection.restore(); + rteObj.executeCommand( + 'insertHTML', + `{{${trimmedValue}}} `, + { undo: true } + ); + } + } + + function onClickHandler(args: any): void { + if (rteObj) { + let editorContent: string = rteObj.value; + let mergedContent: string = replacePlaceholders(editorContent, placeholderData); + if (rteObj.formatter.getUndoRedoStack().length === 0) { + rteObj.formatter.saveData(); + } + rteObj.value = mergedContent; + rteObj.formatter.saveData(); + } else { + console.log('MailMergeEditor is not initialized.'); + } + }; + + function replacePlaceholders(template: string, data: { [key: string]: string }): string { + return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => { + const value = data[key.trim()]; + return value !== undefined ? value : match; + }); + }; + + return ( +++ ); +} + +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render({ rteObj = richtexteditor; }} value={value} id="mailMergeEditor" toolbarSettings={toolbarSettings} placeholder="Type @ and tag the name" blur={blur} actionBegin={actionBegin} actionComplete={actionComplete} saveInterval={1}> + + ++ + { mentionObj = scope; }} id="mentionEditor" target="#mailMergeEditor" mentionChar={mentionChar} showMentionChar={true} allowSpaces={true} dataSource={data} fields={fieldsData} popupWidth="250px" popupHeight="200px" displayTemplate={displayTemplate}> +, document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/index.html b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/index.html new file mode 100644 index 000000000..577f52a5e --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/index.html @@ -0,0 +1,40 @@ + + + + + Syncfusion React Rich Text Editor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/systemjs.config.js new file mode 100644 index 000000000..5b7ce3b11 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/mail-merge-cs4/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-splitbuttons": "syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/App.jsx new file mode 100644 index 000000000..e9dd864bd --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/App.jsx @@ -0,0 +1,17 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, AutoFormat } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +class App extends React.Component { + + rteValue = `Loading....+Markdown Auto-Format
+The Markdown Auto-Format feature automatically converts Markdown syntax into clean, semantic HTML within the Rich Text Editor. This capability streamlines content creation by allowing you to write using familiar Markdown patterns while ensuring consistent HTML output.
+When enabled, the editor supports both inline formatting (such as bold and italic) and block-level elements (such as headings and lists). As you type, Markdown syntax is instantly transformed into its corresponding HTML tags, delivering a smooth and efficient editing experience.
+It also supports checklists and to-do lists, allowing you to create interactive task lists using simple Markdown syntax.
`; + + render() { + return (+ ); + } +} +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/App.tsx new file mode 100644 index 000000000..158a94202 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/App.tsx @@ -0,0 +1,20 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, AutoFormat } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +class App extends React.Component<{},{}> { + + private rteValue: string = `+ Markdown Auto-Format
+The Markdown Auto-Format feature automatically converts Markdown syntax into clean, semantic HTML within the Rich Text Editor. This capability streamlines content creation by allowing you to write using familiar Markdown patterns while ensuring consistent HTML output.
+When enabled, the editor supports both inline formatting (such as bold and italic) and block-level elements (such as headings and lists). As you type, Markdown syntax is instantly transformed into its corresponding HTML tags, delivering a smooth and efficient editing experience.
+It also supports checklists and to-do lists, allowing you to create interactive task lists using simple Markdown syntax.
`; + + public render() { + return ( ++ + ); + } +} + +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.html b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.html new file mode 100644 index 000000000..727a3d4ed --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/index.html @@ -0,0 +1,46 @@ + + + + + Syncfusion React RichTextEditor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/systemjs.config.js new file mode 100644 index 000000000..59685384a --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs1/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/App.jsx b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/App.jsx new file mode 100644 index 000000000..9d4b2dee6 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/App.jsx @@ -0,0 +1,15 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, AutoFormat } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +function App() { + + let rteValue = `Loading....+Markdown Auto-Format
+The Markdown Auto-Format feature automatically converts Markdown syntax into clean, semantic HTML within the Rich Text Editor. This capability streamlines content creation by allowing you to write using familiar Markdown patterns while ensuring consistent HTML output.
+When enabled, the editor supports both inline formatting (such as bold and italic) and block-level elements (such as headings and lists). As you type, Markdown syntax is instantly transformed into its corresponding HTML tags, delivering a smooth and efficient editing experience.
+It also supports checklists and to-do lists, allowing you to create interactive task lists using simple Markdown syntax.
`; + + return (+ ); +} +export default App; diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/App.tsx b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/App.tsx new file mode 100644 index 000000000..bc28069a8 --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/App.tsx @@ -0,0 +1,19 @@ +import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, AutoFormat } from '@syncfusion/ej2-react-richtexteditor'; +import * as React from 'react'; + +function App() { + + let rteValue:string = `+ Markdown Auto-Format
+The Markdown Auto-Format feature automatically converts Markdown syntax into clean, semantic HTML within the Rich Text Editor. This capability streamlines content creation by allowing you to write using familiar Markdown patterns while ensuring consistent HTML output.
+When enabled, the editor supports both inline formatting (such as bold and italic) and block-level elements (such as headings and lists). As you type, Markdown syntax is instantly transformed into its corresponding HTML tags, delivering a smooth and efficient editing experience.
+It also supports checklists and to-do lists, allowing you to create interactive task lists using simple Markdown syntax.
`; + + return ( ++ + ); + +} + +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/index.tsx b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/index.tsx new file mode 100644 index 000000000..4b54648bc --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ , document.getElementById('sample')); \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/index.html b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/index.html new file mode 100644 index 000000000..727a3d4ed --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/index.html @@ -0,0 +1,46 @@ + + + + + Syncfusion React RichTextEditor + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/systemjs.config.js b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/systemjs.config.js new file mode 100644 index 000000000..c4dbfa68b --- /dev/null +++ b/ej2-react/code-snippet/rich-text-editor/markdown-autoformat-cs2/systemjs.config.js @@ -0,0 +1,56 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.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-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-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-richtexteditor": "syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/App.jsx b/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/App.jsx new file mode 100644 index 000000000..efe924b6c --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/App.jsx @@ -0,0 +1,127 @@ +import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid'; +import * as React from 'react'; +import { columnSpanData } from './datasource'; +function App() { + const queryCellInfoEvent = (args) => { + const col = args.column; + const data = args.data; + switch (data.EmployeeID) { + case 10001: + if (col.field === '9:00' || col.field === '2:30' || col.field === '4:30') { + args.colSpan = 2; + } + else if (col.field === '11:00') { + args.colSpan = 3; + } + break; + case 10002: + if (col.field === '9:30' || col.field === '2:30' || + col.field === '4:30') { + args.colSpan = 3; + } + else if (col.field === '11:00') { + args.colSpan = 4; + } + break; + case 10003: + if (col.field === '9:00' || col.field === '11:30') { + args.colSpan = 3; + } + else if (col.field === '10:30' || col.field === '3:30' || + col.field === '4:30' || col.field === '2:30') { + args.colSpan = 2; + } + break; + case 10004: + if (col.field === '9:00') { + args.colSpan = 3; + } + else if (col.field === '11:00') { + args.colSpan = 4; + } + else if (col.field === '4:00' || col.field === '2:30') { + args.colSpan = 2; + } + break; + case 10005: + if (col.field === '9:00') { + args.colSpan = 4; + } + else if (col.field === '11:30') { + args.colSpan = 3; + } + else if (col.field === '3:30' || col.field === '4:30' || col.field === '2:30') { + args.colSpan = 2; + } + break; + case 10006: + if (col.field === '9:00' || col.field === '4:30' || + col.field === '2:30' || col.field === '3:30') { + args.colSpan = 2; + } + else if (col.field === '10:00' || col.field === '11:30') { + args.colSpan = 3; + } + break; + case 10007: + if (col.field === '9:00' || col.field === '3:00' || col.field === '10:30') { + args.colSpan = 2; + } + else if (col.field === '11:30' || col.field === '4:00') { + args.colSpan = 3; + } + break; + case 10008: + if (col.field === '9:00' || col.field === '10:30' || col.field === '2:30') { + args.colSpan = 3; + } + else if (col.field === '4:00') { + args.colSpan = 2; + } + break; + case 10009: + if (col.field === '9:00' || col.field === '11:30') { + args.colSpan = 3; + } + else if (col.field === '4:30' || col.field === '2:30') { + args.colSpan = 2; + } + break; + case 100010: + if (col.field === '9:00' || col.field === '2:30' || + col.field === '4:00' || col.field === '11:30') { + args.colSpan = 3; + } + else if (col.field === '10:30') { + args.colSpan = 2; + } + break; + } + }; + return (Loading....++); +} +; +export default App; diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/App.tsx b/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/App.tsx new file mode 100644 index 000000000..b5a3974e9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/App.tsx @@ -0,0 +1,118 @@ +import { Column, ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid'; +import { QueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { columnSpanData } from './datasource'; + +function App() { + const queryCellInfoEvent = (args: QueryCellInfoEventArgs) => { + const col: Column = args.column as Column; + const data = args.data; + switch (data.EmployeeID) { + case 10001: + if (col.field === '9:00' || col.field === '2:30' || col.field === '4:30') { + args.colSpan = 2; + } else if (col.field === '11:00') { + args.colSpan = 3; + } + break; + case 10002: + if (col.field === '9:30' || col.field === '2:30' || + col.field === '4:30') { + args.colSpan = 3; + } else if (col.field === '11:00') { + args.colSpan = 4; + } + break; + case 10003: + if (col.field === '9:00' || col.field === '11:30') { + args.colSpan = 3; + } else if (col.field === '10:30' || col.field === '3:30' || + col.field === '4:30' || col.field === '2:30') { + args.colSpan = 2; + } + break; + case 10004: + if (col.field === '9:00') { + args.colSpan = 3; + } else if (col.field === '11:00') { + args.colSpan = 4; + } else if (col.field === '4:00' || col.field === '2:30') { + args.colSpan = 2; + } + break; + case 10005: + if (col.field === '9:00') { + args.colSpan = 4; + } else if (col.field === '11:30') { + args.colSpan = 3; + } else if (col.field === '3:30' || col.field === '4:30' || col.field === '2:30') { + args.colSpan = 2; + } + break; + case 10006: + if (col.field === '9:00' || col.field === '4:30' || + col.field === '2:30' || col.field === '3:30') { + args.colSpan = 2; + } else if (col.field === '10:00' || col.field === '11:30') { + args.colSpan = 3; + } + break; + case 10007: + if (col.field === '9:00' || col.field === '3:00' || col.field === '10:30') { + args.colSpan = 2; + } else if (col.field === '11:30' || col.field === '4:00') { + args.colSpan = 3; + } + break; + case 10008: + if (col.field === '9:00' || col.field === '10:30' || col.field === '2:30') { + args.colSpan = 3; + } else if (col.field === '4:00') { + args.colSpan = 2; + } + break; + case 10009: + if (col.field === '9:00' || col.field === '11:30') { + args.colSpan = 3; + } else if (col.field === '4:30' || col.field === '2:30') { + args.colSpan = 2; + } + break; + case 100010: + if (col.field === '9:00' || col.field === '2:30' || + col.field === '4:00' || col.field === '11:30') { + args.colSpan = 3; + } else if (col.field === '10:30') { + args.colSpan = 2; + } + break; + } + }; + return (+++ ++ ++ + + + + + + + + + + + + + + + +) +}; +export default App; + + diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/datasource.tsx b/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/datasource.tsx new file mode 100644 index 000000000..c5bebac09 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/datasource.tsx @@ -0,0 +1,221 @@ +/** + * TreeGrid DataSource + */ + +export let columnSpanData: Object[] = [ + { + EmployeeID: 10001, + EmployeeName: "Davolio", + "9:00": "Analysis Tasks", + "9:30": "Analysis Tasks", + "10:00": "Team Meeting", + "10:30": "Testing", + "11:00": "Development", + "11:30": "Development", + "12:00": "Development", + "12:30": "Support", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Testing", + "3:00": "Testing", + "3:30": "Development", + "4:00": "Conference", + "4:30": "Team Meeting", + "5:00": "Team Meeting", + subtasks: [ + { + EmployeeID: 10002, + EmployeeName: "Buchanan", + "9:00": "Task Assign", + "9:30": "Support", + "10:00": "Support", + "10:30": "Support", + "11:00": "Testing", + "11:30": "Testing", + "12:00": "Testing", + "12:30": "Testing", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Check Mail", + "4:00": "Check Mail", + "4:30": "Team Meeting", + "5:00": "Team Meeting", + }, + { + EmployeeID: 10003, + EmployeeName: "Fuller", + "9:00": "Check Mail", + "9:30": "Check Mail", + "10:00": "Check Mail", + "10:30": "Analysis Tasks", + "11:00": "Analysis Tasks", + "11:30": "Support", + "12:00": "Support", + "12:30": "Support", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Team Meeting", + "4:00": "Team Meeting", + "4:30": "Development", + "5:00": "Development", + }, + { + EmployeeID: 10004, + EmployeeName: "Leverling", + "9:00": "Testing", + "9:30": "Check Mail", + "10:00": "Check Mail", + "10:30": "Support", + "11:00": "Testing", + "11:30": "Testing", + "12:00": "Testing", + "12:30": "Testing", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Check Mail", + "4:00": "Conference", + "4:30": "Conference", + "5:00": "Team Meeting", + }, + { + EmployeeID: 10005, + EmployeeName: "Peacock", + "9:00": "Task Assign", + "9:30": "Task Assign", + "10:00": "Task Assign", + "10:30": "Task Assign", + "11:00": "Check Mail", + "11:30": "Support", + "12:00": "Support", + "12:30": "Support", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Team Meeting", + "4:00": "Team Meeting", + "4:30": "Testing", + "5:00": "Testing", + }, + ], + }, + { + EmployeeID: 10006, + EmployeeName: "Janet", + "9:00": "Testing", + "9:30": "Testing", + "10:00": "Support", + "10:30": "Support", + "11:00": "Support", + "11:30": "Team Meeting", + "12:00": "Team Meeting", + "12:30": "Team Meeting", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Team Meeting", + "4:00": "Team Meeting", + "4:30": "Development", + "5:00": "Development", + subtasks: [ + { + EmployeeID: 10007, + EmployeeName: "Suyama", + "9:00": "Analysis Tasks", + "9:30": "Analysis Tasks", + "10:00": "Testing", + "10:30": "Development", + "11:00": "Development", + "11:30": "Testing", + "12:00": "Testing", + "12:30": "Testing", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Support", + "3:00": "Build", + "3:30": "Build", + "4:00": "Check Mail", + "4:30": "Check Mail", + "5:00": "Check Mail", + }, + { + EmployeeID: 10008, + EmployeeName: "Robert", + "9:00": "Task Assign", + "9:30": "Task Assign", + "10:00": "Task Assign", + "10:30": "Development", + "11:00": "Development", + "11:30": "Development", + "12:00": "Testing", + "12:30": "Support", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Check Mail", + "3:00": "Check Mail", + "3:30": "Check Mail", + "4:00": "Team Meeting", + "4:30": "Team Meeting", + "5:00": "Build", + }, + { + EmployeeID: 10009, + EmployeeName: "Andrew", + "9:00": "Check Mail", + "9:30": "Team Meeting", + "10:00": "Team Meeting", + "10:30": "Support", + "11:00": "Testing", + "11:30": "Development", + "12:00": "Development", + "12:30": "Development", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Check Mail", + "3:00": "Check Mail", + "3:30": "Check Mail", + "4:00": "Team Meeting", + "4:30": "Development", + "5:00": "Development", + }, + { + EmployeeID: 10010, + + EmployeeName: "Michael", + "9:00": "Task Assign", + "9:30": "Task Assign", + "10:00": "Task Assign", + "10:30": "Analysis Tasks", + "11:00": "Analysis Tasks", + "11:30": "Development", + "12:00": "Development", + "12:30": "Development", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Testing", + "3:00": "Testing", + "3:30": "Testing", + "4:00": "Build", + "4:30": "Build", + "5:00": "Build", + }, + ], + }, +]; diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/index.tsx b/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs1/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+++ ++ ++ + + + + + + + + + + + + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs1/index.css b/ej2-react/code-snippet/treegrid/column-spanning-cs1/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs1/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs1/index.html b/ej2-react/code-snippet/treegrid/column-spanning-cs1/index.html new file mode 100644 index 000000000..1948c21bb --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs1/index.html @@ -0,0 +1,41 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs1/systemjs.config.js b/ej2-react/code-snippet/treegrid/column-spanning-cs1/systemjs.config.js new file mode 100644 index 000000000..0ad13bbda --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs1/systemjs.config.js @@ -0,0 +1,61 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/App.jsx b/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/App.jsx new file mode 100644 index 000000000..b56838016 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/App.jsx @@ -0,0 +1,161 @@ +import * as React from "react"; +import { createRoot } from "react-dom/client"; +import { + ColumnDirective, + ColumnsDirective, + TreeGridComponent, + Inject, + Page, + Freeze, +} from "@syncfusion/ej2-react-treegrid"; +import { columnSpanData } from "./datasource"; + +function App() { + return ( +Loading....+++ ); +} +export default App; diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/App.tsx b/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/App.tsx new file mode 100644 index 000000000..1055f262b --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/App.tsx @@ -0,0 +1,162 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { + ColumnDirective, + ColumnsDirective, + TreeGridComponent, + Inject, + Page, + Freeze, +} from "@syncfusion/ej2-react-treegrid"; +import { columnSpanData } from "./datasource"; + +function App() { + return (+++ ++ ++ + + + + + + + ++ ); +}; +export default App; + + diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/datasource.tsx b/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/datasource.tsx new file mode 100644 index 000000000..ba5eeb34a --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/datasource.tsx @@ -0,0 +1,794 @@ +/** + * TreeGrid DataSource + */ + +export let columnSpanData: object[] = [ + { + activityName: "Tower", + levelId: "L1-001", + startDate: "2025-07-01", + endDate: "2025-12-29", + supervisor: "John Carter", + team: "Executive Oversight", + status: "Active", + progress: 70, + totalBudget: 1500000, + paidToDate: 1050000, + currency: "USD", + costCode: "01-00-00", + permitStatus: "Approved", + inspectionDate: "2025-12-30", + inspectionStatus: "Active", + followUpActions: "Monitor progress", + inspectionCost: 600, + punchListStatus: "Open", + documentReference: "DOC-TWR-OVR", + materialUsed: "Project Planning Kits", + materialCost: 75000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Design Stage", + levelId: "L2-001", + startDate: "2025-07-01", + endDate: "2025-08-15", + supervisor: "Ethan Park", + team: "Design Division", + status: "Completed", + progress: 100, + totalBudget: 305000, + paidToDate: 350000, + currency: "USD", + costCode: "02-01-00", + permitStatus: "Issued", + inspectionDate: "2025-08-16", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 200, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-DES-STG", + materialUsed: "Design Blueprints", + materialCost: 50000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Architectural Design Task", + levelId: "L3-001", + startDate: "2025-07-02", + endDate: "2025-07-10", + inspectionDate: "2025-07-11", + status: "Scheduled", + progress: 100, + totalBudget: 100000, + paidToDate: 0, + supervisor: "David Lin", + team: "Architecture Unit", + permitStatus: "Scheduled", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-ARC-TSK", + materialUsed: "CAD Drawings", + materialCost: 15000, + materialStockRemaining: "N/A", + }, + { + activityName: "Structural Design Task", + levelId: "L3-002", + startDate: "2025-07-11", + endDate: "2025-07-25", + inspectionDate: "2025-07-26", + status: "Scheduled", + progress: 100, + totalBudget: 120000, + paidToDate: 0, + supervisor: "Sarah Patel", + team: "Structural Unit", + permitStatus: "Scheduled", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-STR-TSK", + materialUsed: "Structural Plans", + materialCost: 15000, + materialStockRemaining: "N/A", + }, + { + activityName: "MEP Design Task", + levelId: "L3-003", + startDate: "2025-07-26", + endDate: "2025-08-15", + inspectionDate: "2025-08-16", + status: "Scheduled", + progress: 100, + totalBudget: 100000, + paidToDate: 0, + supervisor: "Carlos Rivera", + team: "MEP Unit", + permitStatus: "Scheduled", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-MEP-TSK", + materialUsed: "Electrical Schematics", + materialCost: 20000, + materialStockRemaining: "N/A", + }, + ], + }, + { + activityName: "Construction Stage", + levelId: "L2-002", + startDate: "2025-08-16", + endDate: "2025-10-20", + supervisor: "James Patel", + team: "Construction Division", + status: "In Progress", + progress: 75, + totalBudget: 900000, + paidToDate: 675000, + currency: "USD", + costCode: "03-01-00", + permitStatus: "Issued", + inspectionDate: "2025-10-21", + inspectionStatus: "Passed with Notes", + followUpActions: "Reinforce structure", + inspectionCost: 300, + punchListStatus: "Open", + documentReference: "DOC-TWR-CON-STG", + materialUsed: "Construction Materials", + materialCost: 50000, + materialStockRemaining: "300 tons", + children: [ + { + activityName: "Foundation Construction Task", + levelId: "L3-004", + startDate: "2025-08-16", + endDate: "2025-08-25", + inspectionDate: "2025-08-26", + status: "Completed", + progress: 100, + totalBudget: 305000, + paidToDate: 350000, + supervisor: "Robert Singh", + team: "Foundation Crew", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-FND-TSK", + materialUsed: "Concrete", + materialCost: 15000, + materialStockRemaining: "N/A", + }, + { + activityName: "Structural Construction Task", + levelId: "L3-005", + startDate: "2025-08-26", + endDate: "2025-09-20", + inspectionDate: "2025-09-21", + status: "In Progress", + progress: 80, + totalBudget: 300000, + paidToDate: 240000, + supervisor: "Nathan Blake", + team: "Structural Team", + permitStatus: "Approved", + inspectionStatus: "Passed with Notes", + followUpActions: "Reinforce beams", + inspectionCost: 100, + punchListStatus: "Open", + documentReference: "DOC-TWR-STR-TSK", + materialUsed: "Steel Beams", + materialCost: 20000, + materialStockRemaining: "200 tons", + }, + { + activityName: "Exterior Construction Task", + levelId: "L3-006", + startDate: "2025-09-21", + endDate: "2025-10-20", + inspectionDate: "2025-10-21", + status: "In Progress", + progress: 40, + totalBudget: 300000, + paidToDate: 120000, + supervisor: "Thomas Reed", + team: "Exterior Crew", + permitStatus: "Approved", + inspectionStatus: "Passed with Notes", + followUpActions: "Continue exterior work", + inspectionCost: 100, + punchListStatus: "Open", + documentReference: "DOC-TWR-EXT-TSK", + materialUsed: "Metal Panels", + materialCost: 15000, + materialStockRemaining: "300 panels", + }, + ], + }, + { + activityName: "Safety Stage", + levelId: "L2-003", + startDate: "2025-10-21", + endDate: "2025-11-05", + supervisor: "Nathan Blake", + team: "Safety Division", + status: "In Progress", + progress: 60, + totalBudget: 50000, + paidToDate: 30000, + currency: "USD", + costCode: "04-01-00", + permitStatus: "Issued", + inspectionDate: "2025-11-06", + inspectionStatus: "Scheduled", + followUpActions: "Complete safety audit", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-SAF-STG", + materialUsed: "Safety Equipment", + materialCost: 10000, + materialStockRemaining: "50 units", + children: [ + { + activityName: "OSHA Compliance Task", + levelId: "L3-007", + startDate: "2025-10-21", + endDate: "2025-10-27", + inspectionDate: "2025-10-28", + status: "In Progress", + progress: 70, + totalBudget: 20000, + paidToDate: 14000, + supervisor: "Laura Bennett", + team: "Safety Inspectors", + permitStatus: "Issued", + inspectionStatus: "In Progress", + followUpActions: "Complete briefing", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-OSHA-TSK", + materialUsed: "Safety Gear", + materialCost: 4000, + materialStockRemaining: "40 helmets", + }, + { + activityName: "Fire Safety Task", + levelId: "L3-008", + startDate: "2025-10-28", + endDate: "2025-11-01", + inspectionDate: "2025-11-02", + status: "Scheduled", + progress: 30, + totalBudget: 15000, + paidToDate: 0, + supervisor: "Melissa Tran", + team: "Fire Safety Team", + permitStatus: "Issued", + inspectionStatus: "Scheduled", + followUpActions: "Install exits", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-FIRE-TSK", + materialUsed: "Extinguishers", + materialCost: 3000, + materialStockRemaining: "15 units", + }, + { + activityName: "Structural Audit Task", + levelId: "L3-009", + startDate: "2025-11-02", + endDate: "2025-11-05", + inspectionDate: "2025-11-06", + status: "Scheduled", + progress: 20, + totalBudget: 15000, + paidToDate: 0, + supervisor: "David Lin", + team: "Audit Engineers", + permitStatus: "Issued", + inspectionStatus: "Scheduled", + followUpActions: "Verify integrity", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-AUD-TSK", + materialUsed: "Inspection Tools", + materialCost: 3000, + materialStockRemaining: "N/A", + }, + ], + }, + { + activityName: "Finishing Stage", + levelId: "L2-004", + startDate: "2025-11-06", + endDate: "2025-12-10", + supervisor: "Melissa Tran", + team: "Finishing Division", + status: "Planning", + progress: 30, + totalBudget: 250000, + paidToDate: 75000, + currency: "USD", + costCode: "05-01-00", + permitStatus: "Under Review", + inspectionDate: "2025-12-11", + inspectionStatus: "Scheduled", + followUpActions: "Begin interior work", + inspectionCost: 0, + punchListStatus: "Pending", + documentReference: "DOC-TWR-FIN-STG", + materialUsed: "Finishing Supplies", + materialCost: 25000, + materialStockRemaining: "200 units", + children: [ + { + activityName: "Interior Drywall Task", + levelId: "L3-010", + startDate: "2025-11-06", + endDate: "2025-11-20", + inspectionDate: "2025-11-21", + status: "In Progress", + progress: 50, + totalBudget: 80000, + paidToDate: 40000, + supervisor: "Hannah Kim", + team: "Drywall Crew", + permitStatus: "Issued", + inspectionStatus: "In Progress", + followUpActions: "Check alignment", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-DRY-TSK", + materialUsed: "Drywall Sheets", + materialCost: 8000, + materialStockRemaining: "150 panels", + }, + { + activityName: "Flooring Installation Task", + levelId: "L3-011", + startDate: "2025-11-21", + endDate: "2025-12-01", + inspectionDate: "2025-12-02", + status: "Scheduled", + progress: 10, + totalBudget: 80000, + paidToDate: 0, + supervisor: "Sarah Patel", + team: "Flooring Team", + permitStatus: "Issued", + inspectionStatus: "Scheduled", + followUpActions: "Verify level", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-FLR-TSM", + materialUsed: "Concrete Flooring", + materialCost: 10000, + materialStockRemaining: "200 bags", + }, + { + activityName: "Fixture Setup Task", + levelId: "L3-012", + startDate: "2025-12-02", + endDate: "2025-12-10", + inspectionDate: "2025-12-11", + status: "Scheduled", + progress: 10, + totalBudget: 90000, + paidToDate: 0, + supervisor: "Lucas Nguyen", + team: "Fit-Out Crew", + permitStatus: "Issued", + inspectionStatus: "Scheduled", + followUpActions: "Install fixtures", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-FIX-TSK", + materialUsed: "Lighting Fixtures", + materialCost: 7000, + materialStockRemaining: "50 units", + }, + ], + }, + { + activityName: "Closeout Stage", + levelId: "L2-005", + startDate: "2025-12-11", + endDate: "2025-12-29", + supervisor: "Emma Wilson", + team: "Closeout Division", + status: "Planning", + progress: 20, + totalBudget: 50000, + paidToDate: 10000, + currency: "USD", + costCode: "06-01-00", + permitStatus: "Under Review", + inspectionDate: "2025-12-30", + inspectionStatus: "Scheduled", + followUpActions: "Finalize handover", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-CLO-STG", + materialUsed: "Closeout Documents", + materialCost: 5000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Punch List Review Task", + levelId: "L3-013", + startDate: "2025-12-11", + endDate: "2025-12-15", + inspectionDate: "2025-12-16", + status: "Scheduled", + progress: 20, + totalBudget: 15000, + paidToDate: 0, + supervisor: "John Carter", + team: "Closeout Team", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Resolve issues", + inspectionCost: 0, + punchListStatus: "Pending", + documentReference: "DOC-TWR-PLR-TSK", + materialUsed: "Punch List Forms", + materialCost: 2000, + materialStockRemaining: "N/A", + }, + { + activityName: "Final Documentation Task", + levelId: "L3-014", + startDate: "2025-12-16", + endDate: "2025-12-22", + inspectionDate: "2025-12-23", + status: "Scheduled", + progress: 20, + totalBudget: 15000, + paidToDate: 0, + supervisor: "Emily Foster", + team: "Documentation Team", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Prepare reports", + inspectionCost: 0, + punchListStatus: "Pending", + documentReference: "DOC-TWR-FD-TSK", + materialUsed: "As-Built Drawings", + materialCost: 2000, + materialStockRemaining: "N/A", + }, + { + activityName: "Client Handover Task", + levelId: "L3-015", + startDate: "2025-12-23", + endDate: "2025-12-29", + inspectionDate: "2025-12-30", + status: "Scheduled", + progress: 20, + totalBudget: 20000, + paidToDate: 0, + supervisor: "Emma Wilson", + team: "Client Relations", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Conduct walkthrough", + inspectionCost: 0, + punchListStatus: "Pending", + documentReference: "DOC-TWR-CH-TSK", + materialUsed: "Handover Kits", + materialCost: 1000, + materialStockRemaining: "Delivered", + }, + ], + }, + ], + }, + { + activityName: "Warehouse", + levelId: "L1-004", + startDate: "2025-08-01", + endDate: "2025-12-28", + supervisor: "Emma Wilson", + team: "Executive Oversight", + status: "Active", + progress: 55, + totalBudget: 1030000, + paidToDate: 566500, + currency: "USD", + costCode: "01-00-00", + permitStatus: "Approved", + inspectionDate: "2025-12-29", + inspectionStatus: "Passed with Notes", + followUpActions: "Address structural concerns", + inspectionCost: 400, + punchListStatus: "Open", + documentReference: "DOC-WH-OVR", + materialUsed: "Project Planning Kits", + materialCost: 50000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Design Stage", + levelId: "L2-016", + startDate: "2025-08-01", + endDate: "2025-09-10", + supervisor: "Ethan Park", + team: "Design Division", + status: "Completed", + progress: 100, + totalBudget: 202000, + paidToDate: 220000, + currency: "USD", + costCode: "02-01-00", + permitStatus: "Issued", + inspectionDate: "2025-09-11", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 300, + punchListStatus: "Cleared", + documentReference: "DOC-WH-DES-STG", + materialUsed: "Design Blueprints", + materialCost: 30000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Architectural Design Task", + levelId: "L3-046", + startDate: "2025-08-02", + endDate: "2025-08-12", + inspectionDate: "2025-08-13", + status: "Completed", + progress: 100, + totalBudget: 70000, + paidToDate: 70200, + supervisor: "David Lin", + team: "Architecture Unit", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-WH-ARC-TSK", + materialUsed: "CAD Drawings", + materialCost: 10000, + materialStockRemaining: "N/A", + }, + { + activityName: "Structural Design Task", + levelId: "L3-047", + startDate: "2025-08-13", + endDate: "2025-08-28", + inspectionDate: "2025-08-29", + status: "Completed", + progress: 100, + totalBudget: 72000, + paidToDate: 70000, + supervisor: "Sarah Patel", + team: "Structural Unit", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-WH-STR-TSK", + materialUsed: "Structural Plans", + materialCost: 10000, + materialStockRemaining: "N/A", + }, + { + activityName: "MEP Design Task", + levelId: "L3-048", + startDate: "2025-08-29", + endDate: "2025-09-10", + inspectionDate: "2025-09-11", + status: "Completed", + progress: 100, + totalBudget: 62000, + paidToDate: 60000, + supervisor: "Carlos Rivera", + team: "MEP Unit", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-WH-MEP-TSK", + materialUsed: "Electrical Schematics", + materialCost: 10000, + materialStockRemaining: "N/A", + }, + ], + }, + { + activityName: "Construction Stage", + levelId: "L2-017", + startDate: "2025-09-11", + endDate: "2025-11-20", + supervisor: "James Patel", + team: "Construction Division", + status: "In Progress", + progress: 50, + totalBudget: 800000, + paidToDate: 400000, + currency: "USD", + costCode: "03-01-00", + permitStatus: "Issued", + inspectionDate: "2025-11-21", + inspectionStatus: "Passed with Notes", + followUpActions: "Address structural issues", + inspectionCost: 400, + punchListStatus: "Open", + documentReference: "DOC-WH-CON-STG", + materialUsed: "Construction Materials", + materialCost: 200000, + materialStockRemaining: "500 tons", + children: [ + { + activityName: "Foundation Construction Task", + levelId: "L3-049", + startDate: "2025-09-11", + endDate: "2025-09-25", + inspectionDate: "2025-09-26", + status: "Completed", + progress: 100, + totalBudget: 300000, + paidToDate: 320000, + supervisor: "Robert Singh", + team: "Foundation Crew", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-WH-FND-TSK", + materialUsed: "Concrete Mix", + materialCost: 80000, + materialStockRemaining: "N/A", + }, + { + activityName: "Framing Construction Task", + levelId: "L3-050", + startDate: "2025-09-26", + endDate: "2025-10-25", + inspectionDate: "2025-10-26", + status: "In Progress", + progress: 60, + totalBudget: 300000, + paidToDate: 180000, + supervisor: "Angela Moore", + team: "Structural Crew", + permitStatus: "Approved", + inspectionStatus: "Passed with Notes", + followUpActions: "Continue framing", + inspectionCost: 200, + punchListStatus: "Open", + documentReference: "DOC-WH-FRM-TSK", + materialUsed: "Steel Beams", + materialCost: 60000, + materialStockRemaining: "200 tons", + }, + { + activityName: "Exterior Construction Task", + levelId: "L3-051", + startDate: "2025-10-26", + endDate: "2025-11-20", + inspectionDate: "2025-11-21", + status: "In Progress", + progress: 20, + totalBudget: 200000, + paidToDate: 40000, + supervisor: "Thomas Reed", + team: "Exterior Crew", + permitStatus: "Issued", + inspectionStatus: "In Progress", + followUpActions: "Continue exterior work", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-WH-EXT-TSK", + materialUsed: "Metal Panels", + materialCost: 60000, + materialStockRemaining: "300 panels", + }, + ], + }, + { + activityName: "Safety Stage", + levelId: "L2-018", + startDate: "2025-11-21", + endDate: "2025-12-10", + supervisor: "Nathan Blake", + team: "Safety Division", + status: "Planning", + progress: 30, + totalBudget: 30000, + paidToDate: 9000, + currency: "USD", + costCode: "04-01-00", + permitStatus: "Under Review", + inspectionDate: "2025-12-11", + inspectionStatus: "Scheduled", + followUpActions: "Schedule safety audit", + inspectionCost: 0, + punchListStatus: "Scheduled", + documentReference: "DOC-WH-SAF-STG", + materialUsed: "Safety Equipment", + materialCost: 5000, + materialStockRemaining: "50 units", + children: [ + { + activityName: "OSHA Compliance Task", + levelId: "L3-052", + startDate: "2025-11-21", + endDate: "2025-11-28", + inspectionDate: "2025-11-29", + status: "Scheduled", + progress: 30, + totalBudget: 10000, + paidToDate: 0, + supervisor: "Laura Bennett", + team: "Safety Inspectors", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Conduct briefing", + inspectionCost: 0, + punchListStatus: "Not Started", + documentReference: "DOC-WH-OSHA-TSK", + materialUsed: "Safety Gear", + materialCost: 2000, + materialStockRemaining: "40 helmets", + }, + { + activityName: "Fire Safety Task", + levelId: "L3-053", + startDate: "2025-11-29", + endDate: "2025-12-05", + inspectionDate: "2025-12-06", + status: "Scheduled", + progress: 20, + totalBudget: 10000, + paidToDate: 0, + supervisor: "Melissa Tran", + team: "Fire Safety Team", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Install exits", + inspectionCost: 0, + punchListStatus: "Not Started", + documentReference: "DOC-WH-FIRE-TSK", + materialUsed: "Extinguishers", + materialCost: 1500, + materialStockRemaining: "15 units", + }, + { + activityName: "Structural Audit Task", + levelId: "L3-054", + startDate: "2025-12-06", + endDate: "2025-12-10", + inspectionDate: "2025-12-11", + status: "Scheduled", + progress: 20, + totalBudget: 10000, + paidToDate: 0, + supervisor: "David Lin", + team: "Audit Engineers", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Verify integrity", + inspectionCost: 0, + punchListStatus: "Not Started", + documentReference: "DOC-WH-AUD-TSK", + materialUsed: "Inspection Tools", + materialCost: 1500, + materialStockRemaining: "N/A", + }, + ], + }, + ], + }, +]; diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/index.tsx b/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs2/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+++ ++ ++ + + + + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs2/index.css b/ej2-react/code-snippet/treegrid/column-spanning-cs2/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs2/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs2/index.html b/ej2-react/code-snippet/treegrid/column-spanning-cs2/index.html new file mode 100644 index 000000000..1948c21bb --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs2/index.html @@ -0,0 +1,41 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/column-spanning-cs2/systemjs.config.js b/ej2-react/code-snippet/treegrid/column-spanning-cs2/systemjs.config.js new file mode 100644 index 000000000..0ad13bbda --- /dev/null +++ b/ej2-react/code-snippet/treegrid/column-spanning-cs2/systemjs.config.js @@ -0,0 +1,61 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/App.jsx b/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/App.jsx new file mode 100644 index 000000000..1fadb14e0 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/App.jsx @@ -0,0 +1,36 @@ +import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid'; +import * as React from 'react'; +import { rowSpanData } from './datasource'; +function App() { + const queryCellInfoEvent = (args) => { + const col = args.column; + const data = args.data; + switch (data.EmployeeID) { + case 10001: + if (col.field === '1:00') { + args.rowSpan = 10; + } + break; + } + }; + return (Loading....++); +} +; +export default App; diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/App.tsx b/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/App.tsx new file mode 100644 index 000000000..7d3246585 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/App.tsx @@ -0,0 +1,37 @@ +import { Column, ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid'; +import { QueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { rowSpanData } from './datasource'; + +function App() { + const queryCellInfoEvent = (args: QueryCellInfoEventArgs) => { + const col: Column = args.column as Column; + const data = args.data; + switch (data.EmployeeID) { + case 10001: + if (col.field === '1:00') { + args.rowSpan = 10; + } + break; + } + }; + return (+++ ++ ++ + + + + + + + + + +) +}; +export default App; diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/datasource.tsx b/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/datasource.tsx new file mode 100644 index 000000000..5341565c9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/datasource.tsx @@ -0,0 +1,221 @@ +/** + * TreeGrid DataSource + */ + +export let rowSpanData: Object[] = [ + { + EmployeeID: 10001, + EmployeeName: "Davolio", + "9:00": "Analysis Tasks", + "9:30": "Analysis Tasks", + "10:00": "Team Meeting", + "10:30": "Testing", + "11:00": "Development", + "11:30": "Development", + "12:00": "Development", + "12:30": "Support", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Testing", + "3:00": "Testing", + "3:30": "Development", + "4:00": "Conference", + "4:30": "Team Meeting", + "5:00": "Team Meeting", + subtasks: [ + { + EmployeeID: 10002, + EmployeeName: "Buchanan", + "9:00": "Task Assign", + "9:30": "Support", + "10:00": "Support", + "10:30": "Support", + "11:00": "Testing", + "11:30": "Testing", + "12:00": "Testing", + "12:30": "Testing", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Check Mail", + "4:00": "Check Mail", + "4:30": "Team Meeting", + "5:00": "Team Meeting", + }, + { + EmployeeID: 10003, + EmployeeName: "Fuller", + "9:00": "Check Mail", + "9:30": "Check Mail", + "10:00": "Check Mail", + "10:30": "Analysis Tasks", + "11:00": "Analysis Tasks", + "11:30": "Support", + "12:00": "Support", + "12:30": "Support", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Team Meeting", + "4:00": "Team Meeting", + "4:30": "Development", + "5:00": "Development", + }, + { + EmployeeID: 10004, + EmployeeName: "Leverling", + "9:00": "Testing", + "9:30": "Check Mail", + "10:00": "Check Mail", + "10:30": "Support", + "11:00": "Testing", + "11:30": "Testing", + "12:00": "Testing", + "12:30": "Testing", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Check Mail", + "4:00": "Conference", + "4:30": "Conference", + "5:00": "Team Meeting", + }, + { + EmployeeID: 10005, + EmployeeName: "Peacock", + "9:00": "Task Assign", + "9:30": "Task Assign", + "10:00": "Task Assign", + "10:30": "Task Assign", + "11:00": "Check Mail", + "11:30": "Support", + "12:00": "Support", + "12:30": "Support", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Team Meeting", + "4:00": "Team Meeting", + "4:30": "Testing", + "5:00": "Testing", + }, + ], + }, + { + EmployeeID: 10006, + EmployeeName: "Janet", + "9:00": "Testing", + "9:30": "Testing", + "10:00": "Support", + "10:30": "Support", + "11:00": "Support", + "11:30": "Team Meeting", + "12:00": "Team Meeting", + "12:30": "Team Meeting", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Development", + "3:00": "Development", + "3:30": "Team Meeting", + "4:00": "Team Meeting", + "4:30": "Development", + "5:00": "Development", + subtasks: [ + { + EmployeeID: 10007, + EmployeeName: "Suyama", + "9:00": "Analysis Tasks", + "9:30": "Analysis Tasks", + "10:00": "Testing", + "10:30": "Development", + "11:00": "Development", + "11:30": "Testing", + "12:00": "Testing", + "12:30": "Testing", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Support", + "3:00": "Build", + "3:30": "Build", + "4:00": "Check Mail", + "4:30": "Check Mail", + "5:00": "Check Mail", + }, + { + EmployeeID: 10008, + EmployeeName: "Robert", + "9:00": "Task Assign", + "9:30": "Task Assign", + "10:00": "Task Assign", + "10:30": "Development", + "11:00": "Development", + "11:30": "Development", + "12:00": "Testing", + "12:30": "Support", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Check Mail", + "3:00": "Check Mail", + "3:30": "Check Mail", + "4:00": "Team Meeting", + "4:30": "Team Meeting", + "5:00": "Build", + }, + { + EmployeeID: 10009, + EmployeeName: "Andrew", + "9:00": "Check Mail", + "9:30": "Team Meeting", + "10:00": "Team Meeting", + "10:30": "Support", + "11:00": "Testing", + "11:30": "Development", + "12:00": "Development", + "12:30": "Development", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Check Mail", + "3:00": "Check Mail", + "3:30": "Check Mail", + "4:00": "Team Meeting", + "4:30": "Development", + "5:00": "Development", + }, + { + EmployeeID: 10010, + + EmployeeName: "Michael", + "9:00": "Task Assign", + "9:30": "Task Assign", + "10:00": "Task Assign", + "10:30": "Analysis Tasks", + "11:00": "Analysis Tasks", + "11:30": "Development", + "12:00": "Development", + "12:30": "Development", + "1:00": "Lunch Break", + "1:30": "Lunch Break", + "2:00": "Lunch Break", + "2:30": "Testing", + "3:00": "Testing", + "3:30": "Testing", + "4:00": "Build", + "4:30": "Build", + "5:00": "Build", + }, + ], + }, +]; diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/index.tsx b/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs1/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+++ ++ ++ + + + + + + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs1/index.css b/ej2-react/code-snippet/treegrid/row-spanning-cs1/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs1/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs1/index.html b/ej2-react/code-snippet/treegrid/row-spanning-cs1/index.html new file mode 100644 index 000000000..1948c21bb --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs1/index.html @@ -0,0 +1,41 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs1/systemjs.config.js b/ej2-react/code-snippet/treegrid/row-spanning-cs1/systemjs.config.js new file mode 100644 index 000000000..0ad13bbda --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs1/systemjs.config.js @@ -0,0 +1,61 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/App.jsx b/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/App.jsx new file mode 100644 index 000000000..d8bb72b7d --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/App.jsx @@ -0,0 +1,161 @@ +import * as React from "react"; +import { createRoot } from "react-dom/client"; +import { + ColumnDirective, + ColumnsDirective, + TreeGridComponent, + Inject, + Page, + Freeze, +} from "@syncfusion/ej2-react-treegrid"; +import { rowSpanData } from "./datasource"; + +function App() { + return ( +Loading....+++ ); +} +export default App; diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/App.tsx b/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/App.tsx new file mode 100644 index 000000000..3554bef22 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/App.tsx @@ -0,0 +1,163 @@ + +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { + ColumnDirective, + ColumnsDirective, + TreeGridComponent, + Inject, + Page, + Freeze, +} from "@syncfusion/ej2-react-treegrid"; +import { rowSpanData } from "./datasource"; + +function App() { + return (+++ ++ ++ + + + + + + + ++ ); +}; +export default App; + + diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/datasource.tsx b/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/datasource.tsx new file mode 100644 index 000000000..584df7a70 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/datasource.tsx @@ -0,0 +1,793 @@ +/** + * TreeGrid DataSource + */ +export let rowSpanData: object[] = [ + { + activityName: "Tower", + levelId: "L1-001", + startDate: "2025-07-01", + endDate: "2025-12-29", + supervisor: "John Carter", + team: "Executive Oversight", + status: "Active", + progress: 70, + totalBudget: 1500000, + paidToDate: 1050000, + currency: "USD", + costCode: "01-00-00", + permitStatus: "Approved", + inspectionDate: "2025-12-30", + inspectionStatus: "Active", + followUpActions: "Monitor progress", + inspectionCost: 600, + punchListStatus: "Open", + documentReference: "DOC-TWR-OVR", + materialUsed: "Project Planning Kits", + materialCost: 75000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Design Stage", + levelId: "L2-001", + startDate: "2025-07-01", + endDate: "2025-08-15", + supervisor: "Ethan Park", + team: "Design Division", + status: "Completed", + progress: 100, + totalBudget: 305000, + paidToDate: 350000, + currency: "USD", + costCode: "02-01-00", + permitStatus: "Issued", + inspectionDate: "2025-08-16", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 200, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-DES-STG", + materialUsed: "Design Blueprints", + materialCost: 50000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Architectural Design Task", + levelId: "L3-001", + startDate: "2025-07-02", + endDate: "2025-07-10", + inspectionDate: "2025-07-11", + status: "Scheduled", + progress: 100, + totalBudget: 100000, + paidToDate: 0, + supervisor: "David Lin", + team: "Architecture Unit", + permitStatus: "Scheduled", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-ARC-TSK", + materialUsed: "CAD Drawings", + materialCost: 15000, + materialStockRemaining: "N/A", + }, + { + activityName: "Structural Design Task", + levelId: "L3-002", + startDate: "2025-07-11", + endDate: "2025-07-25", + inspectionDate: "2025-07-26", + status: "Scheduled", + progress: 100, + totalBudget: 120000, + paidToDate: 0, + supervisor: "Sarah Patel", + team: "Structural Unit", + permitStatus: "Scheduled", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-STR-TSK", + materialUsed: "Structural Plans", + materialCost: 15000, + materialStockRemaining: "N/A", + }, + { + activityName: "MEP Design Task", + levelId: "L3-003", + startDate: "2025-07-26", + endDate: "2025-08-15", + inspectionDate: "2025-08-16", + status: "Scheduled", + progress: 100, + totalBudget: 100000, + paidToDate: 0, + supervisor: "Carlos Rivera", + team: "MEP Unit", + permitStatus: "Scheduled", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-MEP-TSK", + materialUsed: "Electrical Schematics", + materialCost: 20000, + materialStockRemaining: "N/A", + }, + ], + }, + { + activityName: "Construction Stage", + levelId: "L2-002", + startDate: "2025-08-16", + endDate: "2025-10-20", + supervisor: "James Patel", + team: "Construction Division", + status: "In Progress", + progress: 75, + totalBudget: 900000, + paidToDate: 675000, + currency: "USD", + costCode: "03-01-00", + permitStatus: "Issued", + inspectionDate: "2025-10-21", + inspectionStatus: "Passed with Notes", + followUpActions: "Reinforce structure", + inspectionCost: 300, + punchListStatus: "Open", + documentReference: "DOC-TWR-CON-STG", + materialUsed: "Construction Materials", + materialCost: 50000, + materialStockRemaining: "300 tons", + children: [ + { + activityName: "Foundation Construction Task", + levelId: "L3-004", + startDate: "2025-08-16", + endDate: "2025-08-25", + inspectionDate: "2025-08-26", + status: "Completed", + progress: 100, + totalBudget: 305000, + paidToDate: 350000, + supervisor: "Robert Singh", + team: "Foundation Crew", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-TWR-FND-TSK", + materialUsed: "Concrete", + materialCost: 15000, + materialStockRemaining: "N/A", + }, + { + activityName: "Structural Construction Task", + levelId: "L3-005", + startDate: "2025-08-26", + endDate: "2025-09-20", + inspectionDate: "2025-09-21", + status: "In Progress", + progress: 80, + totalBudget: 300000, + paidToDate: 240000, + supervisor: "Nathan Blake", + team: "Structural Team", + permitStatus: "Approved", + inspectionStatus: "Passed with Notes", + followUpActions: "Reinforce beams", + inspectionCost: 100, + punchListStatus: "Open", + documentReference: "DOC-TWR-STR-TSK", + materialUsed: "Steel Beams", + materialCost: 20000, + materialStockRemaining: "200 tons", + }, + { + activityName: "Exterior Construction Task", + levelId: "L3-006", + startDate: "2025-09-21", + endDate: "2025-10-20", + inspectionDate: "2025-10-21", + status: "In Progress", + progress: 40, + totalBudget: 300000, + paidToDate: 120000, + supervisor: "Thomas Reed", + team: "Exterior Crew", + permitStatus: "Approved", + inspectionStatus: "Passed with Notes", + followUpActions: "Continue exterior work", + inspectionCost: 100, + punchListStatus: "Open", + documentReference: "DOC-TWR-EXT-TSK", + materialUsed: "Metal Panels", + materialCost: 15000, + materialStockRemaining: "300 panels", + }, + ], + }, + { + activityName: "Safety Stage", + levelId: "L2-003", + startDate: "2025-10-21", + endDate: "2025-11-05", + supervisor: "Nathan Blake", + team: "Safety Division", + status: "In Progress", + progress: 60, + totalBudget: 50000, + paidToDate: 30000, + currency: "USD", + costCode: "04-01-00", + permitStatus: "Issued", + inspectionDate: "2025-11-06", + inspectionStatus: "Scheduled", + followUpActions: "Complete safety audit", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-SAF-STG", + materialUsed: "Safety Equipment", + materialCost: 10000, + materialStockRemaining: "50 units", + children: [ + { + activityName: "OSHA Compliance Task", + levelId: "L3-007", + startDate: "2025-10-21", + endDate: "2025-10-27", + inspectionDate: "2025-10-28", + status: "In Progress", + progress: 70, + totalBudget: 20000, + paidToDate: 14000, + supervisor: "Laura Bennett", + team: "Safety Inspectors", + permitStatus: "Issued", + inspectionStatus: "In Progress", + followUpActions: "Complete briefing", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-OSHA-TSK", + materialUsed: "Safety Gear", + materialCost: 4000, + materialStockRemaining: "40 helmets", + }, + { + activityName: "Fire Safety Task", + levelId: "L3-008", + startDate: "2025-10-28", + endDate: "2025-11-01", + inspectionDate: "2025-11-02", + status: "Scheduled", + progress: 30, + totalBudget: 15000, + paidToDate: 0, + supervisor: "Melissa Tran", + team: "Fire Safety Team", + permitStatus: "Issued", + inspectionStatus: "Scheduled", + followUpActions: "Install exits", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-FIRE-TSK", + materialUsed: "Extinguishers", + materialCost: 3000, + materialStockRemaining: "15 units", + }, + { + activityName: "Structural Audit Task", + levelId: "L3-009", + startDate: "2025-11-02", + endDate: "2025-11-05", + inspectionDate: "2025-11-06", + status: "Scheduled", + progress: 20, + totalBudget: 15000, + paidToDate: 0, + supervisor: "David Lin", + team: "Audit Engineers", + permitStatus: "Issued", + inspectionStatus: "Scheduled", + followUpActions: "Verify integrity", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-AUD-TSK", + materialUsed: "Inspection Tools", + materialCost: 3000, + materialStockRemaining: "N/A", + }, + ], + }, + { + activityName: "Finishing Stage", + levelId: "L2-004", + startDate: "2025-11-06", + endDate: "2025-12-10", + supervisor: "Melissa Tran", + team: "Finishing Division", + status: "Planning", + progress: 30, + totalBudget: 250000, + paidToDate: 75000, + currency: "USD", + costCode: "05-01-00", + permitStatus: "Under Review", + inspectionDate: "2025-12-11", + inspectionStatus: "Scheduled", + followUpActions: "Begin interior work", + inspectionCost: 0, + punchListStatus: "Pending", + documentReference: "DOC-TWR-FIN-STG", + materialUsed: "Finishing Supplies", + materialCost: 25000, + materialStockRemaining: "200 units", + children: [ + { + activityName: "Interior Drywall Task", + levelId: "L3-010", + startDate: "2025-11-06", + endDate: "2025-11-20", + inspectionDate: "2025-11-21", + status: "In Progress", + progress: 50, + totalBudget: 80000, + paidToDate: 40000, + supervisor: "Hannah Kim", + team: "Drywall Crew", + permitStatus: "Issued", + inspectionStatus: "In Progress", + followUpActions: "Check alignment", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-DRY-TSK", + materialUsed: "Drywall Sheets", + materialCost: 8000, + materialStockRemaining: "150 panels", + }, + { + activityName: "Flooring Installation Task", + levelId: "L3-011", + startDate: "2025-11-21", + endDate: "2025-12-01", + inspectionDate: "2025-12-02", + status: "Scheduled", + progress: 10, + totalBudget: 80000, + paidToDate: 0, + supervisor: "Sarah Patel", + team: "Flooring Team", + permitStatus: "Issued", + inspectionStatus: "Scheduled", + followUpActions: "Verify level", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-FLR-TSM", + materialUsed: "Concrete Flooring", + materialCost: 10000, + materialStockRemaining: "200 bags", + }, + { + activityName: "Fixture Setup Task", + levelId: "L3-012", + startDate: "2025-12-02", + endDate: "2025-12-10", + inspectionDate: "2025-12-11", + status: "Scheduled", + progress: 10, + totalBudget: 90000, + paidToDate: 0, + supervisor: "Lucas Nguyen", + team: "Fit-Out Crew", + permitStatus: "Issued", + inspectionStatus: "Scheduled", + followUpActions: "Install fixtures", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-FIX-TSK", + materialUsed: "Lighting Fixtures", + materialCost: 7000, + materialStockRemaining: "50 units", + }, + ], + }, + { + activityName: "Closeout Stage", + levelId: "L2-005", + startDate: "2025-12-11", + endDate: "2025-12-29", + supervisor: "Emma Wilson", + team: "Closeout Division", + status: "Planning", + progress: 20, + totalBudget: 50000, + paidToDate: 10000, + currency: "USD", + costCode: "06-01-00", + permitStatus: "Under Review", + inspectionDate: "2025-12-30", + inspectionStatus: "Scheduled", + followUpActions: "Finalize handover", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-TWR-CLO-STG", + materialUsed: "Closeout Documents", + materialCost: 5000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Punch List Review Task", + levelId: "L3-013", + startDate: "2025-12-11", + endDate: "2025-12-15", + inspectionDate: "2025-12-16", + status: "Scheduled", + progress: 20, + totalBudget: 15000, + paidToDate: 0, + supervisor: "John Carter", + team: "Closeout Team", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Resolve issues", + inspectionCost: 0, + punchListStatus: "Pending", + documentReference: "DOC-TWR-PLR-TSK", + materialUsed: "Punch List Forms", + materialCost: 2000, + materialStockRemaining: "N/A", + }, + { + activityName: "Final Documentation Task", + levelId: "L3-014", + startDate: "2025-12-16", + endDate: "2025-12-22", + inspectionDate: "2025-12-23", + status: "Scheduled", + progress: 20, + totalBudget: 15000, + paidToDate: 0, + supervisor: "Emily Foster", + team: "Documentation Team", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Prepare reports", + inspectionCost: 0, + punchListStatus: "Pending", + documentReference: "DOC-TWR-FD-TSK", + materialUsed: "As-Built Drawings", + materialCost: 2000, + materialStockRemaining: "N/A", + }, + { + activityName: "Client Handover Task", + levelId: "L3-015", + startDate: "2025-12-23", + endDate: "2025-12-29", + inspectionDate: "2025-12-30", + status: "Scheduled", + progress: 20, + totalBudget: 20000, + paidToDate: 0, + supervisor: "Emma Wilson", + team: "Client Relations", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Conduct walkthrough", + inspectionCost: 0, + punchListStatus: "Pending", + documentReference: "DOC-TWR-CH-TSK", + materialUsed: "Handover Kits", + materialCost: 1000, + materialStockRemaining: "Delivered", + }, + ], + }, + ], + }, + { + activityName: "Warehouse", + levelId: "L1-004", + startDate: "2025-08-01", + endDate: "2025-12-28", + supervisor: "Emma Wilson", + team: "Executive Oversight", + status: "Active", + progress: 55, + totalBudget: 1030000, + paidToDate: 566500, + currency: "USD", + costCode: "01-00-00", + permitStatus: "Approved", + inspectionDate: "2025-12-29", + inspectionStatus: "Passed with Notes", + followUpActions: "Address structural concerns", + inspectionCost: 400, + punchListStatus: "Open", + documentReference: "DOC-WH-OVR", + materialUsed: "Project Planning Kits", + materialCost: 50000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Design Stage", + levelId: "L2-016", + startDate: "2025-08-01", + endDate: "2025-09-10", + supervisor: "Ethan Park", + team: "Design Division", + status: "Completed", + progress: 100, + totalBudget: 202000, + paidToDate: 220000, + currency: "USD", + costCode: "02-01-00", + permitStatus: "Issued", + inspectionDate: "2025-09-11", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 300, + punchListStatus: "Cleared", + documentReference: "DOC-WH-DES-STG", + materialUsed: "Design Blueprints", + materialCost: 30000, + materialStockRemaining: "N/A", + children: [ + { + activityName: "Architectural Design Task", + levelId: "L3-046", + startDate: "2025-08-02", + endDate: "2025-08-12", + inspectionDate: "2025-08-13", + status: "Completed", + progress: 100, + totalBudget: 70000, + paidToDate: 70200, + supervisor: "David Lin", + team: "Architecture Unit", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-WH-ARC-TSK", + materialUsed: "CAD Drawings", + materialCost: 10000, + materialStockRemaining: "N/A", + }, + { + activityName: "Structural Design Task", + levelId: "L3-047", + startDate: "2025-08-13", + endDate: "2025-08-28", + inspectionDate: "2025-08-29", + status: "Completed", + progress: 100, + totalBudget: 72000, + paidToDate: 70000, + supervisor: "Sarah Patel", + team: "Structural Unit", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-WH-STR-TSK", + materialUsed: "Structural Plans", + materialCost: 10000, + materialStockRemaining: "N/A", + }, + { + activityName: "MEP Design Task", + levelId: "L3-048", + startDate: "2025-08-29", + endDate: "2025-09-10", + inspectionDate: "2025-09-11", + status: "Completed", + progress: 100, + totalBudget: 62000, + paidToDate: 60000, + supervisor: "Carlos Rivera", + team: "MEP Unit", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-WH-MEP-TSK", + materialUsed: "Electrical Schematics", + materialCost: 10000, + materialStockRemaining: "N/A", + }, + ], + }, + { + activityName: "Construction Stage", + levelId: "L2-017", + startDate: "2025-09-11", + endDate: "2025-11-20", + supervisor: "James Patel", + team: "Construction Division", + status: "In Progress", + progress: 50, + totalBudget: 800000, + paidToDate: 400000, + currency: "USD", + costCode: "03-01-00", + permitStatus: "Issued", + inspectionDate: "2025-11-21", + inspectionStatus: "Passed with Notes", + followUpActions: "Address structural issues", + inspectionCost: 400, + punchListStatus: "Open", + documentReference: "DOC-WH-CON-STG", + materialUsed: "Construction Materials", + materialCost: 200000, + materialStockRemaining: "500 tons", + children: [ + { + activityName: "Foundation Construction Task", + levelId: "L3-049", + startDate: "2025-09-11", + endDate: "2025-09-25", + inspectionDate: "2025-09-26", + status: "Completed", + progress: 100, + totalBudget: 300000, + paidToDate: 320000, + supervisor: "Robert Singh", + team: "Foundation Crew", + permitStatus: "Approved", + inspectionStatus: "Passed", + followUpActions: "None", + inspectionCost: 100, + punchListStatus: "Cleared", + documentReference: "DOC-WH-FND-TSK", + materialUsed: "Concrete Mix", + materialCost: 80000, + materialStockRemaining: "N/A", + }, + { + activityName: "Framing Construction Task", + levelId: "L3-050", + startDate: "2025-09-26", + endDate: "2025-10-25", + inspectionDate: "2025-10-26", + status: "In Progress", + progress: 60, + totalBudget: 300000, + paidToDate: 180000, + supervisor: "Angela Moore", + team: "Structural Crew", + permitStatus: "Approved", + inspectionStatus: "Passed with Notes", + followUpActions: "Continue framing", + inspectionCost: 200, + punchListStatus: "Open", + documentReference: "DOC-WH-FRM-TSK", + materialUsed: "Steel Beams", + materialCost: 60000, + materialStockRemaining: "200 tons", + }, + { + activityName: "Exterior Construction Task", + levelId: "L3-051", + startDate: "2025-10-26", + endDate: "2025-11-20", + inspectionDate: "2025-11-21", + status: "In Progress", + progress: 20, + totalBudget: 200000, + paidToDate: 40000, + supervisor: "Thomas Reed", + team: "Exterior Crew", + permitStatus: "Issued", + inspectionStatus: "In Progress", + followUpActions: "Continue exterior work", + inspectionCost: 0, + punchListStatus: "Open", + documentReference: "DOC-WH-EXT-TSK", + materialUsed: "Metal Panels", + materialCost: 60000, + materialStockRemaining: "300 panels", + }, + ], + }, + { + activityName: "Safety Stage", + levelId: "L2-018", + startDate: "2025-11-21", + endDate: "2025-12-10", + supervisor: "Nathan Blake", + team: "Safety Division", + status: "Planning", + progress: 30, + totalBudget: 30000, + paidToDate: 9000, + currency: "USD", + costCode: "04-01-00", + permitStatus: "Under Review", + inspectionDate: "2025-12-11", + inspectionStatus: "Scheduled", + followUpActions: "Schedule safety audit", + inspectionCost: 0, + punchListStatus: "Scheduled", + documentReference: "DOC-WH-SAF-STG", + materialUsed: "Safety Equipment", + materialCost: 5000, + materialStockRemaining: "50 units", + children: [ + { + activityName: "OSHA Compliance Task", + levelId: "L3-052", + startDate: "2025-11-21", + endDate: "2025-11-28", + inspectionDate: "2025-11-29", + status: "Scheduled", + progress: 30, + totalBudget: 10000, + paidToDate: 0, + supervisor: "Laura Bennett", + team: "Safety Inspectors", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Conduct briefing", + inspectionCost: 0, + punchListStatus: "Not Started", + documentReference: "DOC-WH-OSHA-TSK", + materialUsed: "Safety Gear", + materialCost: 2000, + materialStockRemaining: "40 helmets", + }, + { + activityName: "Fire Safety Task", + levelId: "L3-053", + startDate: "2025-11-29", + endDate: "2025-12-05", + inspectionDate: "2025-12-06", + status: "Scheduled", + progress: 20, + totalBudget: 10000, + paidToDate: 0, + supervisor: "Melissa Tran", + team: "Fire Safety Team", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Install exits", + inspectionCost: 0, + punchListStatus: "Not Started", + documentReference: "DOC-WH-FIRE-TSK", + materialUsed: "Extinguishers", + materialCost: 1500, + materialStockRemaining: "15 units", + }, + { + activityName: "Structural Audit Task", + levelId: "L3-054", + startDate: "2025-12-06", + endDate: "2025-12-10", + inspectionDate: "2025-12-11", + status: "Scheduled", + progress: 20, + totalBudget: 10000, + paidToDate: 0, + supervisor: "David Lin", + team: "Audit Engineers", + permitStatus: "Scheduled", + inspectionStatus: "Not Started", + followUpActions: "Verify integrity", + inspectionCost: 0, + punchListStatus: "Not Started", + documentReference: "DOC-WH-AUD-TSK", + materialUsed: "Inspection Tools", + materialCost: 1500, + materialStockRemaining: "N/A", + }, + ], + }, + ], + }, +]; diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/index.tsx b/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs2/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+++ ++ ++ + + + + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs2/index.css b/ej2-react/code-snippet/treegrid/row-spanning-cs2/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs2/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs2/index.html b/ej2-react/code-snippet/treegrid/row-spanning-cs2/index.html new file mode 100644 index 000000000..1948c21bb --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs2/index.html @@ -0,0 +1,41 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/row-spanning-cs2/systemjs.config.js b/ej2-react/code-snippet/treegrid/row-spanning-cs2/systemjs.config.js new file mode 100644 index 000000000..0ad13bbda --- /dev/null +++ b/ej2-react/code-snippet/treegrid/row-spanning-cs2/systemjs.config.js @@ -0,0 +1,61 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/treegrid/selection-cs10/app/App.jsx b/ej2-react/code-snippet/treegrid/selection-cs10/app/App.jsx new file mode 100644 index 000000000..299fe8937 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/selection-cs10/app/App.jsx @@ -0,0 +1,43 @@ +import { + TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Selection, VirtualScroll, +} from '@syncfusion/ej2-react-treegrid'; +import { taskData } from './datasource'; + +import * as React from 'react'; + +function App() { + let treegridInstance; + + const selectionSettings = { persistSelection: true }; + + const isRowSelectable = (data,columns) => { + return data.Progress !== 'Completed'; + }; + returnLoading....+{ treegridInstance = treegrid }} + dataSource={taskData} + idMapping='TaskID' + parentIdMapping='ParentID' + treeColumnIndex={1} + height={600} + enableVirtualization={true} + selectionSettings={selectionSettings} + isRowSelectable= {isRowSelectable} + > + +} +; +export default App; diff --git a/ej2-react/code-snippet/treegrid/selection-cs10/app/App.tsx b/ej2-react/code-snippet/treegrid/selection-cs10/app/App.tsx new file mode 100644 index 000000000..98679df15 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/selection-cs10/app/App.tsx @@ -0,0 +1,43 @@ +import { + TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Selection, VirtualScroll, +} from '@syncfusion/ej2-react-treegrid'; +import { taskData } from './datasource'; + +import * as React from 'react'; + +function App() { + let treegridcs10: TreeGridComponent; + + const selectionSettings: any = { persistSelection: true }; + + const isRowSelectable = (data: any,columns:any): boolean => { + return data.Progress !== 'Completed'; + }; + return+ ++ + + + + + + + + + { treegridcs10 = treegrid }} + dataSource={taskData} + idMapping='TaskID' + parentIdMapping='ParentID' + treeColumnIndex={1} + height={600} + enableVirtualization={true} + selectionSettings={selectionSettings} + isRowSelectable={isRowSelectable} + > + +} +; +export default App; diff --git a/ej2-react/code-snippet/treegrid/selection-cs10/app/datasource.tsx b/ej2-react/code-snippet/treegrid/selection-cs10/app/datasource.tsx new file mode 100644 index 000000000..188415ee4 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/selection-cs10/app/datasource.tsx @@ -0,0 +1,103 @@ +interface Task { + TaskID: number; + ParentID: number | null; + Task: string; + AssignedTo: string; + StartDate: string; + DueDate: string; + Priority: string; + Progress: string; + Status: number; +} + +let NUM_ROOTS = 60; +let CHILDREN_PER_ROOT = 8; +let TOTAL_RECORDS = NUM_ROOTS + NUM_ROOTS * CHILDREN_PER_ROOT; + +console.log(`Generating ${TOTAL_RECORDS} records (last 2 years)`); + +let employees: string[] = [ + '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' +]; + +let priorities: string[] = ['Low','Normal','High','Urgent']; +let progressStates: string[] = ['Not Started', 'In Progress', 'Completed']; + +let rootTasks: string[] = [ + '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' +]; + +let childTasks: string[] = [ + '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' +]; + +let START_DATE = new Date('2023-11-10T00:00:00'); +let END_DATE = new Date('2025-11-10T00:00:00'); + +function randomDate(start: Date, end: Date): string { + let d = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + return d.toISOString().split('T')[0]; +} + +export let taskData: Task[] = []; +let id = 1; + +for (let i = 0; i < NUM_ROOTS; i++) { + let start = randomDate(START_DATE, END_DATE); + let due = randomDate(new Date(start), END_DATE); + let 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) + }); + + let rootId = id; + id++; + + for (let c = 0; c < CHILDREN_PER_ROOT; c++) { + let cStart = randomDate(new Date(start), new Date(due)); + let cDue = randomDate(new Date(cStart), new Date(due)); + let 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++; + } +} \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/selection-cs10/app/index.tsx b/ej2-react/code-snippet/treegrid/selection-cs10/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/selection-cs10/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(+ ++ + + + + + + + + + , document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/selection-cs10/index.css b/ej2-react/code-snippet/treegrid/selection-cs10/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/treegrid/selection-cs10/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/selection-cs10/index.html b/ej2-react/code-snippet/treegrid/selection-cs10/index.html new file mode 100644 index 000000000..1948c21bb --- /dev/null +++ b/ej2-react/code-snippet/treegrid/selection-cs10/index.html @@ -0,0 +1,41 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +++ + + \ No newline at end of file diff --git a/ej2-react/code-snippet/treegrid/selection-cs10/systemjs.config.js b/ej2-react/code-snippet/treegrid/selection-cs10/systemjs.config.js new file mode 100644 index 000000000..a39a70d4a --- /dev/null +++ b/ej2-react/code-snippet/treegrid/selection-cs10/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-treegrid": "syncfusion:ej2-treegrid/dist/ej2-treegrid.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-treegrid": "syncfusion:ej2-react-treegrid/dist/ej2-react-treegrid.umd.min.js", + "@syncfusion/ej2-react-inputs": "syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/uploader/external-click-cs1/app/index.jsx b/ej2-react/code-snippet/uploader/external-click-cs1/app/index.jsx index fb8881cfc..b379c7aa2 100644 --- a/ej2-react/code-snippet/uploader/external-click-cs1/app/index.jsx +++ b/ej2-react/code-snippet/uploader/external-click-cs1/app/index.jsx @@ -1,4 +1,3 @@ -{% raw %} import { select } from '@syncfusion/ej2-base'; import { UploaderComponent } from '@syncfusion/ej2-react-inputs'; import * as React from 'react'; @@ -22,5 +21,4 @@ export default class App extends React.Component { ); } } -ReactDOM.render(Loading....+, document.getElementById('fileupload')); -{% endraw %} \ No newline at end of file +ReactDOM.render( , document.getElementById('fileupload')); \ No newline at end of file diff --git a/ej2-react/code-snippet/uploader/external-click-cs1/app/index.tsx b/ej2-react/code-snippet/uploader/external-click-cs1/app/index.tsx index 7fabebcbb..ac5ea2724 100644 --- a/ej2-react/code-snippet/uploader/external-click-cs1/app/index.tsx +++ b/ej2-react/code-snippet/uploader/external-click-cs1/app/index.tsx @@ -1,6 +1,3 @@ -{% raw %} - - import { select } from '@syncfusion/ej2-base'; import { UploaderComponent } from '@syncfusion/ej2-react-inputs'; import * as React from 'react'; @@ -28,7 +25,4 @@ export default class App extends React.Component<{}, {}> { } } -ReactDOM.render( , document.getElementById('fileupload')); - - -{% endraw %} \ No newline at end of file +ReactDOM.render( , document.getElementById('fileupload')); \ No newline at end of file diff --git a/ej2-react/gantt/columns/column-headers.md b/ej2-react/gantt/columns/column-headers.md index 5bc5e6b4e..a206fce05 100644 --- a/ej2-react/gantt/columns/column-headers.md +++ b/ej2-react/gantt/columns/column-headers.md @@ -14,7 +14,7 @@ The React Gantt component provides flexible options to manage and customize colu ## Set custom header text -By default, column headers in the Gantt chart display the value defined in the [field](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#field) property. To customize the header title, use the [headerText](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#headertext) property within the column configuration. This allows you to define meaningful labels for each column as needed. +By default, column headers in the Gantt chart display the value defined in the [field](https://ej2.syncfusion.com/react/documentation/api/gantt/column#field) property. To customize the header title, use the [headerText](https://ej2.syncfusion.com/react/documentation/api/gantt/column#headertext) property within the column configuration. This allows you to define meaningful labels for each column as needed. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -31,11 +31,11 @@ By default, column headers in the Gantt chart display the value defined in the [ {% previewsample "page.domainurl/code-snippet/gantt/columnheader-cs1" %} > * The `headerText` property is optional. If not defined, the column's field value will be used as the header text by default. -> * To apply custom HTML content to the header cell, use the [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#headertemplate) property. +> * To apply custom HTML content to the header cell, use the [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/gantt/column#headertemplate) property. ## Customize header using template -You can customize the column header in the Gantt chart using the [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#headertemplate) property. This allows rendering custom HTML or React components within the header. +You can customize the column header in the Gantt chart using the [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/gantt/column#headertemplate) property. This allows rendering custom HTML or React components within the header. In this example, custom elements are applied to both the **TaskName** and **Duration** column headers. @@ -57,7 +57,7 @@ In this example, custom elements are applied to both the **TaskName** and **Dura ## Align header text -You can align the column header text in the Syncfusion® React Gantt component using the [headerTextAlign](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#headertextalign) property. By default, the text is aligned to the **left**. The available alignment options are: +You can align the column header text in the Syncfusion® React Gantt component using the [headerTextAlign](https://ej2.syncfusion.com/react/documentation/api/gantt/column#headertextalign) property. By default, the text is aligned to the **left**. The available alignment options are: - **Left:** Aligns text to the left (default). - **Center:** Aligns text to the center. @@ -78,11 +78,11 @@ You can align the column header text in the Syncfusion* The `headerTextAlign` property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the [textAlign](https://ej2.syncfusion.com/documentation/api/gantt/column/#textalign) property. +>* The `headerTextAlign` property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the [textAlign](https://ej2.syncfusion.com/documentation/api/gantt/column#textalign) property. ## Enable header text wrapping -You can enable autowrap in the Syncfusion React Gantt component to allow cell content to wrap onto the next line when it exceeds the defined column width. This wrapping behavior is based on the whitespace between words. To activate this feature, set the `allowTextWrap` property to **true** and specify an appropriate column [width](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#width). +You can enable autowrap in the Syncfusion React Gantt component to allow cell content to wrap onto the next line when it exceeds the defined column width. This wrapping behavior is based on the whitespace between words. To activate this feature, set the `allowTextWrap` property to **true** and specify an appropriate column [width](https://ej2.syncfusion.com/react/documentation/api/gantt/column#width). The wrapping behavior is defined using the `textWrapSettings.wrapMode` property of the `treeGrid` object. Available options include: @@ -92,7 +92,7 @@ The wrapping behavior is defined using the `textWrapSettings.wrapMode` property > * If column width is not defined, autowrap adjusts based on the overall Gantt chart width. > * Header text without white space may not wrap. -> * If cell content includes HTML tags, autowrap may not function as expected. In such cases, use [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#headertemplate) and [template](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#template) properties to customize the header and cell layout. +> * If cell content includes HTML tags, autowrap may not function as expected. In such cases, use [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/gantt/column#headertemplate) and [template](https://ej2.syncfusion.com/react/documentation/api/gantt/column#template) properties to customize the header and cell layout. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -151,7 +151,7 @@ Here is an example of how to change the header text of a column using the `getCo **Changing the header text of all columns:** -To modify the header text of all columns in the Gantt component, iterate through the columns collection and set the [headerText](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#headertext) property for each column. This approach ensures consistent customization across all headers. +To modify the header text of all columns in the Gantt component, iterate through the columns collection and set the [headerText](https://ej2.syncfusion.com/react/documentation/api/gantt/column#headertext) property for each column. This approach ensures consistent customization across all headers. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -169,7 +169,7 @@ To modify the header text of all columns in the Gantt component, iterate through ## Rotate header text -By default, header text in the Syncfusion® Gantt component is displayed horizontally. To rotate it vertically, diagonally, or at a custom angle, follow the steps below using the [customAttributes](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#customattributes) property of the column. +By default, header text in the Syncfusion® Gantt component is displayed horizontally. To rotate it vertically, diagonally, or at a custom angle, follow the steps below using the [customAttributes](https://ej2.syncfusion.com/react/documentation/api/gantt/column#customattributes) property of the column. **Step 1**: Create a CSS class with rotation styles. @@ -219,7 +219,7 @@ By default, header text in the Syncfusion® ## Add custom tooltip to header -You can display additional information in the Syncfusion® React Gantt component by adding custom tooltips to column headers. This is especially helpful when space is limited or when extra context is needed. To implement this, use the [beforeRender](https://ej2.syncfusion.com/react/documentation/api/gantt/#beforeRender) event of the `Tooltip` component. This event triggers before each header cell is rendered, allowing you to assign a custom tooltip dynamically. +You can display additional information in the Syncfusion® React Gantt component by adding custom tooltips to column headers. This is especially helpful when space is limited or when extra context is needed. To implement this, use the [beforeRender](https://ej2.syncfusion.com/react/documentation/api/gantt#beforeRender) event of the `Tooltip` component. This event triggers before each header cell is rendered, allowing you to assign a custom tooltip dynamically. The following example demonstrates how to use the `beforeRender` event to add a tooltip to a header cell: @@ -237,7 +237,7 @@ The following example demonstrates how to use the `beforeRender` event to add a {% previewsample "page.domainurl/code-snippet/gantt/columnheader-cs9" %} -> * The [headerCellInfo](https://ej2.syncfusion.com/react/documentation/api/gantt/#headercellinfo) event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered. +> * The [headerCellInfo](https://ej2.syncfusion.com/react/documentation/api/gantt#headercellinfo) event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered. ## Style header text @@ -270,7 +270,7 @@ You can apply styles to Gantt component header cells using the **.e-headercell** ### Using property -To customize the appearance of column headers in the Gantt component, use the [customAttributes](https://ej2.syncfusion.com/react/documentation/api/gantt/column/#customattributes) property. It accepts an object containing CSS class names that apply styles directly to header cells. +To customize the appearance of column headers in the Gantt component, use the [customAttributes](https://ej2.syncfusion.com/react/documentation/api/gantt/column#customattributes) property. It accepts an object containing CSS class names that apply styles directly to header cells. **Step 1:** Define a CSS class with the desired styles. @@ -283,8 +283,10 @@ To customize the appearance of column headers in the Gantt component, use the [c **Step 2:** Assign the class using `customAttributes` in the column definition. -```ts +```js +{% raw %} +{% endraw %} ``` {% tabs %} diff --git a/ej2-react/gantt/columns/column-spanning.md b/ej2-react/gantt/columns/column-spanning.md index d55d11b46..084ab9c05 100644 --- a/ej2-react/gantt/columns/column-spanning.md +++ b/ej2-react/gantt/columns/column-spanning.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The Syncfusion® React Gantt component supports **column spanning**, allowing adjacent cells to merge horizontally for improved layout clarity. This feature is useful for grouping related data or enhancing visual structure. -To enable column spanning, use the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/gantt/events#querycellinfo) event and set the [colSpan](https://ej2.syncfusion.com/react/documentation/api/gantt/queryCellInfoEventArgs/#colspan) property to define how many columns a cell should span. +To enable column spanning, use the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/gantt/events#querycellinfo) event and set the [colSpan](https://ej2.syncfusion.com/react/documentation/api/gantt/queryCellInfoEventArgs#colspan) property to define how many columns a cell should span. In the following example, **Work** cells are spanned to improve visual clarity: @@ -37,20 +37,18 @@ You can customize the border color of spanned cells using the [queryCellInfo](ht The following example demonstrates how to change the border color of spanned cells: {% tabs %} -{% highlight ts tabtitle="app.component.ts" %} -{% include code-snippet/gantt/columns/columnspan-cs2/src/app.component.ts %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/gantt/column-span-cs2/app/index.jsx %} {% endhighlight %} - -{% highlight ts tabtitle="main.ts" %} -{% include code-snippet/gantt/columns/columnspan-cs2/src/main.ts %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/gantt/column-span-cs2/app/index.tsx %} {% endhighlight %} - -{% highlight ts tabtitle="datasource.ts" %} -{% include code-snippet/gantt/columns/columntype-cs1/src/data.ts %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/gantt/column-span-cs2/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "page.domainurl/samples/gantt/columns/columnspan-cs2" %} + +{% previewsample "page.domainurl/code-snippet/gantt/column-span-cs2" %} ## Limitations diff --git a/ej2-react/gantt/columns/wbs-column.md b/ej2-react/gantt/columns/wbs-column.md index c1cd9c885..b294242c8 100644 --- a/ej2-react/gantt/columns/wbs-column.md +++ b/ej2-react/gantt/columns/wbs-column.md @@ -16,22 +16,22 @@ The Work Breakdown Structure (WBS) organizes project tasks hierarchically by ass To enable WBS in the Gantt component: -- **Enable WBS Codes**: Set [enableWBS](https://ej2.syncfusion.com/react/documentation/api/gantt/#enablewbs) to **true** to automatically generate unique task codes and define their predecessors. -- **Auto-Update Codes**: Set [enableAutoWbsUpdate](https://ej2.syncfusion.com/react/documentation/api/gantt/#enableautowbsupdate) to **true** to maintain accurate WBS codes during operations such as sorting, editing, or drag-and-drop. +- **Enable WBS Codes**: Set [enableWBS](https://ej2.syncfusion.com/react/documentation/api/gantt#enablewbs) to **true** to automatically generate unique task codes and define their predecessors. +- **Auto-Update Codes**: Set [enableAutoWbsUpdate](https://ej2.syncfusion.com/react/documentation/api/gantt#enableautowbsupdate) to **true** to maintain accurate WBS codes during operations such as sorting, editing, or drag-and-drop. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/gantt/wbscolumn-cs1/app/index.jsx %} +{% include code-snippet/gantt/wbs-column-cs1/app/index.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/gantt/wbscolumn-cs1/app/index.tsx %} +{% include code-snippet/gantt/wbs-column-cs1/app/index.tsx %} {% endhighlight %} {% highlight html tabtitle="index.html" %} -{% include code-snippet/gantt/wbscolumn-cs1/index.html %} +{% include code-snippet/gantt/wbs-column-cs1/index.html %} {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/gantt/wbscolumn-cs1" %} +{% previewsample "page.domainurl/code-snippet/gantt/wbs-column-cs1" %} ## Managing WBS code updates diff --git a/ej2-react/grid/aggregates/group-and-caption-aggregate.md b/ej2-react/grid/aggregates/group-and-caption-aggregate.md index c2e1d4cfe..dfdb001c4 100644 --- a/ej2-react/grid/aggregates/group-and-caption-aggregate.md +++ b/ej2-react/grid/aggregates/group-and-caption-aggregate.md @@ -10,10 +10,10 @@ domainurl: ##DomainURL## # Group and caption aggregate in React Grid component -Group footer and caption aggregates in the Syncfusion® React Grid component allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the [groupFooterTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/aggregateColumn/#groupfootertemplate) and [groupCaptionTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/aggregateColumn/#groupcaptiontemplate) properties of the [AggregateColumnDirective](https://helpej2.syncfusion.com/react/documentation/api/grid/aggregateColumn). +Group footer and caption aggregates in the Syncfusion® React Grid component allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the [groupFooterTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/aggregateColumn#groupfootertemplate) and [groupCaptionTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/aggregateColumn#groupcaptiontemplate) properties of the [AggregateColumnDirective](https://helpej2.syncfusion.com/react/documentation/api/grid/aggregateColumn). -> When working with group aggregates in Syncfusion® Grid, it is important to set the property [allowGrouping](https://helpej2.syncfusion.com/react/documentation/api/grid/column/#allowgrouping) of the [column](https://helpej2.syncfusion.com/react/documentation/api/grid/column) to **true**. -> To maintain grouped columns in the grid after grouping, set [showGroupedColumn](https://helpej2.syncfusion.com/react/documentation/api/grid/groupSettings/#showgroupedcolumn) to **true**. +> When working with group aggregates in Syncfusion® Grid, it is important to set the property [allowGrouping](https://helpej2.syncfusion.com/react/documentation/api/grid/column#allowgrouping) of the [column](https://helpej2.syncfusion.com/react/documentation/api/grid/column) to **true**. +> To maintain grouped columns in the grid after grouping, set [showGroupedColumn](https://helpej2.syncfusion.com/react/documentation/api/grid/groupSettings#showgroupedcolumn) to **true**. ## Group footer aggregates @@ -39,11 +39,11 @@ Here's an example that demonstrates how to use group footer aggregates in the Sy {% previewsample "page.domainurl/code-snippet/grid/aggregate-group-cs1" %} > * Use the template reference variable name as **#groupFooterTemplate** to specify the group footer template and as **#groupCaptionTemplate** to specify the group caption template. -> * The aggregate values must be accessed inside the template using their corresponding [type](https://ej2.syncfusion.com/react/documentation/api/grid/aggregateColumn/#type) name. +> * The aggregate values must be accessed inside the template using their corresponding [type](https://ej2.syncfusion.com/react/documentation/api/grid/aggregateColumn#type) name. ## Group caption aggregates -Group caption aggregates are displayed in the caption cells of each group. These cells appear at the top of each group and provide a summary of the grouped data. To display group caption aggregates, you can use the [groupCaptionTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/aggregateColumn/#groupcaptiontemplate) property. This property allows you to define a template that will be used to display the aggregate values in the group caption cells. +Group caption aggregates are displayed in the caption cells of each group. These cells appear at the top of each group and provide a summary of the grouped data. To display group caption aggregates, you can use the [groupCaptionTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/aggregateColumn#groupcaptiontemplate) property. This property allows you to define a template that will be used to display the aggregate values in the group caption cells. Here's an example that demonstrates how to use group and caption aggregates in the Syncfusion® React Grid component: @@ -65,11 +65,11 @@ Here's an example that demonstrates how to use group and caption aggregates in t {% previewsample "page.domainurl/code-snippet/grid/aggregate-group-cs2" %} > The group total summary in Syncfusion® Grid is calculated based on the current page records for each group by default. -> If you require aggregates for all the data in the grid, you can enable the [disablePageWiseAggregates](https://helpej2.syncfusion.com/documentation/api/grid/groupSettings/#disablepagewiseaggregates) property. +> If you require aggregates for all the data in the grid, you can enable the [disablePageWiseAggregates](https://helpej2.syncfusion.com/documentation/api/grid/groupSettings#disablepagewiseaggregates) property. ## Disable page wise aggregates for grouping -In some cases, you may want to disable the page-wise aggregates for grouping in the Syncfusion® React Grid component. By default, when grouping is enabled with paging, the grid calculates the aggregates for each page separately. However, you can choose to disable this behavior and calculate aggregates for the entire grouped data instead. This can be achieved by setting the [disablePageWiseAggregates](https://helpej2.syncfusion.com/documentation/api/grid/groupSettings/#disablepagewiseaggregates) property to **true**. +In some cases, you may want to disable the page-wise aggregates for grouping in the Syncfusion® React Grid component. By default, when grouping is enabled with paging, the grid calculates the aggregates for each page separately. However, you can choose to disable this behavior and calculate aggregates for the entire grouped data instead. This can be achieved by setting the [disablePageWiseAggregates](https://helpej2.syncfusion.com/documentation/api/grid/groupSettings#disablepagewiseaggregates) property to **true**. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -90,4 +90,4 @@ In some cases, you may want to disable the page-wise aggregates for grouping in ## See also -* [How to format aggregate value in React grid](footer-aggregate.md#format-the-aggregate-value) \ No newline at end of file +* [How to format aggregate value in React grid](footer-aggregate#format-the-aggregate-value) \ No newline at end of file diff --git a/ej2-react/grid/global-local.md b/ej2-react/grid/global-local.md index 5a82b0316..f39f4f68f 100644 --- a/ej2-react/grid/global-local.md +++ b/ej2-react/grid/global-local.md @@ -596,7 +596,7 @@ function App() { (grid as GridComponent).enableRtl = !args.checked; } return ( - +grid = g} dataSource={data} locale='ar-AE' allowPaging={true} pageSettings={pageOptions} allowGrouping={true} allowSorting={true} allowReordering={true} allowFiltering={true} editSettings={editSettings} toolbar={toolbar} enableRtl={true} showColumnChooser={true} showColumnMenu={true}> diff --git a/ej2-react/grid/hierarchy-grid.md b/ej2-react/grid/hierarchy-grid.md index b02344d50..5283684e5 100644 --- a/ej2-react/grid/hierarchy-grid.md +++ b/ej2-react/grid/hierarchy-grid.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The Hierarchy Grid in an React 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/react/documentation/api/grid/#childgrid) and [childGrid.queryString](https://ej2.syncfusion.com/react/documentation/api/grid/#querystring) properties of the grid component. +This feature can be enabled by utilizing the [childGrid](https://ej2.syncfusion.com/react/documentation/api/grid#childgrid) and [childGrid.queryString](https://ej2.syncfusion.com/react/documentation/api/grid#querystring) properties of the grid component. To enable the Hierarchy Grid feature: @@ -42,13 +42,13 @@ The following example demonstrates how to enable the hierarchy feature in the gr {% previewsample "page.domainurl/code-snippet/grid/hierarchy-grid-cs1" %} > * Grid supports n level of child grids. -> * Hierarchical binding is not supported when [DetailTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/#detailtemplate) is enabled. +> * Hierarchical binding is not supported when [DetailTemplate](https://ej2.syncfusion.com/react/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/react/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/react/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/react/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/react/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. @@ -100,7 +100,7 @@ The following example demonstrates how to render aggregates in a child grid to d Expanding the child grid initially in the Syncfusion® React 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/react/documentation/api/grid/detailRow/#expand) method with the desired target index (number) in the [dataBound](https://ej2.syncfusion.com/react/documentation/api/grid/#databound) event of the grid. +To achieve this, you can use the [expand](https://ej2.syncfusion.com/react/documentation/api/grid/detailRow#expand) method with the desired target index (number) in the [dataBound](https://ej2.syncfusion.com/react/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. @@ -127,7 +127,7 @@ In the provided example, expand the third record of the grid by utilizing the `e Dynamically load child grid data in Syncfusion® React 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/react/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/react/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. @@ -152,7 +152,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® React 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/react/documentation/api/grid/#querystring) property, you can utilize the [detailDataBound](https://ej2.syncfusion.com/react/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/react/documentation/api/grid#querystring) property, you can utilize the [detailDataBound](https://ej2.syncfusion.com/react/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. @@ -177,7 +177,7 @@ In the `detailDataBound` event handler, you can filter the child grid's dataSour Adding a record in a child grid within the Syncfusion® React 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/react/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/react/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. @@ -202,9 +202,9 @@ In the following example, the parent and child grids are related by the **Employ A template column in a child grid within the Syncfusion® React 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/react/documentation/api/grid/column/#template) property of a column to display a custom element instead of a field value in the Grid. Template columns defined in the child grid will be null in the **ngOnInit** method, which means they will not be shown in the UI. They will be rendered after the entire HTML view rendering process, and you can access and utilize them in the **ngAfterViewInit** method to display the template columns in the child grid. +To achieve this, you can utilize the [template](https://ej2.syncfusion.com/react/documentation/api/grid/column#template) property of a column to display a custom element instead of a field value in the Grid. Template columns defined in the child grid will be null in the **ngOnInit** method, which means they will not be shown in the UI. They will be rendered after the entire HTML view rendering process, and you can access and utilize them in the **ngAfterViewInit** method to display the template columns in the child grid. -During the [load](https://ej2.syncfusion.com/react/documentation/api/grid/#load) event of the child grid, it is necessary to set the 'registeredTemplate' to empty. This action will remove any previously existing templates. By doing so, you gain the flexibility to dynamically apply templates to the grid's cells based on different conditions or requirements. +During the [load](https://ej2.syncfusion.com/react/documentation/api/grid#load) event of the child grid, it is necessary to set the 'registeredTemplate' to empty. This action will remove any previously existing templates. By doing so, you gain the flexibility to dynamically apply templates to the grid's cells based on different conditions or requirements. 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. @@ -229,7 +229,7 @@ The following example demonstrates, how to show a custom image in the **Employee Getting parent details in a child grid in an React 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/react/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/react/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. @@ -331,7 +331,7 @@ export default App; The Hierarchy Grid in the Syncfusion® React 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/react/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/react/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/react/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/react/documentation/api/grid/detailRow#collapseall) method. The following example demonstrates how to expand and collapse the hierarchy grid using an external button click function. @@ -359,7 +359,7 @@ The following example demonstrates how to expand and collapse the hierarchy grid The Syncfusion® React 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/react/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/react/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: @@ -446,6 +446,35 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and {% previewsample "page.domainurl/code-snippet/grid/hierarchy-grid-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 js tabtitle="App.jsx" %} +{% include code-snippet/grid/detail-row-events/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/detail-row-events/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/detail-row-events/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/detail-row-events/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/grid/detail-row-events" %} + ## Customize the child grid The Syncfusion® React 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. diff --git a/ej2-react/grid/images/anomaly-detection.gif b/ej2-react/grid/images/anomaly-detection.gif new file mode 100644 index 000000000..f01fc6204 Binary files /dev/null and b/ej2-react/grid/images/anomaly-detection.gif differ diff --git a/ej2-react/grid/images/predictive-data.gif b/ej2-react/grid/images/predictive-data.gif new file mode 100644 index 000000000..8a9c4b671 Binary files /dev/null and b/ej2-react/grid/images/predictive-data.gif differ diff --git a/ej2-react/grid/images/semantic-search.gif b/ej2-react/grid/images/semantic-search.gif new file mode 100644 index 000000000..8a721b7a9 Binary files /dev/null and b/ej2-react/grid/images/semantic-search.gif differ diff --git a/ej2-react/grid/images/smart-grid-action.gif b/ej2-react/grid/images/smart-grid-action.gif new file mode 100644 index 000000000..88fa6e064 Binary files /dev/null and b/ej2-react/grid/images/smart-grid-action.gif differ diff --git a/ej2-react/grid/row/detail-template.md b/ej2-react/grid/row/detail-template.md index e7e04bbe2..52f13ac2b 100644 --- a/ej2-react/grid/row/detail-template.md +++ b/ej2-react/grid/row/detail-template.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Detail template in React 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/react/documentation/api/grid/#detailtemplate) property to define an HTML template for the detail row. This template can include any HTML element or React 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/react/documentation/api/grid#detailtemplate) property to define an HTML template for the detail row. This template can include any HTML element or React component that you want to display as detail content. Here's an example of using the `detailTemplate` property in the grid component: @@ -185,9 +185,9 @@ export default App; 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/react/documentation/api/grid/#detailtemplate) property and handle the [detailDataBound](https://ej2.syncfusion.com/react/documentation/api/grid/#detaildatabound) event.This template can include any HTML element or React 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/react/documentation/api/grid#detailtemplate) property and handle the [detailDataBound](https://ej2.syncfusion.com/react/documentation/api/grid#detaildatabound) event.This template can include any HTML element or React 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/react/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/react/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. @@ -212,7 +212,7 @@ For example, to render grid inside the detail row, place an HTML div element as The Grid provides a feature that allows users 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/react/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/react/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: @@ -602,4 +602,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 diff --git a/ej2-react/grid/selection/check-box-selection.md b/ej2-react/grid/selection/check-box-selection.md index bba6475ac..3bf8097de 100644 --- a/ej2-react/grid/selection/check-box-selection.md +++ b/ej2-react/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/react/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/react/documentation/api/grid/column#type) property. Here's an example of how to enable check box selection using `type` property in the Grid component: @@ -33,12 +33,12 @@ Here's an example of how to enable check box selection using `type` property in {% previewsample "page.domainurl/code-snippet/grid/selection-cs3" %} -> 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/react/documentation/api/grid/selectionSettings/#checkboxonly) property to **true**. -> Selection can be persisted on all the operations using [selectionSettings.persistSelection](https://ej2.syncfusion.com/react/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 [isPrimaryKey](https://ej2.syncfusion.com/react/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/react/documentation/api/grid/selectionSettings#checkboxonly) property to **true**. +> Selection can be persisted on all the operations using [selectionSettings.persistSelection](https://ej2.syncfusion.com/react/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 [isPrimaryKey](https://ej2.syncfusion.com/react/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/react/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/react/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. @@ -126,7 +126,7 @@ export default App; 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/react/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/react/documentation/api/grid/column/#headertemplate) directive in the grid Column. +By default, when you set the column type as [checkbox](https://ej2.syncfusion.com/react/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/react/documentation/api/grid/column#headertemplate) directive in the grid Column. Here's an example of how to hide selectall checkbox in column header using empty `HeaderTemplate` directive in the Grid component: @@ -151,7 +151,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/react/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/react/documentation/api/grid/rowDataBoundEventArgs/#isselectable) argument of the event to **false**. +To achieve this, you can use the [rowDataBound](https://ej2.syncfusion.com/react/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/react/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. @@ -236,13 +236,38 @@ export default App; {% previewsample "page.domainurl/code-snippet/grid/selection-cs5" %} +## 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 js tabtitle="App.jsx" %} +{% include code-snippet/grid/prevent-checkbox-selection/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/prevent-checkbox-selection/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/prevent-checkbox-selection/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/prevent-checkbox-selection/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/grid/prevent-checkbox-selection" %} + ## How to select single row in checkbox selection mode The React 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/react/documentation/api/grid/#rowselecting) event and use the [clearSelection](https://ej2.syncfusion.com/react/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/react/documentation/api/grid#rowselecting) event and use the [clearSelection](https://ej2.syncfusion.com/react/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/react/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/react/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: @@ -265,7 +290,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/react/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/react/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-react/grid/smart-grid/advanced-features.md b/ej2-react/grid/smart-grid/advanced-features.md new file mode 100644 index 000000000..f0551b427 --- /dev/null +++ b/ej2-react/grid/smart-grid/advanced-features.md @@ -0,0 +1,94 @@ +--- +layout: post +title: Smart Advanced Features in React Grid component | Syncfusion +description: Learn here all about Smart Grid with Advanced Features in Syncfusion React Grid component of Syncfusion Essential JS 2 and more. +control: Smart Grid +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Smart AI with Syncfusion React Grid + +Easily integrate Syncfusion EJ2 React Grid with AI models (e.g., **OpenAI GPT-4o-mini**, **Azure OpenAI**) to enable predictive analysis, anomaly detection, and semantic filtering via natural language or data-driven prompts. This toolkit transforms your grid into an intelligent data explorer, predicting future values, spotting irregularities, and enabling semantic searches without exact keywords. + +## Predictive analysis + +Predictive analysis computes and fills missing or future values based on existing data patterns. To enable predictive analysis, add a button labeled **Calculate Grade** above the grid. When the user clicks this button, capture the grid's [dataSource](https://ej2.syncfusion.com/react/documentation/api/grid/index-default#datasource) and send it to your backend for predictive computation. The backend returns JSON object with predicted values for columns such as **Final Year GPA**, **Total GPA**, and **Total Grade**. Reveal these hidden columns using [showColumns](https://ej2.syncfusion.com/react/documentation/api/grid/index-default#showcolumns) and update rows using [setRowData](https://ej2.syncfusion.com/react/documentation/api/grid/index-default#setrowdata) with smooth animation for a better user experience. Apply conditional styling through the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/grid/index-default#querycellinfo) event to highlight predicted values. + +{% tabs %} +{% highlight ts tabtitle="Predictive-Data.tsx" %} +{% include code-snippet/grid/predictive-data/predictive-data.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/predictive-data/App.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="Openai-Model.ts" %} +{% include code-snippet/grid/predictive-data/openai-model.ts %} +{% endhighlight %} +{% highlight css tabtitle="App.css" %} +{% include code-snippet/grid/predictive-data/App.css %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.ts" %} +{% include code-snippet/grid/predictive-data/datasource.ts %} +{% endhighlight %} +{% endtabs %} + +The following screenshot represents the predictive analysis, + + + +## Anomaly detection using AI + +Anomaly detection identifies irregular or illogical entries and provides explanations for flagged records. To integrate anomaly detection, add a button labeled **Detect Anomaly Data**. When clicked, send the full dataset to the backend for anomaly detection. The backend returns JSON object containing **Anomaly FieldName** and **Anomaly Description**. Reveal the hidden **Anomaly Description** column using [showColumns](https://ej2.syncfusion.com/react/documentation/api/grid/index-default#showcolumns) and update affected rows using [setRowData](https://ej2.syncfusion.com/react/documentation/api/grid/index-default#setrowdata). Highlight flagged cells in red and display anomaly descriptions using the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/grid/index-default#querycellinfo) event for clarity. + +{% tabs %} +{% highlight ts tabtitle="Anomaly-Detection.tsx" %} +{% include code-snippet/grid/anomaly-detection/anomaly-detection.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/anomaly-detection/App.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="Openai-Model.ts" %} +{% include code-snippet/grid/anomaly-detection/openai-model.ts %} +{% endhighlight %} +{% highlight css tabtitle="App.css" %} +{% include code-snippet/grid/anomaly-detection/App.css %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.ts" %} +{% include code-snippet/grid/anomaly-detection/datasource.ts %} +{% endhighlight %} +{% endtabs %} + +The following screenshot represents the anomaly detection, + + + +## Semantic filtering + +Semantic filtering enables natural language search for semantically related records. To enable semantic filtering, compute text embeddings in advance for all records during component mount, either locally or via a backend service. Add a search input and a **Smart Search** button to the UI. When the user clicks the button, generate an embedding for the search term and compute similarity against stored vectors. Select records above a similarity threshold, build a dynamic OR predicate using `Predicate`, and apply it through `grid.query`. + +{% tabs %} +{% highlight ts tabtitle="Semantic-Search.tsx" %} +{% include code-snippet/grid/semantic-search/semantic-search.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/semantic-search/App.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="Embedding-Model.ts" %} +{% include code-snippet/grid/semantic-search/embedding-model.ts %} +{% endhighlight %} +{% highlight ts tabtitle="Cosine-Similarity.ts" %} +{% include code-snippet/grid/semantic-search/cosine-similarity.ts %} +{% endhighlight %} +{% highlight ts tabtitle="Openai-Model.ts" %} +{% include code-snippet/grid/semantic-search/openai-model.ts %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.ts" %} +{% include code-snippet/grid/semantic-search/datasource.ts %} +{% endhighlight %} +{% endtabs %} + +The following screenshot represents the semantic filtering, + + \ No newline at end of file diff --git a/ej2-react/grid/smart-grid/smart-grid.md b/ej2-react/grid/smart-grid/smart-grid.md new file mode 100644 index 000000000..1bf3e672e --- /dev/null +++ b/ej2-react/grid/smart-grid/smart-grid.md @@ -0,0 +1,173 @@ +--- +layout: post +title: Smart Grid in React Grid component | Syncfusion +description: Learn here all about Smart Grid in Syncfusion React Grid component of Syncfusion Essential JS 2 and more. +control: Smart Grid +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Smart AI with Syncfusion React Grid + +The AI Toolkit integrates natural language interaction into the EJ2 React Grid. By connecting the grid to a Large Language Model (LLM) such as **OpenAI GPT‑4o‑mini**, users can execute grid operations such as filtering, sorting, grouping, and pagination through simple text commands. Examples of grid operations: + +* "Find iPhone 15 Pro" +* "Sort the Amount column from low to high" +* "Group by Status column" +* "Go to page 3" + +This feature is particularly valuable for enterprise applications where efficient and user-friendly data manipulation is essential. + +## How it works? + +The AI Toolkit uses a **strict prompt** and **JSON output** strategy to ensure reliable and secure grid manipulation. Here's the workflow: + +1. **User input:** The user enters a natural language query in the AI Assist panel. +2. **Prompt construction:** The client builds a strong prompt that combines the user query, column metadata (including field names and known values), and strict rules enforcing JSON-only output. +3. **LLM request:** The prompt is sent to a secure backend proxy (api/chat), which calls the LLM (e.g., GPT-4o-mini). +4. **Response processing:** The LLM returns a JSON object containing operations like: +```typescript +{ + "filter": [{ "field": "status", "operator": "equal", "value": "Pending" }], + "sort": [{ "field": "amount", "direction": "Ascending" }], + "group": [{ "field": "quantity" }], + "message": "Filtered by status = Pending, sorted by amount ascending and group by quantity." +} +``` + +5. **Apply changes:** The grid state can be updated either by modifying properties directly or by using Syncfusion Grid APIs, based on the JSON response. After applying the changes, the grid should be refreshed to reflect the updated state. The following example demonstrates how to update the grid state using properties: + +```typescript + gridInstance.setProperties({ + filterSettings: { columns: data.filter }, + sortSettings = { columns: data.sort }, + groupSettings = { columns: data.group }, + pageSettings = { currentPage: data.page.pageNumber } + }, true); + gridInstance.refresh(); +``` + +**Handle grid features** + +AI is capable of performing a wide range of data operations and manipulations based on the provided input. The following features are handled in this user guide for executing actions using AI: + +* Filtering – All Excel-style operators supported. +* Sorting – Multi-column, ascending/descending. +* Grouping – Group by one or more fields. +* Paging – Navigate to specific pages. +* Clearing – Remove filters, sorting, or grouping. + +## Integrate AI with grid + +To enable the AI Toolkit in your Syncfusion React Grid project, the following prerequisites must be satisfied: + +Step 1: Syncfusion React Grid installed and configured + +Follow the [getting started](https://ej2.syncfusion.com/react/documentation/grid/getting-started) to set up the grid in your application. + +Step 2: Include Syncfusion's AI assist toolbar + +Add the AI Assist toolbar component to your grid UI for AI interactions. + +```typescript + assistInstance = assist} toolbarSettings={toolbarSettings} promptRequest={onPromptRequest} promptSuggestionsHeader='Suggestions' responseItemTemplate={responseTemplate} > + +``` + +Step 3: LLM API key + +Obtain an API key from your preferred Large Language Model provider, such as **OpenAI**, **Azure OpenAI**, or **Google Gemini**. + +Step 4: Backend proxy + +Implement a secure backend service to handle requests to the LLM API. This ensures your API key remains protected and allows you to apply rate limiting and security measures. + +Step 5: Basic HTTP knowledge + +Familiarity with making HTTP requests using fetch or axios is required for client-server communication. + +## Build the prompt + +The following prompt includes predefined rules to handle grid actions such as filtering, sorting, grouping, and pagination using **OpenAI GPT-4o-mini**. Similarly, you can create your own predefined rules to manage grid operations. To ensure consistency and machine-readability, use a strict template that enforces JSON-only output. + +```typescript +Convert the following natural language query into a JSON object representing Syncfusion Query operations. + + Rules: + - Output only the JSON object, with no extra text. + - Available columns: ${JSON.stringify(columns)}. + - Sort direction must be either "Ascending" or "Descending". + + Action Handling: + - Include only actions explicitly mentioned in the query: filter, sort, page, group, clearFilter, clearSort, clearGroup. + - Supported filter operators: startswith, endswith, contains, doesnotstartwith, doesnotendwith, doesnotcontain, equal, notequal, greaterthan, greaterthanorequal, lessthan, lessthanorequal, isnull, isnotnull, isempty, isnotempty, between, in, notin. + - If the query involves only filtering, include only the "filter" key. + - If the query involves only sorting, include only the "sort" key. + - For clear actions: + - Use clearFilter: [] to clear all filters. + - Use clearSort: [] to clear all sorting. + - Use clearGroup: [] to clear all grouping. + - To clear specific fields, include them as arrays: clearFilter: ["field1"], clearSort: ["field2"], clearGroup: ["field3"]. + + Supported Operations: + - filter: [{ field, operator, value (array for "in"/"notin", otherwise single value), ignoreCase }] + - sort: [{ field, direction }] // columns not available return []. + - page: { pageNumber } // for page navigation not pagesize. + - group: [fields] - return group: [] if the columns not available. + + Additional Requirement: + - sort/group/filter only by available columns. + - Include a "message" field describing the interpreted query action and expected behavior. + - Handled actions: paging, filtering, sorting, grouping. + - If the action is not handled by this schema, need to clearly explain the action not handled in this schema and how to achieve it in Syncfusion React Grid. Dont explain the JSON structure. + User Input: ${text} +``` + +## Apply grid actions + +Convert the AI-generated prompt result into JSON format and execute the grid action based on that result. When using your own prompt, ensure the response is returned in JSON format. Parse the JSON and apply the action to the grid as shown below: + +```typescript + let jsonResult = result; + if (result.indexOf("```json") !== -1) { + jsonResult = result.split("```json")[1].split("```")[0].trim(); + } + let data; + data = JSON.parse(jsonResult); + executeGridAction(data, gridInstance); + assistInstance.addPromptResponse({ prompt: text, response: data }); +``` + +The following code example demonstrates how to create a assistive grid to perform grid action using natural language. + +{% tabs %} +{% highlight ts tabtitle="Grid.tsx" %} +{% include code-snippet/grid/smart-grid/Grid.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="GridAction.tsx" %} +{% include code-snippet/grid/smart-grid/GridAction.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/smart-grid/App.tsx %} +{% endhighlight %} +{% highlight ts tabtitle="Service.tsx" %} +{% include code-snippet/grid/smart-grid/Ai-service.ts %} +{% endhighlight %} +{% highlight ts tabtitle="Model.tsx" %} +{% include code-snippet/grid/smart-grid/AIModel.tsx %} +{% endhighlight %} +{% highlight css tabtitle="App.css" %} +{% include code-snippet/grid/smart-grid/App.css %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.ts" %} +{% include code-snippet/grid/smart-grid/datasource.ts %} +{% endhighlight %} +{% endtabs %} + +The following screenshot represents the assistive grid action, + + \ No newline at end of file diff --git a/ej2-react/image-editor/how-to/fit-to-width-and-height.md b/ej2-react/image-editor/how-to/fit-to-width-and-height.md new file mode 100644 index 000000000..7c1925717 --- /dev/null +++ b/ej2-react/image-editor/how-to/fit-to-width-and-height.md @@ -0,0 +1,29 @@ +--- +layout: post +title: Fit Image to Editor Width and Height in Image editor | Syncfusion +description: Learn here all about How to Fit Image to Editor Width and Height in Image editor Component of Syncfusion Essential JS 2 and more. +control: Fit Image to Editor Width and Height +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Fit Image to Editor Width and Height + +The Image Editor's [`zoom`](https://ej2.syncfusion.com/react/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 js tabtitle="app.jsx" %} +{% include code-snippet/image-editor/default-cs11/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/image-editor/default-cs11/app/app.tsx %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/image-editor/default-cs11/index.html %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/image-editor/default-cs11" %} \ No newline at end of file diff --git a/ej2-react/images/chart_elements.png b/ej2-react/images/chart_elements.png new file mode 100644 index 000000000..b0492c47c Binary files /dev/null and b/ej2-react/images/chart_elements.png differ diff --git a/ej2-react/kanban/drag-and-drop.md b/ej2-react/kanban/drag-and-drop.md index abef90867..2036c2426 100644 --- a/ej2-react/kanban/drag-and-drop.md +++ b/ej2-react/kanban/drag-and-drop.md @@ -21,7 +21,7 @@ The following drag and drop types are available in the Kanban board. * Kanban to Kanban * Kanban to External source and vice versa. -> Dropped card position varies based on the [sortSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#sortsettings) property. +> Dropped card position varies based on the [sortSettings](https://ej2.syncfusion.com/react/documentation/api/kanban#sortsettings) property. ## Internal drag and drop @@ -32,7 +32,7 @@ Allows the user to drag and drop the cards within the kanban board. Based on thi ### Column drag and drop -By default, all cards can be dragged and dropped across the columns and within the columns. You cannot drag and drop the cards when disabling the [allowDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowdraganddrop) property. +By default, all cards can be dragged and dropped across the columns and within the columns. You cannot drag and drop the cards when disabling the [allowDragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban#allowdraganddrop) property. > You can prevent the drag or drop behavior of the particular column by disabling the `allowDrag` or `allowDrop` property. > You can also control the flow of transition cards between the columns by using the `transitionColumns` property. @@ -75,7 +75,7 @@ In the following example, disable the drag and drop behavior on the Kanban board By default, Swimlane allows drag and drop across the columns within the swimlane row. Kanban does not allow dragging the cards across the swimlane rows. -Enabling the [dragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban/#allowdraganddrop) property allows you to drag the cards across the swimlane rows, which is specified inside the [swimlaneSettings](https://ej2.syncfusion.com/react/documentation/api/kanban/#swimlanesettings) property. +Enabling the [dragAndDrop](https://ej2.syncfusion.com/react/documentation/api/kanban#allowdraganddrop) property allows you to drag the cards across the swimlane rows, which is specified inside the [swimlaneSettings](https://ej2.syncfusion.com/react/documentation/api/kanban#swimlanesettings) property. `[Class-component]` @@ -115,11 +115,11 @@ Allows the user to drag and drop the cards from one kanban to another kanban or ### Kanban to kanban -Drag and drop the card from one kanban to another kanban and vice versa. This can be achieved by specifying the `externalDropId` property which is used to specify the id of the dropped kanban element and the [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban/#dragstop) event which is used to delete the card on dragged Kanban and add the card on dropped Kanban using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#deletecard) and [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#addcard) public methods. +Drag and drop the card from one kanban to another kanban and vice versa. This can be achieved by specifying the `externalDropId` property which is used to specify the id of the dropped kanban element and the [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban#dragstop) event which is used to delete the card on dragged Kanban and add the card on dropped Kanban using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban#deletecard) and [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban#addcard) public methods. > Before adding a card to dropped kanban, you can manually change the card data `headerField` when the same card data `headerField` is dropped to another Kanban. -In the following example, Drag the card from one Kanban and drop it into another kanban using the [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban/#dragstop) event. In this event, remove the card from the dragged Kanban by using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#deletecard) public method and add the card to the dropped Kanban by using the [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#addcard) public method. +In the following example, Drag the card from one Kanban and drop it into another kanban using the [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban#dragstop) event. In this event, remove the card from the dragged Kanban by using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban#deletecard) public method and add the card to the dropped Kanban by using the [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban#addcard) public method. `[Class-component]` @@ -157,7 +157,7 @@ In the following example, Drag the card from one Kanban and drop it into another Drag the card from the Kanban board and drop it to the Treeview component and vice versa. -In the following sample, remove the data from the Kanban board using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#deletecard) public method and add to the Treeview component using the `addNodes` public method at Kanban [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban/#dragstop) event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the `removeNodes` public method and add to Kanban board using the [openDialog](https://ej2.syncfusion.com/react/documentation/api/kanban/#opendialog) public method when dragging the list from the Treeview component and dropping it to the kanban board. +In the following sample, remove the data from the Kanban board using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban#deletecard) public method and add to the Treeview component using the `addNodes` public method at Kanban [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban#dragstop) event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the `removeNodes` public method and add to Kanban board using the [openDialog](https://ej2.syncfusion.com/react/documentation/api/kanban#opendialog) public method when dragging the list from the Treeview component and dropping it to the kanban board. `[Class-component]` @@ -195,7 +195,7 @@ In the following sample, remove the data from the Kanban board using the [delete Drag the card from the Kanban board and drop it to the Schedule component and vice versa. -In the following sample, remove the data from the Kanban board using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#deletecard) public method and add to the schedule component using the `addNodes` public method at Kanban [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban/#dragstop) event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the `removeNodes` public method and add to Kanban board using the [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban/#addcard) public method when dragging the list from the Treeview component and dropping it to the kanban board. +In the following sample, remove the data from the Kanban board using the [deleteCard](https://ej2.syncfusion.com/react/documentation/api/kanban#deletecard) public method and add to the schedule component using the `addNodes` public method at Kanban [dragStop](https://ej2.syncfusion.com/react/documentation/api/kanban#dragstop) event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the `removeNodes` public method and add to Kanban board using the [addCard](https://ej2.syncfusion.com/react/documentation/api/kanban#addcard) public method when dragging the list from the Treeview component and dropping it to the kanban board. `[Class-component]` @@ -211,7 +211,7 @@ In the following sample, remove the data from the Kanban board using the [delete {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/kanban/kanban-to-schedule-cs1" %} +{% previewsample "page.domainurl/code-snippet/kanban/kanban-to-schedule-cs3" %} `[Functional-component]` @@ -227,4 +227,4 @@ In the following sample, remove the data from the Kanban board using the [delete {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/kanban/kanban-to-schedule-cs2" %} \ No newline at end of file +{% previewsample "page.domainurl/code-snippet/kanban/kanban-to-schedule-cs4" %} \ No newline at end of file diff --git a/ej2-react/kanban/virtual-scrolling.md b/ej2-react/kanban/virtual-scrolling.md index 96dab224a..3f5a2c713 100644 --- a/ej2-react/kanban/virtual-scrolling.md +++ b/ej2-react/kanban/virtual-scrolling.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Virtualization in React Kanban Component -Kanban allows you to load a large amount of data without any performance degradation. This feature can be enabled by setting the [enableVirtualization](../api/kanban/#enablevirtualization) property in the Kanban to `true`. +Kanban allows you to load a large amount of data without any performance degradation. This feature can be enabled by setting the [enableVirtualization](../api/kanban#enablevirtualization) property in the Kanban to `true`. ## Virtual scrolling -Virtual scrolling optimizes data rendering within each column when using large datasets. Only a subset of cards that are visible and about to be loaded on the screen are rendered. The number of records displayed in the Kanban is determined implicitly by the height of the Kanban area and the card height. The [cardHeight](../api/kanban/#cardheight) property of Kanban can be used to set the cards' height in pixel value. By default, the card height will be `auto`. +Virtual scrolling optimizes data rendering within each column when using large datasets. Only a subset of cards that are visible and about to be loaded on the screen are rendered. The number of records displayed in the Kanban is determined implicitly by the height of the Kanban area and the card height. The [cardHeight](../api/kanban#cardheight) property of Kanban can be used to set the cards' height in pixel value. By default, the card height will be `auto`. When the Kanban column is scrolled, the virtual scrolling feature dynamically loads additional data on demand into view and unloads the data that is no longer visible. @@ -32,7 +32,7 @@ When the Kanban column is scrolled, the virtual scrolling feature dynamically lo {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/kanban/virtual-scrolling-cs1" %} +{% previewsample "page.domainurl/code-snippet/kanban/virtual-scrolling-cs3" %} `[Functional-component]` @@ -48,11 +48,11 @@ When the Kanban column is scrolled, the virtual scrolling feature dynamically lo {% endhighlight %} {% endtabs %} -{% previewsample "page.domainurl/code-snippet/kanban/virtual-scrolling-cs2" %} +{% previewsample "page.domainurl/code-snippet/kanban/virtual-scrolling-cs4" %} ### Configure the remote data service -When the remote data is configured for the [dataSource](../api/kanban/#datasource), the service method will receive an additional `KanbanVirtualization` parameter to handle the initial data load for Kanban Virtualization. +When the remote data is configured for the [dataSource](../api/kanban#datasource), the service method will receive an additional `KanbanVirtualization` parameter to handle the initial data load for Kanban Virtualization. To handle Kanban virtual scrolling, the server-side code needs to handle the `Where` and `Take` queries differently using the `KanbanVirtualization` parameter. The following is the example code for handling Kanban virtualization's initial data load using the `KanbanVirtualization` parameter. diff --git a/ej2-react/rich-text-editor/clipboard-cleanup.md b/ej2-react/rich-text-editor/clipboard-cleanup.md new file mode 100644 index 000000000..c8e76c4a9 --- /dev/null +++ b/ej2-react/rich-text-editor/clipboard-cleanup.md @@ -0,0 +1,90 @@ +--- +layout: post +title: Clipboard Cleanup in React Rich Text Editor component | Syncfusion +description: Learn how to configure Clipboard Cleanup in the Syncfusion React Rich Text Editor component of Syncfusion Essential JS 2 and more. +control: Clipboard cleanup +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Clipboard Cleanup in React Rich Text Editor Component + +The Rich Text Editor supports automatic cleanup of clipboard content during copy (`Ctrl + C`) and cut (`Ctrl + X`) operations. When this feature is enabled, unwanted inline styles are automatically removed from the clipboard content while preserving important structural elements such as tables, lists, and images. You can enable this behavior using the [enableClipboardCleanup](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor#enableClipboardCleanup) property. + +> To use ClipboardCleanup feature, inject link module using the `+ ++ `. + +When `enableClipboardCleanup` is set to `true`, copy and cut operations are intercepted to remove unwanted inline styles. When set to `false` the browser’s default copy and cut behavior applies. + +> For a cleaner editing experience, `enableClipboardCleanup` is `true` by default. + +`[Class-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/clipboard-cleanup-cs1" %} + +`[Functional-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-cs2/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/clipboard-cleanup-cs2" %} + +## Customizing Copied/Cut Content + +You can use the [beforeClipboardWrite](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor#beforeClipboardWrite) event, which fires before content is written to the clipboard during copy or cut operations. This event lets you to modify the HTML and plain-text representations of the content and also determine whether the action is a copy or a cut. + +In this example, the `beforeClipboardWrite` event is used to customize the selected content only during a copy operation, while the cut operation remains unaffected. To observe this behavior, try copying any text within the Rich Text Editor. + +`[Class-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs1" %} + +`[Functional-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/clipboard-cleanup-customize-cs2" %} + +## Best Practices & Troubleshooting + +### Best Practices + +- Always include `ClipboardCleanup` in production application - it’s the #1 way to prevent style explosion. +- Combine with Paste Cleanup module for even stricter incoming paste handling. +- Use `beforeClipboardWrite` sparingly — heavy processing can slightly delay `Ctrl+C`. + +### Common Issues + +- “Copied content still has inline styles” → Confirm `ClipboardCleanup` is in providers. +- “Event not firing” → Make sure you’re using the correct event name `beforeClipboardWrite` (camelCase in React). diff --git a/ej2-react/rich-text-editor/import-and-export.md b/ej2-react/rich-text-editor/import-and-export.md index 9e11045dd..d0e941473 100644 --- a/ej2-react/rich-text-editor/import-and-export.md +++ b/ej2-react/rich-text-editor/import-and-export.md @@ -14,7 +14,7 @@ domainurl: ##DomainURL## The Rich Text Editor provides functionality to import content directly from Microsoft Word documents, preserving the original formatting and structure. This feature ensures a smooth transition of content from Word to the editor, maintaining elements such as headings, lists, tables, and text styles. -To integrate an `ImportWord` option into the Rich Text Editor toolbar, you can add it as a custom toolbar [toolbarSettings.items](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/toolbarSettings/#items) using the items property in toolbarSettings. +To integrate an `ImportWord` option into the Rich Text Editor toolbar, you can add it as a custom toolbar [toolbarSettings.items](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/toolbarSettings#items) using the items property in toolbarSettings. The following example shows how to configure `ImportWord`: @@ -44,7 +44,101 @@ The following example shows how to configure `ImportWord`: {% previewsample "page.domainurl/code-snippet/rich-text-editor/import-cs2" %} -Here’s how to handle the server-side action for importing content from Word. +## Secure importing with authentication + +The Rich Text Editor provides functionality to import Word documents with authentication for secure importing. + +The [wordImporting](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/index-default#wordimporting) event provides [UploadingEventArgs](https://ej2.syncfusion.com/react/documentation/api/uploader/uploadingeventargs) for secure Word file import. Use `currentRequest` to add authentication headers and `customFormData` to include extra parameters in the POST body along with the uploaded file. On the server, read headers and form data from the request to validate and process the import securely. + +`[Class-component]` + +```html +import * as React from 'react'; +import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport, UploadingEventArgs } from '@syncfusion/ej2-react-richtexteditor'; +import { ToolbarSettingsModel, ImportWordModel } from '@syncfusion/ej2-react-richtexteditor'; + +class App extends React.Component<{},{}> { + private hostUrl: string = 'https://services.syncfusion.com/react/production/'; + private items: any = ['ImportWord'] + private insertImageSettings: any = { + saveUrl: this.hostUrl + 'api/RichTextEditor/SaveFile', + removeUrl: this.hostUrl + 'api/RichTextEditor/DeleteFile', + path: this.hostUrl + 'RichTextEditor/' + } + private toolbarSettings: ToolbarSettingsModel = { + items: this.items + }; + private importWord: ImportWordModel = { + serviceUrl: this.hostUrl + 'api/RichTextEditor/ImportFromWord', + }; + private onWordImport = (args: UploadingEventArgs) => { + let accessToken = "Authorization_token"; + // adding authorization header + args.currentRequest.setRequestHeader('Authorization', accessToken) + // adding custom form Data + args.customFormData = [{'userId': '1234'}]; + }; + + render() { + return ( + ++ ); + } +} +export default App; +``` + +`[Functional-component]` + +```html +import * as React from 'react'; +import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport,UploadingEventArgs } from '@syncfusion/ej2-react-richtexteditor'; +import { ToolbarSettingsModel, ImportWordModel } from '@syncfusion/ej2-react-richtexteditor'; + +function App() { + const hostUrl: string = 'https://services.syncfusion.com/react/production/'; + const items: any = ['ImportWord'] + const insertImageSettings: any = { + saveUrl: hostUrl + 'api/RichTextEditor/SaveFile', + removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile', + path: hostUrl + 'RichTextEditor/' + } + const toolbarSettings: ToolbarSettingsModel = { + items: items + }; + const importWord: ImportWordModel = { + serviceUrl: hostUrl + 'api/RichTextEditor/ImportFromWord', + }; + const onWordImport=(args: UploadingEventArgs) =>{ + let accessToken = "Authorization_token"; + // adding authorization header + args.currentRequest.setRequestHeader('Authorization', accessToken) + // adding custom form Data + args.customFormData = [{'userId': '1234'}]; + }; + return ( ++++++ ++ ++ ); +} +export default App; +``` +Here’s how to handle the server-side action for importing content from Word with authentication. ```csharp @@ -58,6 +152,10 @@ public class RichTextEditorController : Controller [Route("ImportFromWord")] public IActionResult ImportFromWord(IList+++++ ++ UploadFiles) { + // Read headers (e.g., Authorization) + var authorization = Request.Headers["Authorization"].ToString(); + // Read custom form data (from args.customFormData) + var formData = Request.Form("userId").ToString(); string HtmlString = string.Empty; if (UploadFiles != null) { @@ -114,7 +212,7 @@ public class RichTextEditorController : Controller The Rich Text Editor's export functionality allows users to convert their edited content into PDF or Word documents with a single click, preserving all text styles, images, tables, and other formatting elements. -You can add `ExportWord` and `ExportPdf` tools to the Rich Text Editor toolbar using the toolbarSettings [toolbarSettings.items](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/toolbarSettings/#items) property. +You can add `ExportWord` and `ExportPdf` tools to the Rich Text Editor toolbar using the toolbarSettings [toolbarSettings.items](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/toolbarSettings#items) property. The following example demonstrates how to configure the `ExportWord` and `ExportPdf` tools in the Rich Text Editor, facilitating the export of content into Word or PDF documents: @@ -144,7 +242,157 @@ The following example demonstrates how to configure the `ExportWord` and `Export {% previewsample "page.domainurl/code-snippet/rich-text-editor/export-cs2" %} -Here’s how to handle the server-side action for exporting content to PDF and Microsoft Word +## Secure exporting with authentication + +The Rich Text Editor provides functionality to export Word or PDF documents with authentication for secure exporting. + +The [documentExporting](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/index-default#documentexporting) event provides `ExportingEventArgs` for secure export of Word or PDF files. Use `exportType` to identify the format, `currentRequest` to add authentication headers, and `customFormData` to send extra parameters in the POST body. On the server, read headers and custom data to validate and process the export securely. + +The following example demonstrates how to configure `documentExporting` for secure exporting: + +`[Class-component]` + +```html +import * as React from 'react'; +import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport, UploadingEventArgs } from '@syncfusion/ej2-react-richtexteditor'; +import { ToolbarSettingsModel, ExportWordModel, ExportPdfModel } from '@syncfusion/ej2-react-richtexteditor'; + +class App extends React.Component<{},{}> { + + private hostUrl: string = 'https://services.syncfusion.com/react/production/'; + + // Rich Text Editor items list + private items: any = ['ExportWord', 'ExportPdf']; + + private insertImageSettings: any = { + saveUrl: this.hostUrl + 'api/RichTextEditor/SaveFile', + removeUrl: this.hostUrl + 'api/RichTextEditor/DeleteFile', + path: this.hostUrl + 'RichTextEditor/' + } + + //Rich Text Editor ToolbarSettings + private toolbarSettings: ToolbarSettingsModel = { + items: this.items + }; + + private exportWord: ExportWordModel = { + serviceUrl: this.hostUrl + 'api/RichTextEditor/ExportToDocx', + fileName: 'RichTextEditor.docx', + stylesheet: ` + .e-rte-content { + font-size: 1em; + font-weight: 400; + margin: 0; + } + ` + }; + + private exportPdf: ExportPdfModel = { + serviceUrl: 'https://ej2services.syncfusion.com/react/development/api/RichTextEditor/ExportToPdf', + fileName: 'RichTextEditor.pdf', + stylesheet: ` + .e-rte-content{ + font-size: 1em; + font-weight: 400; + margin: 0; + } + ` + }; + + public onDocumentExporting = (args: ExportingEventArgs) => { + const accessToken = "Authorization_token"; + // Specify export type (e.g., 'Pdf' or 'Word') + args.exportType = 'Pdf'; + // Add authentication header + args.currentRequest = [{ Authorization: accessToken }]; + // Add custom form data + args.customFormData = [{ userId: '1234' }, { exportMode: 'secure' }]; + }; + + render() { + return ( + ++ ); + } +} +export default App; +``` +`[Functional-component]` + +```html +import * as React from 'react'; +import { RichTextEditorComponent, Toolbar, Inject, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup, ImportExport, UploadingEventArgs } from '@syncfusion/ej2-react-richtexteditor'; +import { ToolbarSettingsModel, ExportWordModel, ExportPdfModel } from '@syncfusion/ej2-react-richtexteditor'; + +function App() { + const hostUrl: string = 'https://services.syncfusion.com/react/production/'; + // Rich Text Editor items list + const items: any = ['ExportWord', 'ExportPdf']; + const insertImageSettings: any = { + saveUrl: hostUrl + 'api/RichTextEditor/SaveFile', + removeUrl: hostUrl + 'api/RichTextEditor/DeleteFile', + path: hostUrl + 'RichTextEditor/' + } + + //Rich Text Editor ToolbarSettings + const toolbarSettings: ToolbarSettingsModel = { + items: items + }; + + const exportWord: ExportWordModel = { + serviceUrl: hostUrl + 'api/RichTextEditor/ExportToDocx', + fileName: 'RichTextEditor.docx', + stylesheet: ` + .e-rte-content { + font-size: 1em; + font-weight: 400; + margin: 0; + }` + }; + + const exportPdf: ExportPdfModel = { + serviceUrl: 'https://ej2services.syncfusion.com/react/development/api/RichTextEditor/ExportToPdf', + fileName: 'RichTextEditor.pdf', + stylesheet: ` + .e-rte-content{ + font-size: 1em; + font-weight: 400; + margin: 0; + }` + }; + const onDocumentExporting=(args: ExportingEventArgs) =>{ + const accessToken = "Authorization_token"; + // Specify export type (e.g., 'Pdf' or 'Word') + args.exportType = 'Pdf'; + // Add authentication header + args.currentRequest = [{ Authorization: accessToken }]; + // Add custom form data + args.customFormData = [{ userId: '1234' }, { exportMode: 'secure' }]; + }; + + return ( ++++++ ++ ++ ); +} +export default App; +``` +Here’s how to handle the server-side action for exporting content to PDF and Microsoft Word with authentication ```csharp @@ -158,6 +406,10 @@ public class RichTextEditorController : Controller [Route("ExportToPdf")] public ActionResult ExportToPdf([FromBody] ExportParam args) { + // Read headers (e.g., Authorization) + var authorization = Request.Headers["Authorization"].ToString(); + // Read custom form data (from args.customFormData) + var formData = args.CustomFormData; string htmlString = args.html; if (htmlString == null && htmlString == "") { @@ -232,6 +484,8 @@ public class RichTextEditorController : Controller public class ExportParam { public string html { get; set; } + // For receiving custom form data + public List+++++ ++ ` component inside the Rich Text Editor component. \ No newline at end of file diff --git a/ej2-react/rich-text-editor/selection.md b/ej2-react/rich-text-editor/selection.md index 543d80d3b..81ae3d2a8 100644 --- a/ej2-react/rich-text-editor/selection.md +++ b/ej2-react/rich-text-editor/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Text Selection Using Slider in React Rich Text Editor component | Syncfusion +title: Selection in React Rich Text Editor component | Syncfusion description: Learn how to select a character range using React Rich Text Editor component of Syncfusion Essential JS 2 and more. platform: ej2-react control: Text Selection @@ -14,7 +14,129 @@ 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. + +```ts +function App() { + const [sliderValue, setSliderValue] = useState<[number, number]>([0, 50]); + const [maxLength, setMaxLength] = useState(400); + return ( + + ); +} + +export default App; +``` +### 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. + +```ts +function App() { + const rteContent = ` The Syncfusion Rich Text Editor, a WYSIWYG ("what you see is what you get") editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.
`; + + useEffect(() => { + setTimeout(() => { + const rte = rteRef.current; + if (!rte) return; + + const panel = rte.contentModule.getEditPanel(); + const realLength = panel.textContent?.length ?? 0; + + setMaxLength(realLength); + if (sliderRef.current) { + sliderRef.current.max = realLength; + sliderRef.current.dataBind(); + } + + panel.focus(); + onSliderChange({ value: sliderValue } as ChangeEventArgs); + }, 100); + }, []); + return ( ++ + ); +} + +export default App; +``` + +### Precise selection using DOM range + +The selection logic is implemented in the [change](https://ej2.syncfusion.com/react/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. + +```ts +function App() { + const [sliderValue, setSliderValue] = useState<[number, number]>([0, 50]); + const [maxLength, setMaxLength] = useState(400); + + const onSliderChange = (args: ChangeEventArgs) => { + const [start, end] = args.value as [number, number]; + const rte = rteRef.current; + if (!rte) return; + + const panel = rte.contentModule.getEditPanel(); + const max = panel.textContent?.length ?? 0; + const safeStart = Math.min(start, max); + const safeEnd = Math.min(end, max); + + const startInfo = getTextNodeAtOffset(panel, safeStart); + const endInfo = getTextNodeAtOffset(panel, safeEnd); + + if (startInfo && endInfo) { + const range = document.createRange(); + range.setStart(startInfo.node, startInfo.offset); + range.setEnd(endInfo.node, endInfo.offset); + const selection = window.getSelection(); + if (selection) { + selection.removeAllRanges(); + selection.addRange(range); + } + } + setSliderValue([safeStart, safeEnd]); + }; + + return ( ++ + ); +} + +export default App; +``` + +### 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. + +```ts +function App() { + const getTextNodeAtOffset = (root: Node, offset: number) => { + let current = 0; + const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT); + let node: Text; + while ((node = walker.nextNode() as Text)) { + const len = node.textContent?.length ?? 0; + if (current + len >= offset) { + return { node, offset: offset - current }; + } + current += len; + } + return null; + }; + return() +} + +export default App; +``` `[Class-component]` diff --git a/ej2-react/rich-text-editor/smart-editing/mail-merge.md b/ej2-react/rich-text-editor/smart-editing/mail-merge.md index a52ff3ba1..89401dbce 100644 --- a/ej2-react/rich-text-editor/smart-editing/mail-merge.md +++ b/ej2-react/rich-text-editor/smart-editing/mail-merge.md @@ -8,12 +8,160 @@ documentation: ug domainurl: ##DomainURL## --- -# Mail Merge in React Rich Text Editor Component +# Mail merge in React 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/react/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. + +```ts +{% raw %} +function App() { + const items: (string | IToolbarItems)[] = ['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' + ] + //Rich Text Editor ToolbarSettings + const toolbarSettings: ToolbarSettingsModel = { + items: items + }; + return ( + + ); +} + +export default App; + +{% endraw %} +``` + +## 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. + +```ts +{% raw %} +function App() { + let itemsName: { text: string }[] = [ + { 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' }, + ]; + function onItemSelect(args: { item: { text: string } }) { + if (args.item.text != null) { + const value = textToValueMap[args.item.text]; + const trimmedValue = value.trim(); + rteObj.formatter.editorManager.nodeSelection.restore(); + rteObj.executeCommand( + 'insertHTML', + `{{${trimmedValue}}} `, + { undo: true } + ); + } + } + return ( + ); +} + +export default App; + +{% endraw %} +``` + +## 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. + +```ts +{% raw %} +function App() { + const fieldsData: { text: string; value: string } = { text: 'text', value: 'value' }; + const data: { text: string; value: string }[] = [ + { 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' }, + ]; + function displayTemplate(data: { value: string }) { + return (+ {data.value}}} + ); + } + + return ( ++ ); +} + +export default App; +{% endraw %} +``` + +## 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. + +```ts +{% raw %} +function App() { + function onClickHandler(args: any): void { + if (rteObj) { + let editorContent: string = rteObj.value; + let mergedContent: string = replacePlaceholders(editorContent, placeholderData); + if (rteObj.formatter.getUndoRedoStack().length === 0) { + rteObj.formatter.saveData(); + } + rteObj.value = mergedContent; + rteObj.formatter.saveData(); + } else { + console.log('MailMergeEditor is not initialized.'); + } + }; + + function replacePlaceholders(template: string, data: { [key: string]: string }): string { + return template.replace(/{{\s*(\w+)\s*}}/g, (match, key) => { + const value = data[key.trim()]; + return value !== undefined ? value : match; + }); + }; + + return ( + + ); +} +{% endraw %} +``` + `[Class-component]` {% tabs %} @@ -25,7 +173,7 @@ This feature simplifies the creation of dynamic documents by allowing users to i {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/rich-text-editor/mail-merge-cs1" %} + {% previewsample "page.domainurl/code-snippet/rich-text-editor/mail-merge-cs3" %} `[Functional-component]` @@ -38,4 +186,4 @@ This feature simplifies the creation of dynamic documents by allowing users to i {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/rich-text-editor/mail-merge-cs2" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/rich-text-editor/mail-merge-cs4" %} \ No newline at end of file diff --git a/ej2-react/rich-text-editor/tools/text-formatting.md b/ej2-react/rich-text-editor/tools/text-formatting.md index a4dae29cd..a378ba29f 100644 --- a/ej2-react/rich-text-editor/tools/text-formatting.md +++ b/ej2-react/rich-text-editor/tools/text-formatting.md @@ -496,6 +496,74 @@ While the toolbar does not provide a direct method to apply blockquote formattin {% previewsample "page.domainurl/code-snippet/rich-text-editor/nested-blockquote-cs2" %} +## Line Height + +The Rich Text Editor supports line height feature which allows users to adjust the vertical spacing between lines of text. To change the line height, select the text you want to modify and click the Line Height icon in the toolbar. Choose from the available spacing options to apply the desired vertical spacing. This feature is especially useful for creating visually appealing paragraphs and ensuring consistent formatting across your document. + +### Built-in line height + +You can add the `LineHeight` tool to the toolbar in the Rich Text Editor using [toolbarSettings.items](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/toolbarSettings#items) property. + +`[Class-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/line-height/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/line-height/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/line-height" %} + +`[Functional-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/line-height/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/line-height/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/line-height" %} + +The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor#lineheight) property. + +### Custom line height + +The Rich Text Editor supports custom line height along with the existing line height dropdown list. To add additional line height to the line height dropdown, you can configure the items field of the [`lineHeight`](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor#lineheight) property. This allows you to extend the available line height options beyond the default selection. + +The [`supportAllValues`](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor#supportAllValues) setting enables the line height dropdown to display and retain line-height values that are not part of the predefined options. When `supportAllValues` property is turned on, the dropdown will show the current line-height value from the selection, even if that value is not present in the configured lineHeights array. By default, `supportAllValues` will be set to false. + +`[Class-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/line-height-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/line-height-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/line-height-cs1" %} + +`[Functional-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/line-height-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/line-height-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/line-height-cs1" %} + ## Horizontal line The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (
) help visually separate sections of content, enhancing readability and structural clarity. @@ -698,4 +766,68 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/rich-text-editor/remove-formatting-cs4" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/rich-text-editor/remove-formatting-cs4" %} + +## Markdown Auto Format + +The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the [enableMarkdownAutoFormat](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/index-default#enablemarkdownautoformat) +property. This feature simplifies content creation by transforming Markdown elements into their corresponding HTML tags, ensuring consistency and improving efficiency. + +By default, Markdown Auto-Format is enabled. The editor supports both inline formatting and block-level elements. As you type, Markdown syntax is automatically converted into semantic HTML tags, ensuring a smooth and efficient editing experience. + +|Commands|Syntax Example| Description | +|--------|------------------------------------------|------------| +| Bold | `**`Bold Text`**` or `__`Bold Text`__` | Makes text bold by wrapping it with `**` or `__`. | +| Italic | `*`Italic Text`*` or `_`Italic Text`_` | Makes text italic by wrapping it with `*` or `_`. | +| Bold and Italics | `***`bold and Italic text`***`. | Combines bold and italic by wrapping text with `***`. | +| Strike Through | `~~`Strikethrough`~~` | Adds a strikethrough effect by wrapping text with `~~`. | +| Inline Code (Single line) | \`Inline Code\` | Displays inline code by wrapping text with \`. | +| Heading 1 | `#` Heading 1 | Creates an H1 heading by starting the line with `#`. | +| Heading 2 | `##` Heading 2 | Creates an H2 heading by starting the line with `##`. | +| Heading 3 | `###` Heading 3 | Creates an H2 heading by starting the line with `###`. | +| Heading 4 | `####` Heading 4 | Creates an H2 heading by starting the line with `####` | +| Heading 5 | `#####` Heading 5 | Creates an H2 heading by starting the line with `#####` | +| Heading 6 | `######` Heading 6 | Creates an H2 heading by starting the line with `######` | +| Blockquotes | `>` Blockquotes text | Adds a blockquote by starting the line with `>`. | +| Code block (Multi Line) | \`\`\`
Multi line code text
Multi line code text
\`\`\` | Creates a code block by starting the line with \`\`\` | +| Ordered List | `1.` First
`1.` Second | Creates a numbered list by starting lines with `1.` or `i.`. | +| Unordered List | `*` First
`*` second | Creates a bulleted list by starting lines with `*` or `-`. | +| Check List | `[]` Task
`[x]` Completed Task | Creates a checklist using `[]` for check list and `[x]` for checked checklist.| +| Horizontal Line | `---` or `___` | Inserts a horizontal line using `---` or `___` on a new line.| + + +### How Markdown auto-formatting works + +#### Inline Formats +Elements such as **bold**, *italic*, ~~strikethrough~~, and `inline code` are converted **immediately after the closing marker is typed**. +**Example:** Typing `**bold**` will render as **bold** the moment you enter the second `*`. + +#### Block Formats +Elements such as headings, lists, blockquotes, and code block are converted **only after a space is typed following the marker**. +**Example:** Typing `# Title` will render as a heading only after you type the space following `#`. + +`[Class-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/markdown-autoformat-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/markdown-autoformat-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-autoformat-cs1" %} + +`[Functional-component]` + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/rich-text-editor/markdown-autoformat-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/rich-text-editor/markdown-autoformat-cs2/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/rich-text-editor/markdown-autoformat-cs2" %} \ No newline at end of file diff --git a/ej2-react/treegrid/columns/column-spanning.md b/ej2-react/treegrid/columns/column-spanning.md new file mode 100644 index 000000000..14c394068 --- /dev/null +++ b/ej2-react/treegrid/columns/column-spanning.md @@ -0,0 +1,74 @@ +--- +layout: post +title: Column spanning in React TreeGrid | Syncfusion +description: Learn here all about Column spanning in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. +control: Column spanning +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Column spanning in React TreeGrid + +The column spanning feature in the Syncfusion® React TreeGrid allows merging adjacent cells horizontally, creating a visually appealing and informative layout. By defining the `colSpan` attribute in the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/index-default#querycellinfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. + +In the following example, Employee **Davolio** is scheduled for analysis from "9.00 AM" to "10.00 AM", so those cells have been spanned. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/column-spanning-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/column-spanning-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/column-spanning-cs1" %} + +## Limitations + +Column spanning in the React TreeGrid has the following limitations: + +* The [updateCell](https://ej2.syncfusion.com/react/documentation/api/treegrid/index-default#updatecell) method does not support column spanning. +* Column spanning is not compatible with the following features: + 1. Virtual scrolling + 2. Infinite scrolling + +> When using column spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. + +## Column spanning using enableColumnSpan property + +The Syncfusion React TreeGrid introduces a simplified approach to horizontally merge cells with identical values in the same row across adjacent columns. + +The column spanning feature in the Syncfusion React TreeGrid can be enabled using `enableColumnSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". + +To enable column spanning, set the `enableColumnSpan` property to **true** in the TreeGrid configuration. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/column-spanning-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/column-spanning-cs2/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/column-spanning-cs2" %} + +> In the sample, column spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `enableColumnSpan` property to **false**. + +### Limitations + +Column spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with column spanning feature. + +* Virtualization +* Infinite Scrolling +* Row Drag and Drop +* Column Virtualization +* Detail Template +* Editing +* Export + +## See Also + +* [Row spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/react/documentation/treegrid/row/row-spanning) \ No newline at end of file diff --git a/ej2-react/treegrid/row/row-spanning.md b/ej2-react/treegrid/row/row-spanning.md new file mode 100644 index 000000000..d175aa17a --- /dev/null +++ b/ej2-react/treegrid/row/row-spanning.md @@ -0,0 +1,74 @@ +--- +layout: post +title: Row spanning in React TreeGrid | Syncfusion +description: Learn here all about Row spanning in Syncfusion React TreeGrid of Syncfusion Essential JS 2 and more. +control: Row spanning +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Row spanning in React TreeGrid + +The row spanning feature in the Syncfusion® React TreeGrid allows merging cells in the same column vertically, creating a visually appealing and informative layout. By defining the `rowSpan` attribute in the [queryCellInfo](https://ej2.syncfusion.com/react/documentation/api/treegrid/index-default#querycellinfo) event, cells can be easily spanned and the appearance of the TreeGrid can be customized. + +In the following demo, the **Lunch Break** cell spans multiple rows in the "1:00 PM" column. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/row-spanning-cs1/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/row-spanning-cs1/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/row-spanning-cs1" %} + +## Limitations + +Row spanning in the React TreeGrid has the following limitations: + +* The [updateCell](https://ej2.syncfusion.com/react/documentation/api/treegrid/index-default#updatecell) method does not support row spanning. +* Rowx spanning is not compatible with the following features: + 1. Virtual scrolling + 2. Infinite scrolling + +> When using row spanning, ensure that the spanned cells do not interfere with TreeGrid operations such as sorting, filtering, or editing, as this may lead to unexpected behavior. + +## Row spanning using enableRowSpan property + +The Syncfusion React TreeGrid introduces a simplified approach to vertically merge cells with identical values in the same column across consecutive rows. + +The row spanning feature in the Syncfusion React TreeGrid can be enabled using `enableRowSpan` property which significantly enhances readability and delivers a clean, professional look by eliminating repetitive data in columns such as "Status", "Permit Status", "Inspection Status" and "Punch List Status". + +To enable row spanning, set the `enableRowSpan` property to **true** in the TreeGrid configuration. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/row-spanning-cs2/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/row-spanning-cs2/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/row-spanning-cs2" %} + +> In the sample, row spanning is disabled at the column level for the price based columns such as "Planned Budget" and "Actual Spend" by setting each column's `enableRowSpan` property to **false**. + +### Limitations + +Row spanning feature is not compatible with all the features which are available in TreeGrid and it has limited features support. Here we have listed out the features which are not compatible with row spanning feature. + +* Virtualization +* Infinite Scrolling +* Row Drag and Drop +* Column Virtualization +* Detail Template +* Editing +* Export + +## See Also + +* [Column spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/react/documentation/treegrid/columns/column-spanning) \ No newline at end of file diff --git a/ej2-react/treegrid/selection/check-box-selection.md b/ej2-react/treegrid/selection/check-box-selection.md index 993716fa1..90a3a545f 100644 --- a/ej2-react/treegrid/selection/check-box-selection.md +++ b/ej2-react/treegrid/selection/check-box-selection.md @@ -48,4 +48,87 @@ In checkbox selection, rows can also be selected by clicking anywhere on the row {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs3" %} -> Checkbox selection applies to row selection only and is not compatible with cell selection mode. \ No newline at end of file +> Checkbox selection applies to row selection only and 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/react/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 js tabtitle="app.jsx" %} +{% include code-snippet/treegrid/selection-cs10/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/treegrid/selection-cs10/app/App.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/treegrid/selection-cs10" %} + +In this sample, we have disabled checkbox selection for rows where the "Progress" column has the value **"Completed"**. + +## Interactive Checkbox Selection via showCheckbox + +1. ### Enable Checkboxes in Columns + + To render checkboxes in existing column, you need to set [`columns.showCheckbox`] property as `true`. + + It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling [`autoCheckHierarchy`] property. When we check on any parent record checkbox then the child record checkboxes will get checked. + + {% if page.publishingplatform == "typescript" %} + + {% tabs %} + {% highlight ts tabtitle="index.ts" %} + {% include code-snippet/treegrid/columns-cs10/index.ts %} + {% endhighlight %} + {% highlight html tabtitle="index.html" %} + {% include code-snippet/treegrid/columns-cs10/index.html %} + {% endhighlight %} + {% endtabs %} + + {% previewsample"page.domainurl/code-snippet/treegrid/columns-cs10" %} + + {% elsif page.publishingplatform == "javascript" %} + + {% tabs %} + {% highlight js tabtitle="index.js" %} + {% include code-snippet/treegrid/columns-cs10/index.js %} + {% endhighlight %} + {% highlight html tabtitle="index.html" %} + {% include code-snippet/treegrid/columns-cs10/index.html %} + {% endhighlight %} + {% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/columns-cs10" %} + {% endif %} + +2. ### Column cell checkbox support for checkbox selection in virtualization + + The TreeGrid component is designed to efficiently manage large datasets while offering flexible row selection interactions. The [`showCheckbox`](../../api/treegrid/columnmodel#showcheckbox) property displays checkboxes in column cells, allowing rows to be selected or deselected through direct interaction, and this functionality is enabled by setting the property to **"true"**. The [`enableVirtualization`](../../api/treegrid/#enablevirtualization) property improves performance by rendering only visible rows and columns during scrolling, and this feature is activated by setting the property to "**true**". When both properties are applied together, the Data Grid component supports checkbox‑based row selection seamlessly within a virtualized environment, ensuring usability and efficiency even with extensive data. + + {% if page.publishingplatform == "typescript" %} + + {% tabs %} + {% highlight ts tabtitle="index.ts" %} + {% include code-snippet/treegrid/selection-cs11/index.ts %} + {% endhighlight %} + {% highlight html tabtitle="index.html" %} + {% include code-snippet/treegrid/selection-cs11/index.html %} + {% endhighlight %} + {% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs11" %} + + {% elsif page.publishingplatform == "javascript" %} + + {% tabs %} + {% highlight js tabtitle="index.js" %} + {% include code-snippet/treegrid/selection-cs11/index.js %} + {% endhighlight %} + {% highlight html tabtitle="index.html" %} + {% include code-snippet/treegrid/selection-cs11/index.html %} + {% endhighlight %} + {% endtabs %} + + {% previewsample "page.domainurl/code-snippet/treegrid/selection-cs11" %} + {% endif %} \ No newline at end of file diff --git a/ej2-react/visual-studio-code-integration/create-project.md b/ej2-react/visual-studio-code-integration/create-project.md index 254fe5110..3d653a56d 100644 --- a/ej2-react/visual-studio-code-integration/create-project.md +++ b/ej2-react/visual-studio-code-integration/create-project.md @@ -1,6 +1,6 @@ --- layout: post -title: Create project in React Visual studio code integration component | Syncfusion +title: Create React project in Visual studio code | Syncfusion description: Learn here all about Create project in Syncfusion React Visual studio code integration component of Syncfusion Essential JS 2 and more. control: Create project platform: ej2-react @@ -22,12 +22,13 @@ The steps below help you to create **Syncfusion®<  -2. Select **Syncfusion® Web Template Studio: Launch** and then press enter, Template Studio wizard for configuring the Syncfusion® Web app will appear. Provide the require Project Name and Path to create the new Syncfusion® Web application along with any one of the Framework (React, Angular, and Vue). +2. Select **Syncfusion® Web Template Studio: Launch** and then press enter, Template Studio wizard for configuring the Syncfusion® Web app will appear. Provide the require Project Name and Path to create the new Syncfusion® Web application along with any one of the Framework (React, Pure React, Angular, and Vue).  3. Click either **Next** or **Framework** tab, and the Framework types will be appears. Choose any one of the Framework: * React + * Pure React * Angular * Vue @@ -64,4 +65,4 @@ We have showcased the Chart, Grid and Schedule component in Syncfusion® web app, it install the npm packages with latest version. If you want to use your existing project in future, you can update the npm packages without uninstalling it. Refer to the [update npm packages](https://ej2.syncfusion.com/react/documentation/common/how-to/update-npm-package/) section for upgrading the package. \ No newline at end of file +While creating the new Syncfusion® web app, it install the npm packages with latest version. If you want to use your existing project in future, you can update the npm packages without uninstalling it. Refer to the [update npm packages](https://ej2.syncfusion.com/react/documentation/upgrade/update-npm-package) section for upgrading the package. \ No newline at end of file diff --git a/ej2-react/visual-studio-code-integration/download-and-installation.md b/ej2-react/visual-studio-code-integration/download-and-installation.md index 5a74e256c..c4d19d22a 100644 --- a/ej2-react/visual-studio-code-integration/download-and-installation.md +++ b/ej2-react/visual-studio-code-integration/download-and-installation.md @@ -1,6 +1,6 @@ --- layout: post -title: Download and installation in React Visual studio code integration component | Syncfusion +title: Download and installation in Visual studio code | Syncfusion description: Learn here all about Download and installation in Syncfusion React Visual studio code integration component of Syncfusion Essential JS 2 and more. control: Download and installation platform: ej2-react @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Download and Installation +# Download and Installation Guide Syncfusion® publishes its Visual Studio Code extension in the [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions). You can install the extension directly within Visual Studio Code or download it from the marketplace and then install it. diff --git a/ej2-react/visual-studio-code-integration/images/Extension.png b/ej2-react/visual-studio-code-integration/images/Extension.png index 56fa06e8a..34675b28b 100644 Binary files a/ej2-react/visual-studio-code-integration/images/Extension.png and b/ej2-react/visual-studio-code-integration/images/Extension.png differ diff --git a/ej2-react/visual-studio-code-integration/images/frameworktype.png b/ej2-react/visual-studio-code-integration/images/frameworktype.png index f09771678..515afffd9 100644 Binary files a/ej2-react/visual-studio-code-integration/images/frameworktype.png and b/ej2-react/visual-studio-code-integration/images/frameworktype.png differ diff --git a/ej2-react/visual-studio-code-integration/images/react-npm-install.png b/ej2-react/visual-studio-code-integration/images/react-npm-install.png index 091d46e69..1f576fb31 100644 Binary files a/ej2-react/visual-studio-code-integration/images/react-npm-install.png and b/ej2-react/visual-studio-code-integration/images/react-npm-install.png differ diff --git a/ej2-react/visual-studio-code-integration/images/react-styles.png b/ej2-react/visual-studio-code-integration/images/react-styles.png index b0cb9928e..730264ad5 100644 Binary files a/ej2-react/visual-studio-code-integration/images/react-styles.png and b/ej2-react/visual-studio-code-integration/images/react-styles.png differ diff --git a/ej2-react/visual-studio-code-integration/images/reactframework.png b/ej2-react/visual-studio-code-integration/images/reactframework.png index 6dba2bf7a..c8147ac0e 100644 Binary files a/ej2-react/visual-studio-code-integration/images/reactframework.png and b/ej2-react/visual-studio-code-integration/images/reactframework.png differ diff --git a/ej2-react/visual-studio-code-integration/overview.md b/ej2-react/visual-studio-code-integration/overview.md index d779ad55f..a1b3eae2c 100644 --- a/ej2-react/visual-studio-code-integration/overview.md +++ b/ej2-react/visual-studio-code-integration/overview.md @@ -1,6 +1,6 @@ --- layout: post -title: Overview in React Visual studio code integration component | Syncfusion +title: Overview in React Visual studio code integration | Syncfusion description: Learn here all about Overview in Syncfusion React Visual studio code integration component of Syncfusion Essential JS 2 and more. control: Overview platform: ej2-react @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## Overview -The Syncfusion® Essential Studio® Web extension for Visual Studio Code allows you to use the Syncfusion® JavaScript components(React, Angular, and Vue) easily by configuring the Syncfusion® NPM packages and themes. +The Syncfusion® Essential Studio® Web extension for Visual Studio Code allows you to use the Syncfusion® JavaScript components(React, Pure React, Angular, and Vue) easily by configuring the Syncfusion® NPM packages and themes. The Syncfusion® Web Extension provides the following support in Visual Studio Code: diff --git a/ej2-react/visual-studio-code-integration/visual-studio-code-extensions/create-project.md b/ej2-react/visual-studio-code-integration/visual-studio-code-extensions/create-project.md deleted file mode 100644 index 4e7cc6774..000000000 --- a/ej2-react/visual-studio-code-integration/visual-studio-code-extensions/create-project.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -layout: post -title: Create project in React Visual studio code integration component | Syncfusion -description: Learn here all about Create project in Syncfusion React Visual studio code integration component of Syncfusion Essential JS 2 and more. -control: Create project -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Visual Studio Code Extensions - -## Create project - -Syncfusion® provides **project templates** for **Visual Studio Code** to create Syncfusion® Web applications. The Syncfusion® Web Project template creates applications with the selected Framework (React, Angular, and Vue), required Syncfusion® NPM packages, component render code for the Grid, Chart, and Scheduler components, and a style to make development with Syncfusion® components easier. - - > The Syncfusion® Visual Studio Code project template provides support for Web project templates from v18.3.0.47. - -The steps below help you to create **Syncfusion® Web Applications** through the **Visual Studio Code:** - -1. In Visual Studio Code, open the command palette by pressing **Ctrl+Shift+P**. The Visual Studio Code palette opens, search the word **Syncfusion®**, so you can get the templates provided. - -  - -2. Select **Syncfusion® Web Template Studio: Launch** and then press enter, Template Studio wizard for configuring the Syncfusion® Web app will appear. Provide the require Project Name and Path to create the new Syncfusion® Web application along with any one of the Framework (React, Angular, and Vue). - -  - -3. Click either **Next** or **Framework** tab, and the Framework types will be appears. Choose any one of the Framework: - * React - * Angular - * Vue - -  - - If you choose the Vue framework, the **Select Vue Version** option will appear in the **Project Details** section. You can create the Vue application using either the Vue 3 or Vue 2 versions. - -  - -4. Click either **Next** or the **Configuration** tab, and the Configuration section will be loaded. Choose the preferred theme and then click **Create**. The project will be created. -  - -5. The created Syncfusion® Web App is configured with the Syncfusion® NPM packages, styles, and the component render code for the Syncfusion® component added. - -  - -  - -  - -## Run the application - -1. Click on **F5** or navigate to **Run>Start debugging** - -  - -2. After compilation process completed, open the local host link in browser to see the output. - -  \ No newline at end of file diff --git a/ej2-react/visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md b/ej2-react/visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md deleted file mode 100644 index f8873dbdc..000000000 --- a/ej2-react/visual-studio-code-integration/visual-studio-code-extensions/download-and-installation.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -layout: post -title: Download and installation in React Visual studio code integration component | Syncfusion -description: Learn here all about Download and installation in Syncfusion React Visual studio code integration component of Syncfusion Essential JS 2 and more. -control: Download and installation -platform: ej2-react -documentation: ug -domainurl: ##DomainURL## ---- - -# Download and Installation - -Syncfusion® publishes the Visual Studio Code extension in [Visual Studio Code marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions). You can either install it from Visual Studio Code or download and install it from the Visual Studio Code marketplace. - -## Prerequisites - -The following prerequisites software needs to be installed for the Syncfusion® Web extension installation and for creating the Syncfusion® Web applications along with any one of the Framework(React, Angular, and Vue). - -* [Visual Studio Code](https://code.visualstudio.com/download) - - > The minimum version of the Visual Studio Code is 1.38.0 to use the Syncfusion® Web Extension. - -* [C# Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp) - -* [Node.js](https://nodejs.org/en/download/) - -## Install through the Visual Studio Code Extensions - -The following steps explain how to install the Syncfusion® Web extensions from Visual Studio Code Extensions. - -1. Open Visual Studio Code. - -2. Go to **View > Extensions**, and open Manage Extensions. - -3. Type **“Syncfusion® Web** in the search box. - -  - -4. Click the Install button on the **"Web VSCode Extensions - Syncfusion®"** extension. - -5. After the installation, reload the Visual Studio Code using the **Reload Required** in Visual Studio Code palette. - -6. Now, use the Syncfusion® Web extensions from the Visual Studio Code palette. - -  - -## Install from the Visual Studio Code Marketplace - -The following steps explain how to download Syncfusion® Web applications from the Visual Studio Code Marketplace and install them. - -1. Open the [Syncfusion® Web Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions) - -2. Click Install from Visual Studio Code Marketplace. The browser opens the popup with the information like **“Open Visual Studio Code”**. Click Open Visual Studio Code, then [Syncfusion® Web Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Angular-VSCode-Extensions) will open in Visual Studio Code. - -3. Click the Install button in the **"Web VSCode Extensions - Syncfusion®"** extension. - -4. After the installation, reload the Visual Studio Code using the Reload Required in Visual Studio Code palette. - -5. Now, use the Syncfusion® Web extensions from the Visual Studio Code palette. - -  \ No newline at end of file
- Weekly Release